Render the script switch button on the header container on storybook

.storybook/preview.tsx

@@ -538,6 +538,12 @@ const preview: Preview = {
       },
     },
   },
+  initialGlobals: {
+    service: {
+      service: 'news',
+      variant: 'default',
+    },
+  },
   parameters: {
     passArgsFirst: false,
     options: {

.storybook/withServicesDecorator/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import path from 'ramda/src/path';
 import { Helmet } from 'react-helmet';
+import { StoryProps } from '#app/models/types/storybook';
+import { Services, Variants } from '#app/models/types/global';
 import TEXT_VARIANTS from './text-variants';
 import arabic from '../../src/app/components/ThemeProvider/fontScripts/arabic';
 import bengali from '../../src/app/components/ThemeProvider/fontScripts/bengali';
@@ -13,13 +14,8 @@ import noAscendersOrDescenders from '../../src/app/components/ThemeProvider/font
 import sinhalese from '../../src/app/components/ThemeProvider/fontScripts/sinhalese';
 import tamil from '../../src/app/components/ThemeProvider/fontScripts/tamil';
 import thai from '../../src/app/components/ThemeProvider/fontScripts/thai';
-import { Services } from '../../src/app/models/types/global';
 
-const DEFAULT_SERVICE = 'news';
-const getVariant = (selectedService: Services) =>
-  path([selectedService, 'variant']);
-const getService = (selectedService: Services) =>
-  path([selectedService, 'service']);
+const DEFAULT_VARIANT = 'default';
 
 const scripts = {
   arabic,
@@ -41,25 +37,31 @@ const scripts = {
   thai,
 };
 
-export default (overrideProps?: { defaultService?: Services }) =>
+export default () =>
   (
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    story: (storyProps: any) => JSX.Element,
+    story: (storyProps: StoryProps) => JSX.Element,
     {
       globals: {
-        service: { service: selectedService },
+        service: { service: globalService, variant: globalVariant },
         isLite,
       },
-    } = { globals: { service: { service: DEFAULT_SERVICE }, isLite: false } },
+    }: {
+      globals: {
+        service: {
+          service: Services;
+          variant: Variants;
+        };
+        isLite: boolean;
+      };
+    },
   ) => {
-    const defaultServiceOverride = overrideProps?.defaultService;
-    const serviceToUse = defaultServiceOverride || selectedService;
+    let serviceLookup: string = globalService;
 
-    const variant = getVariant(serviceToUse as Services)(TEXT_VARIANTS);
+    if (globalVariant !== DEFAULT_VARIANT) {
+      serviceLookup = `${globalService}-${globalVariant}`;
+    }
 
-    const service = variant
-      ? getService(serviceToUse as Services)(TEXT_VARIANTS)
-      : serviceToUse;
+    const textOverrides = TEXT_VARIANTS[serviceLookup];
 
     const {
       text,
@@ -69,7 +71,7 @@ export default (overrideProps?: { defaultService?: Services }) =>
       locale,
       dir = 'ltr',
       timezone = 'GMT',
-    } = TEXT_VARIANTS[serviceToUse];
+    } = textOverrides || {};
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const storyProps: any = {
@@ -79,9 +81,8 @@ export default (overrideProps?: { defaultService?: Services }) =>
       script: scripts[script as keyof typeof scripts],
       locale,
       dir,
-      service,
-      variant: variant || 'default',
-      selectedService: serviceToUse,
+      service: textOverrides?.service || globalService,
+      variant: textOverrides?.variant || globalVariant,
       timezone,
       isLite,
     };

.storybook/withServicesDecorator/text-variants.ts

@@ -286,7 +286,7 @@ const TEXT_VARIANTS: Record<string, TextVariant> = {
     timezone: 'GMT',
     articlePath: '/russian/articles/ck7pz7re3zgo',
   },
-  serbianCyr: {
+  'serbian-cyr': {
     service: 'serbian',
     variant: 'cyr',
     text: 'Караџић се годинама крио пре него што је ухапшен 2008. године',
@@ -297,7 +297,7 @@ const TEXT_VARIANTS: Record<string, TextVariant> = {
     timezone: 'GMT',
     articlePath: '/serbian/articles/c805k05kr73o/cyr',
   },
-  serbianLat: {
+  'serbian-lat': {
     service: 'serbian',
     variant: 'lat',
     text: 'Karadžić se godinama krio pre nego što je uhapšen 2008. godine',
@@ -389,7 +389,7 @@ const TEXT_VARIANTS: Record<string, TextVariant> = {
     timezone: 'Asia/Istanbul',
     articlePath: '/turkce/articles/c8q1ze59n25o',
   },
-  ukchinaSimp: {
+  'ukchina-simp': {
     service: 'ukchina',
     variant: 'simp',
     text: '该计划的批评者说，这个政策不能解决住房短缺的问题',
@@ -400,7 +400,7 @@ const TEXT_VARIANTS: Record<string, TextVariant> = {
     timezone: 'GMT',
     articlePath: '/ukchina/articles/c0e8weny66ko/simp',
   },
-  ukchinaTrad: {
+  'ukchina-trad': {
     service: 'ukchina',
     variant: 'trad',
     text: '該計劃的批評者說，這個政策不能解決住房短缺的問題',
@@ -457,7 +457,7 @@ const TEXT_VARIANTS: Record<string, TextVariant> = {
     timezone: 'Africa/Lagos',
     articlePath: '/yoruba/articles/clw06m0nj8qo',
   },
-  zhongwenSimp: {
+  'zhongwen-simp': {
     service: 'zhongwen',
     variant: 'simp',
     text: '郑文杰：中国警方公布“嫖娼证据” 引发中港网友论战',
@@ -468,7 +468,7 @@ const TEXT_VARIANTS: Record<string, TextVariant> = {
     timezone: 'GMT',
     articlePath: '/zhongwen/articles/c3xd4x9prgyo/simp',
   },
-  zhongwenTrad: {
+  'zhongwen-trad': {
     service: 'zhongwen',
     variant: 'trad',
     text: '鄭文傑：中國警方公布「嫖娼證據」 引發中港網友論戰',

docs/Writing-Storybook-Stories.mdx

@@ -187,16 +187,3 @@ const Component = () => (
 
 This will ensure that the service being rendered is `mundo`, in this example. This is useful for creating stories to demonstrate layout for left-to-right and right-to-left languages.
 
-## Overriding the default service
-
-You can automatically set the `service` for a story by using the `withServicesDecorator` function. To do this, import the function and add it to the `decorators` array in the default export for the story. For example:
-
-```tsx
-import { withServicesDecorator } from '#storybook/withServicesDecorator';
-
-export default {
-  title: 'MyFirstStory',
-  component: Component,
-  decorators: [withServicesDecorator({ defaultService: 'mundo' })],
-};
-```

src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/index.stories.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { RequestContextProvider } from '#contexts/RequestContext';
 import { ToggleContextProvider } from '#contexts/ToggleContext';
 import { ServiceContextProvider } from '#contexts/ServiceContext';
-import withServicesDecorator from '#storybook/withServicesDecorator';
 import { indonesian, arabic } from './fixtures';
 import RecentAudioEpisodes from './index';
 
@@ -41,26 +40,42 @@ const masterBrands = {
 export default {
   title: 'Containers/Episode List/Audio',
   Component,
-  decorators: [withServicesDecorator({ defaultService: 'indonesia' })],
 };
 
-export const MultipleItems = (_, { service }) => (
-  <Component
-    episodes={fixtures?.[service] ?? fixtures.indonesia}
-    pageType="Podcast"
-    masterBrand={masterBrands?.[service] ?? masterBrands.indonesia}
-    service={service}
-  />
-);
+export const MultipleItems = {
+  render: (_, { service }) => (
+    <Component
+      episodes={fixtures?.[service] ?? fixtures.indonesia}
+      pageType="Podcast"
+      masterBrand={masterBrands?.[service] ?? masterBrands.indonesia}
+      service={service}
+    />
+  ),
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
 
-export const SingleItem = (_, { service }) => {
-  const fixture = fixtures?.[service]?.[0] ?? fixtures.indonesia[0];
-  return (
+export const SingleItem = {
+  render: (_, { service }) => (
     <Component
-      episodes={[fixture]}
+      episodes={[fixtures?.[service]?.[0] ?? fixtures.indonesia[0]]}
       pageType="Podcast"
       masterBrand={masterBrands?.[service] ?? masterBrands.indonesia}
       service={service}
     />
-  );
+  ),
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
+
+// This story is for chromatic testing purposes only
+export const TestMultipleItems = storyArgs =>
+  MultipleItems.render(storyArgs, { service: 'indonesia' });
+TestMultipleItems.tags = ['!dev'];
+
+// This story is for chromatic testing purposes only
+export const TestSingleItem = storyArgs =>
+  SingleItem.render(storyArgs, { service: 'indonesia' });
+TestSingleItem.tags = ['!dev'];

src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/index.stories.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { RequestContextProvider } from '#contexts/RequestContext';
 import { ServiceContextProvider } from '#contexts/ServiceContext';
-import withServicesDecorator from '#storybook/withServicesDecorator';
 import { afrique, pashto } from './fixtures';
 import RecentVideoEpisodes from '.';
 
@@ -24,7 +23,6 @@ const fixtures = { afrique, pashto };
 export default {
   title: 'Containers/Episode List/Video',
   Component,
-  decorators: [withServicesDecorator({ defaultService: 'afrique' })],
   parameters: {
     backgrounds: {
       default: 'Dark',
@@ -33,21 +31,42 @@ export default {
   },
 };
 
-export const MultipleItems = (_, { service }) => (
-  <Component
-    episodes={fixtures?.[service] ?? fixtures.afrique}
-    masterBrand={`bbc_${service}_tv`}
-    service={service}
-  />
-);
+export const MultipleItems = {
+  render: (_, { service }) => (
+    <Component
+      episodes={fixtures?.[service] ?? fixtures.afrique}
+      masterBrand={`bbc_${service}_tv`}
+      service={service}
+    />
+  ),
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};
 
-export const SingleItem = (_, { service }) => {
-  const fixture = fixtures?.[service]?.[0] ?? fixtures.afrique[0];
-  return (
+export const SingleItem = {
+  render: (_, { service }) => (
     <Component
-      episodes={[fixture]}
+      episodes={[fixtures?.[service]?.[0] ?? fixtures.afrique[0]]}
       masterBrand={`bbc_${service}_tv`}
       service={service}
     />
-  );
+  ),
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
 };
+
+// This story is for chromatic testing purposes only
+export const TestMultipleItems = storyArgs =>
+  MultipleItems.render(storyArgs, { service: 'afrique' });
+TestMultipleItems.tags = ['!dev'];
+
+// This story is for chromatic testing purposes only
+export const TestSingleItem = storyArgs =>
+  SingleItem.render(storyArgs, { service: 'afrique' });
+TestSingleItem.tags = ['!dev'];

src/app/legacy/containers/Header/index.stories.jsx

@@ -1,7 +1,21 @@
 import React from 'react';
 import HeaderContainer from '.';
+import { ToggleContextProvider } from '../../../contexts/ToggleContext';
+import { BrowserRouter } from 'react-router-dom';
 
-const Component = () => <HeaderContainer />;
+const Component = () => (
+  <ToggleContextProvider
+    toggles={{
+      scriptLink: {
+        enabled: true,
+      },
+    }}
+  >
+    <BrowserRouter>
+      <HeaderContainer />
+    </BrowserRouter>
+  </ToggleContextProvider>
+);
 
 export default {
   title: 'Containers/Header',

src/app/pages/HomePage/index.stories.tsx

@@ -5,7 +5,6 @@ import { HOME_PAGE } from '#app/routes/utils/pageTypes';
 import fetch from 'node-fetch';
 import { Curation } from '#app/models/types/curationData';
 import { Services } from '#app/models/types/global';
-import withServicesDecorator from '#storybook/withServicesDecorator';
 import { StoryArgs, StoryProps } from '../../models/types/storybook';
 import HomePage from '.';
 
@@ -76,9 +75,19 @@ const Component = ({ service, variant }: StoryProps) => {
 export default {
   Component,
   title: 'Pages/Home Page',
-  decorators: [withServicesDecorator({ defaultService: 'kyrgyz' })],
 };
 
-export const Example = (_: StoryArgs, { service, variant }: StoryProps) => (
-  <Component service={service} variant={variant} />
-);
+export const Example = {
+  render: (_: StoryArgs, { service, variant }: StoryProps) => (
+    <Component service={service} variant={variant} />
+  ),
+  parameters: { chromatic: { disableSnapshot: true } },
+};
+
+// This story is for chromatic testing purposes only
+export const Test = {
+  render: (_: StoryArgs, { variant }: StoryProps) => (
+    <Component service="kyrgyz" variant={variant} />
+  ),
+  tags: ['!dev'],
+};