From bc175b5609ffedc83060d9b7f6bbdf2be49c2837 Mon Sep 17 00:00:00 2001 From: gerjanvangeest Date: Tue, 22 Oct 2024 15:20:54 +0200 Subject: [PATCH] chore: update portal url --- README.md | 14 +++++++------- docs/blog/extending-documentation.md | 12 ++++++------ .../src/registration/FormRegisteringMixin.js | 2 +- .../registration/FormRegisteringMixinTypes.ts | 2 +- .../listbox/test-suites/ListboxMixin.suite.js | 4 ++-- .../components/overlays/src/OverlayController.js | 2 +- 6 files changed, 18 insertions(+), 18 deletions(-) diff --git a/README.md b/README.md index 82a64a67b..a8ccd47be 100644 --- a/README.md +++ b/README.md @@ -26,15 +26,15 @@

- Website + Website · - Fundamentals + Fundamentals · - Guides + Guides · - Components + Components · - Blog + Blog

**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.

- Explore the Lion Guides  ▶ + Explore the Lion Guides  ▶

## How to install @@ -158,7 +158,7 @@ This means you only have to apply your own Design System: by delivering styles, ## 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 diff --git a/docs/blog/extending-documentation.md b/docs/blog/extending-documentation.md index 911bfd647..7c1374d2a 100644 --- a/docs/blog/extending-documentation.md +++ b/docs/blog/extending-documentation.md @@ -7,7 +7,7 @@ tags: javascript, documentation, demos 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. @@ -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`. -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: @@ -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'`. -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 @@ -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. -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. @@ -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. -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. 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') ``` -> 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 diff --git a/packages/ui/components/form-core/src/registration/FormRegisteringMixin.js b/packages/ui/components/form-core/src/registration/FormRegisteringMixin.js index 3763ade3b..7596229ab 100644 --- a/packages/ui/components/form-core/src/registration/FormRegisteringMixin.js +++ b/packages/ui/components/form-core/src/registration/FormRegisteringMixin.js @@ -40,7 +40,7 @@ const FormRegisteringMixinImplementation = superclass => * 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. 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; } diff --git a/packages/ui/components/form-core/types/registration/FormRegisteringMixinTypes.ts b/packages/ui/components/form-core/types/registration/FormRegisteringMixinTypes.ts index 282fec519..f9f7d3a55 100644 --- a/packages/ui/components/form-core/types/registration/FormRegisteringMixinTypes.ts +++ b/packages/ui/components/form-core/types/registration/FormRegisteringMixinTypes.ts @@ -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 * 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 - * 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; diff --git a/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js b/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js index ff241c2fc..62944931d 100644 --- a/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js +++ b/packages/ui/components/listbox/test-suites/ListboxMixin.suite.js @@ -400,7 +400,7 @@ export function runListboxMixinSuite(customConfig = {}) { `); await el.updateComplete; 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'] }); }); @@ -412,7 +412,7 @@ export function runListboxMixinSuite(customConfig = {}) { <${optionTag} .choiceValue=${20}>Item 2 `); - // 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'] }); }); diff --git a/packages/ui/components/overlays/src/OverlayController.js b/packages/ui/components/overlays/src/OverlayController.js index 3fc64f01e..39ffc2650 100644 --- a/packages/ui/components/overlays/src/OverlayController.js +++ b/packages/ui/components/overlays/src/OverlayController.js @@ -578,7 +578,7 @@ export class OverlayController extends EventTarget { // The role="dialog" is set on the contentNode (or another role), so role="none" // is valid here, although AXE complains about this setup. // 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('data-overlay-outer-wrapper', ''); // N.B. position: fixed is needed to escape out of 'overflow: hidden'