Merge branch 'main' into e2e/add-waveform-to-audio-player

guardian · Oct 24, 2024 · 817cb87 · 817cb87
2 parents acb3d2b + 45aa8ab
commit 817cb87
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 7 deletions.
diff --git 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
@@ -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
@@ -45,8 +45,12 @@ const themeButtonDisabled: Partial<ThemeButton> = {
 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
@@ -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];
 	}