feat(Avatar.stories): add wrapper decorator

use article background for colour
guardian · Oct 23, 2023 · dd13d46 · dd13d46
1 parent e512461
commit dd13d46
Show file tree

Hide file tree

Showing 2 changed files with 137 additions and 2 deletions.
diff --git a/dotcom-rendering/src/components/Avatar.stories.tsx b/dotcom-rendering/src/components/Avatar.stories.tsx
@@ -5,8 +5,10 @@ import {
 	Pillar,
 } from '@guardian/libs';
 import type { ArticleFormat } from '@guardian/libs';
-import type { Meta, StoryObj } from '@storybook/react';
+import { space } from '@guardian/source-foundations';
+import type { Decorator, Meta, StoryObj } from '@storybook/react';
 import { darkMode, lightMode } from '../lib/decorators';
+import { palette } from '../palette';
 import { Avatar } from './Avatar';
 
 const meta: Meta<typeof Avatar> = {
@@ -17,6 +19,17 @@ const meta: Meta<typeof Avatar> = {
 export default meta;
 type Story = StoryObj<typeof Avatar>;
 
+const wrapper: Decorator = (Story) => (
+	<div
+		style={{
+			backgroundColor: palette('--background-article'),
+			padding: `${space[3]}px`,
+		}}
+	>
+		<Story />
+	</div>
+);
+
 const georgesMonbiot =
 	'https://uploads.guim.co.uk/2017/10/06/George-Monbiot,-L.png';
 const leahHarper = 'https://uploads.guim.co.uk/2017/10/06/Leah-Harper,-L.png';
@@ -35,19 +48,35 @@ export const defaultStory: Story = () => (
 );
 defaultStory.storyName = 'Medium, Opinion (Rich Links)';
 defaultStory.decorators = [
+	wrapper,
 	lightMode({
 		...format,
 		theme: Pillar.Opinion,
 	}),
 ];
 
+export const MediumOpinion: Story = () => (
+	<div style={{ width: '136px', height: '136px' }}>
+		<Avatar src={georgesMonbiot} alt="The alt of the image" />
+	</div>
+);
+MediumOpinion.storyName = 'Medium, Opinion (Rich Links - Dark)';
+MediumOpinion.decorators = [
+	wrapper,
+	darkMode({
+		...format,
+		theme: Pillar.Opinion,
+	}),
+];
+
 export const largeStory: Story = () => (
 	<div style={{ width: '140px', height: '140px' }}>
 		<Avatar src={leahHarper} alt="The alt of the image" />
 	</div>
 );
 largeStory.storyName = 'Large, Lifestyle (Byline image - Desktop)';
 largeStory.decorators = [
+	wrapper,
 	lightMode({
 		...format,
 		theme: Pillar.Lifestyle,
@@ -61,6 +90,7 @@ export const largeStoryDark: Story = () => (
 );
 largeStoryDark.storyName = 'Large, Lifestyle (Byline image - Desktop - Dark)';
 largeStoryDark.decorators = [
+	wrapper,
 	darkMode({
 		...format,
 		theme: Pillar.Lifestyle,
@@ -73,7 +103,7 @@ export const largeStoryNews: Story = () => (
 	</div>
 );
 largeStoryNews.storyName = 'Large, News (Byline image - Desktop)';
-largeStoryNews.decorators = [lightMode(format)];
+largeStoryNews.decorators = [wrapper, lightMode(format)];
 
 export const largeStoryCulture: Story = () => (
 	<div style={{ width: '140px', height: '140px' }}>
@@ -82,6 +112,7 @@ export const largeStoryCulture: Story = () => (
 );
 largeStoryCulture.storyName = 'Large, Culture (Byline image - Desktop)';
 largeStoryCulture.decorators = [
+	wrapper,
 	lightMode({
 		...format,
 		theme: Pillar.Culture,
@@ -95,6 +126,7 @@ export const SpecialReport: Story = () => (
 );
 SpecialReport.storyName = 'Large SpecialReport';
 SpecialReport.decorators = [
+	wrapper,
 	lightMode({
 		...format,
 		theme: ArticleSpecial.SpecialReport,
@@ -108,19 +140,49 @@ export const SpecialReportDark: Story = () => (
 );
 SpecialReportDark.storyName = 'Large SpecialReport (Dark)';
 SpecialReportDark.decorators = [
+	wrapper,
 	darkMode({
 		...format,
 		theme: ArticleSpecial.SpecialReport,
 	}),
 ];
 
+export const SpecialReportAlt: Story = () => (
+	<div style={{ width: '140px', height: '140px' }}>
+		<Avatar src={leahHarper} alt="The alt of the image" />
+	</div>
+);
+SpecialReportAlt.storyName = 'Large SpecialReportAlt';
+SpecialReportAlt.decorators = [
+	wrapper,
+	lightMode({
+		...format,
+		theme: ArticleSpecial.SpecialReportAlt,
+	}),
+];
+
+export const SpecialReportAltDark: Story = () => (
+	<div style={{ width: '140px', height: '140px' }}>
+		<Avatar src={leahHarper} alt="The alt of the image" />
+	</div>
+);
+SpecialReportAltDark.storyName = 'Large SpecialReportAlt (Dark)';
+SpecialReportAltDark.decorators = [
+	wrapper,
+	darkMode({
+		...format,
+		theme: ArticleSpecial.SpecialReportAlt,
+	}),
+];
+
 export const smallStory: Story = () => (
 	<div style={{ width: '60px', height: '60px' }}>
 		<Avatar src={sideLowe} alt="The alt of the image" />
 	</div>
 );
 smallStory.storyName = 'Small, Sport (Byline image - Mobile)';
 smallStory.decorators = [
+	wrapper,
 	lightMode({
 		...format,
 		theme: Pillar.Sport,
@@ -134,6 +196,7 @@ export const smallStoryDark: Story = () => (
 );
 smallStoryDark.storyName = 'Small, Sport (Byline image - Mobile - Dark)';
 smallStoryDark.decorators = [
+	wrapper,
 	darkMode({
 		...format,
 		theme: Pillar.Sport,

diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts
@@ -130,6 +130,74 @@ 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];
+	}
+};
+
 // ----- Palette ----- //
 
 /**
@@ -175,6 +243,10 @@ const paletteColours = {
 		light: backgroundAvatarLight,
 		dark: backgroundAvatarDark,
 	},
+	'--background-article': {
+		light: backgroundArticleLight,
+		dark: backgroundArticleDark,
+	},
 } satisfies PaletteColours;
 
 /**