From cc7008c8dbbba5dbbb44fcbfa3f67012b85ca08f Mon Sep 17 00:00:00 2001
From: Ryan McCombe <ryanmccombe@gmail.com>
Date: Sun, 11 Jul 2021 16:49:39 +0100
Subject: [PATCH] Storybook Rewrite - Pages

---
 src/app/pages/ArticlePage/index.stories.jsx   | 60 ++++++-------
 src/app/pages/ErrorPage/index.stories.jsx     | 78 ++++++----------
 .../pages/FeatureIdxPage/index.stories.jsx    | 25 +++---
 src/app/pages/FrontPage/index.stories.jsx     | 55 ++++++------
 src/app/pages/IdxPage/index.stories.jsx       | 33 ++++---
 src/app/pages/LiveRadioPage/index.stories.jsx | 52 ++++++-----
 .../pages/MediaAssetPage/index.stories.jsx    | 49 +++++-----
 src/app/pages/MostReadPage/index.stories.jsx  | 63 ++++++-------
 .../pages/OnDemandAudioPage/index.stories.jsx | 52 ++++++-----
 .../pages/OnDemandTvPage/index.stories.jsx    | 46 +++++-----
 .../pages/PhotoGalleryPage/index.stories.jsx  | 35 ++++----
 src/app/pages/StoryPage/index.stories.jsx     | 89 +++++++++----------
 12 files changed, 308 insertions(+), 329 deletions(-)

diff --git a/src/app/pages/ArticlePage/index.stories.jsx b/src/app/pages/ArticlePage/index.stories.jsx
index f56a909dfe2..bb428d575b9 100644
--- a/src/app/pages/ArticlePage/index.stories.jsx
+++ b/src/app/pages/ArticlePage/index.stories.jsx
@@ -1,41 +1,41 @@
 import React from 'react';
 import { MemoryRouter } from 'react-router';
-import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { ServiceContextProvider } from '#contexts/ServiceContext';
 import { ToggleContextProvider } from '#contexts/ToggleContext';
 import { RequestContextProvider } from '#contexts/RequestContext';
 import { UserContextProvider } from '#contexts/UserContext';
-import ArticlePage from './ArticlePage';
+import ArticlePageComponent from './ArticlePage';
 import { ARTICLE_PAGE } from '#app/routes/utils/pageTypes';
-
-// article c5jje4ejkqvo contains a Headline, a Paragraph, a timestamp
-// a Portrait Image with Caption, a Landscape Image with Caption and Square Image with Caption.
 import articleData from '#data/news/articles/c5jje4ejkqvo';
 
-// Not all services have fixtures for article data yet
-// the service selector will be constrained to services that have article fixtures:
+const ComponentWithContext = () => (
+  <ToggleContextProvider>
+    {/* Service set to pidgin to enable most read. Article data is in english */}
+    <ServiceContextProvider service="pidgin">
+      <RequestContextProvider
+        isAmp={false}
+        pageType={ARTICLE_PAGE}
+        service="pidgin"
+      >
+        <UserContextProvider>
+          <MemoryRouter>
+            <ArticlePageComponent
+              pageData={articleData}
+              mostReadEndpointOverride="./data/news/mostRead/index.json"
+            />
+          </MemoryRouter>
+        </UserContextProvider>
+      </RequestContextProvider>
+    </ServiceContextProvider>
+  </ToggleContextProvider>
+);
+
+export default {
+  Component: ComponentWithContext,
+  title: 'Pages/Article Page',
+  decorators: [withKnobs],
+};
 
-storiesOf('Pages/Article Page', module)
-  .addDecorator(withKnobs)
-  .add('Articles', () => (
-    <ToggleContextProvider>
-      {/* Service set to pidgin to enable most read. Article data is in english */}
-      <ServiceContextProvider service="pidgin">
-        <RequestContextProvider
-          isAmp={false}
-          pageType={ARTICLE_PAGE}
-          service="pidgin"
-        >
-          <UserContextProvider>
-            <MemoryRouter>
-              <ArticlePage
-                pageData={articleData}
-                mostReadEndpointOverride="./data/news/mostRead/index.json"
-              />
-            </MemoryRouter>
-          </UserContextProvider>
-        </RequestContextProvider>
-      </ServiceContextProvider>
-    </ToggleContextProvider>
-  ));
+export const ArticlePage = ComponentWithContext;
+ArticlePage.storyName = 'Pages/Article Page';
diff --git a/src/app/pages/ErrorPage/index.stories.jsx b/src/app/pages/ErrorPage/index.stories.jsx
index 633708966df..b4cac5bf90f 100644
--- a/src/app/pages/ErrorPage/index.stories.jsx
+++ b/src/app/pages/ErrorPage/index.stories.jsx
@@ -1,56 +1,30 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { ServiceContextProvider } from '#contexts/ServiceContext';
 import ErrorPage from './ErrorPage';
 
-storiesOf('Pages/Error Page', module)
-  .add('404', () => (
-    <ServiceContextProvider service="news">
-      <ErrorPage errorCode={404} />
-    </ServiceContextProvider>
-  ))
-  .add('500', () => (
-    <ServiceContextProvider service="news">
-      <ErrorPage errorCode={500} />
-    </ServiceContextProvider>
-  ))
-  .add('404 - Persian', () => (
-    <ServiceContextProvider service="persian">
-      <ErrorPage errorCode={404} />
-    </ServiceContextProvider>
-  ))
-  .add('500 - Persian', () => (
-    <ServiceContextProvider service="persian">
-      <ErrorPage errorCode={500} />
-    </ServiceContextProvider>
-  ))
-  .add('404 - Igbo', () => (
-    <ServiceContextProvider service="igbo">
-      <ErrorPage errorCode={404} />
-    </ServiceContextProvider>
-  ))
-  .add('500 - Igbo', () => (
-    <ServiceContextProvider service="igbo">
-      <ErrorPage errorCode={500} />
-    </ServiceContextProvider>
-  ))
-  .add('404 - Pidgin', () => (
-    <ServiceContextProvider service="pidgin">
-      <ErrorPage errorCode={404} />
-    </ServiceContextProvider>
-  ))
-  .add('500 - Pidgin', () => (
-    <ServiceContextProvider service="pidgin">
-      <ErrorPage errorCode={500} />
-    </ServiceContextProvider>
-  ))
-  .add('404 - Yoruba', () => (
-    <ServiceContextProvider service="yoruba">
-      <ErrorPage errorCode={404} />
-    </ServiceContextProvider>
-  ))
-  .add('500 - Yoruba', () => (
-    <ServiceContextProvider service="yoruba">
-      <ErrorPage errorCode={500} />
-    </ServiceContextProvider>
-  ));
+// eslint-disable-next-line react/prop-types
+const Component = ({ service = 'news', status = 404 } = {}) => (
+  <ServiceContextProvider service={service}>
+    <ErrorPage errorCode={status} />
+  </ServiceContextProvider>
+);
+
+export default {
+  Component,
+  title: 'Pages/Error Page',
+};
+
+export const News404 = () => <Component />;
+export const News500 = () => <Component status={500} />;
+
+export const Persian404 = () => <Component service="persian" />;
+export const Persian500 = () => <Component service="persian" status={500} />;
+
+export const Igbo404 = () => <Component service="igbo" />;
+export const Igbo500 = () => <Component service="igbo" status={500} />;
+
+export const Pidgin404 = () => <Component service="pidgin" />;
+export const Pidgin500 = () => <Component service="pidgin" status={500} />;
+
+export const Yoruba404 = () => <Component service="yoruba" />;
+export const Yoruba500 = () => <Component service="yoruba" status={500} />;
diff --git a/src/app/pages/FeatureIdxPage/index.stories.jsx b/src/app/pages/FeatureIdxPage/index.stories.jsx
index 458544a0eb6..0fca162129c 100644
--- a/src/app/pages/FeatureIdxPage/index.stories.jsx
+++ b/src/app/pages/FeatureIdxPage/index.stories.jsx
@@ -1,29 +1,28 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { BrowserRouter } from 'react-router-dom';
 import WithTimeMachine from '#testHelpers/withTimeMachine';
 import afriqueData from '#data/afrique/cpsAssets/48465371';
 import FeatureIdxPage from '.';
 import { FEATURE_INDEX_PAGE } from '#app/routes/utils/pageTypes';
 
-const stories = storiesOf(
-  'Pages/Feature Idx Page',
-  module,
-).addDecorator(story => <WithTimeMachine>{story()}</WithTimeMachine>);
-
-const service = 'afrique';
-const variant = 'default';
-
-stories.add(`${service}`, () => (
+const Component = (
   <BrowserRouter>
     <FeatureIdxPage
       isAmp={false}
       pageType={FEATURE_INDEX_PAGE}
       status={200}
       pathname="/afrique/48465371"
-      service={service}
-      variant={variant}
+      service="afrique"
+      variant="default"
       pageData={afriqueData}
     />
   </BrowserRouter>
-));
+);
+
+export default {
+  Component,
+  title: 'Pages/Feature Idx Page',
+  decorators: [story => <WithTimeMachine>{story()}</WithTimeMachine>],
+};
+
+export const Afrique = () => Component;
diff --git a/src/app/pages/FrontPage/index.stories.jsx b/src/app/pages/FrontPage/index.stories.jsx
index 10a4ebe5b60..453d4b53f1e 100644
--- a/src/app/pages/FrontPage/index.stories.jsx
+++ b/src/app/pages/FrontPage/index.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { BrowserRouter } from 'react-router-dom';
 import WithTimeMachine from '#testHelpers/withTimeMachine';
 import arabicData from '#data/arabic/frontpage';
@@ -28,28 +27,34 @@ const serviceConfigs = {
   serbian: serbianConfig,
 };
 
-const stories = storiesOf('Pages/Front Page', module).addDecorator(story => (
-  <WithTimeMachine>{story()}</WithTimeMachine>
-));
+// eslint-disable-next-line react/prop-types
+const Component = ({ service, variant = 'default' } = {}) => (
+  <BrowserRouter>
+    <FrontPage
+      isAmp={false}
+      pageType={FRONT_PAGE}
+      status={200}
+      pathname={serviceConfigs[service][variant].navigation[0].url}
+      service={service}
+      variant={variant}
+      pageData={serviceDataSets[service][variant]}
+      mostReadEndpointOverride={getLocalMostReadEndpoint({
+        service,
+        variant,
+      })}
+    />
+  </BrowserRouter>
+);
 
-Object.keys(serviceDataSets).forEach(service => {
-  Object.keys(serviceDataSets[service]).forEach(variant => {
-    stories.add(`${service} ${variant === 'default' ? '' : variant}`, () => (
-      <BrowserRouter>
-        <FrontPage
-          isAmp={false}
-          pageType={FRONT_PAGE}
-          status={200}
-          pathname={serviceConfigs[service][variant].navigation[0].url}
-          service={service}
-          variant={variant}
-          pageData={serviceDataSets[service][variant]}
-          mostReadEndpointOverride={getLocalMostReadEndpoint({
-            service,
-            variant,
-          })}
-        />
-      </BrowserRouter>
-    ));
-  });
-});
+export default {
+  Component,
+  title: 'Pages/Front Page',
+  decorators: [story => <WithTimeMachine>{story()}</WithTimeMachine>],
+};
+
+export const Arabic = () => <Component service="arabic" />;
+export const Igbo = () => <Component service="igbo" />;
+export const SerbianCyrillic = () => (
+  <Component service="serbian" variant="cyr" />
+);
+export const SerbianLatin = () => <Component service="serbian" variant="lat" />;
diff --git a/src/app/pages/IdxPage/index.stories.jsx b/src/app/pages/IdxPage/index.stories.jsx
index 8eba8f83d3e..4ede0bf51fa 100644
--- a/src/app/pages/IdxPage/index.stories.jsx
+++ b/src/app/pages/IdxPage/index.stories.jsx
@@ -1,24 +1,21 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import persianAfghanistanIdxData from '#data/persian/afghanistan';
 import ukraineInRussianIdxData from '#data/ukrainian/ukraine_in_russian';
 import IdxPageWithContext from './testHelpers';
 
-const stories = storiesOf('Pages/Idx Page', module);
+export default {
+  Component: IdxPageWithContext,
+  title: 'Pages/Idx Page',
+};
 
-[
-  {
-    idxPage: 'persian/afghanistan',
-    pageData: persianAfghanistanIdxData,
-    service: 'persian',
-  },
-  {
-    idxPage: 'ukrainian/ukraine_in_russian',
-    pageData: ukraineInRussianIdxData,
-    service: 'ukrainian',
-  },
-].forEach(({ idxPage, pageData, service }) => {
-  stories.add(`${idxPage}`, () => {
-    return <IdxPageWithContext service={service} pageData={pageData} />;
-  });
-});
+export const Persian = () => (
+  <IdxPageWithContext service="persian" pageData={persianAfghanistanIdxData} />
+);
+
+Persian.storyName = 'persian/afghanistan';
+
+export const Ukrainian = () => (
+  <IdxPageWithContext service="ukrainian" pageData={ukraineInRussianIdxData} />
+);
+
+Ukrainian.storyName = 'ukrainian/ukraine_in_russian';
diff --git a/src/app/pages/LiveRadioPage/index.stories.jsx b/src/app/pages/LiveRadioPage/index.stories.jsx
index b5e2ac1740a..13096f85f9f 100644
--- a/src/app/pages/LiveRadioPage/index.stories.jsx
+++ b/src/app/pages/LiveRadioPage/index.stories.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
 import { LiveRadioPage } from '..';
@@ -33,29 +32,38 @@ const matchFixtures = service => ({
   },
 });
 
-const status = 200;
+// eslint-disable-next-line react/prop-types
+const Component = ({ service }) => (
+  <BrowserRouter>
+    <LiveRadioPage
+      match={matchFixtures(service)}
+      pageData={liveRadioFixtures[service]}
+      status={200}
+      service={service}
+      isAmp={false}
+      loading={false}
+      error=""
+      pageType={MEDIA_PAGE}
+    />
+  </BrowserRouter>
+);
 
-storiesOf('Pages/Radio Page', module)
-  .addDecorator(story => <WithTimeMachine>{story()}</WithTimeMachine>)
-  .addDecorator(withKnobs)
-  .addDecorator(
+export default {
+  Component,
+  title: 'Pages/Radio Page',
+  decorators: [
+    withKnobs,
     withServicesKnob({
       defaultService: 'indonesia',
       services: Object.keys(liveRadioFixtures),
     }),
-  )
-  .addParameters({ chromatic: { diffThreshold: 0.2 } })
-  .add('default', ({ service }) => (
-    <BrowserRouter>
-      <LiveRadioPage
-        match={matchFixtures(service)}
-        pageData={liveRadioFixtures[service]}
-        status={status}
-        service={service}
-        isAmp={false}
-        loading={false}
-        error=""
-        pageType={MEDIA_PAGE}
-      />
-    </BrowserRouter>
-  ));
+    story => <WithTimeMachine>{story()}</WithTimeMachine>,
+  ],
+  parameters: {
+    chromatic: {
+      values: [{ name: 'diffThreshold', value: 0.2 }],
+    },
+  },
+};
+
+export const Page = Component;
diff --git a/src/app/pages/MediaAssetPage/index.stories.jsx b/src/app/pages/MediaAssetPage/index.stories.jsx
index ad8843adf07..1a5d1188000 100644
--- a/src/app/pages/MediaAssetPage/index.stories.jsx
+++ b/src/app/pages/MediaAssetPage/index.stories.jsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { BrowserRouter } from 'react-router-dom';
 import AmpDecorator from '../../../../.storybook/helpers/ampDecorator';
 import WithTimeMachine from '#testHelpers/withTimeMachine';
@@ -7,33 +6,27 @@ import MediaAssetPage from '.';
 import pageData from './fixtureData';
 import { MEDIA_ASSET_PAGE } from '#app/routes/utils/pageTypes';
 
-const isAmp = platform => platform === 'AMP';
+// eslint-disable-next-line react/prop-types
+const Component = ({ isAmp = false } = {}) => (
+  <BrowserRouter>
+    <MediaAssetPage
+      pageType={MEDIA_ASSET_PAGE}
+      isAmp={isAmp}
+      pathname="/pathname"
+      status={200}
+      pageData={pageData}
+      service="pidgin"
+    />
+  </BrowserRouter>
+);
 
-const platforms = ['Canonical', 'AMP'];
+export default {
+  Component,
+  title: 'Pages/Media Asset Page',
+  decorators: [story => <WithTimeMachine>{story()}</WithTimeMachine>],
+};
 
-platforms.forEach(platform => {
-  const mapStories = storiesOf(`Pages/Media Asset Page/${platform}`, module);
+export const Canonical = Component;
 
-  mapStories.addDecorator(story => (
-    <WithTimeMachine>{story()}</WithTimeMachine>
-  ));
-
-  if (isAmp(platform)) {
-    mapStories.addDecorator(AmpDecorator);
-  }
-
-  mapStories.add('default', () => {
-    return (
-      <BrowserRouter>
-        <MediaAssetPage
-          pageType={MEDIA_ASSET_PAGE}
-          isAmp={isAmp(platform)}
-          pathname="/pathname"
-          status={200}
-          pageData={pageData}
-          service="pidgin"
-        />
-      </BrowserRouter>
-    );
-  });
-});
+export const Amp = () => <Component isAmp />;
+Amp.decorators = [AmpDecorator];
diff --git a/src/app/pages/MostReadPage/index.stories.jsx b/src/app/pages/MostReadPage/index.stories.jsx
index b157d2fb1a1..97be572c399 100644
--- a/src/app/pages/MostReadPage/index.stories.jsx
+++ b/src/app/pages/MostReadPage/index.stories.jsx
@@ -1,43 +1,38 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { storiesOf } from '@storybook/react';
 import { getLocalMostReadEndpoint } from '#lib/utilities/getUrlHelpers/getMostReadUrls';
 import MostReadPage from '.';
 import pidginMostReadData from '#data/pidgin/mostRead';
 import zhongwenSimpData from '#data/zhongwen/mostRead/simp.json';
 import { MOST_READ_PAGE } from '#app/routes/utils/pageTypes';
 
-const stories = storiesOf('Pages/Most Read Page', module);
+// eslint-disable-next-line react/prop-types
+const Component = ({ service, pageData, variant = 'default' } = {}) => (
+  <BrowserRouter>
+    <MostReadPage
+      pageType={MOST_READ_PAGE}
+      isAmp={false}
+      pathname="/path"
+      status={200}
+      pageData={pageData}
+      service={service}
+      variant={variant}
+      mostReadEndpointOverride={getLocalMostReadEndpoint({
+        service,
+        variant,
+      })}
+    />
+  </BrowserRouter>
+);
 
-[
-  {
-    service: 'pidgin',
-    variant: 'default',
-    pageData: pidginMostReadData,
-  },
-  {
-    service: 'zhongwen',
-    variant: 'simp',
-    pageData: zhongwenSimpData,
-  },
-].forEach(({ service, pageData, variant }) => {
-  stories.add(`${service} ${variant === 'default' ? '' : variant}`, () => {
-    return (
-      <BrowserRouter>
-        <MostReadPage
-          pageType={MOST_READ_PAGE}
-          isAmp={false}
-          pathname="/path"
-          status={200}
-          pageData={pageData}
-          service={service}
-          variant={variant}
-          mostReadEndpointOverride={getLocalMostReadEndpoint({
-            service,
-            variant,
-          })}
-        />
-      </BrowserRouter>
-    );
-  });
-});
+export default {
+  Component,
+  title: 'Pages/Most Read Page',
+};
+
+export const Pidgin = () => (
+  <Component service="pidgin" pageData={pidginMostReadData} />
+);
+export const ZhongwenSimple = () => (
+  <Component service="zhongwen" variant="simp" pageData={zhongwenSimpData} />
+);
diff --git a/src/app/pages/OnDemandAudioPage/index.stories.jsx b/src/app/pages/OnDemandAudioPage/index.stories.jsx
index c157f2350e1..d3554eda15d 100644
--- a/src/app/pages/OnDemandAudioPage/index.stories.jsx
+++ b/src/app/pages/OnDemandAudioPage/index.stories.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
 import { OnDemandAudioPage } from '..';
@@ -24,29 +23,38 @@ const matchFixtures = service => ({
   },
 });
 
-const status = 200;
+// eslint-disable-next-line react/prop-types
+const Component = ({ service }) => (
+  <BrowserRouter>
+    <OnDemandAudioPage
+      match={matchFixtures(service)}
+      pageData={onDemandRadioFixtures[service]}
+      status={200}
+      service={service}
+      isAmp={false}
+      loading={false}
+      error=""
+      pageType={MEDIA_PAGE}
+    />
+  </BrowserRouter>
+);
 
-storiesOf('Pages/OnDemand Radio Page', module)
-  .addDecorator(story => <WithTimeMachine>{story()}</WithTimeMachine>)
-  .addDecorator(withKnobs)
-  .addDecorator(
+export default {
+  Component,
+  title: 'Pages/OnDemand Radio Page',
+  decorators: [
+    withKnobs,
     withServicesKnob({
       defaultService: 'indonesia',
       services: Object.keys(onDemandRadioFixtures),
     }),
-  )
-  .addParameters({ chromatic: { diffThreshold: 0.2 } })
-  .add('default', ({ service }) => (
-    <BrowserRouter>
-      <OnDemandAudioPage
-        match={matchFixtures(service)}
-        pageData={onDemandRadioFixtures[service]}
-        status={status}
-        service={service}
-        isAmp={false}
-        loading={false}
-        error=""
-        pageType={MEDIA_PAGE}
-      />
-    </BrowserRouter>
-  ));
+    story => <WithTimeMachine>{story()}</WithTimeMachine>,
+  ],
+  parameters: {
+    chromatic: {
+      values: [{ name: 'diffThreshold', value: 0.2 }],
+    },
+  },
+};
+
+export const Page = Component;
diff --git a/src/app/pages/OnDemandTvPage/index.stories.jsx b/src/app/pages/OnDemandTvPage/index.stories.jsx
index 22ad49dfcd4..e9f5914f071 100644
--- a/src/app/pages/OnDemandTvPage/index.stories.jsx
+++ b/src/app/pages/OnDemandTvPage/index.stories.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
-import { storiesOf } from '@storybook/react';
 import { withKnobs } from '@storybook/addon-knobs';
 import { withServicesKnob } from '@bbc/psammead-storybook-helpers';
 import { OnDemandTvPage } from '..';
@@ -23,28 +22,33 @@ const matchFixtures = service => ({
   },
 });
 
-const status = 200;
+// eslint-disable-next-line react/prop-types
+const Component = ({ service }) => (
+  <BrowserRouter>
+    <OnDemandTvPage
+      match={matchFixtures(service)}
+      pageData={onDemandTvFixtures[service]}
+      status={200}
+      service={service}
+      isAmp={false}
+      loading={false}
+      error=""
+      pageType={MEDIA_PAGE}
+    />
+  </BrowserRouter>
+);
 
-storiesOf('Pages/OnDemand TV Page', module)
-  .addDecorator(story => <WithTimeMachine>{story()}</WithTimeMachine>)
-  .addDecorator(withKnobs)
-  .addDecorator(
+export default {
+  Component,
+  title: 'Pages/OnDemand TV Page',
+  decorators: [
+    withKnobs,
     withServicesKnob({
       defaultService: 'pashto',
       services: Object.keys(onDemandTvFixtures),
     }),
-  )
-  .add('default', ({ service }) => (
-    <BrowserRouter>
-      <OnDemandTvPage
-        match={matchFixtures(service)}
-        pageData={onDemandTvFixtures[service]}
-        status={status}
-        service={service}
-        isAmp={false}
-        loading={false}
-        error=""
-        pageType={MEDIA_PAGE}
-      />
-    </BrowserRouter>
-  ));
+    story => <WithTimeMachine>{story()}</WithTimeMachine>,
+  ],
+};
+
+export const Page = Component;
diff --git a/src/app/pages/PhotoGalleryPage/index.stories.jsx b/src/app/pages/PhotoGalleryPage/index.stories.jsx
index 2fc82e88856..00f1a3e90b4 100644
--- a/src/app/pages/PhotoGalleryPage/index.stories.jsx
+++ b/src/app/pages/PhotoGalleryPage/index.stories.jsx
@@ -1,26 +1,27 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
 import { BrowserRouter } from 'react-router-dom';
 import WithTimeMachine from '#testHelpers/withTimeMachine';
 import { PhotoGalleryPage } from '..';
 import pageData from './fixtureData';
 import { PHOTO_GALLERY_PAGE } from '#app/routes/utils/pageTypes';
 
-const pglStories = storiesOf('Pages/Photo Gallery Page', module);
+const Component = () => (
+  <BrowserRouter>
+    <PhotoGalleryPage
+      pageType={PHOTO_GALLERY_PAGE}
+      isAmp={false}
+      pathname="/path"
+      status={200}
+      pageData={pageData}
+      service="azeri"
+    />
+  </BrowserRouter>
+);
 
-pglStories.addDecorator(story => <WithTimeMachine>{story()}</WithTimeMachine>);
+export default {
+  Component,
+  title: 'Pages/Photo Gallery Page',
+  decorators: [story => <WithTimeMachine>{story()}</WithTimeMachine>],
+};
 
-pglStories.add('Azeri', () => {
-  return (
-    <BrowserRouter>
-      <PhotoGalleryPage
-        pageType={PHOTO_GALLERY_PAGE}
-        isAmp={false}
-        pathname="/path"
-        status={200}
-        pageData={pageData}
-        service="azeri"
-      />
-    </BrowserRouter>
-  );
-});
+export const Azeri = Component;
diff --git a/src/app/pages/StoryPage/index.stories.jsx b/src/app/pages/StoryPage/index.stories.jsx
index 5dc57891180..b6162196fcb 100644
--- a/src/app/pages/StoryPage/index.stories.jsx
+++ b/src/app/pages/StoryPage/index.stories.jsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { storiesOf } from '@storybook/react';
-import { withKnobs, select } from '@storybook/addon-knobs';
+import { withKnobs, boolean } from '@storybook/addon-knobs';
 import { BrowserRouter } from 'react-router-dom';
 import WithTimeMachine from '#testHelpers/withTimeMachine';
 
@@ -10,63 +9,59 @@ import persianPageData from './fixtureData/persian';
 import { STORY_PAGE } from '#app/routes/utils/pageTypes';
 
 const withSecondaryColumnsKnob = pageData => storyFn => {
-  const options = {
-    'without Top Stories': 'topStories',
-    'without Features': 'features',
-    'without Features & Top Stories': ['features', 'topStories'],
-    default: '',
-  };
-  const selectedColumns = select(
-    'Select secondary column options',
-    options,
-    '',
-    'STY-SECONDARY-COLUMN',
-  );
+  const showTopStories = boolean('Show Top Stories', true);
+  const showFeaturedStories = boolean('Show Featured Stories', true);
 
   const secondaryColumn = {
-    ...(!selectedColumns.includes('topStories') && {
+    ...(showTopStories && {
       topStories: pageData.secondaryColumn.features,
     }),
-    ...(!selectedColumns.includes('features') && {
+    ...(showFeaturedStories && {
       features: pageData.secondaryColumn.features,
     }),
   };
 
   const storyProps = {
-    data: {
+    pageData: {
       ...pageData,
       secondaryColumn,
     },
   };
   return storyFn(storyProps);
 };
-[
-  {
-    service: 'mundo',
-    pageData: mundoPageData,
-  },
-  {
-    service: 'persian',
-    pageData: persianPageData,
-  },
-].forEach(({ service, pageData }) => {
-  return storiesOf('Pages/Story Page', module)
-    .addDecorator(story => <WithTimeMachine>{story()}</WithTimeMachine>)
-    .addDecorator(withKnobs)
-    .addDecorator(withSecondaryColumnsKnob(pageData))
-    .add(service, () => {
-      return (
-        <BrowserRouter>
-          <StoryPage
-            pageType={STORY_PAGE}
-            isAmp={false}
-            pathname="/path"
-            status={200}
-            pageData={pageData}
-            service={service}
-            mostReadEndpointOverride="./data/mundo/mostRead/index.json"
-          />
-        </BrowserRouter>
-      );
-    });
-});
+
+// eslint-disable-next-line react/prop-types
+const Component = ({ pageData, service }) => (
+  <BrowserRouter>
+    <StoryPage
+      pageType={STORY_PAGE}
+      isAmp={false}
+      pathname="/path"
+      status={200}
+      pageData={pageData}
+      service={service}
+      mostReadEndpointOverride="./data/mundo/mostRead/index.json"
+    />
+  </BrowserRouter>
+);
+
+export default {
+  Component,
+  title: 'Pages/Story Page',
+  decorators: [
+    withKnobs,
+    story => <WithTimeMachine>{story()}</WithTimeMachine>,
+  ],
+};
+
+export const Mundo = props => (
+  <Component service="mundo" pageData={mundoPageData} {...props} />
+);
+
+Mundo.decorators = [withSecondaryColumnsKnob(mundoPageData)];
+
+export const Persian = props => (
+  <Component service="persian" pageData={persianPageData} {...props} />
+);
+
+Persian.decorators = [withSecondaryColumnsKnob(persianPageData)];