fix: use en-GB as the new default locale – backwards compatibility …

…should be given.
dnbexperience · Nov 11, 2020 · 0501b9a · 0501b9a
1 parent f418815
commit 0501b9a
Show file tree

Hide file tree

Showing 24 changed files with 255 additions and 191 deletions.
diff --git a/packages/dnb-design-system-portal/src/core/ChangeLocale.js b/packages/dnb-design-system-portal/src/core/ChangeLocale.js
@@ -1,36 +1,46 @@
 import React from 'react'
-import { ToggleButton } from 'dnb-ui-lib/src'
-// import { Dropdown } from 'dnb-ui-lib/src'
+// import { ToggleButton } from 'dnb-ui-lib/src'
+import { Dropdown } from 'dnb-ui-lib/src'
 
 import Context from 'dnb-ui-lib/src/shared/Context'
 import { setLang } from './portalProviders'
 
-export default function ChangeLocale(props) {
+export default function ChangeLocale({ showUS, ...props }) {
   const { locale, setLocale } = React.useContext(Context)
 
-  return (
-    <ToggleButton.Group
-      value={locale}
-      on_change={({ value }) => {
-        setLocale(value)
-        setLang(value)
-      }}
-      {...props}
-    >
-      <ToggleButton value="nb-NO">Norsk</ToggleButton>
-      <ToggleButton value="en-US">English</ToggleButton>
-    </ToggleButton.Group>
-  )
-
   // return (
-  //   <Dropdown
+  //   <ToggleButton.Group
   //     value={locale}
-  //     data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
-  //     on_change={({ data: { value } }) => {
+  //     on_change={({ value }) => {
   //       setLocale(value)
   //       setLang(value)
   //     }}
   //     {...props}
-  //   />
+  //   >
+  //     <ToggleButton value="nb-NO">Norsk</ToggleButton>
+  //     <ToggleButton value="en-GB">English</ToggleButton>
+  //     <ToggleButton value="en-US">English (US)</ToggleButton>
+  //     {/* <ToggleButton value="de-DE">DE</ToggleButton> */}
+  //   </ToggleButton.Group>
   // )
+
+  const date = {
+    'nb-NO': 'Norsk',
+    'en-GB': 'English (GB)'
+  }
+  if (showUS) {
+    date['en-US'] = 'English (US)'
+  }
+
+  return (
+    <Dropdown
+      value={locale}
+      data={date}
+      on_change={({ data: { value } }) => {
+        setLocale(value)
+        setLang(value)
+      }}
+      {...props}
+    />
+  )
 }
diff --git a/packages/dnb-design-system-portal/src/core/portalProviders.js b/packages/dnb-design-system-portal/src/core/portalProviders.js
@@ -10,6 +10,7 @@ import { CacheProvider } from '@emotion/core'
 import createEmotionCache from '@emotion/cache'
 
 import { Provider as EufemiaProvider } from 'dnb-ui-lib/src/shared'
+import enUS from 'dnb-ui-lib/src/shared/locales/en-US'
 import stylisPlugin from 'dnb-ui-lib/src/style/stylis'
 import { isTrue } from 'dnb-ui-lib/src/shared/component-helper'
 
@@ -29,6 +30,7 @@ export const rootElement = ({ element }) => {
       <EufemiaProvider
         skeleton={getSkeletonEnabled()} // To simulate a whole page skeleton
         locale={getLang()}
+        locales={enUS}
       >
         {element}
       </EufemiaProvider>

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.md b/packages/dnb-design-system-portal/src/docs/uilib/components/date-picker/demos.md
@@ -20,7 +20,16 @@ import ChangeLocale from 'Src/core/ChangeLocale'
 
 ## Demos
 
-<ChangeLocale label="Locale used in the demos:" label_direction="vertical" />
+<ChangeLocale bottom label="Locale used in the demos:" showUS={true} />
+
+English (US) is not included in Eufemia by default. You can include it like:
+
+```jsx
+import enUS from 'dnb-ui-lib/shared/locales/en-US'
+<EufemiaProvider locales={enUS} ...>
+	App
+</EufemiaProvider>
+```
 
 ### Range DatePicker
 

diff --git a/...es/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.md b/...es/dnb-design-system-portal/src/docs/uilib/components/date-picker/properties.md
@@ -29,15 +29,15 @@ showTabs: true
 | `link`                                      | _(optional)_ link both calendars, once to user is navigating between months. Only meant to use if range is set to ture. Defaults to `false`.                                                                                                                                                                                                                                         |
 | `sync`                                      | _(optional)_ sync input values with the calendars views. Once the input values getting changed, the calendar changes its views in sync. Defaults to `true`.                                                                                                                                                                                                                          |
 | `first_day`                                 | _(optional)_ to define the first day of the week. Defaults to `monday`.                                                                                                                                                                                                                                                                                                              |
-| `locale`                                    | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` **v2** locale object, like `import enLocale from 'date-fns/locale/en-US'`. Defaults to `nb`.                                                                                                                                                                                                       |
+| `locale`                                    | _(optional)_ to define the locale used in the calendar. Needs to be an `date-fns` **v2** locale object, like `import enLocale from 'date-fns/locale/en-GB'`. Defaults to `nb-NO`.                                                                                                                                                                                                    |
 | `align_picker`                              | _(optional)_ use `right` to change the calendar alignment direction. Defaults to `left`.                                                                                                                                                                                                                                                                                             |
 | `only_month`                                | _(optional)_ use `true` to only show the defined month. Disables the month navigation possibility. Defaults to `false`.                                                                                                                                                                                                                                                              |
 | `hide_last_week`                            | _(optional)_ use `true` to only show the last week in the current month, if it needs to be shows. The result is that there will mainly be shows five (5) weeks (rows) instead of six (6). Defaults to `false`.                                                                                                                                                                       |
 | `label`                                     | _(optional)_ a prepending label in sync with the date input field.                                                                                                                                                                                                                                                                                                                   |
 | `label_direction`                           | _(optional)_ use `label_direction="vertical"` to change the label layout direction. Defaults to `horizontal`.                                                                                                                                                                                                                                                                        |
 | `suffix`                                    | _(optional)_ text describing the content of the DatePicker more than the label. You can also send in a React component, so it gets wrapped inside the DatePicker component.                                                                                                                                                                                                          |
 | `label_sr_only`                             | _(optional)_ use `true` to make the label only readable by screen readers.                                                                                                                                                                                                                                                                                                           |
-| `shortcuts`                                 | _(optional)_ gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defiend shortcuts. More info below.                                                                                                                                                                             |
+| `shortcuts`                                 | _(optional)_ gives you the possibility to set predefined dates and date ranges so the user can select these by one click. Define either a JSON or an object with the defined shortcuts. More info below.                                                                                                                                                                             |
 | `addon_element`                             | _(optional)_ gives you the possibility to inject a React element showing up over the footer. Use it to customize `shortcuts`.                                                                                                                                                                                                                                                        |
 | `input_element`                             | _(optional)_ gives you the possibility to use a plain/vanilla `<input />` HTML element by defining it as a string `input_element="input"`, a React element, or a render function `input_element={(internalProps) => (<Return />)}`. Can also be used in circumstances where the `react-text-mask` not should be used, e.g. in testing environments. Defaults to custom masked input. |
 | `status`                                    | _(optional)_ text with a status message. The style defaults to an error message.                                                                                                                                                                                                                                                                                                     |

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/number/Examples.js
@@ -119,7 +119,7 @@ export const NumberLocales = () => (
 <H3>Numbers</H3>
 <P>
   <Number locale="nb-NO" value="-12345678.9" />
-  <Number locale="en-US" value="-12345678.9" />
+  <Number locale="en-GB" value="-12345678.9" />
   <Number locale="de-DE" value="-12345678.9" />
   <Number locale="de-CH" value="-12345678.9" />
   <Number locale="fr-CH" value="-12345678.9" />
@@ -128,7 +128,7 @@ export const NumberLocales = () => (
 <H3>Currencies</H3>
 <P>
   <Number locale="nb-NO" value="-12345.6" currency />
-  <Number locale="en-US" value="-12345.6" currency />
+  <Number locale="en-GB" value="-12345.6" currency />
   <Number locale="de-DE" value="-12345.6" currency />
   <Number locale="de-CH" value="-12345.6" currency />
   <Number locale="fr-CH" value="-12345.6" currency />

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/number/info.md b/packages/dnb-design-system-portal/src/docs/uilib/components/number/info.md
@@ -84,7 +84,7 @@ const string = cleanNumber('prefix -12.345,678 suffix') // returns -12345.678
 
 ## Node.js and SSR usage
 
-If you run the component or `format` function in [Node.js](https://nodejs.org) you have to include [ICU](https://nodejs.org/api/intl.html) data in order to display other locales than en-US. You can do this by:
+If you run the component or `format` function in [Node.js](https://nodejs.org) you have to include [ICU](https://nodejs.org/api/intl.html) data in order to display other locales than en-GB. You can do this by:
 
 - installing `npm i full-icu`
 - and call node (or jest) with an environment variable pointing to the package: `NODE_ICU_DATA=./node_modules/full-icu node ...`
@@ -98,7 +98,7 @@ You can send down the `locale` as an application wide property (Context). More i
 import Provider from 'dnb-ui-lib/shared/Provider'
 
 render(
-  <Provider locale="en-US" currency_display="code">
+  <Provider locale="en-GB" currency_display="code">
     <MyApp>
       text <Number>123</Number> table etc.
     </MyApp>

diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/patterns/payment-card/properties.md b/...ges/dnb-design-system-portal/src/docs/uilib/patterns/payment-card/properties.md
@@ -11,7 +11,7 @@ showTabs: true
 | `card_status`                               | _(optional)_ use one of these: `active`, `blocked`, `expired`. Defaults to `active`.                                                                |
 | `digits`                                    | _(optional)_ will use 8 digits if none are specified.                                                                                               |
 | `card_number`                               | _(optional)_ masked card number.                                                                                                                    |
-| `locale`                                    | _(optional)_ use `nb-NO` or `en-US`. Defaults to the Eufemia provider.                                                                              |
+| `locale`                                    | _(optional)_ use `nb-NO` or `en-GB`. Defaults to the Eufemia provider.                                                                              |
 | [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported.                                                                               |
 
 ## Card Data

diff --git a/...ges/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.md b/...ges/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.md
@@ -19,7 +19,7 @@ You can easily change one, some or all of them by using a React provider – the
 Here are the default strings located:
 
 ```js
-import enUS from 'dnb-ui-lib/shared/locales/en-US'
+import enUS from 'dnb-ui-lib/shared/locales/en-GB'
 import nbNO from 'dnb-ui-lib/shared/locales/nb-NO'
 ```
 
@@ -30,7 +30,7 @@ In React based apps, use the shared Eufemia provider:
 ```jsx
 import Provider from 'dnb-ui-lib/shared/Provider'
 
-const myLocale = 'en-US'
+const myLocale = 'en-GB'
 
 render(
   <Provider locale={myLocale}>
@@ -73,7 +73,7 @@ const ChangeLocale = () => {
 
   return <Dropdown
     value={locale}
-    data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
+    data={{ 'en-GB': 'English', 'nb-NO': 'Norsk' }}
     on_change={({ data: { value } }) => {
       setLocale(value)
     }}
@@ -160,7 +160,7 @@ render(
     locale="nb-NO"
     locales={{
       'nb-NO': nb,
-      'en-US': en
+      'en-GB': en
     }}
   >
     <Component />
@@ -178,7 +178,7 @@ import Provider from 'dnb-ui-lib/shared/Provider'
 
 const myLocale = {
   // extend the translation
-  'en-US': {
+  'en-GB': {
     myString: 'Custom string'
     myGroup: {
       subString: 'Second string'
@@ -187,7 +187,7 @@ const myLocale = {
 }
 
 render(
-  <Provider locales={myLocale} locale="en-US">
+  <Provider locales={myLocale} locale="en-GB">
     <MyApp>
       <MyComponent />
     </MyApp>

diff --git a/...es/dnb-design-system-portal/src/docs/uilib/usage/customisation/provider-info.md b/...es/dnb-design-system-portal/src/docs/uilib/usage/customisation/provider-info.md
@@ -4,7 +4,7 @@ draft: true
 
 ## Changing locale or currency
 
-You can either set the locale as a properly e.g. `<Provider locale="en-US" ...` and handle the change from the app root, or change it inside the app, respective Context:
+You can either set the locale as a properly e.g. `<Provider locale="en-GB" ...` and handle the change from the app root, or change it inside the app, respective Context:
 
 ```jsx
 import Provider from 'dnb-ui-lib/shared/Provider'
@@ -15,7 +15,7 @@ const ChangeLocale = () => {
 
   React.useEffect(() => {
     // Change the locale
-    update({ locale: 'en-US' })
+    update({ locale: 'en-GB' })
 
     // Change the default currency
     update({ currency: 'USD' })
@@ -24,7 +24,7 @@ const ChangeLocale = () => {
   return (
     <Dropdown
       value={locale}
-      data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
+      data={{ 'en-GB': 'English', 'nb-NO': 'Norsk' }}
       on_change={({ data: { value } }) => {
         setLocale(value)
       }}
@@ -59,7 +59,7 @@ const ChangeLocale = () => {
 
   React.useEffect(() => {
     // Change the locale
-    updateCurrent({ locale: 'en-US' })
+    updateCurrent({ locale: 'en-GB' })
 
     // Change the default currency
     updateCurrent({ currency: 'USD' })
@@ -68,7 +68,7 @@ const ChangeLocale = () => {
   return (
     <Dropdown
       value={locale}
-      data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
+      data={{ 'en-GB': 'English', 'nb-NO': 'Norsk' }}
       on_change={({ data: { selected_key } }) => {
         setCurrentLocale(selected_key)
       }}
@@ -77,7 +77,7 @@ const ChangeLocale = () => {
 }
 
 render(
-  <Provider locale="en-US">
+  <Provider locale="en-GB">
     <MyApp>
       <Provider locale="nb-NO">
         Norsk <Number>1234</Number>

diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -23,7 +23,7 @@ import { skeletonDOMAttributes } from '../skeleton/SkeletonHelper'
 // date-fns
 import format from 'date-fns/format'
 import nbLocale from 'date-fns/locale/nb'
-import enLocale from 'date-fns/locale/en-US'
+import enLocale from 'date-fns/locale/en-GB'
 
 import Context from '../../shared/Context'
 import Suffix from '../../shared/helpers/Suffix'
@@ -277,6 +277,7 @@ export default class DatePicker extends React.PureComponent {
       }
       return acc
     }, [])
+    console.log('this.maskList', this.maskList)
 
     if (props.end_date && !isTrue(props.range)) {
       warn(

diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js b/packages/dnb-ui-lib/src/components/date-picker/DatePickerInput.js
@@ -99,6 +99,8 @@ export default class DatePickerInput extends React.PureComponent {
         return acc
       }, [])
 
+    console.log('this.maskList', this.maskList)
+
     this._startDayRef = React.createRef()
     this._startMonthRef = React.createRef()
     this._startYearRef = React.createRef()

diff --git a/packages/dnb-ui-lib/src/components/dropdown/__tests__/Dropdown.test.js b/packages/dnb-ui-lib/src/components/dropdown/__tests__/Dropdown.test.js
@@ -334,7 +334,7 @@ describe('Dropdown component', () => {
     const Comp = mount(
       <Component
         {...props}
-        data={{ 'en-US': 'English', 'nb-NO': 'Norsk' }}
+        data={{ 'en-GB': 'English', 'nb-NO': 'Norsk' }}
         on_change={on_change}
       />
     )
@@ -348,13 +348,13 @@ describe('Dropdown component', () => {
       data: {
         __id: 0,
         content: 'English',
-        selected_key: 'en-US',
+        selected_key: 'en-GB',
         type: 'object',
-        value: 'en-US'
+        value: 'en-GB'
       },
       event: new KeyboardEvent('keydown', {}),
       selected_item: 0,
-      value: 'en-US'
+      value: 'en-GB'
     })
 
     open(Comp)

diff --git a/packages/dnb-ui-lib/src/components/number/__tests__/Number.test.js b/packages/dnb-ui-lib/src/components/number/__tests__/Number.test.js
@@ -29,7 +29,7 @@ const snapshotProps = {
 }
 
 // make it possible to change the navigator lang
-// because "navigator.language" defaults to en-US
+// because "navigator.language" defaults to en-GB
 let languageGetter, platformGetter
 
 beforeAll(() => {
@@ -122,9 +122,9 @@ describe('Number component', () => {
     expect(window.getSelection().toString()).toBe('1234.56') // Hack! Having there the "cleanedNumber" would be optimal.
     expect(window.getSelection().rangeCount).toBe(1)
 
-    Comp.setProps({ locale: 'en-US' })
+    Comp.setProps({ locale: 'en-GB' })
     const { cleanedValue: enVal } = format(-value, {
-      locale: 'en-US',
+      locale: 'en-GB',
       currency: true,
       returnAria: true
     })

diff --git a/packages/dnb-ui-lib/src/shared/Context.js b/packages/dnb-ui-lib/src/shared/Context.js
@@ -18,7 +18,7 @@ export const prepareContext = (props = {}) => {
     delete props.__newContext
   }
 
-  const key = props.locale || LOCALE
+  const key = handleLocaleFallbacks(props.locale || LOCALE, locales)
   const translation = locales[key] || defaultLocales[LOCALE] || {} // here we could use Object.freeze
 
   /**
@@ -38,6 +38,15 @@ export const prepareContext = (props = {}) => {
   }
 }
 
+function handleLocaleFallbacks(locale, locales) {
+  if (!locales[locale]) {
+    if (locale === 'en' || locale.split('-')[0] === 'en') {
+      return 'en-GB'
+    }
+  }
+  return locale
+}
+
 // If no provider is given, we use the default context from here
 const Context = React.createContext(
   prepareContext({