Skip to content

Commit

Permalink
chore: update portal url
Browse files Browse the repository at this point in the history
  • Loading branch information
gerjanvangeest authored and tlouisse committed Oct 29, 2024
1 parent 7baecb5 commit bc175b5
Show file tree
Hide file tree
Showing 6 changed files with 18 additions and 18 deletions.
14 changes: 7 additions & 7 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,15 +26,15 @@
</p>

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

**Lion is a set of highly performant, accessible and flexible Web Components.!**
Expand All @@ -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.
<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>

## How to install
Expand Down Expand Up @@ -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

Expand Down
12 changes: 6 additions & 6 deletions docs/blog/extending-documentation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down Expand Up @@ -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:

Expand All @@ -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

Expand All @@ -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.

Expand Down Expand Up @@ -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`:
Expand Down Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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'] });
});

Expand All @@ -412,7 +412,7 @@ export function runListboxMixinSuite(customConfig = {}) {
<${optionTag} .choiceValue=${20}>Item 2</${optionTag}>
</${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'] });
});

Expand Down
2 changes: 1 addition & 1 deletion packages/ui/components/overlays/src/OverlayController.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down

0 comments on commit bc175b5

Please sign in to comment.