Skip to content

Commit cd2f632

Browse files
emdash-ieemdash-ie
committed
Add Datawrapper embed stories
I’ve added a story with a Datawrapper embed for each role, to have an easy way to look at the styling. I’ve also tweaked the Wrapper used in the InteractiveBlockComponent stories to match that used in the Figure stories. Since the layouts are similar, I think this should be fine?
1 parent 05bda76 commit cd2f632

File tree

1 file changed

+144
-9
lines changed

1 file changed

+144
-9
lines changed

‎dotcom-rendering/src/components/InteractiveBlockComponent.stories.tsx

Lines changed: 144 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,13 @@
1-
import { css } from '@emotion/react';
21
import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
32
import type { StoryObj } from '@storybook/react';
43
import type { StoryProps } from '../../.storybook/decorators/splitThemeDecorator';
54
import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
5+
import { ArticleContainer } from './ArticleContainer';
6+
import { Flex } from './Flex';
67
import { InteractiveBlockComponent } from './InteractiveBlockComponent.importable';
8+
import { LeftColumn } from './LeftColumn';
9+
import { RightColumn } from './RightColumn';
10+
import { Section } from './Section';
711
import { TextBlockComponent } from './TextBlockComponent';
812

913
export default {
@@ -26,14 +30,25 @@ const SomeText = () => (
2630
);
2731

2832
const Wrapper = ({ children }: { children: React.ReactNode }) => (
29-
<div
30-
css={css`
31-
padding-left: 250px;
32-
padding-right: 20px;
33-
`}
34-
>
35-
{children}
36-
</div>
33+
<Section fullWidth={true} showTopBorder={false}>
34+
<Flex>
35+
<LeftColumn>
36+
<></>
37+
</LeftColumn>
38+
<ArticleContainer
39+
format={{
40+
display: ArticleDisplay.Standard,
41+
design: ArticleDesign.Standard,
42+
theme: Pillar.News,
43+
}}
44+
>
45+
{children}
46+
</ArticleContainer>
47+
<RightColumn>
48+
<></>
49+
</RightColumn>
50+
</Flex>
51+
</Section>
3752
);
3853

3954
const defaultFormat = {
@@ -159,3 +174,123 @@ NonBootJs.storyName = 'Non-boot.js interactive element';
159174
NonBootJs.decorators = [
160175
splitTheme([defaultFormat], { orientation: 'vertical' }),
161176
];
177+
178+
export const DatawrapperInline = ({ format }: StoryProps) => {
179+
return (
180+
<Wrapper>
181+
<SomeText />
182+
<SomeText />
183+
<InteractiveBlockComponent
184+
url="https://interactive.guim.co.uk/datawrapper-test/embed/IIdJx/25/"
185+
scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
186+
alt="map"
187+
role="inline"
188+
format={format}
189+
isMainMedia={false}
190+
/>
191+
<SomeText />
192+
<SomeText />
193+
<SomeText />
194+
</Wrapper>
195+
);
196+
};
197+
DatawrapperInline.storyName = 'Datawrapper Inline role';
198+
DatawrapperInline.decorators = [
199+
splitTheme([defaultFormat], { orientation: 'vertical' }),
200+
];
201+
202+
export const DatawrapperSupporting = ({ format }: StoryProps) => {
203+
return (
204+
<Wrapper>
205+
<SomeText />
206+
<SomeText />
207+
<InteractiveBlockComponent
208+
url="https://interactive.guim.co.uk/datawrapper-test/embed/IIdJx/25/"
209+
scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
210+
alt="map"
211+
role="supporting"
212+
format={format}
213+
isMainMedia={false}
214+
/>
215+
<SomeText />
216+
<SomeText />
217+
<SomeText />
218+
</Wrapper>
219+
);
220+
};
221+
DatawrapperSupporting.storyName = 'Datawrapper Supporting role';
222+
DatawrapperSupporting.decorators = [
223+
splitTheme([defaultFormat], { orientation: 'vertical' }),
224+
];
225+
226+
export const DatawrapperShowcase = ({ format }: StoryProps) => {
227+
return (
228+
<Wrapper>
229+
<SomeText />
230+
<SomeText />
231+
<InteractiveBlockComponent
232+
url="https://interactive.guim.co.uk/datawrapper-test/embed/IIdJx/25/"
233+
scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
234+
alt="map"
235+
role="showcase"
236+
format={format}
237+
isMainMedia={false}
238+
/>
239+
<SomeText />
240+
<SomeText />
241+
<SomeText />
242+
</Wrapper>
243+
);
244+
};
245+
DatawrapperShowcase.storyName = 'Datawrapper Showcase role';
246+
DatawrapperShowcase.decorators = [
247+
splitTheme([defaultFormat], { orientation: 'vertical' }),
248+
];
249+
250+
export const DatawrapperThumbnail = ({ format }: StoryProps) => {
251+
return (
252+
<Wrapper>
253+
<SomeText />
254+
<SomeText />
255+
<InteractiveBlockComponent
256+
url="https://interactive.guim.co.uk/datawrapper-test/embed/IIdJx/25/"
257+
scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
258+
alt="map"
259+
role="thumbnail"
260+
format={format}
261+
isMainMedia={false}
262+
/>
263+
<SomeText />
264+
<SomeText />
265+
<SomeText />
266+
</Wrapper>
267+
);
268+
};
269+
DatawrapperThumbnail.storyName = 'Datawrapper Thumbnail role';
270+
DatawrapperThumbnail.decorators = [
271+
splitTheme([defaultFormat], { orientation: 'vertical' }),
272+
];
273+
274+
export const DatawrapperImmersive = ({ format }: StoryProps) => {
275+
return (
276+
<Wrapper>
277+
<SomeText />
278+
<SomeText />
279+
<InteractiveBlockComponent
280+
url="https://interactive.guim.co.uk/datawrapper-test/embed/IIdJx/25/"
281+
scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
282+
alt="map"
283+
role="immersive"
284+
format={format}
285+
isMainMedia={false}
286+
/>
287+
<SomeText />
288+
<SomeText />
289+
<SomeText />
290+
</Wrapper>
291+
);
292+
};
293+
DatawrapperImmersive.storyName = 'Datawrapper Immersive role';
294+
DatawrapperImmersive.decorators = [
295+
splitTheme([defaultFormat], { orientation: 'vertical' }),
296+
];

0 commit comments

Comments
 (0)