ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore: update portal url

Browse source
This commit is contained in:
gerjanvangeest 2024-10-22 15:20:54 +02:00 committed by Thijs Louisse
parent 7baecb5e19
commit bc175b5609
6 changed files with 18 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
README.md
View file

@ -26,15 +26,15 @@
</p> </p>
<p align="center"> <p align="center">
<a href="https://lion-web.netlify.app">Website</a> <a href="https://lion.js.org">Website</a>
· ·
<a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a> <a href="https://lion.js.org/fundamentals/">Fundamentals</a>
· ·
<a href="https://lion-web.netlify.app/guides/">Guides</a> <a href="https://lion.js.org/guides/">Guides</a>
· ·
<a href="https://lion-web.netlify.app/components/">Components</a> <a href="https://lion.js.org/components/">Components</a>
· ·
<a href="https://lion-web.netlify.app/blog/">Blog</a> <a href="https://lion.js.org/blog/">Blog</a>
</p> </p>
**Lion is a set of highly performant, accessible and flexible Web Components.!** **Lion is a set of highly performant, accessible and flexible Web Components.!**
@ -50,7 +50,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
> Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there. > Note: Our demo examples might look simple and not very stylish. This is on purpose. They are designed to be basic so you can easily add your own styles to them to match your intended design, without dealing with styles that are already there.
<p align="center"> <p align="center">
<a href="https://lion-web.netlify.app/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a> <a href="https://lion.js.org/guides/"><strong>Explore the Lion Guides&nbsp;&nbsp;▶</strong></a>
</p> </p>
## How to install ## How to install
@ -158,7 +158,7 @@ This means you only have to apply your own Design System: by delivering styles,
## Coding guidelines ## Coding guidelines
Check out our [coding guidelines](https://lion-web.netlify.app/guides/principles/definitions-and-terms/) for more detailed information. Check out our [coding guidelines](https://lion.js.org/guides/principles/definitions-and-terms/) for more detailed information.
## How to contribute ## How to contribute

12
docs/blog/extending-documentation.md
View file

@ -7,7 +7,7 @@ tags: javascript, documentation, demos
cover_image: https://miro.medium.com/max/2000/1*NZ6tdtJHHJjxtPmIFxWpGw.jpeg cover_image: https://miro.medium.com/max/2000/1*NZ6tdtJHHJjxtPmIFxWpGw.jpeg
--- ---
If you extend [Lion](https://lion-web.netlify.app/) components, you don't only want to reuse the components, but you probably want to reuse the documentation (Storybook demos) as well. Wouldn't it be nice to just take it all from lion, but replace it with your own design system extension, so you don't have the extra maintenance of essentially copying the docs from `Lion` for your own design system implementation? If you extend [Lion](https://lion.js.org/) components, you don't only want to reuse the components, but you probably want to reuse the documentation (Storybook demos) as well. Wouldn't it be nice to just take it all from lion, but replace it with your own design system extension, so you don't have the extra maintenance of essentially copying the docs from `Lion` for your own design system implementation?
In this blog we will explain how `Lion` supports this use case, and allows you to extend not just the components, but also the documentation. In this blog we will explain how `Lion` supports this use case, and allows you to extend not just the components, but also the documentation.
@ -67,7 +67,7 @@ This step alone should already give you the `LionTabs` docs inside your own Stor
Potentially the hardest part is to analyse your extension `LeaTabs`, and to figure out how we should transform the import paths for `LionTabs` to new paths to your `LeaTabs`. Potentially the hardest part is to analyse your extension `LeaTabs`, and to figure out how we should transform the import paths for `LionTabs` to new paths to your `LeaTabs`.
To do this we make use of [Providence](https://lion-web.netlify.app/?path=/docs/tools-providence-main--run-providence). This tool has a command that creates a full map of all the import paths of a reference project (`Lion`) and can replace them with the correct paths of a target project (`Lea`). To do this we make use of [Providence](https://lion.js.org/?path=/docs/tools-providence-main--run-providence). This tool has a command that creates a full map of all the import paths of a reference project (`Lion`) and can replace them with the correct paths of a target project (`Lea`).
So lets install it: So lets install it:
@ -87,7 +87,7 @@ The `--prefix-from` and `--prefix-to` are the prefixes of the project you extend
If you know you only use a single component from lion, you can reduce the time the tool needs for analysis, by specifying this package `-r 'node_modules/@lion/tabs'`. If you know you only use a single component from lion, you can reduce the time the tool needs for analysis, by specifying this package `-r 'node_modules/@lion/tabs'`.
Running the script will create a `providence-extend-docs-data.json` file, with all from/to information. You can change the name / location of the output file, refer to [Providence Documentation](https://lion-web.netlify.app/?path=/docs/tools-providence-main--run-providence) for this. Running the script will create a `providence-extend-docs-data.json` file, with all from/to information. You can change the name / location of the output file, refer to [Providence Documentation](https://lion.js.org/?path=/docs/tools-providence-main--run-providence) for this.
#### Running it automatically when upgrading lion dependency #### Running it automatically when upgrading lion dependency
@ -104,7 +104,7 @@ Inside ING, our design system also makes use of this providence tool to create t
Now that we have a JSON file with all the information we need to know about to replace import paths and tagnames inside templates, we can start transforming the `LionTabs` documentation to `LeaTabs` documentation. Now that we have a JSON file with all the information we need to know about to replace import paths and tagnames inside templates, we can start transforming the `LionTabs` documentation to `LeaTabs` documentation.
For this, we created a `babel-plugin` called [babel-plugin-extend-docs](https://lion-web.netlify.app/?path=/docs/tools-babelpluginextenddocs--page). For this, we created a `babel-plugin` called [babel-plugin-extend-docs](https://lion.js.org/?path=/docs/tools-babelpluginextenddocs--page).
This will analyse the JavaScript script and story content inside the markdown files, which uses [MDJS](https://open-wc.org/mdjs/) syntax, and transform it on the fly in `es-dev-server`, as well as on rollup build for production. This will analyse the JavaScript script and story content inside the markdown files, which uses [MDJS](https://open-wc.org/mdjs/) syntax, and transform it on the fly in `es-dev-server`, as well as on rollup build for production.
@ -165,7 +165,7 @@ In some cases you don't want to show all examples of how to use a component. Som
In our example, we will show you have to remove the `Rationale` section that you would normally inherit from the `Lion` documentation. In our example, we will show you have to remove the `Rationale` section that you would normally inherit from the `Lion` documentation.
For this step we make use of a remark plugin for the MD content, similar to how you would use a babel plugin for JS content. It is called [Remark extend](https://lion-web.netlify.app/?path=/docs/tools-remark-extend--page). For this step we make use of a remark plugin for the MD content, similar to how you would use a babel plugin for JS content. It is called [Remark extend](https://lion.js.org/?path=/docs/tools-remark-extend--page).
It will let you add, remove or replace sections or specific words. It will let you add, remove or replace sections or specific words.
First of all we need to add the plugin to the `.storybook/main.js`: First of all we need to add the plugin to the `.storybook/main.js`:
@ -257,7 +257,7 @@ Or you can add an extra paragraph below the content. Create a fenced codeblock:
::removeMdAfter(':scope:last-child') ::removeMdAfter(':scope:last-child')
``` ```
> See [Remark extend](https://lion-web.netlify.app/?path=/docs/tools-remark-extend--page) for more information > See [Remark extend](https://lion.js.org/?path=/docs/tools-remark-extend--page) for more information
### Lea Tabs Special Feature ### Lea Tabs Special Feature

2
packages/ui/components/form-core/src/registration/FormRegisteringMixin.js
View file

@ -40,7 +40,7 @@ const FormRegisteringMixinImplementation = superclass =>
* To encourage accessibility best practices, `form-element-register` events * To encourage accessibility best practices, `form-element-register` events
* do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree. * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that automatically allow the creation of accessible relationships in the same dom tree.
Use this option if you know what you're doing. It will then be possible to nest FormControls Use this option if you know what you're doing. It will then be possible to nest FormControls
inside shadow dom. See https://lion-web.netlify.app/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility/#shadow-roots-and-accessibility
*/ */
this.allowCrossRootRegistration = false; this.allowCrossRootRegistration = false;
} }

2
packages/ui/components/form-core/types/registration/FormRegisteringMixinTypes.ts
View file

@ -16,7 +16,7 @@ export declare class FormRegisteringHost {
* do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that * do not pierce through shadow roots. This forces the developer to create form groups and fieldsets that
* automatically allow the creation of accessible relationships in the same dom tree. * automatically allow the creation of accessible relationships in the same dom tree.
* Use this option if you know what you're doing. It will then be possible to nest FormControls * Use this option if you know what you're doing. It will then be possible to nest FormControls
* inside shadow dom. See https://lion-web.netlify.app/fundamentals/rationales/accessibility#shadow-roots-and-accessibility * inside shadow dom. See https://lion.js.org/fundamentals/rationales/accessibility#shadow-roots-and-accessibility
*/ */
allowCrossRootRegistration: boolean; allowCrossRootRegistration: boolean;

4
packages/ui/components/listbox/test-suites/ListboxMixin.suite.js
View file

@ -400,7 +400,7 @@ export function runListboxMixinSuite(customConfig = {}) {
`); `);
await el.updateComplete; await el.updateComplete;
await el.updateComplete; // need 2 awaits as overlay.show is an async function await el.updateComplete; // need 2 awaits as overlay.show is an async function
// for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations // for more info about why we need the ignoreRules, see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] }); await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
}); });
@ -412,7 +412,7 @@ export function runListboxMixinSuite(customConfig = {}) {
<${optionTag} .choiceValue=${20}>Item 2</${optionTag}> <${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
</${tag}> </${tag}>
`); `);
// for more info about why we need the ignoreRules, see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations // for more info about why we need the ignoreRules, see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] }); await expect(el).to.be.accessible({ ignoredRules: ['aria-allowed-role'] });
}); });

2
packages/ui/components/overlays/src/OverlayController.js
View file

@ -578,7 +578,7 @@ export class OverlayController extends EventTarget {
// The role="dialog" is set on the contentNode (or another role), so role="none" // The role="dialog" is set on the contentNode (or another role), so role="none"
// is valid here, although AXE complains about this setup. // is valid here, although AXE complains about this setup.
// For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests. // For now we need to add `ignoredRules: ['aria-allowed-role']` in your AXE tests.
// see: https://lion-web.netlify.app/fundamentals/systems/overlays/rationale/#considerations // see: https://lion.js.org/fundamentals/systems/overlays/rationale/#considerations
wrappingDialogElement.setAttribute('role', 'none'); wrappingDialogElement.setAttribute('role', 'none');
wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', ''); wrappingDialogElement.setAttribute('data-overlay-outer-wrapper', '');
// N.B. position: fixed is needed to escape out of 'overflow: hidden' // N.B. position: fixed is needed to escape out of 'overflow: hidden'