Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Storybook Rewrite - Pages #9229

Merged
merged 1 commit into from
Jul 13, 2021
Merged

Storybook Rewrite - Pages #9229

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 30 additions & 30 deletions src/app/pages/ArticlePage/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
78 changes: 26 additions & 52 deletions src/app/pages/ErrorPage/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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} />;
25 changes: 12 additions & 13 deletions src/app/pages/FeatureIdxPage/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
55 changes: 30 additions & 25 deletions src/app/pages/FrontPage/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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" />;
33 changes: 15 additions & 18 deletions src/app/pages/IdxPage/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
52 changes: 30 additions & 22 deletions src/app/pages/LiveRadioPage/index.stories.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 '..';
Expand Down Expand Up @@ -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;
Loading