diff --git a/dotcom-rendering/src/components/FrontSection.tsx b/dotcom-rendering/src/components/FrontSection.tsx index 1fcea83e483..26e14a357c7 100644 --- a/dotcom-rendering/src/components/FrontSection.tsx +++ b/dotcom-rendering/src/components/FrontSection.tsx @@ -487,6 +487,9 @@ const labsSectionHeaderStyles = css` grid-row: headline; grid-column: title; margin-top: ${space[2]}px; +`; + +const labsSectionHeaderStylesFromLeftCol = css` ${from.leftCol} { grid-row: content; grid-column: title; @@ -698,11 +701,17 @@ export const FrontSection = ({ /> {isLabs ? ( -
+
) : ( diff --git a/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx b/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx index 599fbc6040a..36605196c2c 100644 --- a/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx +++ b/dotcom-rendering/src/components/LabsSectionHeader.stories.tsx @@ -15,6 +15,7 @@ const meta = { title: 'Container Title', url: '/', editionId: 'AU', + hasPageSkin: false, }, render: (args) => (
( +
+ +
+ ), +}; diff --git a/dotcom-rendering/src/components/LabsSectionHeader.tsx b/dotcom-rendering/src/components/LabsSectionHeader.tsx index 6f17ddb59d5..8b22910b29f 100644 --- a/dotcom-rendering/src/components/LabsSectionHeader.tsx +++ b/dotcom-rendering/src/components/LabsSectionHeader.tsx @@ -5,7 +5,6 @@ import { space, textSans14, textSansBold15, - until, } from '@guardian/source/foundations'; import { Link, @@ -26,6 +25,7 @@ type Props = { url?: string; /** The ID of the edition, used to construct the Labs front URL */ editionId: EditionId; + hasPageSkin: boolean; }; const headerStyles = css` @@ -36,6 +36,9 @@ const headerStyles = css` display: flex; flex-grow: 1; flex-direction: row; +`; + +const headerStylesFromLeftCol = css` ${from.leftCol} { flex-direction: column; } @@ -47,15 +50,22 @@ const logoStyles = css` const dividerStylesUntilLeftCol = css` position: relative; - ${until.leftCol} { - margin-right: ${space[4]}px; + margin-right: ${space[4]}px; + ::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + right: -${space[2]}px; + border-right: 1px solid ${schemePalette('--section-border')}; + } +`; + +const dividerStylesFromLeftCol = css` + ${from.leftCol} { + margin-right: unset; ::after { - content: ''; - position: absolute; - top: 0; - bottom: 0; - right: -${space[2]}px; - border-right: 1px solid ${schemePalette('--section-border')}; + display: none; } } `; @@ -76,7 +86,9 @@ const labelAndAboutStyles = css` display: flex; flex-direction: row; justify-content: space-between; +`; +const labelAndAboutStylesFromLeftCol = css` ${between.leftCol.and.wide} { flex-direction: column; } @@ -90,15 +102,17 @@ const labelStyles = css` const aboutStyles = css` justify-self: end; ${textSans14} +`; +const aboutStylesFromLeftCol = css` ${between.leftCol.and.wide} { margin-top: ${space[1]}px; } `; -const positionStyles = css` +const positionStyles = (hasPageSkin: boolean) => css` right: 0; - ${from.leftCol} { + ${!hasPageSkin && from.leftCol} { left: 0; right: auto; } @@ -113,9 +127,20 @@ const detailsStyles = css` } `; -export const LabsSectionHeader = ({ title, url, editionId }: Props) => ( -
-
+export const LabsSectionHeader = ({ + title, + url, + editionId, + hasPageSkin, +}: Props) => ( +
+
(
-
+
Paid content -
+