Fix Storybook stories ServiceContext accessing (#13788)

Author: amoore108

src/app/components/Copyright/index.stories.tsx

@@ -1,26 +1,19 @@
-import { useMemo } from 'react';
-import services from '#server/utilities/serviceConfigs';
-import { ServiceContext } from '../../contexts/ServiceContext';
+import {
+  ServiceContext,
+  ServiceContextProvider,
+} from '#app/contexts/ServiceContext';
 import CopyrightContainer from '.';
 import { StoryProps, StoryArgs } from '../../models/types/storybook';
-import { ServiceConfig } from '../../models/types/serviceConfig';
 
 const Component = (_: StoryArgs, { service, variant }: StoryProps) => {
-  const imageCaptionText =
-    services[service][variant].imageCopyrightOffscreenText;
-
-  const serviceContextStub = useMemo(
-    () => ({
-      imageCaptionOffscreenText: imageCaptionText,
-      lang: services[service][variant].lang,
-      dir: services[service][variant].dir,
-    }),
-    [imageCaptionText, service, variant],
-  );
   return (
-    <ServiceContext.Provider value={serviceContextStub as ServiceConfig}>
-      <CopyrightContainer>{imageCaptionText}</CopyrightContainer>
-    </ServiceContext.Provider>
+    <ServiceContextProvider service={service} variant={variant}>
+      <ServiceContext.Consumer>
+        {({ imageCopyrightOffscreenText }) => (
+          <CopyrightContainer>{imageCopyrightOffscreenText}</CopyrightContainer>
+        )}
+      </ServiceContext.Consumer>
+    </ServiceContextProvider>
   );
 };
 

src/app/components/Curation/Subhead/index.stories.tsx

@@ -1,32 +1,34 @@
-import { ServiceContextProvider } from '../../../contexts/ServiceContext';
-
-import services from '../../../../server/utilities/serviceConfigs';
-import ThemeProvider from '../../ThemeProvider';
+import {
+  ServiceContextProvider,
+  ServiceContext,
+} from '#app/contexts/ServiceContext';
 
 import Subheading from '.';
-import { StoryProps, StoryArgs } from '../../../models/types/storybook';
+import { StoryProps, StoryArgs } from '#models/types/storybook';
 
 const Component = (_: StoryArgs, { service, variant }: StoryProps) => {
   return (
-    <ThemeProvider service={service} variant={variant}>
-      <ServiceContextProvider service={service} variant={variant}>
-        <Subheading>
-          {services[service][variant].translations.relatedContent}
-        </Subheading>
-      </ServiceContextProvider>
-    </ThemeProvider>
+    <ServiceContextProvider service={service} variant={variant}>
+      <ServiceContext.Consumer>
+        {({ translations }) => (
+          <Subheading>{translations?.relatedContent}</Subheading>
+        )}
+      </ServiceContext.Consumer>
+    </ServiceContextProvider>
   );
 };
 
 const WithLink = (_: StoryArgs, { service, variant }: StoryProps) => {
   return (
-    <ThemeProvider service={service} variant={variant}>
-      <ServiceContextProvider service={service} variant={variant}>
-        <Subheading link="https://bbc.com">
-          {services[service][variant].translations.relatedContent}
-        </Subheading>
-      </ServiceContextProvider>
-    </ThemeProvider>
+    <ServiceContextProvider service={service} variant={variant}>
+      <ServiceContext.Consumer>
+        {({ translations }) => (
+          <Subheading link="https://bbc.com">
+            {translations.relatedContent}
+          </Subheading>
+        )}
+      </ServiceContext.Consumer>
+    </ServiceContextProvider>
   );
 };
 

src/app/components/PromotionalBanner/index.stories.tsx

@@ -1,6 +1,8 @@
-import { ServiceContextProvider } from '#app/contexts/ServiceContext';
+import {
+  ServiceContextProvider,
+  ServiceContext,
+} from '#app/contexts/ServiceContext';
 import PromotionalBannerComponent from '.';
-import services from '#server/utilities/serviceConfigs';
 import { StoryProps } from '../../models/types/storybook';
 import metadata from './metadata.json';
 import readme from './README.md';
@@ -10,18 +12,19 @@ const ComponentWithContext = ({
   service = 'mundo',
   variant = 'default',
 }: StoryProps) => {
-  const bannerConfig = services[service]?.[variant]
-    ?.promotionalBanner as PromotionalBannerConfig;
-
   return (
     <ServiceContextProvider service={service} variant={variant}>
-      <PromotionalBannerComponent
-        onPrimaryClick={() => console.log('Primary clicked')}
-        onSecondaryClick={() => console.log('Secondary clicked')}
-        onClose={() => console.log('Banner closed')}
-        isDismissible
-        {...bannerConfig}
-      />
+      <ServiceContext.Consumer>
+        {({ promotionalBanner }) => (
+          <PromotionalBannerComponent
+            onPrimaryClick={() => console.log('Primary clicked')}
+            onSecondaryClick={() => console.log('Secondary clicked')}
+            onClose={() => console.log('Banner closed')}
+            isDismissible
+            {...(promotionalBanner as PromotionalBannerConfig)}
+          />
+        )}
+      </ServiceContext.Consumer>
     </ServiceContextProvider>
   );
 };