diff --git a/packages/localize/stories/10-intro.stories.mdx b/packages/localize/stories/10-intro.stories.mdx
index 9b319b052..91ca67618 100644
--- a/packages/localize/stories/10-intro.stories.mdx
+++ b/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 |
-| --------------------------------------------------------------------- | ------------------------------------------------------ |
-| [Translate Text](?path=/docs/localize-text--default-storys) | 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 Dates](?path=/docs/localize-dates--formatting) | Format dates in multiple languages |
+| Feature | Description |
+| --------------------------------------------------------------------- | --------------------------------------------- |
+| [Translate Text](?path=/docs/localize-translate-text--function-story) | Load and translate text 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 |
## How to use
diff --git a/packages/localize/stories/12-features-overview.stories.mdx b/packages/localize/stories/12-features-overview.stories.mdx
index e3ba12c9c..37f0dc298 100644
--- a/packages/localize/stories/12-features-overview.stories.mdx
+++ b/packages/localize/stories/12-features-overview.stories.mdx
@@ -4,9 +4,11 @@ import { localize, formatNumber, formatDate } from '../index.js';
-
+
-## As a function
+## Translate Text
+
+### As a 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.
diff --git a/packages/localize/stories/15-text.stories.mdx b/packages/localize/stories/15-text.stories.mdx
index 469e95ca1..e28ae8fc3 100644
--- a/packages/localize/stories/15-text.stories.mdx
+++ b/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';
-
+
-
+
-# 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`.
@@ -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
+
+
+
+For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
+
+
+
+```js
+class MessageExample extends LocalizeMixin(LitElement) {
+ render() {
+ return html`
+
+
${localize.msg('lit-html-example:body')}
+
+ `;
+ }
+}
+```
+
+For a full overview of all the features, please checkout the [Localize System Overview](?path=/docs/localize-system-overview--page).
diff --git a/packages/localize/stories/20-web-components.stories.mdx b/packages/localize/stories/20-web-components.stories.mdx
deleted file mode 100644
index 1ec7df13b..000000000
--- a/packages/localize/stories/20-web-components.stories.mdx
+++ /dev/null
@@ -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';
-
-
-
-## Web Component
-
-
-
-For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
-
-
-
-```js
-class MessageExample extends LocalizeMixin(LitElement) {
- render() {
- return html`
-
-
${localize.msg('lit-html-example:body')}
-
- `;
- }
-}
-```
-
-## Numbers
-
-To format numbers you can use `formatNumber`. For more details see [Numbers](?path=/docs/localize-system-numbers--formatting).
-
-
- {() => {
- const wrapper = document.createElement('div');
- let value = 1234.56;
- function update() {
- render(
- html`
-
-
${formatNumber(value)}
-
- `,
- wrapper,
- );
- }
- localize.addEventListener('localeChanged', () => {
- update();
- });
- update();
- const input = wrapper.querySelector('input');
- input.addEventListener('input', ev => {
- value = ev.target.value;
- update();
- });
- return wrapper;
- }}
-
-
-## Dates
-
-To format dates you can use `formatDate`. For more details see [Dates](?path=/docs/localize-system-dates--formatting).
-
-
- {() => {
- const wrapper = document.createElement('div');
- let value = '1987/05/12';
- function update() {
- render(
- html`
-
-