diff --git a/dotcom-rendering/src/components/AppsFooter.importable.tsx b/dotcom-rendering/src/components/AppsFooter.importable.tsx index 33e36416c89..72622bef6bf 100644 --- a/dotcom-rendering/src/components/AppsFooter.importable.tsx +++ b/dotcom-rendering/src/components/AppsFooter.importable.tsx @@ -1,16 +1,53 @@ import { css } from '@emotion/react'; -import { remSpace, textSans15 } from '@guardian/source/foundations'; +import { + between, + from, + remSpace, + space, + textSans15, + until, +} from '@guardian/source/foundations'; import { ButtonLink } from '@guardian/source/react-components'; import { useEffect, useState } from 'react'; +import { grid } from '../grid'; +import { ArticleDesign } from '../lib/articleFormat'; import { getNavigationClient, getUserClient } from '../lib/bridgetApi'; import { palette } from '../palette'; const year = new Date().getFullYear(); -const footerStyles = css` - ${textSans15} - padding: ${remSpace[4]} ${remSpace[3]}; - background-color: ${palette('--apps-footer-background')}; +const footerContainerStyles = (design?: ArticleDesign) => { + if (design === ArticleDesign.Gallery) { + return css` + ${textSans15} + ${grid.paddedContainer} + background-color: ${palette('--apps-footer-background')}; + + ${until.tablet} { + padding-top: ${space[1]}px; + } + + ${from.tablet} { + border-left: 1px solid ${palette('--footer-border')}; + border-right: 1px solid ${palette('--footer-border')}; + } + `; + } else { + return css` + ${textSans15} + padding: ${remSpace[4]} ${remSpace[3]}; + background-color: ${palette('--apps-footer-background')}; + `; + } +}; + +const galleryFooterStyles = css` + ${grid.column.centre} + padding: ${remSpace[4]} 0; + + ${from.leftCol} { + ${grid.between('centre-column-start', 'right-column-end')} + } `; const linkStyles = css` @@ -62,7 +99,40 @@ const PrivacySettings = ({ } }; -export const AppsFooter = () => { +const galleryBorder = css` + grid-row: 1 / 3; + position: relative; + + ${between.desktop.and.leftCol} { + ${grid.column.right} + + &::before { + content: ''; + position: absolute; + left: -10px; /* 10px to the left of this element */ + top: 0; + bottom: 0; + width: 1px; + background-color: ${palette('--footer-border')}; + } + } + + ${from.leftCol} { + ${grid.column.left} + + &::after { + content: ''; + position: absolute; + right: -10px; + top: 0; + bottom: 0; + width: 1px; + background-color: ${palette('--footer-border')}; + } + } +`; + +export const AppsFooter = ({ design }: { design?: ArticleDesign }) => { const [isCcpa, setIsCcpa] = useState(false); useEffect(() => { @@ -90,21 +160,32 @@ export const AppsFooter = () => { }; return ( -
- © {year} Guardian News and Media Limited or its affiliated - companies. All rights reserved. (dcar) -
- - + {design === ArticleDesign.Gallery && ( +
+ )} +
- Privacy Policy - + © {year} Guardian News and Media Limited or its affiliated + companies. All rights reserved. (dcar) +
+ + + Privacy Policy + +
); }; diff --git a/dotcom-rendering/src/components/SubMeta.tsx b/dotcom-rendering/src/components/SubMeta.tsx index 0d5ac018be6..80cc0dcd8a2 100644 --- a/dotcom-rendering/src/components/SubMeta.tsx +++ b/dotcom-rendering/src/components/SubMeta.tsx @@ -1,5 +1,6 @@ import { css, type SerializedStyles } from '@emotion/react'; import { + between, from, space, textSans12, @@ -81,12 +82,21 @@ const listStyles = css` background-repeat: no-repeat; `; -const listWrapper = (design: ArticleDesign): SerializedStyles => css` - ${design === ArticleDesign.Gallery ? grid.column.centre : undefined}; - padding-bottom: 0.75rem; - margin-bottom: 6px; - border-bottom: 1px solid ${palette('--article-border')}; -`; +const listWrapper = (design: ArticleDesign): SerializedStyles => { + if (design === ArticleDesign.Gallery) { + return css` + ${grid.column.centre} + padding-bottom: 0.75rem; + margin-bottom: 6px; + `; + } + + return css` + padding-bottom: 0.75rem; + margin-bottom: 6px; + border-bottom: 1px solid ${palette('--article-border')}; + `; +}; const listItemStyles = css` ${textSans14}; @@ -130,6 +140,46 @@ const syndicationButtonOverrides = css` const galleryStyles = css` ${grid.paddedContainer}; background-color: ${palette('--article-inner-background')}; + border-bottom: 1px solid var(--article-border); + padding: 0; + + ${from.tablet} { + border-left: 1px solid ${palette('--article-border')}; + border-right: 1px solid ${palette('--article-border')}; + } +`; + +const galleryBorder = css` + grid-row: 1 / 3; + position: relative; /* allows the ::before & ::after to be positioned relative to this */ + + ${between.desktop.and.leftCol} { + ${grid.column.right} + + &::before { + content: ''; + position: absolute; + left: -10px; /* 10px to the left of this element */ + top: 0; + bottom: 0; + width: 1px; + background-color: ${palette('--article-border')}; + } + } + + ${from.leftCol} { + ${grid.column.left} + + &::after { + content: ''; + position: absolute; + right: -10px; + top: 0; + bottom: 0; + width: 1px; + background-color: ${palette('--article-border')}; + } + } `; export const SubMeta = ({ @@ -160,15 +210,17 @@ export const SubMeta = ({
+ {format.design === ArticleDesign.Gallery && ( +
+ )} {hasLinks && ( <> diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx index ff27f16859b..af26b7891a7 100644 --- a/dotcom-rendering/src/layouts/GalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx @@ -1,12 +1,20 @@ import { css } from '@emotion/react'; -import { between, from } from '@guardian/source/foundations'; +import { + between, + from, + palette as sourcePalette, +} from '@guardian/source/foundations'; +import { AppsFooter } from '../components/AppsFooter.importable'; import { ArticleHeadline } from '../components/ArticleHeadline'; import { ArticleMetaApps } from '../components/ArticleMeta.apps'; import { ArticleMeta } from '../components/ArticleMeta.web'; import { ArticleTitle } from '../components/ArticleTitle'; +import { Footer } from '../components/Footer'; import { GalleryImage } from '../components/GalleryImage'; +import { Island } from '../components/Island'; import { MainMediaGallery } from '../components/MainMediaGallery'; import { Masthead } from '../components/Masthead/Masthead'; +import { Section } from '../components/Section'; import { Standfirst } from '../components/Standfirst'; import { SubMeta } from '../components/SubMeta'; import { grid } from '../grid'; @@ -49,6 +57,9 @@ export const GalleryLayout = (props: WebProps | AppProps) => { const gallery = props.gallery; const frontendData = gallery.frontendData; + const isWeb = props.renderingTarget === 'Web'; + const isApps = props.renderingTarget === 'Apps'; + const format: ArticleFormat = { design: gallery.design, display: gallery.display, @@ -57,7 +68,7 @@ export const GalleryLayout = (props: WebProps | AppProps) => { return ( <> - {props.renderingTarget === 'Web' && ( + {isWeb && ( { format={format} standfirst={frontendData.standfirst} /> - {props.renderingTarget === 'Web' ? ( + {isWeb ? ( { shortUrlId={frontendData.config.shortUrlId} /> ) : null} - {props.renderingTarget === 'Apps' ? ( + {isApps ? ( { webUrl={frontendData.webURL} webTitle={frontendData.webTitle} showBottomSocialButtons={ - frontendData.showBottomSocialButtons && - props.renderingTarget === 'Web' + frontendData.showBottomSocialButtons && isWeb } /> + {isWeb && ( +
+
+
+ )} + {isApps && ( +
+ + + +
+ )} ); }; diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index d61ccca065e..ba34e647273 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -3029,7 +3029,6 @@ const articleBackgroundDark: PaletteFunction = ({ design, theme }) => { return sourcePalette.neutral[10]; } case ArticleDesign.Gallery: - return '#131313'; default: return sourcePalette.neutral[10]; } @@ -3053,8 +3052,23 @@ const articleInnerBackgroundLight: PaletteFunction = ({ design, theme }) => { } }; -const articleInnerBackgroundDark: PaletteFunction = (palette) => - articleInnerBackgroundLight(palette); +const articleInnerBackgroundDark: PaletteFunction = ({ design, theme }) => { + switch (design) { + case ArticleDesign.Audio: + case ArticleDesign.Video: + switch (theme) { + case ArticleSpecial.Labs: + return sourcePalette.neutral[86]; + default: + return sourcePalette.neutral[0]; + } + case ArticleDesign.Gallery: + return sourcePalette.neutral[10]; + + default: + return 'transparent'; + } +}; const articleSectionBackgroundLight: PaletteFunction = () => sourcePalette.neutral[100]; @@ -3341,6 +3355,14 @@ const articleBorderLight: PaletteFunction = ({ design, theme }) => { } }; +const footerBorderLight: PaletteFunction = () => { + return sourcePalette.neutral[86]; +}; + +const footerBorderDark: PaletteFunction = () => { + return sourcePalette.neutral[20]; +}; + const articleBorderDark: PaletteFunction = () => sourcePalette.neutral[20]; const straightLinesLight: PaletteFunction = (format) => { @@ -6826,6 +6848,10 @@ const paletteColours = { light: () => sourcePalette.neutral[7], dark: () => sourcePalette.neutral[86], }, + '--footer-border': { + light: footerBorderLight, + dark: footerBorderDark, + }, '--front-container-background': { light: () => sourcePalette.neutral[100], dark: () => sourcePalette.neutral[10],