Merge pull request #19896 from mozilla/FXA-10885

fix(storybook): fix local storybooks not localized

Author: MagentaManifold

packages/fxa-react/components/AppErrorDialog/index.stories.tsx

@@ -9,26 +9,17 @@ import AppLocalizationProvider from '../../lib/AppLocalizationProvider';
 
 storiesOf('Components/AppErrorDialog', module)
   .add('basic', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <AppErrorDialog />
     </AppLocalizationProvider>
   ))
   .add('general with errors', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <AppErrorDialog errorType="general" />
     </AppLocalizationProvider>
   ))
   .add('invalid query parameters', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <AppErrorDialog errorType="query-parameter-violation" />
     </AppLocalizationProvider>
   ));

packages/fxa-react/components/Footer/index.stories.tsx

@@ -8,10 +8,7 @@ import { Footer } from './index';
 import AppLocalizationProvider from '../../lib/AppLocalizationProvider';
 
 storiesOf('Components/Footer', module).add('default', () => (
-  <AppLocalizationProvider
-    baseDir="./locales"
-    userLocales={navigator.languages}
-  >
+  <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
     <Footer />
   </AppLocalizationProvider>
 ));

packages/fxa-react/components/Header/index.stories.tsx

@@ -9,18 +9,12 @@ import AppLocalizationProvider from '../../lib/AppLocalizationProvider';
 
 storiesOf('Components/Header', module)
   .add('basic', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <Header left={<div>left content</div>} right={<div>right content</div>} />
     </AppLocalizationProvider>
   ))
   .add('with LogoLockup', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <Header
         left={<LogoLockup>Some title</LogoLockup>}
         right={<div>right content</div>}

packages/fxa-react/components/LinkExternal/index.stories.tsx

@@ -7,10 +7,7 @@ import LinkExternal from './index';
 import AppLocalizationProvider from '../../lib/AppLocalizationProvider';
 
 storiesOf('Components/LinkExternal', module).add('basic', () => (
-  <AppLocalizationProvider
-    baseDir="./locales"
-    userLocales={navigator.languages}
-  >
+  <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
     <LinkExternal href="https://mozilla.org">
       Keep the internet open and accessible to all.
     </LinkExternal>

packages/fxa-react/components/LoadingSpinner/index.stories.tsx

@@ -8,26 +8,17 @@ import AppLocalizationProvider from '../../lib/AppLocalizationProvider';
 
 storiesOf('Components/LoadingSpinner', module)
   .add('default', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <LoadingSpinner />
     </AppLocalizationProvider>
   ))
   .add('blue', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <LoadingSpinner spinnerType={SpinnerType.Blue} />
     </AppLocalizationProvider>
   ))
   .add('white', () => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       <div className="bg-grey-700">
         <LoadingSpinner spinnerType={SpinnerType.White} />
       </div>

packages/fxa-react/lib/storybooks.tsx

@@ -15,10 +15,7 @@ import {
 // If a localized string is available, that will be rendered in the storybook,
 // otherwise the fallback strings will be displayed.
 export const withLocalization: Decorator = (Story) => (
-  <AppLocalizationProvider
-    baseDir="./locales"
-    userLocales={navigator.languages}
-  >
+  <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
     <Story />
   </AppLocalizationProvider>
 );

packages/fxa-settings/src/components/CardLoadingSpinner/index.stories.tsx

@@ -10,10 +10,7 @@ import AppLocalizationProvider from 'fxa-react/lib/AppLocalizationProvider';
 
 storiesOf('Components/CardLoadingSpinner', module)
   .addDecorator((story) => (
-    <AppLocalizationProvider
-      baseDir="./locales"
-      userLocales={navigator.languages}
-    >
+    <AppLocalizationProvider baseDir="." userLocales={navigator.languages}>
       {story()}
     </AppLocalizationProvider>
   ))

packages/fxa-settings/src/lib/config.ts

@@ -118,7 +118,7 @@ export function getDefault() {
     env: 'development',
     l10n: {
       strict: false,
-      baseUrl: '/settings/locales',
+      baseUrl: '/settings/static',
     },
     marketingEmailPreferencesUrl: 'https://basket.mozilla.org/fxa/',
     metrics: {