feat(Avatar.stories): add split theme decorator

guardian · Oct 23, 2023 · c2ac125 · c2ac125
1 parent 5c034bd
commit c2ac125
Show file tree

Hide file tree

Showing 4 changed files with 102 additions and 42 deletions.
diff --git a/dotcom-rendering/src/components/Avatar.stories.tsx b/dotcom-rendering/src/components/Avatar.stories.tsx
@@ -6,7 +6,7 @@ import {
 } from '@guardian/libs';
 import type { ArticleFormat } from '@guardian/libs';
 import type { Meta, StoryObj } from '@storybook/react';
-import { darkMode, lightMode } from '../lib/decorators';
+import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
 import { Avatar } from './Avatar';
 
 const meta: Meta<typeof Avatar> = {
@@ -35,33 +35,33 @@ export const defaultStory: Story = () => (
 );
 defaultStory.storyName = 'Medium, Opinion (Rich Links)';
 defaultStory.decorators = [
-	lightMode({
+	splitTheme({
 		...format,
 		theme: Pillar.Opinion,
 	}),
 ];
 
-export const largeStory: Story = () => (
-	<div style={{ width: '140px', height: '140px' }}>
-		<Avatar src={leahHarper} alt="The alt of the image" />
+export const MediumOpinion: Story = () => (
+	<div style={{ width: '136px', height: '136px' }}>
+		<Avatar src={georgesMonbiot} alt="The alt of the image" />
 	</div>
 );
-largeStory.storyName = 'Large, Lifestyle (Byline image - Desktop)';
-largeStory.decorators = [
-	lightMode({
+MediumOpinion.storyName = 'Medium, Opinion (Rich Links - Dark)';
+MediumOpinion.decorators = [
+	splitTheme({
 		...format,
-		theme: Pillar.Lifestyle,
+		theme: Pillar.Opinion,
 	}),
 ];
 
-export const largeStoryDark: Story = () => (
+export const largeStory: Story = () => (
 	<div style={{ width: '140px', height: '140px' }}>
 		<Avatar src={leahHarper} alt="The alt of the image" />
 	</div>
 );
-largeStoryDark.storyName = 'Large, Lifestyle (Byline image - Desktop - Dark)';
-largeStoryDark.decorators = [
-	darkMode({
+largeStory.storyName = 'Large, Lifestyle (Byline image - Desktop)';
+largeStory.decorators = [
+	splitTheme({
 		...format,
 		theme: Pillar.Lifestyle,
 	}),
@@ -73,7 +73,7 @@ export const largeStoryNews: Story = () => (
 	</div>
 );
 largeStoryNews.storyName = 'Large, News (Byline image - Desktop)';
-largeStoryNews.decorators = [lightMode(format)];
+largeStoryNews.decorators = [splitTheme(format)];
 
 export const largeStoryCulture: Story = () => (
 	<div style={{ width: '140px', height: '140px' }}>
@@ -82,7 +82,7 @@ export const largeStoryCulture: Story = () => (
 );
 largeStoryCulture.storyName = 'Large, Culture (Byline image - Desktop)';
 largeStoryCulture.decorators = [
-	lightMode({
+	splitTheme({
 		...format,
 		theme: Pillar.Culture,
 	}),
@@ -95,22 +95,22 @@ export const SpecialReport: Story = () => (
 );
 SpecialReport.storyName = 'Large SpecialReport';
 SpecialReport.decorators = [
-	lightMode({
+	splitTheme({
 		...format,
 		theme: ArticleSpecial.SpecialReport,
 	}),
 ];
 
-export const SpecialReportDark: Story = () => (
+export const SpecialReportAlt: Story = () => (
 	<div style={{ width: '140px', height: '140px' }}>
 		<Avatar src={leahHarper} alt="The alt of the image" />
 	</div>
 );
-SpecialReportDark.storyName = 'Large SpecialReport (Dark)';
-SpecialReportDark.decorators = [
-	darkMode({
+SpecialReportAlt.storyName = 'Large SpecialReportAlt';
+SpecialReportAlt.decorators = [
+	splitTheme({
 		...format,
-		theme: ArticleSpecial.SpecialReport,
+		theme: ArticleSpecial.SpecialReportAlt,
 	}),
 ];
 
@@ -121,20 +121,7 @@ export const smallStory: Story = () => (
 );
 smallStory.storyName = 'Small, Sport (Byline image - Mobile)';
 smallStory.decorators = [
-	lightMode({
-		...format,
-		theme: Pillar.Sport,
-	}),
-];
-
-export const smallStoryDark: Story = () => (
-	<div style={{ width: '60px', height: '60px' }}>
-		<Avatar src={sideLowe} alt="The alt of the image" />
-	</div>
-);
-smallStoryDark.storyName = 'Small, Sport (Byline image - Mobile - Dark)';
-smallStoryDark.decorators = [
-	darkMode({
+	splitTheme({
 		...format,
 		theme: Pillar.Sport,
 	}),

diff --git a/dotcom-rendering/src/components/Avatar.tsx b/dotcom-rendering/src/components/Avatar.tsx
@@ -9,7 +9,7 @@ const picture = css`
 	height: 100%;
 	width: 100%;
 	overflow: hidden;
-	background-color: ${palette('--background-avatar')};
+	background-color: ${palette('--avatar-background')};
 `;
 
 const img = css`

diff --git a/dotcom-rendering/src/components/LiveBlockContainer.tsx b/dotcom-rendering/src/components/LiveBlockContainer.tsx
@@ -96,7 +96,7 @@ const BlockByline = ({
 							width: 100%;
 							height: 100%;
 							object-fit: cover;
-							background-color: ${palette('--background-avatar')};
+							background-color: ${palette('--avatar-background')};
 						`}
 					/>
 				</div>

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -46,7 +46,7 @@ const headlineBackgroundColourDark = ({ design }: ArticleFormat): string => {
 	}
 };
 
-const backgroundAvatarLight = ({ design, theme }: ArticleFormat): string => {
+const avatarLight = ({ design, theme }: ArticleFormat): string => {
 	switch (design) {
 		case ArticleDesign.Standard:
 		case ArticleDesign.Review:
@@ -101,7 +101,7 @@ const backgroundAvatarLight = ({ design, theme }: ArticleFormat): string => {
 	}
 };
 
-const backgroundAvatarDark = ({ design, theme }: ArticleFormat): string => {
+const avatarDark = ({ design, theme }: ArticleFormat): string => {
 	switch (design) {
 		case ArticleDesign.Standard:
 		case ArticleDesign.Review:
@@ -127,6 +127,75 @@ const backgroundAvatarDark = ({ design, theme }: ArticleFormat): string => {
 	}
 };
 
+const backgroundArticleLight = ({ design, theme }: ArticleFormat) => {
+	switch (design) {
+		case ArticleDesign.Analysis:
+			switch (theme) {
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.specialReportAlt[800];
+				default:
+					return sourcePalette.news[800];
+			}
+		case ArticleDesign.Gallery:
+			return sourcePalette.neutral[7];
+		case ArticleDesign.Comment:
+		case ArticleDesign.Letter:
+		case ArticleDesign.Editorial:
+			switch (theme) {
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.specialReportAlt[800];
+				default:
+					return sourcePalette.opinion[800];
+			}
+		case ArticleDesign.Standard:
+		case ArticleDesign.Review:
+		case ArticleDesign.Explainer:
+		case ArticleDesign.Feature:
+		case ArticleDesign.Interview:
+		case ArticleDesign.Interactive:
+		case ArticleDesign.PhotoEssay:
+		case ArticleDesign.FullPageInteractive:
+		case ArticleDesign.NewsletterSignup:
+			switch (theme) {
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.specialReportAlt[800];
+				default:
+					return sourcePalette.neutral[100];
+			}
+		default:
+			return sourcePalette.neutral[100];
+	}
+};
+
+const backgroundArticleDark = ({ design, theme }: ArticleFormat) => {
+	switch (design) {
+		case ArticleDesign.DeadBlog:
+			return sourcePalette.neutral[7];
+		case ArticleDesign.LiveBlog:
+			return sourcePalette.neutral[0];
+		case ArticleDesign.Standard:
+		case ArticleDesign.Review:
+		case ArticleDesign.Explainer:
+		case ArticleDesign.Feature:
+		case ArticleDesign.Interview:
+		case ArticleDesign.Interactive:
+		case ArticleDesign.PhotoEssay:
+		case ArticleDesign.FullPageInteractive:
+		case ArticleDesign.NewsletterSignup:
+		case ArticleDesign.Comment:
+		case ArticleDesign.Letter:
+		case ArticleDesign.Editorial:
+			switch (theme) {
+				case ArticleSpecial.SpecialReportAlt:
+					return sourcePalette.specialReportAlt[100];
+				default:
+					return sourcePalette.neutral[10];
+			}
+		default:
+			return sourcePalette.neutral[10];
+	}
+};
+
 const starRatingFillColourLight = (): string => sourcePalette.neutral[7];
 const starRatingFillColourDark = (): string => sourcePalette.neutral[97];
 const starRatingBackgroundColourLight = (): string =>
@@ -183,9 +252,13 @@ const paletteColours = {
 		light: starRatingBackgroundColourLight,
 		dark: starRatingBackgroundColourDark,
 	},
-	'--background-avatar': {
-		light: backgroundAvatarLight,
-		dark: backgroundAvatarDark,
+	'--avatar-background': {
+		light: avatarLight,
+		dark: avatarDark,
+	},
+	'--background-article': {
+		light: backgroundArticleLight,
+		dark: backgroundArticleDark,
 	},
 } satisfies PaletteColours;