feat(Provider): deprecate locales in favour of translations

dnbexperience · Apr 8, 2024 · 4f218c7 · 4f218c7
1 parent 302f4d6
commit 4f218c7
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 20 deletions.
diff --git a/...es/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.mdx b/...es/dnb-design-system-portal/src/docs/uilib/usage/customisation/localization.mdx
@@ -160,7 +160,7 @@ type CustomLocales = keyof typeof customTranslation
 type CustomTranslation = (typeof customTranslation)[CustomLocales]
 
 render(
-  <Provider locales={customTranslation} locale="en-GB">
+  <Provider translations={customTranslation} locale="en-GB">
     <MyApp>
       <MyComponent />
     </MyApp>
@@ -284,7 +284,7 @@ import Provider from '@dnb/eufemia/shared/Provider'
 import customTranslation from './locales/sv-SE'
 
 render(
-  <Provider locales={customTranslation}>
+  <Provider translations={customTranslation}>
     <MyApp>Eufemia components</MyApp>
   </Provider>,
 )

diff --git a/packages/dnb-eufemia/src/extensions/forms/Field/Password/__tests__/Password.test.tsx b/packages/dnb-eufemia/src/extensions/forms/Field/Password/__tests__/Password.test.tsx
@@ -239,7 +239,7 @@ describe('Password component', () => {
     }
 
     render(
-      <Provider locales={tr}>
+      <Provider translations={tr}>
         <Password />
       </Provider>
     )

diff --git a/packages/dnb-eufemia/src/shared/Context.tsx b/packages/dnb-eufemia/src/shared/Context.tsx
@@ -155,6 +155,11 @@ export type ContextProps = ContextComponents & {
   /**
    * Overwrite existing internal translation strings or define new strings via the Provider
    */
+  translations?: Locales | TranslationCustomLocales
+
+  /**
+   * @deprecated Use `translations` instead
+   */
   locales?: Locales | TranslationCustomLocales
 
   // -- For internal use --
@@ -217,9 +222,10 @@ export type TranslationFlat = Record<
 export function prepareContext<Props>(
   props: ContextProps = {}
 ): Props & ContextProps {
-  const locales: Locales = props.locales
-    ? extend(defaultLocales, props.locales)
-    : defaultLocales
+  const locales: Locales =
+    props.translations || props.locales
+      ? extend(defaultLocales, props.translations || props.locales)
+      : defaultLocales
 
   if (props.__context__) {
     Object.assign(props, props.__context__)
@@ -242,13 +248,19 @@ export function prepareContext<Props>(
   const context = {
     // We may use that in future
     updateTranslation: (locale, translation) => {
-      context.translation = context.locales[locale] = translation
+      context.translation = (context.translations || context.locales)[
+        locale
+      ] = translation
     },
     getTranslation: (props) => {
       if (props) {
         const lang = props.lang || props.locale
-        if (lang && context.locales[lang] && lang !== key) {
-          return context.locales[lang]
+        if (
+          lang &&
+          (context.translations || context.locales)[lang] &&
+          lang !== key
+        ) {
+          return (context.translations || context.locales)[lang]
         }
       }
       return context.translation

diff --git a/packages/dnb-eufemia/src/shared/__tests__/Provider.test.tsx b/packages/dnb-eufemia/src/shared/__tests__/Provider.test.tsx
@@ -32,7 +32,7 @@ describe('Provider', () => {
   }
 
   const LocalProvider = (props: ProviderProps) => {
-    return <Provider locales={defaultLocales} {...props} />
+    return <Provider translations={defaultLocales} {...props} />
   }
 
   const ChangeLocale = () => {

diff --git a/packages/dnb-eufemia/src/shared/__tests__/Translation.test.tsx b/packages/dnb-eufemia/src/shared/__tests__/Translation.test.tsx
@@ -29,7 +29,7 @@ describe('Translation', () => {
 
   it('"getTranslation" should return requested string inside render', () => {
     render(
-      <Provider locales={defaultLocales}>
+      <Provider translations={defaultLocales}>
         <span className="getTranslation">
           {getTranslation('other.string', {
             foo: 'foo',
@@ -47,7 +47,7 @@ describe('Translation', () => {
 
   it('"Translation" should return requested string inside render', () => {
     render(
-      <Provider locales={defaultLocales}>
+      <Provider translations={defaultLocales}>
         <span className="Translation">
           <Translation id="other.string" foo="foo" bar="bar" max="max" />
         </span>

diff --git a/packages/dnb-eufemia/src/shared/__tests__/useTranslation.test.tsx b/packages/dnb-eufemia/src/shared/__tests__/useTranslation.test.tsx
@@ -121,7 +121,7 @@ describe('useTranslation without an ID', () => {
     }
 
     const { rerender } = render(
-      <Provider locales={customTranslation} locale="en-GB">
+      <Provider translations={customTranslation} locale="en-GB">
         <MyComponent />
       </Provider>
     )
@@ -131,7 +131,7 @@ describe('useTranslation without an ID', () => {
     )
 
     rerender(
-      <Provider locales={customTranslation} locale="nb-NO">
+      <Provider translations={customTranslation} locale="nb-NO">
         <MyComponent />
       </Provider>
     )
@@ -161,7 +161,7 @@ describe('useTranslation without an ID', () => {
 
     const result = renderHook(() => useTranslation(), {
       wrapper: ({ children }) => (
-        <Provider locales={customTranslation} locale="en-GB">
+        <Provider translations={customTranslation} locale="en-GB">
           {children}
         </Provider>
       ),
@@ -249,7 +249,7 @@ describe('useTranslation with an ID', () => {
 
     it('"useTranslation" should have valid strings inside render', () => {
       render(
-        <Provider locales={defaultLocales}>
+        <Provider translations={defaultLocales}>
           <output>
             <RenderGetTranslation />
           </output>
@@ -263,7 +263,7 @@ describe('useTranslation with an ID', () => {
 
     it('should change to requested locale', () => {
       render(
-        <Provider locales={defaultLocales}>
+        <Provider translations={defaultLocales}>
           <output>
             <RenderGetTranslation />
           </output>
@@ -284,12 +284,12 @@ describe('useTranslation with an ID', () => {
 
     it('should have valid strings inside render', () => {
       render(
-        <Provider locales={defaultLocales}>
+        <Provider translations={defaultLocales}>
           <span className="root">
             <Translation id="other.string" foo="foo" bar="bar" max="max" />
           </span>
 
-          <Provider locales={nestedLocales}>
+          <Provider translations={nestedLocales}>
             <span className="nested">
               <RenderGetTranslation />
             </span>

diff --git a/packages/dnb-eufemia/src/shared/stories/Translation.stories.tsx b/packages/dnb-eufemia/src/shared/stories/Translation.stories.tsx
@@ -139,7 +139,7 @@ function MyComponent() {
 
 export function CustomTranslation() {
   return (
-    <Provider locales={customTranslation} locale="en-GB">
+    <Provider translations={customTranslation} locale="en-GB">
       <MyComponent />
     </Provider>
   )