Add Grid example to Storybook

src/app/containers/ArticleMain/index.stories.jsx

@@ -1,42 +1,26 @@
 import React from 'react';
 import { storiesOf } from '@storybook/react';
-import { inputProvider } from '@bbc/psammead-storybook-helpers';
 import { withKnobs } from '@storybook/addon-knobs';
 import { ServiceContextProvider } from '../../contexts/ServiceContext';
 import { ToggleContextProvider } from '../../contexts/ToggleContext';
 import { RequestContextProvider } from '../../contexts/RequestContext';
-
 import ArticleMain from '.';
-import { articleDataNews, articleDataPersian } from '../Article/fixtureData';
+
+// 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 availableFixtures = {
-  news: articleDataNews,
-  persian: articleDataPersian,
-};
 
-storiesOf('Containers|Article/Article Main', module)
+storiesOf('Main|Article', module)
   .addDecorator(withKnobs)
-  .add(
-    'default',
-    inputProvider({
-      // eslint-disable-next-line react/prop-types
-      componentFunction: ({ service }) => {
-        return (
-          <ToggleContextProvider>
-            <ServiceContextProvider service={service}>
-              <RequestContextProvider
-                isAmp={false}
-                pageType="article"
-                service={service}
-              >
-                <ArticleMain articleData={availableFixtures[service]} />
-              </RequestContextProvider>
-            </ServiceContextProvider>
-          </ToggleContextProvider>
-        );
-      },
-      services: Object.keys(availableFixtures),
-    }),
-  );
+  .add('Articles', () => (
+    <ToggleContextProvider>
+      <ServiceContextProvider service="news">
+        <RequestContextProvider isAmp={false} pageType="article" service="news">
+          <ArticleMain articleData={articleData} />
+        </RequestContextProvider>
+      </ServiceContextProvider>
+    </ToggleContextProvider>
+  ));

src/app/containers/FrontPage/index.stories.jsx

@@ -5,7 +5,7 @@ import pidginData from '../../../../data/pidgin/frontpage';
 import addIdsToItems from '../../lib/utilities/preprocessor/rules/addIdsToItems';
 import thaiData from '../../../../data/thai/frontpage';
 import yorubaData from '../../../../data/yoruba/frontpage';
-
+import punjabiData from '../../../../data/punjabi/frontpage';
 import filterUnknownContentTypes from '../../lib/utilities/preprocessor/rules/filterContentType';
 import filterEmptyGroupItems from '../../lib/utilities/preprocessor/rules/filterEmptyGroupItems';
 import applySquashTopstories from '../../lib/utilities/preprocessor/rules/topstories';
@@ -19,80 +19,36 @@ const preprocessorRules = [
   applySquashTopstories,
 ];
 
-storiesOf('Pages|Front Page', module)
-  .add('Igbo', () => {
-    const igboFrontPageData = preprocess(igboData, preprocessorRules);
-
-    const data = {
-      pageData: igboFrontPageData,
-      status: 200,
-    };
-
-    return (
-      <FrontPage
-        data={data}
-        service="igbo"
-        isAmp={false}
-        loading={false}
-        error=""
-        pageType="frontPage"
-      />
-    );
-  })
-  .add('Yoruba', () => {
-    const yorubaFrontPageData = preprocess(yorubaData, preprocessorRules);
-
-    const data = {
-      pageData: yorubaFrontPageData,
-      status: 200,
-    };
-
-    return (
-      <FrontPage
-        data={data}
-        service="yoruba"
-        isAmp={false}
-        loading={false}
-        error=""
-        pageType="frontPage"
-      />
-    );
-  })
-  .add('Pidgin', () => {
-    const pidginFrontPageData = preprocess(pidginData, preprocessorRules);
-
-    const data = {
-      pageData: pidginFrontPageData,
-      status: 200,
-    };
-
-    return (
-      <FrontPage
-        data={data}
-        service="pidgin"
-        isAmp={false}
-        loading={false}
-        error=""
-        pageType="frontPage"
-      />
+const serviceDatasets = {
+  igbo: igboData,
+  yoruba: yorubaData,
+  pidgin: pidginData,
+  thai: thaiData,
+  punjabi: punjabiData,
+};
+
+const stories = storiesOf('Pages|Front Page', module);
+Object.keys(serviceDatasets).forEach(service => {
+  stories.add(service, () => {
+    const frontPageData = preprocess(
+      serviceDatasets[service],
+      preprocessorRules,
     );
-  })
-  .add('Thai', () => {
-    const thaiFrontPageData = preprocess(thaiData, preprocessorRules);
 
     const data = {
-      pageData: thaiFrontPageData,
+      pageData: frontPageData,
       status: 200,
     };
 
     return (
       <FrontPage
         data={data}
-        service="thai"
+        service={service}
         isAmp={false}
         loading={false}
-        error=""
+        error={null}
         pageType="frontPage"
       />
     );
   });
+});

src/app/containers/FrontPageMain/index.stories.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { storiesOf } from '@storybook/react';
+import newsData from '../../../../data/news/frontpage';
+import igboData from '../../../../data/igbo/frontpage';
+import pidginData from '../../../../data/pidgin/frontpage';
+import thaiData from '../../../../data/thai/frontpage';
+import yorubaData from '../../../../data/yoruba/frontpage';
+import punjabiData from '../../../../data/punjabi/frontpage';
+import FrontPageMain from '.';
+import { ServiceContextProvider } from '../../contexts/ServiceContext';
+import { ToggleContextProvider } from '../../contexts/ToggleContext';
+import { RequestContextProvider } from '../../contexts/RequestContext';
+
+const serviceDataSets = {
+  news: newsData,
+  igbo: igboData,
+  yoruba: yorubaData,
+  pidgin: pidginData,
+  thai: thaiData,
+  punjabi: punjabiData,
+};
+
+const stories = storiesOf('Main|Front Page', module);
+
+Object.keys(serviceDataSets).forEach(service => {
+  stories.add(`Front Page - ${service}`, () => (
+    <ToggleContextProvider>
+      <ServiceContextProvider service={service}>
+        <RequestContextProvider
+          isAmp={false}
+          pageType="frontPage"
+          service={service}
+        >
+          <FrontPageMain frontPageData={serviceDataSets[service]} />
+        </RequestContextProvider>
+      </ServiceContextProvider>
+    </ToggleContextProvider>
+  ));
+});