Allow Storybook to render the script link

.storybook/withServicesDecorator/index.tsx

@@ -54,9 +54,9 @@
   ) => {
     const defaultServiceOverride = overrideProps?.defaultService;
     const serviceToUse = defaultServiceOverride || selectedService;
-
+    console.log('HELLO', serviceToUse, '2', selectedService);
     const variant = getVariant(serviceToUse as Services)(TEXT_VARIANTS);
-
+    console.log(variant);
     const service = variant
       ? getService(serviceToUse as Services)(TEXT_VARIANTS)
       : serviceToUse;

.storybook/withServicesDecorator/text-variants.ts

@@ -1,3 +1,4 @@
+import serbian from '#app/lib/config/services/serbian';
 import { Services, Variants } from '#app/models/types/global';
 
 type TextVariant = {
@@ -286,6 +287,9 @@
     timezone: 'GMT',
     articlePath: '/russian/articles/ck7pz7re3zgo',
   },
+  serbian: {
+    variant: 'cyr',
+  },
   serbianCyr: {
     service: 'serbian',
     variant: 'cyr',

src/app/components/Header/ScriptLink/index.tsx

@@ -10,7 +10,7 @@
 import { RequestContext } from '../../../contexts/RequestContext';
 import styles from './index.styles';
 
 interface UseRouteMatcher {
   path: string;
   params: Record<string, string>;
 }
@@ -59,21 +59,29 @@
   const { service, scriptLink } = useContext(ServiceContext);
   const { isNextJs } = useContext(RequestContext);
   const { enabled: scriptLinkEnabled } = useToggle('scriptLink');
-
+  const isStoryBook = process.env.STORYBOOK;
+  let path;
+  let params;
   // TODO: Next.JS doesn't support `react-router-dom` hooks, so we need to
   // revisit this to support both Express and Next.JS in the future.
   if (!scriptLinkEnabled || isNextJs) return null;
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { path, params }: UseRouteMatcher = useRouteMatch();
+  if (!isStoryBook) {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const match = useRouteMatch();
+    path = match.path;
+    params = match.params;
+  }
+
   const { text, variant } = scriptLink || {};
+  console.log('hello?123', isStoryBook);
   if (!variant) return null;
-
   return (
     <a
       css={styles.link}
       href={getVariantHref({
         path,
         params,
         service,
         variant,
         scriptSwitchId,

src/app/hooks/useToggle/index.js

@@ -4,7 +4,7 @@
 const useToggle = toggleName => {
   const featureToggle = useContext(ToggleContext).toggleState[toggleName];
   const { enabled = null, value } = featureToggle || {};
-
+  console.log('maybe??', featureToggle, enabled);
   if (featureToggle) {
     return {
       ...{ enabled, value },

src/app/legacy/containers/Brand/index.jsx

@@ -28,7 +28,6 @@ const BrandContainer = ({
   const svgRatio = brandSVG && brandSVG.ratio;
   const minWidth = svgRatio * svgMinHeight;
   const maxWidth = svgRatio * svgMaxHeight;
-
   return (
     <StyledBrand
       product={product}

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

@@ -11,7 +11,7 @@
 
 const Header = ({ brandRef, borderBottom, skipLink, scriptLink, linkId }) => {
   const [showConsentBanner, setShowConsentBanner] = useState(true);
-
+  console.log('HELLO23', scriptLink);
   const handleBannerBlur = event => {
     const isRejectButton =
       event.target?.getAttribute('data-terms-banner') === 'reject' ||
@@ -49,7 +49,7 @@
   const { service, script, translations, dir, scriptLink, lang, serviceLang } =
     useContext(ServiceContext);
   const { skipLinkText } = translations;
-
+  console.log(renderScriptSwitch);
   const isOperaMini = useOperaMiniDetection();
 
   const brandRef = useRef(null);
@@ -78,7 +78,7 @@
       shouldRenderScriptSwitch = true;
     }
   }
-
+  console.log('render?', shouldRenderScriptSwitch);
   if (isApp) return null;
 
   return (

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

@@ -1,7 +1,29 @@
 import React from 'react';
 import HeaderContainer from '.';
+import { ServiceContext } from '#app/contexts/ServiceContext';
+import { ToggleContextProvider } from '#contexts/ToggleContext';
 
-const Component = () => <HeaderContainer />;
+const Component = () => {
+  return (
+    <ToggleContextProvider
+      toggles={{
+        scriptLink: { enabled: true },
+      }}
+    >
+      <ServiceContext.Provider
+        value={{
+          scriptLink: {
+            text: 'Ћир',
+            variant: 'cyr',
+          },
+          translations: { skipLinkText: 'text' },
+        }}
+      >
+        <HeaderContainer />
+      </ServiceContext.Provider>
+    </ToggleContextProvider>
+  );
+};
 
 export default {
   title: 'Containers/Header',

src/app/legacy/psammead/psammead-brand/src/index.jsx

@@ -175,7 +175,7 @@
     linkId = null,
     ...rest
   } = props;
-
+  console.log('final?', scriptLink);
   return (
     <Banner
       svgHeight={svgHeight}
@@ -200,7 +200,7 @@
           <StyledBrand {...props} />
         )}
         {skipLink}
-        {scriptLink && <div>{scriptLink}</div>}
+        {scriptLink && <div> {scriptLink}</div>}
       </SvgWrapper>
     </Banner>
   );