Merge pull request #515 from ing-bank/chore-storybook-localize
Chore storybook localize
This commit is contained in:
gerjanvangeest
GitHub
commit
bc3da1ab02
5 changed files with 46 additions and 101 deletions
|
|
@ -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>
|
||||
```
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
||||
|
|
|
|||
|
|
@ -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).
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
Loading…
Reference in a new issue