From 9f42a314b72a32a985b393cddb95b3343188222e Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Thu, 29 Aug 2024 20:14:00 +0100 Subject: [PATCH 01/13] Add example styling on datawrapper graphics This is an example of the kind of role-independent styling I would like to do on datawrapper graphics, by matching on the URL of the interactive element. --- .../InteractiveBlockComponent.importable.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx index a9366bfe968..2fc7c8dbc78 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx @@ -102,10 +102,12 @@ const wrapperStyle = ({ format, role, loaded, + url, }: { format: ArticleFormat; role: RoleType; loaded: boolean; + url?: string; }) => css` ${format.theme === ArticleSpecial.Labs ? textSans17 : article17} background-color: ${themePalette('--interactive-block-background')}; @@ -113,6 +115,14 @@ const wrapperStyle = ({ position: relative; display: flex; flex-direction: column; + ${url?.match( + /^https?:\/\/interactive\.guim\.co\.uk\/datawrapper(-test)?\/embed/, + ) + ? ` + border-top: 1px solid #dcdcdc; + padding-top: 8px; + ` + : ''} `; const placeholderLinkStyle = css` @@ -307,7 +317,7 @@ export const InteractiveBlockComponent = ({ isMainMedia ? mainMediaFigureStyles : defaultRoleStyles(role, format), - wrapperStyle({ format, role, loaded }), + wrapperStyle({ format, role, loaded, url }), ]} className={interactiveLegacyFigureClasses( 'model.dotcomrendering.pageElements.InteractiveBlockElement', From cbcae2db3f4eb268cadcf2d8c4664296bea87989 Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Thu, 5 Sep 2024 16:01:58 +0100 Subject: [PATCH 02/13] Add role-dependent styling This is an example of the kind of role-dependent styling I would like to make for datawrapper graphics. --- dotcom-rendering/src/components/Figure.tsx | 259 +++++++++--------- .../InteractiveBlockComponent.importable.tsx | 24 +- 2 files changed, 148 insertions(+), 135 deletions(-) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index 4f99a51b7de..aa4e0125e92 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -14,152 +14,155 @@ type Props = { isTimeline?: boolean; }; -const roleCss = { - inline: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - `, +const roleCss = (isDatawrapperGraphic: boolean) => { + return { + inline: css` + margin-top: ${space[3]}px; + margin-bottom: ${space[3]}px; + `, - supporting: css` - clear: left; - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - ${from.tablet} { - position: relative; - float: left; - width: 300px; - margin-right: 20px; - line-height: 0; - margin-top: ${space[2]}px; - } - ${from.leftCol} { - margin-left: -160px; - } - ${from.wide} { - width: 380px; - margin-left: -240px; - } - `, - - immersive: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - ${until.tablet} { - margin-left: -20px; - margin-right: -20px; - } - ${until.mobileLandscape} { - margin-left: -10px; - margin-right: -10px; - } - ${from.tablet} { - margin-left: -20px; - margin-right: -100px; - } - ${from.desktop} { - margin-left: -20px; - margin-right: -340px; - } - ${from.leftCol} { - margin-left: -160px; - margin-right: -320px; - } - ${from.wide} { - margin-left: -240px; - margin-right: -400px; - } - `, + supporting: css` + clear: left; + margin-top: ${space[3]}px; + margin-bottom: ${isDatawrapperGraphic ? space[5] : space[3]}px; + ${from.tablet} { + position: relative; + float: left; + width: 300px; + margin-right: 20px; + line-height: 0; + margin-top: ${space[2]}px; + } + ${from.leftCol} { + margin-left: -160px; + } + ${from.wide} { + width: 380px; + margin-left: -240px; + } + `, - showcase: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - position: relative; - ${from.leftCol} { - margin-left: -160px; - } - ${from.wide} { - margin-left: -240px; - } - `, + immersive: css` + margin-top: ${space[3]}px; + margin-bottom: ${space[3]}px; + ${until.tablet} { + margin-left: -20px; + margin-right: -20px; + } + ${until.mobileLandscape} { + margin-left: -10px; + margin-right: -10px; + } + ${from.tablet} { + margin-left: -20px; + margin-right: -100px; + } + ${from.desktop} { + margin-left: -20px; + margin-right: -340px; + } + ${from.leftCol} { + margin-left: -160px; + margin-right: -320px; + } + ${from.wide} { + margin-left: -240px; + margin-right: -400px; + } + `, - thumbnail: css` - margin-top: ${space[2]}px; - margin-bottom: ${space[2]}px; - float: left; - clear: left; - width: 120px; - margin-right: 20px; - ${from.tablet} { - width: 140px; - } - ${from.wide} { - margin-left: -240px; - } - ${from.leftCol} { + showcase: css` + margin-top: ${space[3]}px; + margin-bottom: ${space[3]}px; position: relative; - margin-left: -160px; - } - `, + ${from.leftCol} { + margin-left: -160px; + } + ${from.wide} { + margin-left: -240px; + } + `, - // This is a special use case where we want RichLinks to appear wider when in the left col - richLink: css` - margin-bottom: ${space[1]}px; - float: left; - clear: left; - width: 8.75rem; - margin-right: 20px; + thumbnail: css` + margin-top: ${space[2]}px; + margin-bottom: ${space[2]}px; + float: left; + clear: left; + width: 120px; + margin-right: 20px; + ${from.tablet} { + width: 140px; + } + ${from.wide} { + margin-left: -240px; + } + ${from.leftCol} { + position: relative; + margin-left: -160px; + } + `, - /* + // This is a special use case where we want RichLinks to appear wider when in the left col + richLink: css` + margin-bottom: ${space[1]}px; + float: left; + clear: left; + width: 8.75rem; + margin-right: 20px; + + /* Acts as until.mobileMedium but accounts for font scaling. On small screens and/or at certain font sizes, the RichLink will change to a full width version */ - @media (max-width: 23.4rem) { - width: 100%; - box-sizing: border-box; + @media (max-width: 23.4rem) { + width: 100%; + box-sizing: border-box; - img, - .avatar { - display: none; + img, + .avatar { + display: none; + } } - } - ${from.tablet} { - width: 140px; - } - ${from.leftCol} { - position: relative; - margin-left: -160px; - width: 140px; - } - ${from.wide} { - margin-left: -240px; - width: 220px; - } - `, + ${from.tablet} { + width: 140px; + } + ${from.leftCol} { + position: relative; + margin-left: -160px; + width: 140px; + } + ${from.wide} { + margin-left: -240px; + width: 220px; + } + `, - halfWidth: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - width: 50%; - float: left; - clear: left; - margin-right: 16px; - `, + halfWidth: css` + margin-top: ${space[3]}px; + margin-bottom: ${space[3]}px; + width: 50%; + float: left; + clear: left; + margin-right: 16px; + `, + }; }; // Used for vast majority of layouts. export const defaultRoleStyles = ( role: RoleType | 'richLink', format: ArticleFormat, + isDatawrapperGraphic: boolean, isTimeline = false, ) => { switch (role) { case 'inline': - return roleCss.inline; + return roleCss(isDatawrapperGraphic).inline; case 'supporting': - return roleCss.supporting; + return roleCss(isDatawrapperGraphic).supporting; case 'immersive': - return roleCss.immersive; + return roleCss(isDatawrapperGraphic).immersive; case 'showcase': if (isTimeline) { return css` @@ -175,28 +178,28 @@ export const defaultRoleStyles = ( } `; } - return roleCss.showcase; + return roleCss(isDatawrapperGraphic).showcase; case 'thumbnail': switch (format.design) { case ArticleDesign.LiveBlog: case ArticleDesign.DeadBlog: // In blogs we don't want to use negative left margins return css` - ${roleCss.thumbnail} + ${roleCss(isDatawrapperGraphic).thumbnail} /* It's important we use the media query here to ensure we override the default values */ ${from.leftCol} { margin-left: 0px; } `; default: - return roleCss.thumbnail; + return roleCss(isDatawrapperGraphic).thumbnail; } case 'richLink': - return roleCss.richLink; + return roleCss(isDatawrapperGraphic).richLink; case 'halfWidth': - return roleCss.halfWidth; + return roleCss(isDatawrapperGraphic).halfWidth; default: - return roleCss.inline; + return roleCss(isDatawrapperGraphic).inline; } }; @@ -230,7 +233,7 @@ export const Figure = ({ return (
css` ${format.theme === ArticleSpecial.Labs ? textSans17 : article17} background-color: ${themePalette('--interactive-block-background')}; @@ -115,9 +115,7 @@ const wrapperStyle = ({ position: relative; display: flex; flex-direction: column; - ${url?.match( - /^https?:\/\/interactive\.guim\.co\.uk\/datawrapper(-test)?\/embed/, - ) + ${isDatawrapperGraphic ? ` border-top: 1px solid #dcdcdc; padding-top: 8px; @@ -308,6 +306,13 @@ export const InteractiveBlockComponent = ({ } }, [loaded]); + const isDatawrapperGraphic = + url == undefined + ? false + : /^https?:\/\/interactive\.guim\.co\.uk\/datawrapper(-test)?\/embed/.test( + url, + ); + return ( <>
Date: Thu, 5 Sep 2024 17:38:49 +0100 Subject: [PATCH 03/13] Readme: use relative link to docs Relative links work well locally in text editors and on github, whereas an absolute link like this can be mildly frustrating when following from a text editor. --- dotcom-rendering/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/README.md b/dotcom-rendering/README.md index df2884fe5b0..ac6c2aa2555 100644 --- a/dotcom-rendering/README.md +++ b/dotcom-rendering/README.md @@ -139,7 +139,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). From 8f2b61774aba449408a11364125c1dfe52e04574 Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Tue, 1 Oct 2024 16:33:00 +0100 Subject: [PATCH 04/13] Add 32px top margin to Datawrapper embeds This 32px margin collapses with the existing 16px paragraph spacing. What about breakpoints? (Should I be using spacing constants? Probably) --- .../src/components/InteractiveBlockComponent.importable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx index 70361bcfb5b..6e0e6cf8e58 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx @@ -119,6 +119,7 @@ const wrapperStyle = ({ ? ` border-top: 1px solid #dcdcdc; padding-top: 8px; + margin-top: 32px; ` : ''} `; From 4ceab5b0cd89fc4670eb380e13dbd33feb69d03c Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Tue, 1 Oct 2024 16:52:27 +0100 Subject: [PATCH 05/13] Add 32px bottom margin to Datawrapper graphics --- .../src/components/InteractiveBlockComponent.importable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx index 6e0e6cf8e58..8abfa1166f1 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx @@ -120,6 +120,7 @@ const wrapperStyle = ({ border-top: 1px solid #dcdcdc; padding-top: 8px; margin-top: 32px; + margin-bottom: 32px; ` : ''} `; From 8256c533e714bad4dd04d260a9524a1170bf3ce2 Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Tue, 1 Oct 2024 17:39:58 +0100 Subject: [PATCH 06/13] Apply Datawrapper spacing only for some roles --- dotcom-rendering/src/components/Figure.tsx | 8 ++++---- .../components/InteractiveBlockComponent.importable.tsx | 2 -- 2 files changed, 4 insertions(+), 6 deletions(-) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index aa4e0125e92..1f1a5788318 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -17,8 +17,8 @@ type Props = { const roleCss = (isDatawrapperGraphic: boolean) => { return { inline: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; + margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px; + margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px; `, supporting: css` @@ -72,8 +72,8 @@ const roleCss = (isDatawrapperGraphic: boolean) => { `, showcase: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; + margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px; + margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px; position: relative; ${from.leftCol} { margin-left: -160px; diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx index 8abfa1166f1..70361bcfb5b 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx @@ -119,8 +119,6 @@ const wrapperStyle = ({ ? ` border-top: 1px solid #dcdcdc; padding-top: 8px; - margin-top: 32px; - margin-bottom: 32px; ` : ''} `; From 256ae395ddb8324a612c66dd16e767c861f4591f Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Mon, 21 Oct 2024 15:28:41 +0100 Subject: [PATCH 07/13] Use palette colour for top border MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This palette colour both matches the hex colour I had manually used, and seems like the most appropriate “border” colour listed in the file. Hopefully it’s a good choice: I must remember to ask in the PR. Also, looking at this has reminded me that I should check how my styling looks in dark mode! --- .../src/components/InteractiveBlockComponent.importable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx index 70361bcfb5b..f22c4f2ad85 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx @@ -117,7 +117,7 @@ const wrapperStyle = ({ flex-direction: column; ${isDatawrapperGraphic ? ` - border-top: 1px solid #dcdcdc; + border-top: 1px solid ${themePalette('--branding-border')}; padding-top: 8px; ` : ''} From 940653f94a542ebc379fa79f544d796458bba609 Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Mon, 21 Oct 2024 15:31:11 +0100 Subject: [PATCH 08/13] Add bottom border for some roles MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit For roles which move the graphics across the border on the side, we’d like to add a bottom border to avoid the odd reappearance of the side border after the graphic. --- dotcom-rendering/src/components/Figure.tsx | 19 +++++++++++++++++++ 1 file changed, 19 insertions(+) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index 1f1a5788318..7d72b5baf16 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -1,6 +1,7 @@ import { css } from '@emotion/react'; import { ArticleDesign, type ArticleFormat } from '@guardian/libs'; import { from, space, until } from '@guardian/source/foundations'; +import { palette as themePalette } from '../palette'; import type { FEElement, RoleType } from '../types/content'; type Props = { @@ -25,6 +26,12 @@ const roleCss = (isDatawrapperGraphic: boolean) => { clear: left; margin-top: ${space[3]}px; margin-bottom: ${isDatawrapperGraphic ? space[5] : space[3]}px; + ${isDatawrapperGraphic + ? `border-bottom: 1px solid ${themePalette( + '--branding-border', + )};` + : ''} + ${from.tablet} { position: relative; float: left; @@ -45,6 +52,12 @@ const roleCss = (isDatawrapperGraphic: boolean) => { immersive: css` margin-top: ${space[3]}px; margin-bottom: ${space[3]}px; + ${isDatawrapperGraphic + ? `border-bottom: 1px solid ${themePalette( + '--branding-border', + )};` + : ''} + ${until.tablet} { margin-left: -20px; margin-right: -20px; @@ -75,6 +88,12 @@ const roleCss = (isDatawrapperGraphic: boolean) => { margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px; margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px; position: relative; + ${isDatawrapperGraphic + ? `border-bottom: 1px solid ${themePalette( + '--branding-border', + )};` + : ''} + ${from.leftCol} { margin-left: -160px; } From 37983696b3e1349d535ee0f6b718d32ebff3fac3 Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Mon, 21 Oct 2024 17:05:34 +0100 Subject: [PATCH 09/13] Add padding inside bottom border --- dotcom-rendering/src/components/Figure.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index 7d72b5baf16..2db8ee3c8ff 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -29,7 +29,9 @@ const roleCss = (isDatawrapperGraphic: boolean) => { ${isDatawrapperGraphic ? `border-bottom: 1px solid ${themePalette( '--branding-border', - )};` + )}; + padding-bottom: ${space[4]}px; + ` : ''} ${from.tablet} { @@ -55,7 +57,9 @@ const roleCss = (isDatawrapperGraphic: boolean) => { ${isDatawrapperGraphic ? `border-bottom: 1px solid ${themePalette( '--branding-border', - )};` + )}; + padding-bottom: ${space[4]}px; + ` : ''} ${until.tablet} { @@ -91,7 +95,9 @@ const roleCss = (isDatawrapperGraphic: boolean) => { ${isDatawrapperGraphic ? `border-bottom: 1px solid ${themePalette( '--branding-border', - )};` + )}; + padding-bottom: ${space[4]}px; + ` : ''} ${from.leftCol} { From 135132fcd591fd1d6cccec9e73b04b48a0b1a90d Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Mon, 21 Oct 2024 17:05:55 +0100 Subject: [PATCH 10/13] Use space value for padding inside top border --- .../src/components/InteractiveBlockComponent.importable.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx index f22c4f2ad85..4acfc8d1992 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx +++ b/dotcom-rendering/src/components/InteractiveBlockComponent.importable.tsx @@ -118,7 +118,7 @@ const wrapperStyle = ({ ${isDatawrapperGraphic ? ` border-top: 1px solid ${themePalette('--branding-border')}; - padding-top: 8px; + padding-top: ${space[2]}px; ` : ''} `; From 05bda76ad3719cfef9cfe53fe9048bcb64fa2505 Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Mon, 21 Oct 2024 17:22:51 +0100 Subject: [PATCH 11/13] Keep large margins for supporting on mobile These margins were too small: the request from the visuals team is that they be 32px. --- dotcom-rendering/src/components/Figure.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index 2db8ee3c8ff..c1bfb0abae5 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -24,8 +24,8 @@ const roleCss = (isDatawrapperGraphic: boolean) => { supporting: css` clear: left; - margin-top: ${space[3]}px; - margin-bottom: ${isDatawrapperGraphic ? space[5] : space[3]}px; + margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px; + margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px; ${isDatawrapperGraphic ? `border-bottom: 1px solid ${themePalette( '--branding-border', @@ -41,6 +41,7 @@ const roleCss = (isDatawrapperGraphic: boolean) => { margin-right: 20px; line-height: 0; margin-top: ${space[2]}px; + ${isDatawrapperGraphic ? `margin-bottom: ${space[5]}px;` : ''} } ${from.leftCol} { margin-left: -160px; From cd2f632c7735c33e224d8c2ee53077414e49c38d Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Tue, 22 Oct 2024 16:58:11 +0100 Subject: [PATCH 12/13] Add Datawrapper embed stories MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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? --- .../InteractiveBlockComponent.stories.tsx | 153 ++++++++++++++++-- 1 file changed, 144 insertions(+), 9 deletions(-) diff --git a/dotcom-rendering/src/components/InteractiveBlockComponent.stories.tsx b/dotcom-rendering/src/components/InteractiveBlockComponent.stories.tsx index 2d7e95d8e22..4b2918eaf32 100644 --- a/dotcom-rendering/src/components/InteractiveBlockComponent.stories.tsx +++ b/dotcom-rendering/src/components/InteractiveBlockComponent.stories.tsx @@ -1,9 +1,13 @@ -import { css } from '@emotion/react'; import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs'; import type { StoryObj } from '@storybook/react'; import type { StoryProps } from '../../.storybook/decorators/splitThemeDecorator'; import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator'; +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 }) => ( -
- {children} -
+
+ + + <> + + + {children} + + + <> + + +
); 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 ( + + + + + + + + + ); +}; +DatawrapperInline.storyName = 'Datawrapper Inline role'; +DatawrapperInline.decorators = [ + splitTheme([defaultFormat], { orientation: 'vertical' }), +]; + +export const DatawrapperSupporting = ({ format }: StoryProps) => { + return ( + + + + + + + + + ); +}; +DatawrapperSupporting.storyName = 'Datawrapper Supporting role'; +DatawrapperSupporting.decorators = [ + splitTheme([defaultFormat], { orientation: 'vertical' }), +]; + +export const DatawrapperShowcase = ({ format }: StoryProps) => { + return ( + + + + + + + + + ); +}; +DatawrapperShowcase.storyName = 'Datawrapper Showcase role'; +DatawrapperShowcase.decorators = [ + splitTheme([defaultFormat], { orientation: 'vertical' }), +]; + +export const DatawrapperThumbnail = ({ format }: StoryProps) => { + return ( + + + + + + + + + ); +}; +DatawrapperThumbnail.storyName = 'Datawrapper Thumbnail role'; +DatawrapperThumbnail.decorators = [ + splitTheme([defaultFormat], { orientation: 'vertical' }), +]; + +export const DatawrapperImmersive = ({ format }: StoryProps) => { + return ( + + + + + + + + + ); +}; +DatawrapperImmersive.storyName = 'Datawrapper Immersive role'; +DatawrapperImmersive.decorators = [ + splitTheme([defaultFormat], { orientation: 'vertical' }), +]; From 764ad2a4f2a92d01bb30c0d06377331036daaea6 Mon Sep 17 00:00:00 2001 From: Emily Bourke Date: Wed, 23 Oct 2024 16:20:25 +0100 Subject: [PATCH 13/13] Update padding after review by visuals team I had misunderstood some of the desired padding, and accidentally included the bottom border even at mobile breakpoints. Now the top and bottom margins are the same in the mobile breakpoint for supporting, inline, showcase, and immersive roles, for datawrapper graphics. --- dotcom-rendering/src/components/Figure.tsx | 62 +++++++++++----------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/dotcom-rendering/src/components/Figure.tsx b/dotcom-rendering/src/components/Figure.tsx index c1bfb0abae5..3d96cf7746f 100644 --- a/dotcom-rendering/src/components/Figure.tsx +++ b/dotcom-rendering/src/components/Figure.tsx @@ -18,21 +18,14 @@ type Props = { const roleCss = (isDatawrapperGraphic: boolean) => { return { inline: css` - margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px; - margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px; + margin-top: ${space[isDatawrapperGraphic ? 6 : 3]}px; + margin-bottom: ${space[isDatawrapperGraphic ? 6 : 3]}px; `, supporting: css` clear: left; - margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px; - margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px; - ${isDatawrapperGraphic - ? `border-bottom: 1px solid ${themePalette( - '--branding-border', - )}; - padding-bottom: ${space[4]}px; - ` - : ''} + margin-top: ${space[isDatawrapperGraphic ? 6 : 3]}px; + margin-bottom: ${space[isDatawrapperGraphic ? 6 : 3]}px; ${from.tablet} { position: relative; @@ -41,10 +34,17 @@ const roleCss = (isDatawrapperGraphic: boolean) => { margin-right: 20px; line-height: 0; margin-top: ${space[2]}px; - ${isDatawrapperGraphic ? `margin-bottom: ${space[5]}px;` : ''} } ${from.leftCol} { margin-left: -160px; + + ${isDatawrapperGraphic ? `margin-bottom: ${space[2]}px;` : ''} + ${isDatawrapperGraphic ? `padding-bottom: ${space[4]}px;` : ''} + ${isDatawrapperGraphic + ? `border-bottom: 1px solid ${themePalette( + '--branding-border', + )};` + : ''} } ${from.wide} { width: 380px; @@ -53,15 +53,8 @@ const roleCss = (isDatawrapperGraphic: boolean) => { `, immersive: css` - margin-top: ${space[3]}px; - margin-bottom: ${space[3]}px; - ${isDatawrapperGraphic - ? `border-bottom: 1px solid ${themePalette( - '--branding-border', - )}; - padding-bottom: ${space[4]}px; - ` - : ''} + margin-top: ${space[isDatawrapperGraphic ? 6 : 3]}px; + margin-bottom: ${space[isDatawrapperGraphic ? 6 : 3]}px; ${until.tablet} { margin-left: -20px; @@ -82,6 +75,14 @@ const roleCss = (isDatawrapperGraphic: boolean) => { ${from.leftCol} { margin-left: -160px; margin-right: -320px; + + ${isDatawrapperGraphic ? `margin-bottom: ${space[4]}px;` : ''} + ${isDatawrapperGraphic ? `padding-bottom: ${space[4]}px;` : ''} + ${isDatawrapperGraphic + ? `border-bottom: 1px solid ${themePalette( + '--branding-border', + )};` + : ''} } ${from.wide} { margin-left: -240px; @@ -90,19 +91,20 @@ const roleCss = (isDatawrapperGraphic: boolean) => { `, showcase: css` - margin-top: ${space[isDatawrapperGraphic ? 8 : 3]}px; - margin-bottom: ${space[isDatawrapperGraphic ? 8 : 3]}px; + margin-top: ${space[isDatawrapperGraphic ? 6 : 3]}px; + margin-bottom: ${space[isDatawrapperGraphic ? 6 : 3]}px; position: relative; - ${isDatawrapperGraphic - ? `border-bottom: 1px solid ${themePalette( - '--branding-border', - )}; - padding-bottom: ${space[4]}px; - ` - : ''} ${from.leftCol} { margin-left: -160px; + + ${isDatawrapperGraphic ? `margin-bottom: ${space[4]}px;` : ''} + ${isDatawrapperGraphic ? `padding-bottom: ${space[4]}px;` : ''} + ${isDatawrapperGraphic + ? `border-bottom: 1px solid ${themePalette( + '--branding-border', + )};` + : ''} } ${from.wide} { margin-left: -240px;