From ae54208bfd4135e30c6d071a1603ac9b8cf1efc5 Mon Sep 17 00:00:00 2001 From: qa46hx Date: Wed, 22 Jan 2020 10:17:56 +0100 Subject: [PATCH 1/2] chore(localize): reorder storybook demos --- .../localize/stories/10-intro.stories.mdx | 13 ++- .../stories/12-features-overview.stories.mdx | 8 +- packages/localize/stories/15-text.stories.mdx | 30 ++++++- .../stories/20-web-components.stories.mdx | 87 ------------------- 4 files changed, 37 insertions(+), 101 deletions(-) delete mode 100644 packages/localize/stories/20-web-components.stories.mdx 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` - -

${formatDate(new Date(value))}

- - `, - wrapper, - ); - } - localize.addEventListener('localeChanged', () => { - update(); - }); - update(); - const input = wrapper.querySelector('input'); - input.addEventListener('input', ev => { - value = ev.target.value; - update(); - }); - return wrapper; - }} - From 332075d68e7aa9249e24ffff84432969ad38d65f Mon Sep 17 00:00:00 2001 From: qa46hx Date: Wed, 22 Jan 2020 10:18:27 +0100 Subject: [PATCH 2/2] chore(input): update storybook validation demo --- packages/input/stories/index.stories.mdx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/input/stories/index.stories.mdx b/packages/input/stories/index.stories.mdx index 4aacd7f09..931a32df8 100644 --- a/packages/input/stories/index.stories.mdx +++ b/packages/input/stories/index.stories.mdx @@ -207,6 +207,7 @@ Our default validators come with default translations already. return html` @@ -217,3 +218,11 @@ Our default validators come with default translations already. `; }} + +```html + +```