From e62f55ef69a56fe6db605f2ca3f4ed1fb343add5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Thu, 28 Nov 2019 21:31:59 +0100 Subject: [PATCH] docs: enhance localization docs --- .../uilib/about-the-lib/releases/v6-info.md | 8 +- .../uilib/components/number/number-info.md | 6 +- .../components/number/number-provider.md | 8 +- .../src/docs/uilib/usage/customisation.md | 2 + .../uilib/usage/customisation/localization.md | 156 ++++++++++++++++++ .../usage/customisation/styling/polyfill.md | 6 +- 6 files changed, 175 insertions(+), 11 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.md diff --git a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v6-info.md b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v6-info.md index e58ee99b1dd..00fafe27719 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v6-info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/about-the-lib/releases/v6-info.md @@ -3,7 +3,9 @@ - [Migration](#migration) - [New DNB font](#new-dnb-font) **(major change)** - [Color changes](#color-changes) **(feature and major change)** -- [Icon changes](#icon-changes) **(feature)** +- [New Icons](#new-icons) **(feature)** +- [Localization](#localization) **(feature)** +- [Other features](#other-features) **(features)** - [Resources package](#resources-package) **(feature)** - [How to Install](#install) @@ -83,6 +85,10 @@ import { } from 'dnb-ui-lib/icons/secondary' ``` +## Localization + +With v6 the `dnb-ui-lib` has it's own localization to be used both for component translation and your app strings. Read [more about how to use localization](/uilib/usage/customisation/localization). + ## Other features - [FormLabel](/uilib/components/form-label) got a new prop `sr_only`. This way you still can provide a **label**, but available only for screen readers. diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-info.md index 4d3fceffaa9..a1e75b1173b 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-info.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-info.md @@ -94,10 +94,10 @@ You can send down the `locale` as an application wide property (Context). More i import Provider from 'dnb-ui-lib/shared/Provider' render( - - + + text 123 table etc. - + ) ``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-provider.md b/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-provider.md index b68cefca408..a7fcd645493 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-provider.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/number/number-provider.md @@ -4,7 +4,7 @@ draft: true ## Changing locale or currency -You can either set the locale as a properly e.g. ` { const { update, locale } = React.useContext(Context) // Change the locale - update({ locale: 'en' }) + update({ locale: 'en-US' }) // Change the default currency update({ currency: 'USD' }) @@ -24,10 +24,10 @@ const ChangeLocale = () => { render( - + text 123 table etc. - + ) ``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation.md index fe017597c08..aa79b75217f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation.md @@ -20,6 +20,8 @@ For details, have a look at the submenu for all the customizations topics: - [Polyfill](/uilib/usage/customisation/styling/polyfill) - [Colors](/uilib/usage/customisation/colors) - [Theming](/uilib/usage/customisation/theming) +- [Theming](/uilib/usage/customisation/theming) +- [Locale / Translation](/uilib/usage/customisation/localization) ## Favicon and manifest diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.md new file mode 100644 index 00000000000..ffda917dc76 --- /dev/null +++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.md @@ -0,0 +1,156 @@ +--- +title: 'Locale / Translation' +draft: false +order: 8 +--- + +# Localization + +The default constants are defined in the `/shared/defaults.js` file. + +- The default locale of all components texts is: `nb-NO`. +- The default currency is: `NOK` + +## How set the locale + +In React based apps, use the shared provider: + +```jsx +import Provider from 'dnb-ui-lib/shared/Provider' + +render( + + Eufemia components + +) +``` + +## How change the locale + +You can even change the locale during runtime. + +```jsx +import Provider from 'dnb-ui-lib/shared/Provider' +import Context from 'dnb-ui-lib/shared/Context' + +const ChangeLocale = () => { + const { setLocale, locale } = React.useContext(Context) + + React.useEffect(() => { + setLocale('en-US') + }, []) + + return <>{/* e.g. a Dropdown */} +} + +render( + + + ... + + ... + + +) +``` + +## How add your own strings + +It is possible to use the Eufemia shared Provider for your own project / App localization. + +```js +import Provider from 'dnb-ui-lib/shared/Provider' +import enUS from 'dnb-ui-lib/shared/locales/en-US'' + +const myLocale = { + ...enUS, + + // and extend the translation + 'en-US': { + myString: 'Custom string' + myGroup: { + subString: 'Second string' + } + } +} + +render( + + + + + +) +``` + +... and consume the strings in your components, like **MyComponent**: + +```jsx +import Context from 'dnb-ui-lib/shared/Context' + +export default function MyComponent() { + const { translation } = React.useContext(Context) + return <>{translation.myString} +} +``` + +## How to handle locales + +Create a new file containing all the strings: + +```js +export default { + 'sv-SE': { + DatePicker: { + submit_button_text: 'OK' + }, + Modal: { + close_title: 'Stänga' + }, + Logo: { + alt: 'DNB Logo' + } + } +} +``` + +And add the file, like so: + +```jsx +import Provider from 'dnb-ui-lib/shared/Provider' +import myLocale from './locales/sv-SE' + +render( + + Eufemia components + +) +``` + +or add it on the fly: + +```jsx +import Provider from 'dnb-ui-lib/shared/Provider' +import Context from 'dnb-ui-lib/shared/Context' + +import myLocale from './locales/sv-SE' + +const ChangeLocale = () => { + const { update, locale } = React.useContext(Context) + + // Add new locales + update({ locales: myLocale, locale: 'sv-SE' }) + + return locale +} + +render( + + + ... + + ... + + +) +``` diff --git a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md index 5fa55c4ef4c..e7ed091848f 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md +++ b/packages/dnb-design-system-portal/src/docs/uilib/usage/customisation/styling/polyfill.md @@ -77,7 +77,7 @@ import { StyleSheetManager } from 'styled-components' render( - + ) ``` @@ -94,7 +94,7 @@ const stylisPlugin = withProperties({ render( - + ) ``` @@ -112,7 +112,7 @@ const emotionCache = createEmotionCache({ render( - + ) ```