Merge pull request #1622 from ing-bank/chore/update-header

chore: update header order, components list and links

.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

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;
+}

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
 

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

docs/blog/ing-open-sources-lion.md

@@ -210,7 +210,7 @@ Excellent! Lea can now use the tabs component like so:
 </lea-tabs>
 ```
 
-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.
 

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) <br>
    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) <br>
-   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.
+   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. [Docs](../docs/index.md) <br>
+3. [Fundamentals](../fundamentals/index.md) <br>
    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) <br>
    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
 

docs/components/accordion/index.md

@@ -1,3 +1,3 @@
-# Icons >> Icon
+# Accordion
 
 -> go to Overview

docs/components/accordion/overview.md

@@ -1,4 +1,4 @@
-# Content >> Accordion >> Overview ||10
+# Accordion >> Overview ||10
 
 <p class="lion-paragraph--emphasis">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.</p>
 
@@ -74,54 +74,54 @@ export const overview = () => previewHtml`<my-component></my-component>`;
 
 1. Install
 
-  ```bash
+```bash
-  npm i --save @lion/accordion
+npm i --save @lion/accordion
-  ```
+```
 
 2. Use scoped registry
 
-  ```js
+```js
-  import { html, LitElement, ScopedElementsMixin } from '@lion/core';
+import { html, LitElement, ScopedElementsMixin } from '@lion/core';
-  import { LionAccordion } from '@lion/accordion';
+import { LionAccordion } from '@lion/accordion';
 
-  class MyComponent extends ScopedElementsMixin(LitElement) {
+class MyComponent extends ScopedElementsMixin(LitElement) {
-    static get scopedElements() {
+  static get scopedElements() {
-      return { 'lion-accordion': LionAccordion };
+    return { 'lion-accordion': LionAccordion };
-    }
-    render() {
-      return html`
-        <lion-accordion>
-          <h3 slot="invoker">
-            <button>Nutritional value</button>
-          </h3>
-          <p slot="content">
-            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).
-          </p>
-        </lion-accordion>
-      `;
-    }
   }
-  ```
+  render() {
+    return html`
+      <lion-accordion>
+        <h3 slot="invoker">
+          <button>Nutritional value</button>
+        </h3>
+        <p slot="content">
+          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).
+        </p>
+      </lion-accordion>
+    `;
+  }
+}
+```
 
 3. Use html
 
-  ```html
+```html
-  <script type="module">
+<script type="module">
-    import '@lion/accordion/define';
+  import '@lion/accordion/define';
-  </script>
+</script>
 
-  <lion-accordion>
+<lion-accordion>
-    <h3 slot="invoker">
+  <h3 slot="invoker">
-      <button>Nutritional value</button>
+    <button>Nutritional value</button>
-    </h3>
+  </h3>
-    <p slot="content">
+  <p slot="content">
-      Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat
+    Orange flesh is 87% water, 12% carbohydrates, 1% protein, and contains negligible fat (table).
-      (table). In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich
+    In a 100 gram reference amount, orange flesh provides 47 calories, and is a rich source of
-      source of vitamin C, providing 64% of the Daily Value. No other micronutrients are present in
+    vitamin C, providing 64% of the Daily Value. No other micronutrients are present in significant
-      significant amounts (table).
+    amounts (table).
-    </p>
+  </p>
-  </lion-accordion>
+</lion-accordion>
-  ```
+```

docs/components/accordion/reference.md

@@ -1,4 +1,4 @@
-# Content >> Accordion >> Reference ||30
+# Accordion >> Reference ||30
 
 <p class="lion-paragraph--emphasis">Everything you need to re-use the accordion.</p>
 

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

docs/components/button/examples.md

@@ -1,4 +1,4 @@
-# Interaction >> Button >> Examples ||30
+# Button >> Examples ||30
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

docs/components/button/index.md

@@ -1,3 +1,3 @@
-# Content >> Tabs
+# Button ||10
 
 -> go to Overview

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.
 

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

docs/components/calendar/index.md

@@ -0,0 +1,3 @@
+# Calendar ||10
+
+-> go to Overview

docs/components/calendar/overview.md

@@ -1,4 +1,4 @@
-# Inputs >> Calendar >> Overview ||10
+# Calendar >> Overview ||10
 
 A reusable and accessible calendar view web component.
 

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

docs/components/checkbox-group/index.md

@@ -0,0 +1,3 @@
+# Checkbox Group ||10
+
+-> go to Overview

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 `<input type="checkbox">` 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.

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

docs/components/collapsible/examples.md

@@ -1,4 +1,4 @@
-# Content >> Collapsible >> Examples ||30
+# Collapsible >> Examples ||30
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

docs/components/collapsible/index.md

@@ -0,0 +1,3 @@
+# Collapsible ||10
+
+-> go to Overview

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.
 

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

docs/components/combobox/examples.md

@@ -1,4 +1,4 @@
-# Inputs >> Combobox >> Examples ||30
+# Combobox >> Examples ||30
 
 ```js script
 import { html } from '@mdjs/mdjs-preview';

docs/components/combobox/index.md

@@ -0,0 +1,3 @@
+# Combobox ||10
+
+-> go to Overview

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:
 

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:
 

docs/components/content/accordion/index.md

@@ -1,3 +0,0 @@
-# Content >> Accordion
-
--> go to Overview

docs/components/content/collapsible/index.md

@@ -1,3 +0,0 @@
-# Content >> Collapsible
-
--> go to Overview

docs/components/content/index.md

@@ -1 +0,0 @@
-# Content ||10

docs/components/content/progress-indicator/index.md

@@ -1,3 +0,0 @@
-# Content >> Progress Indicator
-
--> go to Overview

docs/components/dialog/index.md

@@ -0,0 +1,3 @@
+# Dialog ||20
+
+-> go to Overview

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

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.

docs/components/fieldset/index.md

@@ -0,0 +1,3 @@
+# Fieldset ||20
+
+-> go to Overview

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)
+- Advanced user interaction scenarios via [interaction states](../../fundamentals/systems/form/interaction-states.md)
-- Can have [validate](../../../docs/systems/form/validate.md) on fieldset level and shows the validation feedback below the fieldset
+- 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
 

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

docs/components/form/index.md

@@ -0,0 +1,3 @@
+# Form ||20
+
+-> go to Overview

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
 

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

docs/components/icon/index.md

@@ -0,0 +1,3 @@
+# Icon ||20
+
+-> go to Overview

docs/components/icon/overview.md

@@ -1,4 +1,4 @@
-# Icons >> Icon >> Overview ||10
+# Icon >> Overview ||10
 
 A web component for displaying icons.
 

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`

docs/components/icons/index.md

@@ -1 +0,0 @@
-# Icons ||30

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) <br>
+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).
-   Everything to help you organize your content.
-2. [Icons](./icons/icon/overview.md) <br>
-   Loading and displaying icons.
-3. [Inputs](./inputs/overview.md) <br>
-   Input components that let you make complex forms with ease, including validation.
-4. [Interaction](./interaction/button/overview.md) <br>
-   A set of interactive components like dialogs, tooltips, buttons and switches.
-5. [Navigation](./navigation/pagination/overview.md) <br>
-   Navigational components like pagination and steps.

docs/components/input-amount/index.md

@@ -0,0 +1,3 @@
+# Input Amount ||20
+
+-> go to Overview

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

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