Datawrapper embed styling

dotcom-rendering/README.md

@@ -110,7 +110,7 @@ If you get lint errors, you can attempt to automatically fix them with:
 $ make fix
 ```
 
-See [the makefile](https://github.com/guardian/dotcom-rendering/blob/main/dotcom-rendering/makefile) for the full list.
+See [the makefile](./makefile) for the full list.
 
 [Read about testing tools and testing strategy](docs/testing.md).
 

dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx

@@ -1,6 +1,12 @@
 import { css } from '@emotion/react';
+import type { SerializedStyles } from '@emotion/react';
 import { isUndefined } from '@guardian/libs';
-import { article17, space, textSans17 } from '@guardian/source/foundations';
+import {
+	article17,
+	from,
+	space,
+	textSans17,
+} from '@guardian/source/foundations';
 import libDebounce from 'lodash.debounce';
 import { useRef, useState } from 'react';
 import { interactiveLegacyFigureClasses } from '../layouts/lib/interactiveLegacyStyling';
@@ -99,19 +105,88 @@ const wrapperStyle = ({
 	format,
 	role,
 	loaded,
+	isDatawrapperGraphic,
 }: {
 	format: ArticleFormat;
 	role: RoleType;
 	loaded: boolean;
+	isDatawrapperGraphic: boolean;
 }) => css`
 	${format.theme === ArticleSpecial.Labs ? textSans17 : article17}
 	background-color: ${themePalette('--interactive-block-background')};
 	min-height: ${getMinHeight(role, loaded)};
 	position: relative;
 	display: flex;
 	flex-direction: column;
+	${isDatawrapperGraphic
+		? `
+	border-top: 1px solid ${themePalette('--branding-border')};
+	padding-top: ${space[2]}px;
+	`
+		: ''}
 `;
 
+const datawrapperRoleStyles = (role: RoleType): SerializedStyles | null => {
+	switch (role) {
+		case 'inline':
+			return datawrapperRoleCss.inline;
+		case 'supporting':
+			return datawrapperRoleCss.supporting;
+		case 'immersive':
+			return datawrapperRoleCss.immersive;
+		case 'showcase':
+			return datawrapperRoleCss.showcase;
+		case 'thumbnail':
+		case 'halfWidth':
+			return null;
+	}
+};
+
+const datawrapperRoleCss = {
+	inline: css`
+		margin-top: ${space[6]}px;
+		margin-bottom: ${space[6]}px;
+	`,
+
+	supporting: css`
+		clear: left;
+		margin-top: ${space[6]}px;
+		margin-bottom: ${space[6]}px;
+
+		${from.leftCol} {
+			margin-bottom: ${space[2]}px;
+			padding-bottom: ${space[4]}px;
+			border-bottom: 1px solid ${themePalette('--branding-border')};
+		}
+		${from.wide} {
+			width: 380px;
+			margin-left: -240px;
+		}
+	`,
+
+	immersive: css`
+		margin-top: ${space[6]}px;
+		margin-bottom: ${space[6]}px;
+
+		${from.leftCol} {
+			margin-bottom: ${space[4]}px;
+			padding-bottom: ${space[4]}px;
+			border-bottom: 1px solid ${themePalette('--branding-border')};
+		}
+	`,
+
+	showcase: css`
+		margin-top: ${space[6]}px;
+		margin-bottom: ${space[6]}px;
+
+		${from.leftCol} {
+			margin-bottom: ${space[4]}px;
+			padding-bottom: ${space[4]}px;
+			border-bottom: 1px solid ${themePalette('--branding-border')};
+		}
+	`,
+};
+
 const placeholderLinkStyle = css`
 	position: absolute;
 	bottom: ${space[1]}px;
@@ -295,6 +370,13 @@ export const InteractiveBlockComponent = ({
 		}
 	}, [loaded]);
 
+	const isDatawrapperGraphic =
+		url == undefined
+			? false
+			: /^https?:\/\/interactive\.guim\.co\.uk\/datawrapper(-test)?\/embed/.test(
+					url,
+			  );
+
 	return (
 		<>
 			<figure
@@ -304,7 +386,13 @@ export const InteractiveBlockComponent = ({
 					isMainMedia
 						? mainMediaFigureStyles
 						: defaultRoleStyles(role, format),
-					wrapperStyle({ format, role, loaded }),
+					isDatawrapperGraphic ? datawrapperRoleStyles(role) : null,
+					wrapperStyle({
+						format,
+						role,
+						loaded,
+						isDatawrapperGraphic,
+					}),
 				]}
 				className={interactiveLegacyFigureClasses(
 					'model.dotcomrendering.pageElements.InteractiveBlockElement',

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

@@ -1,9 +1,13 @@
-import { css } from '@emotion/react';
 import type { StoryObj } from '@storybook/react';
 import type { StoryProps } from '../../.storybook/decorators/splitThemeDecorator';
 import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { ArticleDesign, ArticleDisplay, Pillar } from '../lib/articleFormat';
+import { ArticleContainer } from './ArticleContainer';
+import { Flex } from './Flex';
 import { InteractiveBlockComponent } from './InteractiveBlockComponent.importable';
+import { LeftColumn } from './LeftColumn';
+import { RightColumn } from './RightColumn';
+import { Section } from './Section';
 import { TextBlockComponent } from './TextBlockComponent';
 
 export default {
@@ -26,14 +30,25 @@ const SomeText = () => (
 );
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => (
-	<div
-		css={css`
-			padding-left: 250px;
-			padding-right: 20px;
-		`}
-	>
-		{children}
-	</div>
+	<Section fullWidth={true} showTopBorder={false}>
+		<Flex>
+			<LeftColumn>
+				<></>
+			</LeftColumn>
+			<ArticleContainer
+				format={{
+					display: ArticleDisplay.Standard,
+					design: ArticleDesign.Standard,
+					theme: Pillar.News,
+				}}
+			>
+				{children}
+			</ArticleContainer>
+			<RightColumn>
+				<></>
+			</RightColumn>
+		</Flex>
+	</Section>
 );
 
 const defaultFormat = {
@@ -159,3 +174,123 @@ NonBootJs.storyName = 'Non-boot.js interactive element';
 NonBootJs.decorators = [
 	splitTheme([defaultFormat], { orientation: 'vertical' }),
 ];
+
+export const DatawrapperInline = ({ format }: StoryProps) => {
+	return (
+		<Wrapper>
+			<SomeText />
+			<SomeText />
+			<InteractiveBlockComponent
+				url="https://interactive.guim.co.uk/datawrapper-test/embed/5ApVq/1/"
+				scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
+				alt="map"
+				role="inline"
+				format={format}
+				isMainMedia={false}
+			/>
+			<SomeText />
+			<SomeText />
+			<SomeText />
+		</Wrapper>
+	);
+};
+DatawrapperInline.storyName = 'Datawrapper Inline role';
+DatawrapperInline.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
+
+export const DatawrapperSupporting = ({ format }: StoryProps) => {
+	return (
+		<Wrapper>
+			<SomeText />
+			<SomeText />
+			<InteractiveBlockComponent
+				url="https://interactive.guim.co.uk/datawrapper-test/embed/5ApVq/1/"
+				scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
+				alt="map"
+				role="supporting"
+				format={format}
+				isMainMedia={false}
+			/>
+			<SomeText />
+			<SomeText />
+			<SomeText />
+		</Wrapper>
+	);
+};
+DatawrapperSupporting.storyName = 'Datawrapper Supporting role';
+DatawrapperSupporting.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
+
+export const DatawrapperShowcase = ({ format }: StoryProps) => {
+	return (
+		<Wrapper>
+			<SomeText />
+			<SomeText />
+			<InteractiveBlockComponent
+				url="https://interactive.guim.co.uk/datawrapper-test/embed/5ApVq/1/"
+				scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
+				alt="map"
+				role="showcase"
+				format={format}
+				isMainMedia={false}
+			/>
+			<SomeText />
+			<SomeText />
+			<SomeText />
+		</Wrapper>
+	);
+};
+DatawrapperShowcase.storyName = 'Datawrapper Showcase role';
+DatawrapperShowcase.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
+
+export const DatawrapperThumbnail = ({ format }: StoryProps) => {
+	return (
+		<Wrapper>
+			<SomeText />
+			<SomeText />
+			<InteractiveBlockComponent
+				url="https://interactive.guim.co.uk/datawrapper-test/embed/5ApVq/1/"
+				scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
+				alt="map"
+				role="thumbnail"
+				format={format}
+				isMainMedia={false}
+			/>
+			<SomeText />
+			<SomeText />
+			<SomeText />
+		</Wrapper>
+	);
+};
+DatawrapperThumbnail.storyName = 'Datawrapper Thumbnail role';
+DatawrapperThumbnail.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];
+
+export const DatawrapperImmersive = ({ format }: StoryProps) => {
+	return (
+		<Wrapper>
+			<SomeText />
+			<SomeText />
+			<InteractiveBlockComponent
+				url="https://interactive.guim.co.uk/datawrapper-test/embed/5ApVq/1/"
+				scriptUrl="https://interactive.guim.co.uk/embed/iframe-wrapper/0.1/boot.js"
+				alt="map"
+				role="immersive"
+				format={format}
+				isMainMedia={false}
+			/>
+			<SomeText />
+			<SomeText />
+			<SomeText />
+		</Wrapper>
+	);
+};
+DatawrapperImmersive.storyName = 'Datawrapper Immersive role';
+DatawrapperImmersive.decorators = [
+	splitTheme([defaultFormat], { orientation: 'vertical' }),
+];