diff --git a/dotcom-rendering/src/components/ArticleMeta.web.tsx b/dotcom-rendering/src/components/ArticleMeta.web.tsx index d1ae3cb9daa..8422f14e20d 100644 --- a/dotcom-rendering/src/components/ArticleMeta.web.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.web.tsx @@ -1,5 +1,6 @@ import { css } from '@emotion/react'; import { between, from, space, until } from '@guardian/source/foundations'; +import { Hide } from '@guardian/source/react-components'; import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import type { FEArticle } from '../frontend/feArticle'; import { interactiveLegacyClasses } from '../layouts/lib/interactiveLegacyStyling'; @@ -17,6 +18,7 @@ import type { FEElement } from '../types/content'; import type { Podcast, TagType } from '../types/tag'; import { Avatar } from './Avatar'; import { Branding } from './Branding.importable'; +import { Caption } from './Caption'; import { CommentCount } from './CommentCount.importable'; import { useConfig } from './ConfigContext'; import { Contributor } from './Contributor'; @@ -41,6 +43,7 @@ type Props = { isCommentable: boolean; mainMediaElements?: FEElement[]; crossword?: FEArticle['crossword']; + captionText?: string; }; const meta = (format: ArticleFormat) => { @@ -324,6 +327,7 @@ export const ArticleMeta = ({ isCommentable, mainMediaElements, crossword, + captionText, }: Props) => { const soleContributor = getSoleContributor(tags, byline); const authorName = soleContributor?.title ?? 'Author Image'; @@ -404,6 +408,21 @@ export const ArticleMeta = ({ /> )} + {format.design === ArticleDesign.Gallery ? ( + + + + + ) : null} + {crossword?.creator && ( { } return css` ${headlineMedium20} + + ${from.leftCol} { + ${headlineMedium24} + } `; case ArticleDesign.Obituary: case ArticleDesign.Comment: diff --git a/dotcom-rendering/src/layouts/GalleryLayout.tsx b/dotcom-rendering/src/layouts/GalleryLayout.tsx index be0a99cc899..3fdb0271e87 100644 --- a/dotcom-rendering/src/layouts/GalleryLayout.tsx +++ b/dotcom-rendering/src/layouts/GalleryLayout.tsx @@ -4,8 +4,10 @@ import { from, palette as sourcePalette, space, + until, } from '@guardian/source/foundations'; import { Hide } from '@guardian/source/react-components'; +import { StraightLines } from '@guardian/source-development-kitchen/react-components'; import { Fragment } from 'react'; import { AdPlaceholder } from '../components/AdPlaceholder.apps'; import { AdPortals } from '../components/AdPortals.importable'; @@ -67,15 +69,40 @@ const headerStyles = css` } `; -const metaAndDisclaimerContainer = css` +const captionContainer = css` + ${grid.column.left} + + ${until.leftCol} { + ${grid.column.centre}; + } + grid-row: 8; +`; + +const standfirstStyles = css` ${grid.column.centre} + + ${from.leftCol} { + width: 75%; + grid-row: 10; + } +`; + +const metaAndDisclaimerContainer = css` + ${grid.column.centre}; + + ${from.leftCol} { + ${grid.column.left} + grid-row: 10; + padding-top: 10px; + } + padding-bottom: ${space[6]}px; ${from.tablet} { position: relative; &::before { content: ''; position: absolute; - left: -10px; + left: -20px; top: 0; bottom: 0; width: 1px; @@ -266,16 +293,33 @@ export const GalleryLayout = (props: WebProps | AppProps) => { frontendData.webPublicationDateDeprecated } /> - - +
+ +
+ +
+ + + +
+
+
+ + + +
+ {isWeb ? ( { isCommentable={frontendData.isCommentable} discussionApiUrl={discussionApiUrl} shortUrlId={shortUrlId} + captionText={captionText} /> ) : null} {isApps ? ( diff --git a/dotcom-rendering/src/paletteDeclarations.ts b/dotcom-rendering/src/paletteDeclarations.ts index 90f6592a502..34a3e57a074 100644 --- a/dotcom-rendering/src/paletteDeclarations.ts +++ b/dotcom-rendering/src/paletteDeclarations.ts @@ -3443,7 +3443,7 @@ const articleBorderDark: PaletteFunction = () => sourcePalette.neutral[20]; const straightLinesLight: PaletteFunction = (format) => { if (format.design === ArticleDesign.Gallery) { - return sourcePalette.neutral[20]; + return sourcePalette.neutral[38]; } if (format.theme === ArticleSpecial.SpecialReportAlt) { return transparentColour(sourcePalette.neutral[60], 0.3);