Merge pull request #515 from ing-bank/chore-storybook-localize

Chore storybook localize

packages/input/stories/index.stories.mdx

@@ -207,6 +207,7 @@ Our default validators come with default translations already.
     return html`
       <lion-input
         label="Value"
+        .modelValue=${'Too long input'}
         .validators=${[new MaxLength(5)]}
       ></lion-input>
       <button @click=${() => localize.locale = 'de-DE'}>DE</button>
@@ -217,3 +218,11 @@ Our default validators come with default translations already.
     `;
   }}
 </Story>
+
+```html
+<lion-input
+  label="Value"
+  .modelValue=${'Too long input'}
+  .validators=${[new MaxLength(5)]}
+></lion-input>
+```

packages/localize/stories/10-intro.stories.mdx

@@ -15,16 +15,15 @@ In it's simplest form it is a function that returns the translated text for a na
 - Formatting of numbers, amounts
 - Formatting of dates
 
-Further examples can be seen at [Features Overview Demo](?path=/docs/localize-intro--page) and a more in depth description can be found at [Localize System Overview](?path=/docs/localize-system-overview--page).
+Further examples can be seen at [Features Overview Demo](?path=/docs/localize-features-overview--translate-text) and a more in depth description can be found at [Localize System Overview](?path=/docs/localize-system-overview--page).
 
 ## Content
 
-| Feature                                                               | Description                                            |
+| Feature                                                               | Description                                   |
-| --------------------------------------------------------------------- | ------------------------------------------------------ |
+| --------------------------------------------------------------------- | --------------------------------------------- |
-| [Translate Text](?path=/docs/localize-text--default-storys)           | Load and translate text in multiple languages          |
+| [Translate Text](?path=/docs/localize-translate-text--function-story) | Load and translate text in multiple languages |
-| [Web Components](?path=/docs/localize-web-components--default-story)  | Use translations within a web component                |
+| [Format Numbers](?path=/docs/localize-numbers--formatting)            | Format numbers in multiple languages          |
-| [Format Numbers](?path=/docs/localize-numbers--formatting)           | Format numbers in multiple languages                   |
+| [Format Dates](?path=/docs/localize-dates--formatting)                | Format dates in multiple languages            |
-| [Format Dates](?path=/docs/localize-dates--formatting)             | Format dates in multiple languages                   |
 
 ## How to use
 

packages/localize/stories/12-features-overview.stories.mdx

@@ -4,9 +4,11 @@ import { localize, formatNumber, formatDate } from '../index.js';
 
 <Meta title="Localize/Features Overview" />
 
-<Story name="Default"></Story>
+<Story name="Translate text"></Story>
 
-## As a function
+## Translate Text
+
+### As a function
 
 <Story id="localize-system-internals--as-function" />
 
@@ -16,7 +18,7 @@ localize.msg('lit-html-example:body'); // for nl-NL: Ik kom uit Nederland
 // ...
 ```
 
-## Web Component
+### Web Component
 
 For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
 

packages/localize/stories/15-text.stories.mdx

@@ -2,14 +2,14 @@ import { Story, Meta, html } from '@open-wc/demoing-storybook';
 import { render } from '@lion/core';
 import { localize, formatNumber, formatDate } from '../index.js';
 
-<Meta title="Localize/Text" />
+<Meta title="Localize/Translate Text" />
 
-<Story name="Default"></Story>
+<Story name="Function"></Story>
 
-# Localize
+# Translate Text
 
 Is meant to translate text into multiple languages.
-In it's simplest form it is a function that returns the translated text for a namespace + key.
+In it's simplest form it is a function that returns the translated text for a `namespace` + `key`.
 
 <Story id="localize-system-internals--as-function" />
 
@@ -18,3 +18,25 @@ localize.msg('lit-html-example:body'); // for en-GB: I am from England
 localize.msg('lit-html-example:body'); // for nl-NL: Ik kom uit Nederland
 // ...
 ```
+
+## Web Component
+
+<Story name="Web component"></Story>
+
+For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
+
+<Story id="localize-system-internals--web-component" />
+
+```js
+class MessageExample extends LocalizeMixin(LitElement) {
+  render() {
+    return html`
+      <div aria-live="polite">
+        <p>${localize.msg('lit-html-example:body')}</p>
+      </div>
+    `;
+  }
+}
+```
+
+For a full overview of all the features, please checkout the [Localize System Overview](?path=/docs/localize-system-overview--page).

packages/localize/stories/20-web-components.stories.mdx

@@ -1,87 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { render } from '@lion/core';
-import { localize, formatNumber, formatDate } from '../index.js';
-
-<Meta title="Localize/Web Components" />
-
-## Web Component
-
-<Story name="Default"></Story>
-
-For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
-
-<Story id="localize-system-internals--web-component" />
-
-```js
-class MessageExample extends LocalizeMixin(LitElement) {
-  render() {
-    return html`
-      <div aria-live="polite">
-        <p>${localize.msg('lit-html-example:body')}</p>
-      </div>
-    `;
-  }
-}
-```
-
-## Numbers
-
-To format numbers you can use `formatNumber`. For more details see [Numbers](?path=/docs/localize-system-numbers--formatting).
-
-<Story name="Numbers">
-  {() => {
-    const wrapper = document.createElement('div');
-    let value = 1234.56;
-    function update() {
-      render(
-        html`
-          <input type="text" value=${value} />
-          <p>${formatNumber(value)}</p>
-          <sb-locale-switcher></sb-locale-switcher>
-        `,
-        wrapper,
-      );
-    }
-    localize.addEventListener('localeChanged', () => {
-      update();
-    });
-    update();
-    const input = wrapper.querySelector('input');
-    input.addEventListener('input', ev => {
-      value = ev.target.value;
-      update();
-    });
-    return wrapper;
-  }}
-</Story>
-
-## Dates
-
-To format dates you can use `formatDate`. For more details see [Dates](?path=/docs/localize-system-dates--formatting).
-
-<Story name="Dates">
-  {() => {
-    const wrapper = document.createElement('div');
-    let value = '1987/05/12';
-    function update() {
-      render(
-        html`
-          <input type="text" value=${value} />
-          <p>${formatDate(new Date(value))}</p>
-          <sb-locale-switcher></sb-locale-switcher>
-        `,
-        wrapper,
-      );
-    }
-    localize.addEventListener('localeChanged', () => {
-      update();
-    });
-    update();
-    const input = wrapper.querySelector('input');
-    input.addEventListener('input', ev => {
-      value = ev.target.value;
-      update();
-    });
-    return wrapper;
-  }}
-</Story>