diff --git a/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx b/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx index eb54924d5f..4de9b653c7 100644 --- a/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx +++ b/dotcom-rendering/src/components/BlockquoteBlockComponent.stories.tsx @@ -76,6 +76,16 @@ export const QuotedDeadBlogDesignAllThemes = { }, } satisfies Story; +export const QuotedCommentDesignAudioAllThemes = { + args: QuotedStandardDesignAllThemes.args, + parameters: { + formats: getAllThemes({ + design: ArticleDesign.Audio, + display: ArticleDisplay.Standard, + }), + }, +} satisfies Story; + export const QuotedAllDesignsNewsTheme = { args: QuotedStandardDesignAllThemes.args, parameters: { diff --git a/dotcom-rendering/src/components/Picture.tsx b/dotcom-rendering/src/components/Picture.tsx index b95b977d0c..70f27577fc 100644 --- a/dotcom-rendering/src/components/Picture.tsx +++ b/dotcom-rendering/src/components/Picture.tsx @@ -16,8 +16,13 @@ import type { Loading } from './CardPicture'; export type Orientation = 'portrait' | 'landscape'; +type PictureRoleType = + | RoleType + // Custom image role types that are used but do not come from CAPI / FE + | 'podcastCover'; + type Props = { - role: RoleType; + role: PictureRoleType; format: ArticleFormat; master: string; alt: string; @@ -54,7 +59,7 @@ const decideImageWidths = ({ isLightbox, orientation, }: { - role: RoleType; + role: PictureRoleType; isMainMedia?: boolean; format: ArticleFormat; isLightbox: boolean; @@ -163,6 +168,11 @@ const decideImageWidths = ({ case 'supporting': case 'halfWidth': return [{ breakpoint: breakpoints.mobile, width: 445 }]; + case 'podcastCover': + return [ + { breakpoint: breakpoints.mobile, width: 140 }, + { breakpoint: breakpoints.wide, width: 219 }, + ]; case 'inline': default: return [ diff --git a/dotcom-rendering/src/components/ScrollableCarousel.tsx b/dotcom-rendering/src/components/ScrollableCarousel.tsx index 59779aad06..2e2dbe1580 100644 --- a/dotcom-rendering/src/components/ScrollableCarousel.tsx +++ b/dotcom-rendering/src/components/ScrollableCarousel.tsx @@ -45,8 +45,12 @@ const themeButtonDisabled: Partial = { const carouselContainerStyles = css` display: flex; flex-direction: column-reverse; + ${from.tablet} { + gap: ${space[2]}px; + } ${from.wide} { flex-direction: row; + gap: ${space[1]}px; } /* Extend carousel into outer margins on mobile */ @@ -121,9 +125,6 @@ const carouselStyles = css` const buttonContainerStyles = css` margin-left: auto; - ${from.wide} { - margin-left: ${space[1]}px; - } `; const buttonLayoutStyles = css` diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index d5b190c551..50efbc050f 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -3131,6 +3131,9 @@ const articleSectionTitleDark: PaletteFunction = () => sourcePalette.neutral[86]; const articleLinkTextLight: PaletteFunction = ({ design, theme }) => { + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[86]; + } if (design === ArticleDesign.Analysis) return sourcePalette.news[300]; switch (theme) { case Pillar.Lifestyle: @@ -3170,8 +3173,10 @@ const articleLinkTextDark: PaletteFunction = ({ display, theme }) => { }; const articleLinkBorderLight: PaletteFunction = ({ design, theme }) => { + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[46]; + } if (theme === ArticleSpecial.Labs) return sourcePalette.neutral[60]; - if (theme === ArticleSpecial.SpecialReport) { return sourcePalette.specialReport[300]; } @@ -3205,6 +3210,9 @@ const articleMetaLinesDark: PaletteFunction = ({ design }) => { }; const articleLinkHoverLight: PaletteFunction = ({ design, theme }) => { + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[86]; + } switch (design) { case ArticleDesign.DeadBlog: switch (theme) { @@ -3274,7 +3282,12 @@ const articleLinkHoverLight: PaletteFunction = ({ design, theme }) => { const articleLinkHoverDark: PaletteFunction = (f) => articleLinkTextDark(f); const articleLinkBorderHoverLight: PaletteFunction = ({ design, theme }) => { - if (theme === ArticleSpecial.Labs) return sourcePalette.neutral[7]; + if (design === ArticleDesign.Audio) { + return sourcePalette.neutral[86]; + } + if (theme === ArticleSpecial.Labs) { + return sourcePalette.neutral[7]; + } if (theme === ArticleSpecial.SpecialReport) { return sourcePalette.specialReport[100]; }