diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 42bf20ffdf4..0c081f12597 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -538,6 +538,12 @@ const preview: Preview = { }, }, }, + initialGlobals: { + service: { + service: 'news', + variant: 'default', + }, + }, parameters: { passArgsFirst: false, options: { diff --git a/.storybook/withServicesDecorator/index.tsx b/.storybook/withServicesDecorator/index.tsx index 19faf9b1a1b..0e5e8ff0c01 100644 --- a/.storybook/withServicesDecorator/index.tsx +++ b/.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, }; diff --git a/.storybook/withServicesDecorator/text-variants.ts b/.storybook/withServicesDecorator/text-variants.ts index c5beb733fde..079f9e1b041 100644 --- a/.storybook/withServicesDecorator/text-variants.ts +++ b/.storybook/withServicesDecorator/text-variants.ts @@ -286,7 +286,7 @@ const TEXT_VARIANTS: Record = { timezone: 'GMT', articlePath: '/russian/articles/ck7pz7re3zgo', }, - serbianCyr: { + 'serbian-cyr': { service: 'serbian', variant: 'cyr', text: 'Караџић се годинама крио пре него што је ухапшен 2008. године', @@ -297,7 +297,7 @@ const TEXT_VARIANTS: Record = { 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 = { timezone: 'Asia/Istanbul', articlePath: '/turkce/articles/c8q1ze59n25o', }, - ukchinaSimp: { + 'ukchina-simp': { service: 'ukchina', variant: 'simp', text: '该计划的批评者说，这个政策不能解决住房短缺的问题', @@ -400,7 +400,7 @@ const TEXT_VARIANTS: Record = { timezone: 'GMT', articlePath: '/ukchina/articles/c0e8weny66ko/simp', }, - ukchinaTrad: { + 'ukchina-trad': { service: 'ukchina', variant: 'trad', text: '該計劃的批評者說，這個政策不能解決住房短缺的問題', @@ -457,7 +457,7 @@ const TEXT_VARIANTS: Record = { timezone: 'Africa/Lagos', articlePath: '/yoruba/articles/clw06m0nj8qo', }, - zhongwenSimp: { + 'zhongwen-simp': { service: 'zhongwen', variant: 'simp', text: '郑文杰：中国警方公布“嫖娼证据” 引发中港网友论战', @@ -468,7 +468,7 @@ const TEXT_VARIANTS: Record = { timezone: 'GMT', articlePath: '/zhongwen/articles/c3xd4x9prgyo/simp', }, - zhongwenTrad: { + 'zhongwen-trad': { service: 'zhongwen', variant: 'trad', text: '鄭文傑：中國警方公布「嫖娼證據」 引發中港網友論戰', diff --git a/docs/Writing-Storybook-Stories.mdx b/docs/Writing-Storybook-Stories.mdx index 9ed811d1260..ded6c0a83ef 100644 --- a/docs/Writing-Storybook-Stories.mdx +++ b/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' })], -}; -``` diff --git a/src/app/components/Header/ScriptLink/index.stories.tsx b/src/app/components/Header/ScriptLink/index.stories.tsx deleted file mode 100644 index 915bf51e9cd..00000000000 --- a/src/app/components/Header/ScriptLink/index.stories.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import React from 'react'; -import { ServiceContext } from '#app/contexts/ServiceContext'; -import { ServiceConfig } from '#app/models/types/serviceConfig'; -import ScriptLink from '.'; - -const Component = () => ( - - - -); - -export default { - title: 'Components/ScriptLink', - component: Component, -}; diff --git a/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/index.stories.jsx b/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/index.stories.jsx index c4bdeb64473..daf9d2e6f34 100644 --- a/src/app/legacy/containers/EpisodeList/RecentAudioEpisodes/index.stories.jsx +++ b/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 }) => ( - -); +export const MultipleItems = { + render: (_, { service }) => ( + + ), + parameters: { + chromatic: { disableSnapshot: true }, + }, +}; -export const SingleItem = (_, { service }) => { - const fixture = fixtures?.[service]?.[0] ?? fixtures.indonesia[0]; - return ( +export const SingleItem = { + render: (_, { 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']; diff --git a/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/index.stories.jsx b/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/index.stories.jsx index 35e67850536..e9e82d84ba2 100644 --- a/src/app/legacy/containers/EpisodeList/RecentVideoEpisodes/index.stories.jsx +++ b/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 }) => ( - -); +export const MultipleItems = { + render: (_, { service }) => ( + + ), + parameters: { + chromatic: { + disableSnapshot: true, + }, + }, +}; -export const SingleItem = (_, { service }) => { - const fixture = fixtures?.[service]?.[0] ?? fixtures.afrique[0]; - return ( +export const SingleItem = { + render: (_, { 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']; diff --git a/src/app/legacy/containers/Header/index.stories.jsx b/src/app/legacy/containers/Header/index.stories.jsx index c736c961187..70fd0122fb3 100644 --- a/src/app/legacy/containers/Header/index.stories.jsx +++ b/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 = () => ; +const Component = () => ( + + + + + +); export default { title: 'Containers/Header', diff --git a/src/app/pages/HomePage/index.stories.tsx b/src/app/pages/HomePage/index.stories.tsx index 0244ab14d44..a353406ea6d 100644 --- a/src/app/pages/HomePage/index.stories.tsx +++ b/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) => ( - -); +export const Example = { + render: (_: StoryArgs, { service, variant }: StoryProps) => ( + + ), + parameters: { chromatic: { disableSnapshot: true } }, +}; + +// This story is for chromatic testing purposes only +export const Test = { + render: (_: StoryArgs, { variant }: StoryProps) => ( + + ), + tags: ['!dev'], +}; diff --git a/src/app/pages/MostReadPage/index.stories.jsx b/src/app/pages/MostReadPage/index.stories.jsx index bc851bc629c..f91801fbe77 100644 --- a/src/app/pages/MostReadPage/index.stories.jsx +++ b/src/app/pages/MostReadPage/index.stories.jsx @@ -3,10 +3,9 @@ import fetch from 'node-fetch'; import Url from 'url-parse'; import { BrowserRouter } from 'react-router-dom'; import { MOST_READ_PAGE } from '#app/routes/utils/pageTypes'; -import withServicesDecorator from '#storybook/withServicesDecorator'; import MostReadPage from '.'; -const Component = (_, { service, variant }) => { +const Component = ({ service, variant }) => { const [pageData, setPageData] = useState({}); useEffect(() => { @@ -48,7 +47,17 @@ const Component = (_, { service, variant }) => { export default { Component, title: 'Pages/Most Read Page', - decorators: [withServicesDecorator({ defaultService: 'pidgin' })], }; -export const Example = Component; +export const Example = { + render: (_, { service, variant }) => (), + parameters: { + chromatic: { + disableSnapshot: true + } + } +}; + +// This story is for chromatic testing purposes only +export const Test = (_, { variant }) => ; +Test.tags = ['!dev'] \ No newline at end of file diff --git a/src/app/pages/OnDemandAudioPage/index.stories.tsx b/src/app/pages/OnDemandAudioPage/index.stories.tsx index dc507db1fc2..bdb344775d0 100644 --- a/src/app/pages/OnDemandAudioPage/index.stories.tsx +++ b/src/app/pages/OnDemandAudioPage/index.stories.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import { MEDIA_PAGE } from '#app/routes/utils/pageTypes'; -import withServicesDecorator from '#storybook/withServicesDecorator'; +import { StoryArgs, StoryProps } from '#app/models/types/storybook'; +import { Services } from '#app/models/types/global'; import { OnDemandAudioPage } from '..'; import indonesia from './fixtureData/indonesia.json'; import pashto from './fixtureData/pashto.json'; @@ -11,9 +12,10 @@ const onDemandRadioFixtures = { pashto, }; -const matchFixtures = (service: 'indonesia' | 'pashto') => ({ +const matchFixtures = (service: Services) => ({ params: { mediaId: 'liveradio', + // @ts-expect-error partial data for testing serviceId: { indonesia: 'bbc_indonesian_radio', pashto: 'bbc_pashto_radio', @@ -21,15 +23,13 @@ const matchFixtures = (service: 'indonesia' | 'pashto') => ({ }, }); -const Component = ( - _: unknown, - { service }: { service: 'indonesia' | 'pashto' }, -) => { +const Component = ({ service }: StoryProps) => { return ( ( + + ), + parameters: { chromatic: { disableSnapshot: true } }, +}; + +// This story is for chromatic testing purposes only +export const Test = { + render: (_: StoryArgs, { variant }: StoryProps) => ( + + ), + tags: ['!dev'], +}; diff --git a/src/app/pages/OnDemandTvPage/index.stories.tsx b/src/app/pages/OnDemandTvPage/index.stories.tsx index 2b95c48aa50..efbb49bcf6b 100644 --- a/src/app/pages/OnDemandTvPage/index.stories.tsx +++ b/src/app/pages/OnDemandTvPage/index.stories.tsx @@ -2,7 +2,8 @@ import React from 'react'; import { BrowserRouter } from 'react-router-dom'; import WithTimeMachine from '#testHelpers/withTimeMachine'; import { MEDIA_PAGE } from '#app/routes/utils/pageTypes'; -import withServicesDecorator from '#storybook/withServicesDecorator'; +import { StoryArgs, StoryProps } from '#app/models/types/storybook'; +import { Services } from '#app/models/types/global'; import { OnDemandTvPage } from '..'; import afrique from './fixtureData/afrique.json'; import pashto from './fixtureData/pashto.json'; @@ -18,8 +19,9 @@ const onDemandTvFixtures: { afrique, }; -const matchFixtures = (service: 'afrique' | 'pashto') => ({ +const matchFixtures = (service: Services) => ({ params: { + // @ts-expect-error partial data for testing serviceId: { afrique: 'bbc_afrique_tv', pashto: 'bbc_pashto_tv', @@ -27,15 +29,13 @@ const matchFixtures = (service: 'afrique' | 'pashto') => ({ }, }); -const Component = ( - _: unknown, - { service }: { service: 'afrique' | 'pashto' }, -) => { +const Component = ({ service }: StoryProps) => { return ( unknown) => ( // @ts-expect-error use default params {story()} @@ -58,4 +57,17 @@ export default { ], }; -export const Page = Component; +export const Example = { + render: (_: StoryArgs, { service, variant }: StoryProps) => ( + + ), + parameters: { chromatic: { disableSnapshot: true } }, +}; + +// This story is for chromatic testing purposes only +export const Test = { + render: (_: StoryArgs, { variant }: StoryProps) => ( + + ), + tags: ['!dev'], +}; diff --git a/src/app/pages/TopicPage/index.stories.jsx b/src/app/pages/TopicPage/index.stories.jsx index 1ed2608cfa5..424ab246bb1 100644 --- a/src/app/pages/TopicPage/index.stories.jsx +++ b/src/app/pages/TopicPage/index.stories.jsx @@ -15,7 +15,6 @@ import tamilTopicWithMessageBanners from '#data/tamil/topics/c03dm2xmzzpt.json'; import mundoTopicWithMessageBannerVariations from '#data/mundo/topics/cw90edn9kw4t.json'; import persianAfghanistan from '#data/persian/topics/crezq2dg9zwt.json'; import withPageWrapper from '#containers/PageHandlers/withPageWrapper'; -import withServicesDecorator from '#storybook/withServicesDecorator'; import Page from './TopicPage'; import ThemeProvider from '../../components/ThemeProvider'; @@ -67,33 +66,13 @@ export default { title: 'Pages/Topic Page', Component, parameters: { chromatic: { disable: true }, layout: 'fullscreen' }, - decorators: [withServicesDecorator({ defaultService: 'mundo' })], }; export const Example = (_, { service, variant }) => ( ); -export const MundoWithBannerVariations = () => ( - -); - -export const KyrgyzWithMessageBanners = () => ( - -); - -export const PersianWithMessageBanners = () => ( - -); export const PersianAfghanistan = () => ( ); - -export const ArabicWithMessageBanners = () => ( - -); - -export const TamilWithMessageBanners = () => ( - -);