From 6583d1392035286cae074db22e46172c80976f99 Mon Sep 17 00:00:00 2001 From: Max Duval Date: Tue, 31 Oct 2023 09:26:41 +0000 Subject: [PATCH] feat(FollowIcon): create --follow colour (#9283) --- .../src/components/ArticleMeta.stories.tsx | 12 +- .../src/components/FollowButton.stories.tsx | 26 +-- .../src/components/FollowButton.test.tsx | 11 -- .../src/components/FollowButton.tsx | 28 ++- .../components/FollowWrapper.importable.tsx | 1 - dotcom-rendering/src/palette.ts | 160 ++++++++++++++++++ 6 files changed, 193 insertions(+), 45 deletions(-) diff --git a/dotcom-rendering/src/components/ArticleMeta.stories.tsx b/dotcom-rendering/src/components/ArticleMeta.stories.tsx index bf50c90b1da..e430e3db9f5 100644 --- a/dotcom-rendering/src/components/ArticleMeta.stories.tsx +++ b/dotcom-rendering/src/components/ArticleMeta.stories.tsx @@ -90,15 +90,16 @@ export const ArticleStory = () => { ); }; +const appsFormat = { + display: ArticleDisplay.Standard, + design: ArticleDesign.Standard, + theme: Pillar.News, +}; export const ArticleAppsStory = () => { return ( { }; /** @see /dotcom-rendering/docs/development/storybook.md */ ArticleAppsStory.args = { config: { renderingTarget: 'Apps' } }; +ArticleAppsStory.decorators = [lightDecorator(appsFormat)]; export const BrandingStory = () => { return ( diff --git a/dotcom-rendering/src/components/FollowButton.stories.tsx b/dotcom-rendering/src/components/FollowButton.stories.tsx index cb648b9f9b0..8d4f4a9a327 100644 --- a/dotcom-rendering/src/components/FollowButton.stories.tsx +++ b/dotcom-rendering/src/components/FollowButton.stories.tsx @@ -1,4 +1,5 @@ import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs'; +import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator'; import { FollowButton } from './FollowButton'; export default { @@ -12,25 +13,30 @@ export const NotFollowing = () => { displayName="Contributor" isFollowing={false} onClickHandler={() => undefined} - format={{ - display: ArticleDisplay.Standard, - design: ArticleDesign.Standard, - theme: Pillar.News, - }} /> ); }; +NotFollowing.decorators = [ + splitTheme({ + display: ArticleDisplay.Standard, + design: ArticleDesign.Standard, + theme: Pillar.News, + }), +]; + export const Following = () => { return ( undefined} - format={{ - display: ArticleDisplay.Standard, - design: ArticleDesign.Standard, - theme: Pillar.Opinion, - }} /> ); }; +Following.decorators = [ + splitTheme({ + display: ArticleDisplay.Standard, + design: ArticleDesign.Standard, + theme: Pillar.Opinion, + }), +]; diff --git a/dotcom-rendering/src/components/FollowButton.test.tsx b/dotcom-rendering/src/components/FollowButton.test.tsx index 61dda0a4db1..a9d440810c4 100644 --- a/dotcom-rendering/src/components/FollowButton.test.tsx +++ b/dotcom-rendering/src/components/FollowButton.test.tsx @@ -1,4 +1,3 @@ -import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs'; import { render, waitFor } from '@testing-library/react'; import { FollowButton } from './FollowButton'; @@ -8,11 +7,6 @@ it('should show a follow button for a single contributor when rendering for apps isFollowing={false} onClickHandler={() => undefined} displayName="Gwyn Topham" - format={{ - display: ArticleDisplay.Standard, - design: ArticleDesign.Standard, - theme: Pillar.News, - }} />, ); expect(getByText('Follow Gwyn Topham')).toBeInTheDocument(); @@ -24,11 +18,6 @@ it('should show a follow button for a single contributor when rendering for apps onClickHandler={() => undefined} displayName="Gwyn Topham" isFollowing={true} - format={{ - display: ArticleDisplay.Standard, - design: ArticleDesign.Standard, - theme: Pillar.News, - }} />, ); await waitFor(() => diff --git a/dotcom-rendering/src/components/FollowButton.tsx b/dotcom-rendering/src/components/FollowButton.tsx index 16e1c1493a6..43838967900 100644 --- a/dotcom-rendering/src/components/FollowButton.tsx +++ b/dotcom-rendering/src/components/FollowButton.tsx @@ -1,6 +1,6 @@ import { css } from '@emotion/react'; import { remSpace, textSans } from '@guardian/source-foundations'; -import { decidePalette } from '../lib/decidePalette'; +import { palette } from '../palette'; type IconProps = { isFollowing: boolean; @@ -30,9 +30,9 @@ const FollowIcon = ({ isFollowing }: IconProps) => { ); }; -const buttonStyles = (format: ArticleFormat) => css` +const buttonStyles = css` ${textSans.small()} - color: ${decidePalette(format).text.articleLink}; + color: ${palette('--follow')}; background: none; border: none; display: block; @@ -58,30 +58,22 @@ const containerStyles = css` type Props = { displayName: string; isFollowing: boolean; - format: ArticleFormat; onClickHandler: () => void; }; export const FollowButton = ({ displayName, isFollowing, - format, onClickHandler, }: Props) => { return ( - <> - - + + ); }; diff --git a/dotcom-rendering/src/components/FollowWrapper.importable.tsx b/dotcom-rendering/src/components/FollowWrapper.importable.tsx index f57479e64fd..6003f9472ee 100644 --- a/dotcom-rendering/src/components/FollowWrapper.importable.tsx +++ b/dotcom-rendering/src/components/FollowWrapper.importable.tsx @@ -56,7 +56,6 @@ export const FollowWrapper = ({ id, displayName, format }: Props) => { onClickHandler={ isFollowing !== undefined ? handler : () => undefined } - format={format} /> ); diff --git a/dotcom-rendering/src/palette.ts b/dotcom-rendering/src/palette.ts index 4d8a9bb4efe..6baf2f451a8 100644 --- a/dotcom-rendering/src/palette.ts +++ b/dotcom-rendering/src/palette.ts @@ -128,6 +128,162 @@ const avatarDark = ({ design, theme }: ArticleFormat): string => { } }; +const followLight = ({ design, theme }: ArticleFormat): string => { + switch (design) { + case ArticleDesign.Gallery: + return sourcePalette.neutral[86]; + case ArticleDesign.Analysis: { + switch (theme) { + case Pillar.News: + return sourcePalette.news[300]; + case Pillar.Lifestyle: + return sourcePalette.lifestyle[300]; + case Pillar.Sport: + return sourcePalette.sport[300]; + case Pillar.Culture: + return sourcePalette.culture[300]; + case Pillar.Opinion: + return sourcePalette.opinion[200]; + case ArticleSpecial.Labs: + return sourcePalette.labs[300]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[300]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.specialReportAlt[100]; + } + } + case ArticleDesign.Comment: + case ArticleDesign.Editorial: + case ArticleDesign.Explainer: + case ArticleDesign.Feature: + case ArticleDesign.FullPageInteractive: + case ArticleDesign.Interactive: + case ArticleDesign.Interview: + case ArticleDesign.Letter: + case ArticleDesign.NewsletterSignup: + case ArticleDesign.PhotoEssay: + case ArticleDesign.Review: + case ArticleDesign.Standard: { + switch (theme) { + case Pillar.News: + return sourcePalette.news[400]; + case Pillar.Lifestyle: + return sourcePalette.lifestyle[300]; + case Pillar.Sport: + return sourcePalette.sport[300]; + case Pillar.Culture: + return sourcePalette.culture[300]; + case Pillar.Opinion: + return sourcePalette.opinion[200]; + case ArticleSpecial.Labs: + return sourcePalette.labs[300]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[300]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.specialReportAlt[100]; + } + } + default: { + switch (theme) { + case Pillar.News: + return sourcePalette.news[400]; + case Pillar.Lifestyle: + return sourcePalette.lifestyle[300]; + case Pillar.Sport: + return sourcePalette.sport[300]; + case Pillar.Culture: + return sourcePalette.culture[300]; + case Pillar.Opinion: + return sourcePalette.opinion[200]; + case ArticleSpecial.Labs: + return sourcePalette.labs[300]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[300]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.news[400]; + } + } + } +}; + +const followDark = ({ theme, design }: ArticleFormat): string => { + switch (design) { + case ArticleDesign.LiveBlog: + case ArticleDesign.DeadBlog: + return sourcePalette.neutral[100]; + case ArticleDesign.Gallery: + return sourcePalette.neutral[86]; + case ArticleDesign.Analysis: + switch (theme) { + case Pillar.News: + return sourcePalette.news[500]; + case Pillar.Lifestyle: + return sourcePalette.lifestyle[500]; + case Pillar.Sport: + return sourcePalette.sport[500]; + case Pillar.Culture: + return sourcePalette.culture[500]; + case Pillar.Opinion: + return sourcePalette.opinion[500]; + case ArticleSpecial.Labs: + return sourcePalette.specialReport[500]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[500]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.neutral[60]; + } + 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 Pillar.News: + return sourcePalette.news[500]; + case Pillar.Lifestyle: + return sourcePalette.lifestyle[500]; + case Pillar.Sport: + return sourcePalette.sport[500]; + case Pillar.Culture: + return sourcePalette.culture[500]; + case Pillar.Opinion: + return sourcePalette.opinion[500]; + case ArticleSpecial.Labs: + return sourcePalette.specialReport[500]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[500]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.specialReportAlt[700]; + } + default: + switch (theme) { + case Pillar.News: + return sourcePalette.news[500]; + case Pillar.Lifestyle: + return sourcePalette.lifestyle[500]; + case Pillar.Sport: + return sourcePalette.sport[500]; + case Pillar.Culture: + return sourcePalette.culture[500]; + case Pillar.Opinion: + return sourcePalette.opinion[500]; + case ArticleSpecial.Labs: + return sourcePalette.specialReport[500]; + case ArticleSpecial.SpecialReport: + return sourcePalette.specialReport[500]; + case ArticleSpecial.SpecialReportAlt: + return sourcePalette.news[500]; + } + } +}; + const starRatingFillColourLight = (): string => sourcePalette.neutral[7]; const starRatingFillColourDark = (): string => sourcePalette.neutral[0]; const starRatingBackgroundColourLight = (): string => @@ -706,6 +862,10 @@ const paletteColours = { light: standfirstLinkBorderLight, dark: standfirstLinkBorderDark, }, + '--follow': { + light: followLight, + dark: followDark, + }, } satisfies PaletteColours; /**