diff --git a/.changeset/hot-jars-leave.md b/.changeset/hot-jars-leave.md new file mode 100644 index 000000000..8b61cd2bf --- /dev/null +++ b/.changeset/hot-jars-leave.md @@ -0,0 +1,43 @@ +--- +'providence-analytics': minor +'publish-docs': minor +'remark-extend': minor +'rocket-preset-extend-lion-docs': minor +'@lion/accordion': minor +'@lion/button': minor +'@lion/calendar': minor +'@lion/checkbox-group': minor +'@lion/collapsible': minor +'@lion/combobox': minor +'@lion/core': minor +'@lion/dialog': minor +'@lion/fieldset': minor +'@lion/form': minor +'@lion/form-core': minor +'@lion/form-integrations': minor +'@lion/icon': minor +'@lion/input': minor +'@lion/input-amount': minor +'@lion/input-date': minor +'@lion/input-datepicker': minor +'@lion/input-email': minor +'@lion/input-iban': minor +'@lion/input-range': minor +'@lion/input-stepper': minor +'@lion/listbox': minor +'@lion/localize': minor +'@lion/overlays': minor +'@lion/pagination': minor +'@lion/progress-indicator': minor +'@lion/radio-group': minor +'@lion/select': minor +'@lion/select-rich': minor +'@lion/steps': minor +'@lion/switch': minor +'@lion/tabs': minor +'@lion/textarea': minor +'@lion/tooltip': minor +'@lion/validate-messages': minor +--- + +New documentation structure diff --git a/docs/_assets/style.css b/docs/_assets/style.css index b64a23804..bf191a047 100644 --- a/docs/_assets/style.css +++ b/docs/_assets/style.css @@ -93,3 +93,26 @@ rocket-navigation ul > li.active > ul > li.current a { rocket-navigation ul > li.active > ul > li.current > ul { display: none; } + +/* only apply on components list (li > 6) */ +rocket-navigation > ul > li:nth-last-child(n+6) > a, +rocket-navigation > ul > li:nth-child(n+6) > a { + font-size: 16px; + text-transform: none; + color: var(--primary-text-color); +} + +rocket-navigation > ul > li:nth-last-child(n+6) > a:hover, +rocket-navigation > ul > li:nth-child(n+6) > a:hover { + color: var(--primary-color); +} + +rocket-navigation > ul > li:nth-last-child(n+6) > ul, +rocket-navigation ul > li:nth-child(n+6) > ul { + display: none; +} + +rocket-navigation > ul > li:nth-last-child(n+6).active > ul, +rocket-navigation ul > li:nth-child(n+6).active > ul { + display: block; +} diff --git a/docs/blog/extending-lions-website.md b/docs/blog/extending-lions-website.md index 00a770745..f5732d480 100644 --- a/docs/blog/extending-lions-website.md +++ b/docs/blog/extending-lions-website.md @@ -68,7 +68,7 @@ Note: importBlock is a faster way of writing imports for headlines ::import('./path/to/file.md', 'heading[depth=2]:has([value=red])', 'heading[depth=2]:has([value=red]) ~heading[depth=2]') ``` -If you want to know more please look at the documentation for [remark-extend](../docs/node-tools/remark-extend/overview.md). +If you want to know more please look at the documentation for [remark-extend](../fundamentals/node-tools/remark-extend/overview.md). ## Upgrading Documentation diff --git a/docs/blog/index.md b/docs/blog/index.md index 48d22b3e7..28025a723 100644 --- a/docs/blog/index.md +++ b/docs/blog/index.md @@ -1,9 +1,10 @@ --- title: Lion Blog layout: layout-blog-overview +eleventyExcludeFromCollections: false eleventyNavigation: key: Blog - order: 40 + order: 50 pagination: data: collections.blog size: 10 diff --git a/docs/blog/ing-open-sources-lion.md b/docs/blog/ing-open-sources-lion.md index 3d4555589..a7432ffc7 100644 --- a/docs/blog/ing-open-sources-lion.md +++ b/docs/blog/ing-open-sources-lion.md @@ -210,7 +210,7 @@ Excellent! Lea can now use the tabs component like so: ``` -There we go, Lea's component is already done, so let's write some documentation. See the [live Lea tabs documentation page](../components/content/tabs/examples.md). You can see the full code of `lea-tabs` [on github](https://github.com/ing-bank/lion/tree/master/demo/). +There we go, Lea's component is already done, so let's write some documentation. See the [live Lea tabs documentation page](../components/tabs/examples.md). You can see the full code of `lea-tabs` [on github](https://github.com/ing-bank/lion/tree/master/demo/). P.S.: Do note that Lea is now responsible for keeping the documentation of `lea-tabs` up to date herself, and improvements on Lion's documentation will not automatically be reflected on Lea's documentation. diff --git a/docs/blog/introducing-lions-website.md b/docs/blog/introducing-lions-website.md index 4765016f7..2f6b68359 100644 --- a/docs/blog/introducing-lions-website.md +++ b/docs/blog/introducing-lions-website.md @@ -15,8 +15,8 @@ Right now it's more or less a port for our existing demos from storybook. But we 1. [Guides](../guides/index.md)
A dedicated section where we will teach you about how to get started with lion. This section is completely new and will grow over time. 2. [Components](../components/index.md)
- Here you will find our documentation for each of our components. Each is split into two pages namely Overview and Features. We also plan to add an API page soonish. -3. [Docs](../docs/index.md)
+ Here you will find our documentation for each of our components. Each is split into two pages namely Overview and Use Cases. We also plan to add an API page soonish. +3. [Fundamentals](../fundamentals/index.md)
This is the home for general documentation which includes the fundamental systems all our components are build upon and various tools we use in the frontend or backend. 4. [Blog](./index.md)
We now have a dedicated section about all our blog posts. Take a peek and follow our story. @@ -40,7 +40,7 @@ import { html, css } from '@lion/core'; import './lion-calendar.js'; export default { - title: 'Others/Calendar', + title: 'Others/Calendar', }; ``` @@ -89,7 +89,7 @@ Now you want to make sure it gets published with your accordion package so you r ``` # Accordion -[=> See Source <=](../../docs/components/content/accordion/overview.md) +[=> See Source <=](../../docs/components/accordion/overview.md) ``` Now by calling `publish-docs` within the `prepublishOnly` step your Readme file will contain the content of its source. @@ -100,7 +100,7 @@ The benefits of this approach are - The published readme contains all the documentation you need - All links are version safe (e.g. if you look at v0.5 it will link to the GitHub Pages at this time) -If you want to know more please look at the documentation for [publish-docs](../docs/node-tools/publish-docs/overview.md). +If you want to know more please look at the documentation for [publish-docs](../fundamentals/node-tools/publish-docs/overview.md). ## Upgrading Extending Documentation diff --git a/docs/components/icons/icon/index.md b/docs/components/accordion/index.md similarity index 54% rename from docs/components/icons/icon/index.md rename to docs/components/accordion/index.md index 0642be966..80a5033ed 100644 --- a/docs/components/icons/icon/index.md +++ b/docs/components/accordion/index.md @@ -1,3 +1,3 @@ -# Icons >> Icon +# Accordion -> go to Overview diff --git a/docs/components/content/accordion/overview.md b/docs/components/accordion/overview.md similarity index 68% rename from docs/components/content/accordion/overview.md rename to docs/components/accordion/overview.md index c0ea2e330..e0f1c613e 100644 --- a/docs/components/content/accordion/overview.md +++ b/docs/components/accordion/overview.md @@ -1,4 +1,4 @@ -# Content >> Accordion >> Overview ||10 +# Accordion >> Overview ||10

An accordion is a vertically stacked set of interactive headings that each contain a title representing a section of content. It allows users to toggle the display of sections of content.

@@ -74,54 +74,54 @@ export const overview = () => previewHtml``; 1. Install - ```bash - npm i --save @lion/accordion - ``` +```bash +npm i --save @lion/accordion +``` 2. Use scoped registry - ```js - import { html, LitElement, ScopedElementsMixin } from '@lion/core'; - import { LionAccordion } from '@lion/accordion'; +```js +import { html, LitElement, ScopedElementsMixin } from '@lion/core'; +import { LionAccordion } from '@lion/accordion'; - class MyComponent extends ScopedElementsMixin(LitElement) { - static get scopedElements() { - return { 'lion-accordion': LionAccordion }; - } - render() { - return html` - -

- -

-

- Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat - (table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a - rich source of vitamin C, providing 64% of the Daily Value. No other micronutrients are - present in significant amounts (table). -

- - `; - } +class MyComponent extends ScopedElementsMixin(LitElement) { + static get scopedElements() { + return { 'lion-accordion': LionAccordion }; } - ``` + render() { + return html` + +

+ +

+

+ Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat + (table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich + source of vitamin C, providing 64% of the Daily Value. No other micronutrients are present + in significant amounts (table). +

+ + `; + } +} +``` 3. Use html - ```html - +```html + - -

- -

-

- Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat - (table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich - source of vitamin C, providing 64% of the Daily Value. No other micronutrients are present in - significant amounts (table). -

- - ``` + +

+ +

+

+ Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table). + In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of + vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant + amounts (table). +

+ +``` diff --git a/docs/components/content/accordion/reference.md b/docs/components/accordion/reference.md similarity index 99% rename from docs/components/content/accordion/reference.md rename to docs/components/accordion/reference.md index ee82f4972..b2236c7ae 100644 --- a/docs/components/content/accordion/reference.md +++ b/docs/components/accordion/reference.md @@ -1,4 +1,4 @@ -# Content >> Accordion >> Reference ||30 +# Accordion >> Reference ||30

Everything you need to re-use the accordion.

diff --git a/docs/components/content/accordion/use-cases.md b/docs/components/accordion/use-cases.md similarity index 99% rename from docs/components/content/accordion/use-cases.md rename to docs/components/accordion/use-cases.md index 94fd8d1e0..66285741f 100644 --- a/docs/components/content/accordion/use-cases.md +++ b/docs/components/accordion/use-cases.md @@ -1,4 +1,4 @@ -# Content >> Accordion >> Use Cases ||20 +# Accordion >> Use Cases ||20 ```js script import { html as previewHtml } from '@mdjs/mdjs-preview'; diff --git a/docs/components/interaction/button/examples.md b/docs/components/button/examples.md similarity index 94% rename from docs/components/interaction/button/examples.md rename to docs/components/button/examples.md index 1053f7dd7..a22559e42 100644 --- a/docs/components/interaction/button/examples.md +++ b/docs/components/button/examples.md @@ -1,4 +1,4 @@ -# Interaction >> Button >> Examples ||30 +# Button >> Examples ||30 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/content/tabs/index.md b/docs/components/button/index.md similarity index 51% rename from docs/components/content/tabs/index.md rename to docs/components/button/index.md index 3018ec15e..02c3ebf2c 100644 --- a/docs/components/content/tabs/index.md +++ b/docs/components/button/index.md @@ -1,3 +1,3 @@ -# Content >> Tabs +# Button ||10 -> go to Overview diff --git a/docs/components/interaction/button/overview.md b/docs/components/button/overview.md similarity index 94% rename from docs/components/interaction/button/overview.md rename to docs/components/button/overview.md index ba14493cc..28c071a31 100644 --- a/docs/components/interaction/button/overview.md +++ b/docs/components/button/overview.md @@ -1,4 +1,4 @@ -# Interaction >> Button >> Overview ||10 +# Button >> Overview ||10 A button web component that is easily stylable and accessible. diff --git a/docs/components/interaction/button/src/icon.svg.js b/docs/components/button/src/icon.svg.js similarity index 100% rename from docs/components/interaction/button/src/icon.svg.js rename to docs/components/button/src/icon.svg.js diff --git a/docs/components/interaction/button/features.md b/docs/components/button/use-cases.md similarity index 99% rename from docs/components/interaction/button/features.md rename to docs/components/button/use-cases.md index 2a4657cf5..2aede299d 100644 --- a/docs/components/interaction/button/features.md +++ b/docs/components/button/use-cases.md @@ -1,4 +1,4 @@ -# Interaction >> Button >> Features ||20 +# Button >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/calendar/index.md b/docs/components/calendar/index.md new file mode 100644 index 000000000..bc37eb4d7 --- /dev/null +++ b/docs/components/calendar/index.md @@ -0,0 +1,3 @@ +# Calendar ||10 + +-> go to Overview diff --git a/docs/components/inputs/calendar/overview.md b/docs/components/calendar/overview.md similarity index 97% rename from docs/components/inputs/calendar/overview.md rename to docs/components/calendar/overview.md index 028a5657a..c44c68c15 100644 --- a/docs/components/inputs/calendar/overview.md +++ b/docs/components/calendar/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Calendar >> Overview ||10 +# Calendar >> Overview ||10 A reusable and accessible calendar view web component. diff --git a/docs/components/inputs/calendar/features.md b/docs/components/calendar/use-cases.md similarity index 99% rename from docs/components/inputs/calendar/features.md rename to docs/components/calendar/use-cases.md index 30822ee02..e2253e3cb 100644 --- a/docs/components/inputs/calendar/features.md +++ b/docs/components/calendar/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Calendar >> Features ||20 +# Calendar >> Use Cases ||20 ```js script import { html, css } from '@mdjs/mdjs-preview'; diff --git a/docs/components/checkbox-group/index.md b/docs/components/checkbox-group/index.md new file mode 100644 index 000000000..f29e51936 --- /dev/null +++ b/docs/components/checkbox-group/index.md @@ -0,0 +1,3 @@ +# Checkbox Group ||10 + +-> go to Overview diff --git a/docs/components/inputs/checkbox-group/overview.md b/docs/components/checkbox-group/overview.md similarity index 96% rename from docs/components/inputs/checkbox-group/overview.md rename to docs/components/checkbox-group/overview.md index b717bcc36..173226212 100644 --- a/docs/components/inputs/checkbox-group/overview.md +++ b/docs/components/checkbox-group/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Checkbox Group >> Overview ||10 +# Checkbox Group >> Overview ||10 A checkbox group enhances the functionality of the native `` element. Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle. diff --git a/docs/components/inputs/checkbox-group/features.md b/docs/components/checkbox-group/use-cases.md similarity index 99% rename from docs/components/inputs/checkbox-group/features.md rename to docs/components/checkbox-group/use-cases.md index ec1383903..6979a379a 100644 --- a/docs/components/inputs/checkbox-group/features.md +++ b/docs/components/checkbox-group/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Checkbox Group >> Features ||20 +# Checkbox Group >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/content/collapsible/assets/CustomCollapsible.js b/docs/components/collapsible/assets/CustomCollapsible.js similarity index 100% rename from docs/components/content/collapsible/assets/CustomCollapsible.js rename to docs/components/collapsible/assets/CustomCollapsible.js diff --git a/docs/components/content/collapsible/assets/applyDemoCollapsibleStyles.js b/docs/components/collapsible/assets/applyDemoCollapsibleStyles.js similarity index 100% rename from docs/components/content/collapsible/assets/applyDemoCollapsibleStyles.js rename to docs/components/collapsible/assets/applyDemoCollapsibleStyles.js diff --git a/docs/components/content/collapsible/examples.md b/docs/components/collapsible/examples.md similarity index 98% rename from docs/components/content/collapsible/examples.md rename to docs/components/collapsible/examples.md index 9efdc2c63..fb2752557 100644 --- a/docs/components/content/collapsible/examples.md +++ b/docs/components/collapsible/examples.md @@ -1,4 +1,4 @@ -# Content >> Collapsible >> Examples ||30 +# Collapsible >> Examples ||30 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/collapsible/index.md b/docs/components/collapsible/index.md new file mode 100644 index 000000000..118b374bd --- /dev/null +++ b/docs/components/collapsible/index.md @@ -0,0 +1,3 @@ +# Collapsible ||10 + +-> go to Overview diff --git a/docs/components/content/collapsible/overview.md b/docs/components/collapsible/overview.md similarity index 86% rename from docs/components/content/collapsible/overview.md rename to docs/components/collapsible/overview.md index f739b3ffa..b1e45c141 100644 --- a/docs/components/content/collapsible/overview.md +++ b/docs/components/collapsible/overview.md @@ -1,4 +1,4 @@ -# Content >> Collapsible >> Overview ||10 +# Collapsible >> Overview ||10 A combination of a button (the invoker) and a chunk of 'extra content'. This web component can be extended with an animation to disclose the extra content. There are two slots available respectively; `invoker` to specify the collapsible's invoker and `content` for the extra content of the collapsible. @@ -22,7 +22,7 @@ export const main = () => html` ## Features - Use `opened` attribute or `toggle()` method to render default open. -- `invoker` slot can be custom template e.g. our [button](../../interaction/button/overview.md) or native `button` with custom styling. +- `invoker` slot can be custom template e.g. our [button](../button/overview.md) or native `button` with custom styling. - Observe the state with the help of `@opened-changed` event. - `show()` and `hide()` are helper methods to hide or show the content from outside. diff --git a/docs/components/content/collapsible/features.md b/docs/components/collapsible/use-cases.md similarity index 98% rename from docs/components/content/collapsible/features.md rename to docs/components/collapsible/use-cases.md index fdd454ee9..1f89ceeb0 100644 --- a/docs/components/content/collapsible/features.md +++ b/docs/components/collapsible/use-cases.md @@ -1,4 +1,4 @@ -# Content >> Collapsible >> Features ||20 +# Collapsible >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/inputs/combobox/examples.md b/docs/components/combobox/examples.md similarity index 99% rename from docs/components/inputs/combobox/examples.md rename to docs/components/combobox/examples.md index 469a44dd5..0ede4bcfa 100644 --- a/docs/components/inputs/combobox/examples.md +++ b/docs/components/combobox/examples.md @@ -1,4 +1,4 @@ -# Inputs >> Combobox >> Examples ||30 +# Combobox >> Examples ||30 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/combobox/index.md b/docs/components/combobox/index.md new file mode 100644 index 000000000..ac13b7839 --- /dev/null +++ b/docs/components/combobox/index.md @@ -0,0 +1,3 @@ +# Combobox ||10 + +-> go to Overview diff --git a/docs/components/inputs/combobox/overview.md b/docs/components/combobox/overview.md similarity index 97% rename from docs/components/inputs/combobox/overview.md rename to docs/components/combobox/overview.md index ba81dd955..b641bcba6 100644 --- a/docs/components/inputs/combobox/overview.md +++ b/docs/components/combobox/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Combobox >> Overview ||10 +# Combobox >> Overview ||10 A combobox is a widget made up of the combination of two distinct elements: diff --git a/docs/components/inputs/combobox/src/LinkMixin.js b/docs/components/combobox/src/LinkMixin.js similarity index 100% rename from docs/components/inputs/combobox/src/LinkMixin.js rename to docs/components/combobox/src/LinkMixin.js diff --git a/docs/components/inputs/combobox/src/demo-selection-display.js b/docs/components/combobox/src/demo-selection-display.js similarity index 100% rename from docs/components/inputs/combobox/src/demo-selection-display.js rename to docs/components/combobox/src/demo-selection-display.js diff --git a/docs/components/inputs/combobox/src/gh-combobox/gh-button.js b/docs/components/combobox/src/gh-combobox/gh-button.js similarity index 100% rename from docs/components/inputs/combobox/src/gh-combobox/gh-button.js rename to docs/components/combobox/src/gh-combobox/gh-button.js diff --git a/docs/components/inputs/combobox/src/gh-combobox/gh-combobox.js b/docs/components/combobox/src/gh-combobox/gh-combobox.js similarity index 100% rename from docs/components/inputs/combobox/src/gh-combobox/gh-combobox.js rename to docs/components/combobox/src/gh-combobox/gh-combobox.js diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/google-clear-icon.js b/docs/components/combobox/src/google-combobox/assets/google-clear-icon.js similarity index 100% rename from docs/components/inputs/combobox/src/google-combobox/assets/google-clear-icon.js rename to docs/components/combobox/src/google-combobox/assets/google-clear-icon.js diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/google-search-icon.js b/docs/components/combobox/src/google-combobox/assets/google-search-icon.js similarity index 100% rename from docs/components/inputs/combobox/src/google-combobox/assets/google-search-icon.js rename to docs/components/combobox/src/google-combobox/assets/google-search-icon.js diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/google-voice-search-icon.js b/docs/components/combobox/src/google-combobox/assets/google-voice-search-icon.js similarity index 100% rename from docs/components/inputs/combobox/src/google-combobox/assets/google-voice-search-icon.js rename to docs/components/combobox/src/google-combobox/assets/google-voice-search-icon.js diff --git a/docs/components/inputs/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png b/docs/components/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png similarity index 100% rename from docs/components/inputs/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png rename to docs/components/combobox/src/google-combobox/assets/googlelogo_color_272x92dp.png diff --git a/docs/components/inputs/combobox/src/google-combobox/google-combobox.js b/docs/components/combobox/src/google-combobox/google-combobox.js similarity index 100% rename from docs/components/inputs/combobox/src/google-combobox/google-combobox.js rename to docs/components/combobox/src/google-combobox/google-combobox.js diff --git a/docs/components/inputs/combobox/src/lazyRender.js b/docs/components/combobox/src/lazyRender.js similarity index 100% rename from docs/components/inputs/combobox/src/lazyRender.js rename to docs/components/combobox/src/lazyRender.js diff --git a/docs/components/inputs/combobox/src/levenshtein.js b/docs/components/combobox/src/levenshtein.js similarity index 100% rename from docs/components/inputs/combobox/src/levenshtein.js rename to docs/components/combobox/src/levenshtein.js diff --git a/docs/components/inputs/combobox/src/md-combobox/MdFieldMixin.js b/docs/components/combobox/src/md-combobox/MdFieldMixin.js similarity index 100% rename from docs/components/inputs/combobox/src/md-combobox/MdFieldMixin.js rename to docs/components/combobox/src/md-combobox/MdFieldMixin.js diff --git a/docs/components/inputs/combobox/src/md-combobox/md-combobox.js b/docs/components/combobox/src/md-combobox/md-combobox.js similarity index 100% rename from docs/components/inputs/combobox/src/md-combobox/md-combobox.js rename to docs/components/combobox/src/md-combobox/md-combobox.js diff --git a/docs/components/inputs/combobox/src/md-combobox/md-input.js b/docs/components/combobox/src/md-combobox/md-input.js similarity index 100% rename from docs/components/inputs/combobox/src/md-combobox/md-input.js rename to docs/components/combobox/src/md-combobox/md-input.js diff --git a/docs/components/inputs/combobox/src/md-combobox/style/load-roboto.js b/docs/components/combobox/src/md-combobox/style/load-roboto.js similarity index 100% rename from docs/components/inputs/combobox/src/md-combobox/style/load-roboto.js rename to docs/components/combobox/src/md-combobox/style/load-roboto.js diff --git a/docs/components/inputs/combobox/src/md-combobox/style/md-ripple.js b/docs/components/combobox/src/md-combobox/style/md-ripple.js similarity index 100% rename from docs/components/inputs/combobox/src/md-combobox/style/md-ripple.js rename to docs/components/combobox/src/md-combobox/style/md-ripple.js diff --git a/docs/components/inputs/combobox/src/wa-combobox/wa-combobox.js b/docs/components/combobox/src/wa-combobox/wa-combobox.js similarity index 100% rename from docs/components/inputs/combobox/src/wa-combobox/wa-combobox.js rename to docs/components/combobox/src/wa-combobox/wa-combobox.js diff --git a/docs/components/inputs/combobox/features.md b/docs/components/combobox/use-cases.md similarity index 99% rename from docs/components/inputs/combobox/features.md rename to docs/components/combobox/use-cases.md index fd848e932..3a51bab0c 100644 --- a/docs/components/inputs/combobox/features.md +++ b/docs/components/combobox/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Combobox >> Features ||20 +# Combobox >> Use Cases ||20 A combobox is a widget made up of the combination of two distinct elements: diff --git a/docs/components/content/accordion/index.md b/docs/components/content/accordion/index.md deleted file mode 100644 index cf0241b22..000000000 --- a/docs/components/content/accordion/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Content >> Accordion - --> go to Overview diff --git a/docs/components/content/collapsible/index.md b/docs/components/content/collapsible/index.md deleted file mode 100644 index f15486238..000000000 --- a/docs/components/content/collapsible/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Content >> Collapsible - --> go to Overview diff --git a/docs/components/content/index.md b/docs/components/content/index.md deleted file mode 100644 index deae6f052..000000000 --- a/docs/components/content/index.md +++ /dev/null @@ -1 +0,0 @@ -# Content ||10 diff --git a/docs/components/content/progress-indicator/index.md b/docs/components/content/progress-indicator/index.md deleted file mode 100644 index 3180953cb..000000000 --- a/docs/components/content/progress-indicator/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Content >> Progress Indicator - --> go to Overview diff --git a/docs/components/dialog/index.md b/docs/components/dialog/index.md new file mode 100644 index 000000000..a6d4406a9 --- /dev/null +++ b/docs/components/dialog/index.md @@ -0,0 +1,3 @@ +# Dialog ||20 + +-> go to Overview diff --git a/docs/components/interaction/dialog/overview.md b/docs/components/dialog/overview.md similarity index 95% rename from docs/components/interaction/dialog/overview.md rename to docs/components/dialog/overview.md index 46db4f998..7ad20e8c4 100644 --- a/docs/components/interaction/dialog/overview.md +++ b/docs/components/dialog/overview.md @@ -1,4 +1,4 @@ -# Interaction >> Dialog >> Overview ||10 +# Dialog >> Overview ||10 A web component that wraps a modal dialog controller. Its purpose is to make it easy to use our Overlay System declaratively. @@ -58,6 +58,6 @@ import '@lion/dialog/define'; ## Changing the configuration You can use the `config` property on the dialog to change the configuration. -The documentation of the full config object can be found in the `lion/overlay` package or here in [Overlay System - Configuration](../../../docs/systems/overlays/configuration.md). +The documentation of the full config object can be found in the `lion/overlay` package or here in [Overlay System - Configuration](../../fundamentals/systems/overlays/configuration.md). The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`. diff --git a/docs/components/interaction/dialog/src/demo-dialog-style.js b/docs/components/dialog/src/demo-dialog-style.js similarity index 100% rename from docs/components/interaction/dialog/src/demo-dialog-style.js rename to docs/components/dialog/src/demo-dialog-style.js diff --git a/docs/components/interaction/dialog/src/demoStyle.js b/docs/components/dialog/src/demoStyle.js similarity index 100% rename from docs/components/interaction/dialog/src/demoStyle.js rename to docs/components/dialog/src/demoStyle.js diff --git a/docs/components/interaction/dialog/src/slots-dialog-content.js b/docs/components/dialog/src/slots-dialog-content.js similarity index 100% rename from docs/components/interaction/dialog/src/slots-dialog-content.js rename to docs/components/dialog/src/slots-dialog-content.js diff --git a/docs/components/interaction/dialog/src/styled-dialog-content.js b/docs/components/dialog/src/styled-dialog-content.js similarity index 100% rename from docs/components/interaction/dialog/src/styled-dialog-content.js rename to docs/components/dialog/src/styled-dialog-content.js diff --git a/docs/components/interaction/dialog/features.md b/docs/components/dialog/use-cases.md similarity index 99% rename from docs/components/interaction/dialog/features.md rename to docs/components/dialog/use-cases.md index a1af5abb5..71b6b7d86 100644 --- a/docs/components/interaction/dialog/features.md +++ b/docs/components/dialog/use-cases.md @@ -1,4 +1,4 @@ -# Interaction >> Dialog >> Features ||20 +# Dialog >> Use Cases ||20 `lion-dialog` is a component wrapping a modal dialog controller. Its purpose is to make it easy to use our Overlay System declaratively. diff --git a/docs/components/fieldset/index.md b/docs/components/fieldset/index.md new file mode 100644 index 000000000..6a3e4d0e0 --- /dev/null +++ b/docs/components/fieldset/index.md @@ -0,0 +1,3 @@ +# Fieldset ||20 + +-> go to Overview diff --git a/docs/components/inputs/fieldset/overview.md b/docs/components/fieldset/overview.md similarity index 85% rename from docs/components/inputs/fieldset/overview.md rename to docs/components/fieldset/overview.md index 99a14a189..988ae03a4 100644 --- a/docs/components/inputs/fieldset/overview.md +++ b/docs/components/fieldset/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Fieldset >> Overview ||10 +# Fieldset >> Overview ||10 ```js script import { html } from '@mdjs/mdjs-preview'; @@ -31,8 +31,8 @@ Our fieldset instead has a label attribute or you can add a label with a div- or ## Features - Easy retrieval of form data based on field names -- Advanced user interaction scenarios via [interaction states](../../../docs/systems/form/interaction-states.md) -- Can have [validate](../../../docs/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset +- Advanced user interaction scenarios via [interaction states](../../fundamentals/systems/form/interaction-states.md) +- Can have [validate](../../fundamentals/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset - Can disable input fields on fieldset level - Accessible out of the box diff --git a/docs/components/inputs/fieldset/features.md b/docs/components/fieldset/use-cases.md similarity index 99% rename from docs/components/inputs/fieldset/features.md rename to docs/components/fieldset/use-cases.md index fdb0b8b50..9d2d966e8 100644 --- a/docs/components/inputs/fieldset/features.md +++ b/docs/components/fieldset/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Fieldset >> Features ||20 +# Fieldset >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/form/index.md b/docs/components/form/index.md new file mode 100644 index 000000000..647de681e --- /dev/null +++ b/docs/components/form/index.md @@ -0,0 +1,3 @@ +# Form ||20 + +-> go to Overview diff --git a/docs/components/inputs/form/overview.md b/docs/components/form/overview.md similarity index 82% rename from docs/components/inputs/form/overview.md rename to docs/components/form/overview.md index 16b0162a4..a3460da8b 100644 --- a/docs/components/inputs/form/overview.md +++ b/docs/components/form/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Form >> Overview ||10 +# Form >> Overview ||10 ```js script import { html } from '@mdjs/mdjs-preview'; @@ -8,7 +8,7 @@ import '@lion/form/define'; ``` A web component that enhances the functionality of the native `form` component. -It is designed to interact with (instances of) the [form controls](../overview.md). +It is designed to interact with (instances of) the [form controls](../../fundamentals/systems/form/overview.md). ```js preview-story export const main = () => html` @@ -26,11 +26,11 @@ export const main = () => html` - Data synchronization with models - Easy retrieval of form data based on field names - Advanced validation possibilities -- Advanced user interaction scenarios via [interaction states](../../../docs/systems/form/interaction-states.md) +- Advanced user interaction scenarios via [interaction states](../../fundamentals/systems/form/interaction-states.md) - Registration mechanism for form controls - Accessible out of the box -For more information about fields that are designed for our `form`, please read [form system](../../../docs/systems/form/overview.md). +For more information about fields that are designed for our `form`, please read [form system](../../fundamentals/systems/form/overview.md). ## Installation diff --git a/docs/components/inputs/form/features.md b/docs/components/form/use-cases.md similarity index 98% rename from docs/components/inputs/form/features.md rename to docs/components/form/use-cases.md index 723efd4a4..246277ec8 100644 --- a/docs/components/inputs/form/features.md +++ b/docs/components/form/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Form >> Features ||20 +# Form >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/icons/icon/assets/bugs/bug01.svg.js b/docs/components/icon/assets/bugs/bug01.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug01.svg.js rename to docs/components/icon/assets/bugs/bug01.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug02.svg.js b/docs/components/icon/assets/bugs/bug02.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug02.svg.js rename to docs/components/icon/assets/bugs/bug02.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug05.svg.js b/docs/components/icon/assets/bugs/bug05.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug05.svg.js rename to docs/components/icon/assets/bugs/bug05.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug06.svg.js b/docs/components/icon/assets/bugs/bug06.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug06.svg.js rename to docs/components/icon/assets/bugs/bug06.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug08.svg.js b/docs/components/icon/assets/bugs/bug08.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug08.svg.js rename to docs/components/icon/assets/bugs/bug08.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug12.svg.js b/docs/components/icon/assets/bugs/bug12.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug12.svg.js rename to docs/components/icon/assets/bugs/bug12.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug19.svg.js b/docs/components/icon/assets/bugs/bug19.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug19.svg.js rename to docs/components/icon/assets/bugs/bug19.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug23.svg.js b/docs/components/icon/assets/bugs/bug23.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug23.svg.js rename to docs/components/icon/assets/bugs/bug23.svg.js diff --git a/docs/components/icons/icon/assets/bugs/bug24.svg.js b/docs/components/icon/assets/bugs/bug24.svg.js similarity index 100% rename from docs/components/icons/icon/assets/bugs/bug24.svg.js rename to docs/components/icon/assets/bugs/bug24.svg.js diff --git a/docs/components/icons/icon/assets/iconset-bugs.js b/docs/components/icon/assets/iconset-bugs.js similarity index 100% rename from docs/components/icons/icon/assets/iconset-bugs.js rename to docs/components/icon/assets/iconset-bugs.js diff --git a/docs/components/icons/icon/assets/iconset-misc.js b/docs/components/icon/assets/iconset-misc.js similarity index 100% rename from docs/components/icons/icon/assets/iconset-misc.js rename to docs/components/icon/assets/iconset-misc.js diff --git a/docs/components/icons/icon/assets/iconset-space.js b/docs/components/icon/assets/iconset-space.js similarity index 100% rename from docs/components/icons/icon/assets/iconset-space.js rename to docs/components/icon/assets/iconset-space.js diff --git a/docs/components/icons/icon/assets/misc/arrowLeft.svg.js b/docs/components/icon/assets/misc/arrowLeft.svg.js similarity index 100% rename from docs/components/icons/icon/assets/misc/arrowLeft.svg.js rename to docs/components/icon/assets/misc/arrowLeft.svg.js diff --git a/docs/components/icons/icon/assets/space/aliens-spaceship.svg.js b/docs/components/icon/assets/space/aliens-spaceship.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/aliens-spaceship.svg.js rename to docs/components/icon/assets/space/aliens-spaceship.svg.js diff --git a/docs/components/icons/icon/assets/space/meteor.svg.js b/docs/components/icon/assets/space/meteor.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/meteor.svg.js rename to docs/components/icon/assets/space/meteor.svg.js diff --git a/docs/components/icons/icon/assets/space/moon-flag.svg.js b/docs/components/icon/assets/space/moon-flag.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/moon-flag.svg.js rename to docs/components/icon/assets/space/moon-flag.svg.js diff --git a/docs/components/icons/icon/assets/space/moon.svg.js b/docs/components/icon/assets/space/moon.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/moon.svg.js rename to docs/components/icon/assets/space/moon.svg.js diff --git a/docs/components/icons/icon/assets/space/night.svg.js b/docs/components/icon/assets/space/night.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/night.svg.js rename to docs/components/icon/assets/space/night.svg.js diff --git a/docs/components/icons/icon/assets/space/orbit.svg.js b/docs/components/icon/assets/space/orbit.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/orbit.svg.js rename to docs/components/icon/assets/space/orbit.svg.js diff --git a/docs/components/icons/icon/assets/space/planet.svg.js b/docs/components/icon/assets/space/planet.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/planet.svg.js rename to docs/components/icon/assets/space/planet.svg.js diff --git a/docs/components/icons/icon/assets/space/robot.svg.js b/docs/components/icon/assets/space/robot.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/robot.svg.js rename to docs/components/icon/assets/space/robot.svg.js diff --git a/docs/components/icons/icon/assets/space/rocket.svg.js b/docs/components/icon/assets/space/rocket.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/rocket.svg.js rename to docs/components/icon/assets/space/rocket.svg.js diff --git a/docs/components/icons/icon/assets/space/satellite.svg.js b/docs/components/icon/assets/space/satellite.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/satellite.svg.js rename to docs/components/icon/assets/space/satellite.svg.js diff --git a/docs/components/icons/icon/assets/space/signal.svg.js b/docs/components/icon/assets/space/signal.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/signal.svg.js rename to docs/components/icon/assets/space/signal.svg.js diff --git a/docs/components/icons/icon/assets/space/space-helmet.svg.js b/docs/components/icon/assets/space/space-helmet.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/space-helmet.svg.js rename to docs/components/icon/assets/space/space-helmet.svg.js diff --git a/docs/components/icons/icon/assets/space/sun.svg.js b/docs/components/icon/assets/space/sun.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/sun.svg.js rename to docs/components/icon/assets/space/sun.svg.js diff --git a/docs/components/icons/icon/assets/space/telescope.svg.js b/docs/components/icon/assets/space/telescope.svg.js similarity index 100% rename from docs/components/icons/icon/assets/space/telescope.svg.js rename to docs/components/icon/assets/space/telescope.svg.js diff --git a/docs/components/icon/index.md b/docs/components/icon/index.md new file mode 100644 index 000000000..562a6b567 --- /dev/null +++ b/docs/components/icon/index.md @@ -0,0 +1,3 @@ +# Icon ||20 + +-> go to Overview diff --git a/docs/components/icons/icon/overview.md b/docs/components/icon/overview.md similarity index 96% rename from docs/components/icons/icon/overview.md rename to docs/components/icon/overview.md index d1920239a..a0c91e599 100644 --- a/docs/components/icons/icon/overview.md +++ b/docs/components/icon/overview.md @@ -1,4 +1,4 @@ -# Icons >> Icon >> Overview ||10 +# Icon >> Overview ||10 A web component for displaying icons. diff --git a/docs/components/icons/icon/features.md b/docs/components/icon/use-cases.md similarity index 94% rename from docs/components/icons/icon/features.md rename to docs/components/icon/use-cases.md index 694ed8aeb..984562570 100644 --- a/docs/components/icons/icon/features.md +++ b/docs/components/icon/use-cases.md @@ -1,4 +1,4 @@ -# Icons >> Icon >> Features ||20 +# Icon >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; @@ -26,7 +26,7 @@ icons.addIconResolver('lion', (iconset, name) => { ## Icon sets Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance. -See the [system documentation](../../../docs/systems/icon/overview.md) to learn more about icon sets. +See the [system documentation](../../fundamentals/systems/icon/overview.md) to learn more about icon sets. ```js preview-story export const iconSets = () => html` diff --git a/docs/components/icons/index.md b/docs/components/icons/index.md deleted file mode 100644 index 71654445e..000000000 --- a/docs/components/icons/index.md +++ /dev/null @@ -1 +0,0 @@ -# Icons ||30 diff --git a/docs/components/index.md b/docs/components/index.md index e89d06660..cb31eba9a 100644 --- a/docs/components/index.md +++ b/docs/components/index.md @@ -1,16 +1,7 @@ -# Components ||20 +# Components ||40 -We offer many web components for your application needs. For each, you will find an overview page to highlight its capabilities and how to start using it. Additionally, there will be a features page that showcases multiple use cases in action. Some even have a dedicated examples page so you can see a possible styled implementation. +Components are one of the key building blocks of the design system. Their systematic reuse helps to create visual and functional consistency across products. -For organizational purposes, we split them into the following groups. +## Got feedback? -1. [Content](./content/accordion/overview.md)
- Everything to help you organize your content. -2. [Icons](./icons/icon/overview.md)
- Loading and displaying icons. -3. [Inputs](./inputs/overview.md)
- Input components that let you make complex forms with ease, including validation. -4. [Interaction](./interaction/button/overview.md)
- A set of interactive components like dialogs, tooltips, buttons and switches. -5. [Navigation](./navigation/pagination/overview.md)
- Navigational components like pagination and steps. +We are always looking for ways on how to improve the our guidelines. If you have any specific need, idea or just want to tell us what you think - [please get in touch here](https://github.com/ing-bank/lion/blob/master/CONTRIBUTING.md). diff --git a/docs/components/input-amount/index.md b/docs/components/input-amount/index.md new file mode 100644 index 000000000..cfe5b8610 --- /dev/null +++ b/docs/components/input-amount/index.md @@ -0,0 +1,3 @@ +# Input Amount ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-amount/overview.md b/docs/components/input-amount/overview.md similarity index 82% rename from docs/components/inputs/input-amount/overview.md rename to docs/components/input-amount/overview.md index 158c5774a..b30c6a6e5 100644 --- a/docs/components/inputs/input-amount/overview.md +++ b/docs/components/input-amount/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Amount >> Overview ||10 +# Input Amount >> Overview ||10 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount. @@ -25,12 +25,12 @@ export const main = () => { ## Features - Based on our [input](../input/overview.md) -- Makes use of [formatNumber](../../../docs/systems/localize/numbers.md) for formatting and parsing. +- Makes use of [formatNumber](../../fundamentals/systems/localize/numbers.md) for formatting and parsing. - Option to show currency as a suffix - Option to override locale to change the formatting and parsing - Option to provide additional format options overrides - Default label in different languages -- Can make use of number specific [validators](../../../docs/systems/form/validate.md) with corresponding error messages in different languages +- Can make use of number specific [validators](../../fundamentals/systems/form/validate.md) with corresponding error messages in different languages - IsNumber (default) - MinNumber - MaxNumber diff --git a/docs/components/inputs/input-amount/features.md b/docs/components/input-amount/use-cases.md similarity index 98% rename from docs/components/inputs/input-amount/features.md rename to docs/components/input-amount/use-cases.md index b337ae9b9..d45d41910 100644 --- a/docs/components/inputs/input-amount/features.md +++ b/docs/components/input-amount/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Amount >> Features ||20 +# Input Amount >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/input-date/index.md b/docs/components/input-date/index.md new file mode 100644 index 000000000..80badd2f1 --- /dev/null +++ b/docs/components/input-date/index.md @@ -0,0 +1,3 @@ +# Input Date ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-date/overview.md b/docs/components/input-date/overview.md similarity index 76% rename from docs/components/inputs/input-date/overview.md rename to docs/components/input-date/overview.md index 29bba5e3f..abcf96e0d 100644 --- a/docs/components/inputs/input-date/overview.md +++ b/docs/components/input-date/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Date >> Overview ||10 +# Input Date >> Overview ||10 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in a date. @@ -17,10 +17,10 @@ export const main = () => html` ## Features - Based on our [input](../input/overview.md) -- Makes use of [formatDate](../../../docs/systems/localize/dates.md) for formatting and parsing. +- Makes use of [formatDate](../../fundamentals/systems/localize/dates.md) for formatting and parsing. - Option to override locale to change the formatting and parsing - Default label in different languages -- Can make use of date specific [validators](../../../docs/systems/form/validate.md) with corresponding error messages in different languages +- Can make use of date specific [validators](../../fundamentals/systems/form/validate.md) with corresponding error messages in different languages - IsDate (default) - MinDate - MaxDate diff --git a/docs/components/inputs/input-date/features.md b/docs/components/input-date/use-cases.md similarity index 97% rename from docs/components/inputs/input-date/features.md rename to docs/components/input-date/use-cases.md index 497c1ca4a..7b215c80a 100644 --- a/docs/components/inputs/input-date/features.md +++ b/docs/components/input-date/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Date >> Features ||20 +# Input Date >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/input-datepicker/index.md b/docs/components/input-datepicker/index.md new file mode 100644 index 000000000..4bbc7e814 --- /dev/null +++ b/docs/components/input-datepicker/index.md @@ -0,0 +1,3 @@ +# Input Datepicker ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-datepicker/overview.md b/docs/components/input-datepicker/overview.md similarity index 80% rename from docs/components/inputs/input-datepicker/overview.md rename to docs/components/input-datepicker/overview.md index 314c66088..674f8ce34 100644 --- a/docs/components/inputs/input-datepicker/overview.md +++ b/docs/components/input-datepicker/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Datepicker >> Overview ||10 +# Input Datepicker >> Overview ||10 A web component based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker. For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs. @@ -20,9 +20,9 @@ export const main = () => { - Input field with a datepicker to help to choose a date - Based on our [input-date](../input-date/overview.md) - Makes use of our [calendar](../calendar/overview.md) inside the datepicker -- Makes use of [formatDate](../../../docs/systems/localize/dates.md) for formatting and parsing. +- Makes use of [formatDate](../../fundamentals/systems/localize/dates.md) for formatting and parsing. - Option to overwrite locale to change the formatting and parsing -- Can make use of date specific [validators](../../../docs/systems/form/validate.md) with corresponding error messages in different languages +- Can make use of date specific [validators](../../fundamentals/systems/form/validate.md) with corresponding error messages in different languages - IsDate (default) - MinDate - MaxDate diff --git a/docs/components/inputs/input-datepicker/features.md b/docs/components/input-datepicker/use-cases.md similarity index 97% rename from docs/components/inputs/input-datepicker/features.md rename to docs/components/input-datepicker/use-cases.md index 3ff7832c9..90e306fb4 100644 --- a/docs/components/inputs/input-datepicker/features.md +++ b/docs/components/input-datepicker/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Datepicker >> Features ||20 +# Input Datepicker >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/input-email/index.md b/docs/components/input-email/index.md new file mode 100644 index 000000000..6790f52ef --- /dev/null +++ b/docs/components/input-email/index.md @@ -0,0 +1,3 @@ +# Input Email ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-email/overview.md b/docs/components/input-email/overview.md similarity index 77% rename from docs/components/inputs/input-email/overview.md rename to docs/components/input-email/overview.md index 16939b045..0ab225aa7 100644 --- a/docs/components/inputs/input-email/overview.md +++ b/docs/components/input-email/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Email >> Overview ||10 +# Input Email >> Overview ||10 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an email. @@ -16,7 +16,7 @@ export const main = () => { ## Features - Based on our [input](../input/overview.md) -- Makes use of email [validators](../../../docs/systems/form/validate.md) with corresponding error messages in different languages +- Makes use of email [validators](../../fundamentals/systems/form/validate.md) with corresponding error messages in different languages - IsEmail (default) ## Installation diff --git a/docs/components/inputs/input-email/features.md b/docs/components/input-email/use-cases.md similarity index 96% rename from docs/components/inputs/input-email/features.md rename to docs/components/input-email/use-cases.md index a560825a3..a295f905f 100644 --- a/docs/components/inputs/input-email/features.md +++ b/docs/components/input-email/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Email >> Features ||20 +# Input Email >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/input-iban/index.md b/docs/components/input-iban/index.md new file mode 100644 index 000000000..58c150348 --- /dev/null +++ b/docs/components/input-iban/index.md @@ -0,0 +1,3 @@ +# Input Iban ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-iban/overview.md b/docs/components/input-iban/overview.md similarity index 80% rename from docs/components/inputs/input-iban/overview.md rename to docs/components/input-iban/overview.md index 68cacf381..1e712699d 100644 --- a/docs/components/inputs/input-iban/overview.md +++ b/docs/components/input-iban/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Iban >> Overview ||10 +# Input Iban >> Overview ||10 A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number). @@ -18,7 +18,7 @@ export const main = () => { - Based on our [input](../input/overview.md) - Default label in different languages -- Makes use of IBAN specific [validate](../../../docs/systems/form/validate.md) with corresponding error messages in different languages +- Makes use of IBAN specific [validate](../../fundamentals/systems/form/validate.md) with corresponding error messages in different languages - IsIBAN (default) - IsCountryIBAN - Parses IBANs automatically diff --git a/docs/components/inputs/input-iban/features.md b/docs/components/input-iban/use-cases.md similarity index 98% rename from docs/components/inputs/input-iban/features.md rename to docs/components/input-iban/use-cases.md index eb2171c90..0af5e555f 100644 --- a/docs/components/inputs/input-iban/features.md +++ b/docs/components/input-iban/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Iban >> Features ||20 +# Input Iban >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/input-range/index.md b/docs/components/input-range/index.md new file mode 100644 index 000000000..b6831f433 --- /dev/null +++ b/docs/components/input-range/index.md @@ -0,0 +1,3 @@ +# Input Range ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-range/overview.md b/docs/components/input-range/overview.md similarity index 84% rename from docs/components/inputs/input-range/overview.md rename to docs/components/input-range/overview.md index 36e361cba..225d32949 100644 --- a/docs/components/inputs/input-range/overview.md +++ b/docs/components/input-range/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Range >> Overview ||10 +# Input Range >> Overview ||10 A web component based on the native range input. Its purpose is to provide a way for users to select one value from a range of values. @@ -19,7 +19,7 @@ export const main = () => html` - Shows `modelValue` and `unit` above the range input. - Shows `min` and `max` value after the range input. - Can hide the `min` and `max` value via `no-min-max-labels`. -- Makes use of [formatNumber](../../../docs/systems/localize/numbers.md) for formatting and parsing. +- Makes use of [formatNumber](../../fundamentals/systems/localize/numbers.md) for formatting and parsing. ## Installation diff --git a/docs/components/inputs/input-range/features.md b/docs/components/input-range/use-cases.md similarity index 98% rename from docs/components/inputs/input-range/features.md rename to docs/components/input-range/use-cases.md index 0cc776eeb..012be82d0 100644 --- a/docs/components/inputs/input-range/features.md +++ b/docs/components/input-range/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Range >> Features ||20 +# Input Range >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/input-stepper/index.md b/docs/components/input-stepper/index.md new file mode 100644 index 000000000..c7c4d167a --- /dev/null +++ b/docs/components/input-stepper/index.md @@ -0,0 +1,3 @@ +# Input Stepper ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-stepper/overview.md b/docs/components/input-stepper/overview.md similarity index 95% rename from docs/components/inputs/input-stepper/overview.md rename to docs/components/input-stepper/overview.md index d68b20149..219967edf 100644 --- a/docs/components/inputs/input-stepper/overview.md +++ b/docs/components/input-stepper/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Stepper >> Overview ||10 +# Input Stepper >> Overview ||10 A web component that enables the user to increase and decrease a numeric value by predefined range. It is a combination of two buttons and a number input field with an optional slot `after` to suffix the extra information. diff --git a/docs/components/inputs/input-stepper/features.md b/docs/components/input-stepper/use-cases.md similarity index 96% rename from docs/components/inputs/input-stepper/features.md rename to docs/components/input-stepper/use-cases.md index 54dda92ca..ad3afd76f 100644 --- a/docs/components/inputs/input-stepper/features.md +++ b/docs/components/input-stepper/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Stepper >> Features ||20 +# Input Stepper >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/inputs/input-tel-dropdown/examples.md b/docs/components/input-tel-dropdown/examples.md similarity index 93% rename from docs/components/inputs/input-tel-dropdown/examples.md rename to docs/components/input-tel-dropdown/examples.md index 60d258b4b..15b7d2273 100644 --- a/docs/components/inputs/input-tel-dropdown/examples.md +++ b/docs/components/input-tel-dropdown/examples.md @@ -1,4 +1,4 @@ -# Inputs >> Input Tel Dropdown >> Examples ||30 +# Input Tel Dropdown >> Examples ||30 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/input-tel-dropdown/index.md b/docs/components/input-tel-dropdown/index.md new file mode 100644 index 000000000..abb7dd364 --- /dev/null +++ b/docs/components/input-tel-dropdown/index.md @@ -0,0 +1,3 @@ +# Input Tel Dropdown ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-tel-dropdown/overview.md b/docs/components/input-tel-dropdown/overview.md similarity index 94% rename from docs/components/inputs/input-tel-dropdown/overview.md rename to docs/components/input-tel-dropdown/overview.md index 7a6d46dba..bc04062f3 100644 --- a/docs/components/inputs/input-tel-dropdown/overview.md +++ b/docs/components/input-tel-dropdown/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Tel Dropdown >> Overview ||10 +# Input Tel Dropdown >> Overview ||10 Extension of Input Tel that prefixes a dropdown list that shows all possible regions / countries. diff --git a/docs/components/inputs/input-tel-dropdown/src/intl-input-tel-dropdown.js b/docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js similarity index 100% rename from docs/components/inputs/input-tel-dropdown/src/intl-input-tel-dropdown.js rename to docs/components/input-tel-dropdown/src/intl-input-tel-dropdown.js diff --git a/docs/components/inputs/input-tel-dropdown/features.md b/docs/components/input-tel-dropdown/use-cases.md similarity index 94% rename from docs/components/inputs/input-tel-dropdown/features.md rename to docs/components/input-tel-dropdown/use-cases.md index 42478e6d5..8590a1b8a 100644 --- a/docs/components/inputs/input-tel-dropdown/features.md +++ b/docs/components/input-tel-dropdown/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Tel Dropdown >> Features ||20 +# Input Tel Dropdown >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; @@ -6,7 +6,7 @@ import { ref, createRef } from '@lion/core'; import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { PhoneUtilManager } from '@lion/input-tel'; import '@lion/input-tel-dropdown/define'; -import '../../../docs/systems/form/assets/h-output.js'; +import '../../../docs/fundamentals/systems/form/assets/h-output.js'; ``` ## Input Tel Dropdown diff --git a/docs/components/input-tel/index.md b/docs/components/input-tel/index.md new file mode 100644 index 000000000..a8a7921e1 --- /dev/null +++ b/docs/components/input-tel/index.md @@ -0,0 +1,3 @@ +# Input Tel ||20 + +-> go to Overview diff --git a/docs/components/inputs/input-tel/overview.md b/docs/components/input-tel/overview.md similarity index 94% rename from docs/components/inputs/input-tel/overview.md rename to docs/components/input-tel/overview.md index 58b6f3a91..66e587f85 100644 --- a/docs/components/inputs/input-tel/overview.md +++ b/docs/components/input-tel/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input Tel >> Overview ||10 +# Input Tel >> Overview ||10 Input field for entering phone numbers, including validation, formatting and mobile keyboard support. @@ -7,7 +7,7 @@ import { html } from '@mdjs/mdjs-preview'; import { ref, createRef } from '@lion/core'; import { PhoneUtilManager } from '@lion/input-tel'; import '@lion/input-tel/define'; -import '../../../docs/systems/form/assets/h-output.js'; +import '../../../docs/fundamentals/systems/form/assets/h-output.js'; ``` ```js preview-story diff --git a/docs/components/inputs/input-tel/src/h-region-code-table.js b/docs/components/input-tel/src/h-region-code-table.js similarity index 100% rename from docs/components/inputs/input-tel/src/h-region-code-table.js rename to docs/components/input-tel/src/h-region-code-table.js diff --git a/docs/components/inputs/input-tel/features.md b/docs/components/input-tel/use-cases.md similarity index 98% rename from docs/components/inputs/input-tel/features.md rename to docs/components/input-tel/use-cases.md index 483e36624..edc09ae8f 100644 --- a/docs/components/inputs/input-tel/features.md +++ b/docs/components/input-tel/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input Tel >> Features ||20 +# Input Tel >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; @@ -9,7 +9,7 @@ import { loadDefaultFeedbackMessages } from '@lion/validate-messages'; import { PhoneUtilManager } from '@lion/input-tel'; import '@lion/input-tel/define'; import './src/h-region-code-table.js'; -import '../../../docs/systems/form/assets/h-output.js'; +import '../../../docs/fundamentals/systems/form/assets/h-output.js'; ``` ## Regions: some context diff --git a/docs/components/input/index.md b/docs/components/input/index.md new file mode 100644 index 000000000..a21c04dda --- /dev/null +++ b/docs/components/input/index.md @@ -0,0 +1,3 @@ +# Input ||20 + +-> go to Overview diff --git a/docs/components/inputs/input/overview.md b/docs/components/input/overview.md similarity index 91% rename from docs/components/inputs/input/overview.md rename to docs/components/input/overview.md index ca89da7ac..5d6583336 100644 --- a/docs/components/inputs/input/overview.md +++ b/docs/components/input/overview.md @@ -1,4 +1,4 @@ -# Inputs >> Input >> Overview ||10 +# Input >> Overview ||10 ```js script import { html } from '@mdjs/mdjs-preview'; @@ -23,7 +23,7 @@ export const main = () => html``; - **before**: does not have an active use case yet, but the option is in place. - **after**: can be used to show a currency or percentage. - Delegates attributes like `type`, `disabled`, `placeholder` and `readonly` to the native input. -- Can make use of [validation](../../docs/../../docs/systems/form/validate.md). +- Can make use of [validation](../../fundamentals/systems/form/validate.md). ## Installation diff --git a/docs/components/inputs/input/features.md b/docs/components/input/use-cases.md similarity index 97% rename from docs/components/inputs/input/features.md rename to docs/components/input/use-cases.md index 39eeddef6..67d80aca2 100644 --- a/docs/components/inputs/input/features.md +++ b/docs/components/input/use-cases.md @@ -1,4 +1,4 @@ -# Inputs >> Input >> Features ||20 +# Input >> Use Cases ||20 ```js script import { html } from '@mdjs/mdjs-preview'; diff --git a/docs/components/inputs/calendar/index.md b/docs/components/inputs/calendar/index.md deleted file mode 100644 index 1e2b998ea..000000000 --- a/docs/components/inputs/calendar/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Calendar ||20 - --> go to Overview diff --git a/docs/components/inputs/checkbox-group/index.md b/docs/components/inputs/checkbox-group/index.md deleted file mode 100644 index a5862f14b..000000000 --- a/docs/components/inputs/checkbox-group/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Checkbox Group ||20 - --> go to Overview diff --git a/docs/components/inputs/combobox/index.md b/docs/components/inputs/combobox/index.md deleted file mode 100644 index be43f2d35..000000000 --- a/docs/components/inputs/combobox/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Combobox ||20 - --> go to Overview diff --git a/docs/components/inputs/fieldset/index.md b/docs/components/inputs/fieldset/index.md deleted file mode 100644 index 54623d1cf..000000000 --- a/docs/components/inputs/fieldset/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Fieldset ||20 - --> go to Overview diff --git a/docs/components/inputs/form/index.md b/docs/components/inputs/form/index.md deleted file mode 100644 index a64d48ba9..000000000 --- a/docs/components/inputs/form/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Form ||20 - --> go to Overview diff --git a/docs/components/inputs/index.md b/docs/components/inputs/index.md deleted file mode 100644 index f1e68ae93..000000000 --- a/docs/components/inputs/index.md +++ /dev/null @@ -1 +0,0 @@ -# Inputs ||30 diff --git a/docs/components/inputs/input-amount/index.md b/docs/components/inputs/input-amount/index.md deleted file mode 100644 index 7d612cd37..000000000 --- a/docs/components/inputs/input-amount/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Amount ||20 - --> go to Overview diff --git a/docs/components/inputs/input-date/index.md b/docs/components/inputs/input-date/index.md deleted file mode 100644 index f53e38dcc..000000000 --- a/docs/components/inputs/input-date/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Date ||20 - --> go to Overview diff --git a/docs/components/inputs/input-datepicker/index.md b/docs/components/inputs/input-datepicker/index.md deleted file mode 100644 index 9d20dc82d..000000000 --- a/docs/components/inputs/input-datepicker/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Datepicker ||20 - --> go to Overview diff --git a/docs/components/inputs/input-email/index.md b/docs/components/inputs/input-email/index.md deleted file mode 100644 index d0554c468..000000000 --- a/docs/components/inputs/input-email/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Email ||20 - --> go to Overview diff --git a/docs/components/inputs/input-iban/index.md b/docs/components/inputs/input-iban/index.md deleted file mode 100644 index c8531e9ba..000000000 --- a/docs/components/inputs/input-iban/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Iban ||20 - --> go to Overview diff --git a/docs/components/inputs/input-range/index.md b/docs/components/inputs/input-range/index.md deleted file mode 100644 index 32ccd75f0..000000000 --- a/docs/components/inputs/input-range/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Range ||20 - --> go to Overview diff --git a/docs/components/inputs/input-stepper/index.md b/docs/components/inputs/input-stepper/index.md deleted file mode 100644 index 35deba6fa..000000000 --- a/docs/components/inputs/input-stepper/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Stepper ||20 - --> go to Overview diff --git a/docs/components/inputs/input-tel-dropdown/index.md b/docs/components/inputs/input-tel-dropdown/index.md deleted file mode 100644 index f2453e8bd..000000000 --- a/docs/components/inputs/input-tel-dropdown/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Tel Dropdown ||20 - --> go to Overview diff --git a/docs/components/inputs/input-tel/index.md b/docs/components/inputs/input-tel/index.md deleted file mode 100644 index f8548f9c5..000000000 --- a/docs/components/inputs/input-tel/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input Tel ||20 - --> go to Overview diff --git a/docs/components/inputs/input/index.md b/docs/components/inputs/input/index.md deleted file mode 100644 index fe585fc3d..000000000 --- a/docs/components/inputs/input/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Input ||20 - --> go to Overview diff --git a/docs/components/inputs/listbox/index.md b/docs/components/inputs/listbox/index.md deleted file mode 100644 index 7bad9151c..000000000 --- a/docs/components/inputs/listbox/index.md +++ /dev/null @@ -1,3 +0,0 @@ -# Inputs >> Listbox ||20 - --> go to Overview diff --git a/docs/components/inputs/overview.md b/docs/components/inputs/overview.md deleted file mode 100644 index 1501de977..000000000 --- a/docs/components/inputs/overview.md +++ /dev/null @@ -1,82 +0,0 @@ -# Inputs >> Overview ||10 - -This page should be used as a starting point when first using the Form System. -It provides an overview of its essential building blocks and provides links to detailed explanations of most of its core concepts. - -## Building Blocks - -Our Form System is built from a set of very fundamental building blocks: `form control`s, `field`s and `fieldset`s. - -### Form Controls - -`Form control`s are the most fundamental building blocks of our Form System. -They are the fundament of both `field`s, and `fieldset`s and provide a normalized, predictable API throughout the whole form. Every form element inherits from `FormControlMixin`. - -`FormControlMixin` creates the default html structure and accessibility is designed to be used in conjunction with the ValidateMixin and the FormatMixin. - -## Fields - -Fields (think of an input, textarea, select) are the actual form controls the end user interacts with. They extend `LionField`, which in turn uses the `FormControlMixin`. Fields provide a normalized API for both platform components and custom made form controls. - -On top of this, they feature: - -- [formatting/parsing/serializing](../../docs/systems/form/formatting-and-parsing.md) of view values. -- Advanced [validation](../../docs/systems/form/validate.md) possibilities. -- Creation of advanced user interaction scenarios via [interaction states](../../docs/systems/form/interaction-states.md). -- Provision of labels and help texts in an easy, declarative manner. -- Accessibility out of the box. -- Advanced styling possibilities: map your own Design System to the internal HTML structure. - `Form control`s are the most fundamental building block of the Forms. They are the basis of - both `field`s and `fieldset`s, and the `form` itself. - -### Platform fields (wrappers) - -- [LionInput](./input/overview.md), a wrapper for ``. -- [LionTextarea](./textarea/overview.md), a wrapper for `