From 0c73d00edcc28e087093c48c56e2449ca3528a01 Mon Sep 17 00:00:00 2001 From: Ioanna Kokkini Date: Tue, 5 Dec 2023 16:59:59 +0000 Subject: [PATCH 1/4] Add dark mode colours for NumberList titles --- .../NumberedTitleBlockComponent.tsx | 3 +- dotcom-rendering/src/lib/decidePalette.ts | 5 --- dotcom-rendering/src/palette.ts | 38 +++++++++++++++++++ dotcom-rendering/src/types/palette.ts | 1 - 4 files changed, 40 insertions(+), 7 deletions(-) diff --git a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx index 2ce8969b697..2e2e68d4a55 100644 --- a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx +++ b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx @@ -2,6 +2,7 @@ import { css } from '@emotion/react'; import { headline } from '@guardian/source-foundations'; import { decideFormat } from '../lib/decideFormat'; import { decidePalette } from '../lib/decidePalette'; +import { palette as sourcePalette } from '../palette'; import type { Palette } from '../types/palette'; type Props = { @@ -18,7 +19,7 @@ const titleStyles = (palette: Palette) => css` strong { ${headline.medium({ fontWeight: 'bold' })} display: block; - color: ${palette.text.numberedTitle}; + color: ${sourcePalette('--numbered-list-title')}; } `; diff --git a/dotcom-rendering/src/lib/decidePalette.ts b/dotcom-rendering/src/lib/decidePalette.ts index e401c98bffa..d957fadbdcc 100644 --- a/dotcom-rendering/src/lib/decidePalette.ts +++ b/dotcom-rendering/src/lib/decidePalette.ts @@ -1106,10 +1106,6 @@ const textDateLine = (format: ArticleFormat): string => { return neutral[46]; }; -const textNumberedTitle = (format: ArticleFormat): string => { - return pillarPalette[format.theme].main; -}; - const textNumberedPosition = (): string => { return text.supporting; }; @@ -1388,7 +1384,6 @@ export const decidePalette = ( witnessAuthor: textWitnessAuthor(format), witnessTitle: textWitnessTitle(format), carouselTitle: textCarouselTitle(format), - numberedTitle: textNumberedTitle(format), numberedPosition: textNumberedPosition(), cricketScoreboardLink: textCricketScoreboardLink(), filterButton: textFilterButton(), diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index 25c5be67b66..4cc4edcc003 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -2457,6 +2457,40 @@ const keyEventButtonFillLight: PaletteFunction = () => sourcePalette.neutral[100]; const keyEventButtonFillDark: PaletteFunction = () => sourcePalette.neutral[7]; +const numberedListTitleLight: PaletteFunction = ({ theme }) => { + switch (theme) { + case Pillar.News: + case Pillar.Sport: + case Pillar.Lifestyle: + case Pillar.Culture: + case Pillar.Opinion: + return pillarPalette(theme, 400); + case ArticleSpecial.Labs: + return sourcePalette.labs[400]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[400]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.specialReportAlt[200]; + } +}; + +const numberedListTitleDark: PaletteFunction = ({ theme }) => { + switch (theme) { + case Pillar.News: + case Pillar.Sport: + case Pillar.Lifestyle: + case Pillar.Culture: + case Pillar.Opinion: + return pillarPalette(theme, 500); + case ArticleSpecial.Labs: + return sourcePalette.labs[400]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[500]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.specialReportAlt[300]; + } +}; + const summaryEventBulletLight: PaletteFunction = ({ theme }) => { switch (theme) { case Pillar.News: @@ -3887,6 +3921,10 @@ const paletteColours = { light: keyEventButtonFillLight, dark: keyEventButtonFillDark, }, + '--numbered-list-title': { + light: numberedListTitleLight, + dark: numberedListTitleDark, + }, '--summary-event-bullet': { light: summaryEventBulletLight, dark: summaryEventBulletDark, diff --git a/dotcom-rendering/src/types/palette.ts b/dotcom-rendering/src/types/palette.ts index 04ac9ff76b2..620e4e4c53f 100644 --- a/dotcom-rendering/src/types/palette.ts +++ b/dotcom-rendering/src/types/palette.ts @@ -26,7 +26,6 @@ export type Palette = { witnessTitle: Colour; carouselTitle: Colour; pagination: Colour; - numberedTitle: Colour; numberedPosition: Colour; cricketScoreboardLink: Colour; filterButton: Colour; From 9697b83b5703f3d0678ab9c7e34d8d7c9c8c6046 Mon Sep 17 00:00:00 2001 From: Ioanna Kokkini Date: Wed, 6 Dec 2023 15:16:56 +0000 Subject: [PATCH 2/4] Improve stories for `NumberedListComponent` --- .../NumberedTitleBlockComponent.stories.tsx | 60 +++++++++++-------- .../NumberedTitleBlockComponent.tsx | 10 ++-- dotcom-rendering/src/lib/renderElement.tsx | 2 +- 3 files changed, 42 insertions(+), 30 deletions(-) diff --git a/dotcom-rendering/src/components/NumberedTitleBlockComponent.stories.tsx b/dotcom-rendering/src/components/NumberedTitleBlockComponent.stories.tsx index 1f64a06789e..4b7d19d2cc7 100644 --- a/dotcom-rendering/src/components/NumberedTitleBlockComponent.stories.tsx +++ b/dotcom-rendering/src/components/NumberedTitleBlockComponent.stories.tsx @@ -1,3 +1,10 @@ +import { + ArticleDesign, + ArticleDisplay, + ArticleSpecial, + Pillar, +} from '@guardian/libs'; +import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator'; import { NumberedTitleBlockComponent } from './NumberedTitleBlockComponent'; export default { @@ -5,62 +12,67 @@ export default { title: 'Components/NumberedTitleBlockComponent', }; -export const JustH2 = () => ( +const allThemes = [ + Pillar.News, + Pillar.Sport, + Pillar.Culture, + Pillar.Lifestyle, + Pillar.Opinion, + ArticleSpecial.SpecialReportAlt, + ArticleSpecial.SpecialReport, + ArticleSpecial.Labs, +] as const satisfies ReadonlyArray; + +const allThemeStandardVariations = allThemes.map((theme) => ({ + design: ArticleDesign.Standard, + display: ArticleDisplay.Standard, + theme, +})); + +export const JustH2 = ({ format }: { format: ArticleFormat }) => (
); JustH2.storyName = 'with just h2 text'; +JustH2.decorators = [splitTheme(allThemeStandardVariations)]; -export const Strong = () => ( +export const Strong = ({ format }: { format: ArticleFormat }) => (
); Strong.storyName = 'with only strong text'; +Strong.decorators = [splitTheme(allThemeStandardVariations)]; -export const Leading = () => ( +export const Leading = ({ format }: { format: ArticleFormat }) => (
); Leading.storyName = 'with leading strong text'; +Leading.decorators = [splitTheme(allThemeStandardVariations)]; -export const Trailing = () => ( +export const Trailing = ({ format }: { format: ArticleFormat }) => (
); Trailing.storyName = 'with trailing strong text'; +Trailing.decorators = [splitTheme(allThemeStandardVariations)]; diff --git a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx index 2e2e68d4a55..38fd37ebc02 100644 --- a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx +++ b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx @@ -1,6 +1,5 @@ import { css } from '@emotion/react'; import { headline } from '@guardian/source-foundations'; -import { decideFormat } from '../lib/decideFormat'; import { decidePalette } from '../lib/decidePalette'; import { palette as sourcePalette } from '../palette'; import type { Palette } from '../types/palette'; @@ -8,10 +7,10 @@ import type { Palette } from '../types/palette'; type Props = { position: number; html: string; - format: FEFormat; + format: ArticleFormat; }; -const titleStyles = (palette: Palette) => css` +const titleStyles = () => css` h2 { ${headline.medium({ fontWeight: 'light' })} } @@ -34,7 +33,8 @@ export const NumberedTitleBlockComponent = ({ html, format, }: Props) => { - const palette = decidePalette(decideFormat(format)); + const palette = decidePalette(format); + return (
{position}
diff --git a/dotcom-rendering/src/lib/renderElement.tsx b/dotcom-rendering/src/lib/renderElement.tsx index b9f7a8a4153..73531055cec 100644 --- a/dotcom-rendering/src/lib/renderElement.tsx +++ b/dotcom-rendering/src/lib/renderElement.tsx @@ -474,7 +474,7 @@ export const renderElement = ({ ); case 'model.dotcomrendering.pageElements.ProfileAtomBlockElement': From c363b555a45afc21c8e01b97b8bf49b9dee0e391 Mon Sep 17 00:00:00 2001 From: Ioanna Kokkini Date: Wed, 6 Dec 2023 15:19:35 +0000 Subject: [PATCH 3/4] Rename `themePalette` import Co-authored-by: Jamie B <53781962+JamieB-gu@users.noreply.github.com> --- .../src/components/NumberedTitleBlockComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx index 38fd37ebc02..f5ec853eeea 100644 --- a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx +++ b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; import { headline } from '@guardian/source-foundations'; import { decidePalette } from '../lib/decidePalette'; -import { palette as sourcePalette } from '../palette'; +import { palette as themePalette } from '../palette'; import type { Palette } from '../types/palette'; type Props = { @@ -18,7 +18,7 @@ const titleStyles = () => css` strong { ${headline.medium({ fontWeight: 'bold' })} display: block; - color: ${sourcePalette('--numbered-list-title')}; + color: ${themePalette('--numbered-list-title')}; } `; From 2dbc26befab4255adf568e8d3d677d69904cad8d Mon Sep 17 00:00:00 2001 From: Ioanna Kokkini Date: Wed, 6 Dec 2023 17:22:48 +0000 Subject: [PATCH 4/4] Make numbered list `neutral[86]` in dark mode Also,`titleStyles` does not need to be a function in `NumberedTitleBlockComponent`. Co-authored-by: Max Duval --- .../components/NumberedTitleBlockComponent.tsx | 7 ++----- dotcom-rendering/src/palette.ts | 15 +-------------- 2 files changed, 3 insertions(+), 19 deletions(-) diff --git a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx index f5ec853eeea..f15ba24d795 100644 --- a/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx +++ b/dotcom-rendering/src/components/NumberedTitleBlockComponent.tsx @@ -10,7 +10,7 @@ type Props = { format: ArticleFormat; }; -const titleStyles = () => css` +const titleStyles = css` h2 { ${headline.medium({ fontWeight: 'light' })} } @@ -42,10 +42,7 @@ export const NumberedTitleBlockComponent = ({ `} >
{position}
-
+
); }; diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index 4cc4edcc003..1b8d33427f3 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -2475,20 +2475,7 @@ const numberedListTitleLight: PaletteFunction = ({ theme }) => { }; const numberedListTitleDark: PaletteFunction = ({ theme }) => { - switch (theme) { - case Pillar.News: - case Pillar.Sport: - case Pillar.Lifestyle: - case Pillar.Culture: - case Pillar.Opinion: - return pillarPalette(theme, 500); - case ArticleSpecial.Labs: - return sourcePalette.labs[400]; - case ArticleSpecial.SpecialReport: - return sourcePalette.specialReport[500]; - case ArticleSpecial.SpecialReportAlt: - return sourcePalette.specialReportAlt[300]; - } + return sourcePalette.neutral[86]; }; const summaryEventBulletLight: PaletteFunction = ({ theme }) => {