Render the script switch button on the header container on storybook

.storybook/withServicesDecorator/index.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import path from 'ramda/src/path';
 import { Helmet } from 'react-helmet';
 import TEXT_VARIANTS from './text-variants';
 import arabic from '../../src/app/components/ThemeProvider/fontScripts/arabic';
@@ -16,10 +15,7 @@ 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,
@@ -47,19 +43,24 @@ export default (overrideProps?: { defaultService?: Services }) =>
     story: (storyProps: any) => JSX.Element,
     {
       globals: {
-        service: { service: selectedService },
+        service: { service, variant },
         isLite,
       },
-    } = { globals: { service: { service: DEFAULT_SERVICE }, isLite: false } },
+    } = {
+      globals: {
+        service: { service: DEFAULT_SERVICE, variant: DEFAULT_VARIANT },
+        isLite: false,
+      },
+    },
   ) => {
     const defaultServiceOverride = overrideProps?.defaultService;
-    const serviceToUse = defaultServiceOverride || selectedService;
+    const serviceToUse = defaultServiceOverride || service;
 
-    const variant = getVariant(serviceToUse as Services)(TEXT_VARIANTS);
+    let serviceLookup = serviceToUse;
 
-    const service = variant
-      ? getService(serviceToUse as Services)(TEXT_VARIANTS)
-      : serviceToUse;
+    if (variant !== DEFAULT_VARIANT) {
+      serviceLookup = `${service}-${variant}`;
+    }
 
     const {
       text,
@@ -69,7 +70,7 @@ export default (overrideProps?: { defaultService?: Services }) =>
       locale,
       dir = 'ltr',
       timezone = 'GMT',
-    } = TEXT_VARIANTS[serviceToUse];
+    } = TEXT_VARIANTS[serviceLookup];
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const storyProps: any = {
@@ -80,8 +81,8 @@ export default (overrideProps?: { defaultService?: Services }) =>
       locale,
       dir,
       service,
-      variant: variant || 'default',
-      selectedService: serviceToUse,
+      variant: variant || DEFAULT_VARIANT,
+      selectedService: service,
       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: '鄭文傑：中國警方公布「嫖娼證據」 引發中港網友論戰',

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',