Skip to content

Commit

Permalink
feat(FollowIcon): create --follow colour (#9283)
Browse files Browse the repository at this point in the history
  • Loading branch information
@mxdvl
mxdvl authored Oct 31, 2023
1 parent 166be4e commit 6583d13
Show file tree
Hide file tree
Showing 6 changed files with 193 additions and 45 deletions.
12 changes: 7 additions & 5 deletions dotcom-rendering/src/components/ArticleMeta.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,15 +90,16 @@ export const ArticleStory = () => {
);
};

const appsFormat = {
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: Pillar.News,
};
export const ArticleAppsStory = () => {
return (
<Wrapper>
<ArticleMeta
format={{
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: Pillar.News,
}}
format={appsFormat}
pageId=""
webTitle=""
byline="Lanre Bakare"
Expand All @@ -115,6 +116,7 @@ export const ArticleAppsStory = () => {
};
/** @see /dotcom-rendering/docs/development/storybook.md */
ArticleAppsStory.args = { config: { renderingTarget: 'Apps' } };
ArticleAppsStory.decorators = [lightDecorator(appsFormat)];

export const BrandingStory = () => {
return (
Expand Down
26 changes: 16 additions & 10 deletions dotcom-rendering/src/components/FollowButton.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
import { FollowButton } from './FollowButton';

export default {
Expand All @@ -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 (
<FollowButton
displayName="Contributor"
isFollowing={true}
onClickHandler={() => undefined}
format={{
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: Pillar.Opinion,
}}
/>
);
};
Following.decorators = [
splitTheme({
display: ArticleDisplay.Standard,
design: ArticleDesign.Standard,
theme: Pillar.Opinion,
}),
];
11 changes: 0 additions & 11 deletions dotcom-rendering/src/components/FollowButton.test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
import { ArticleDesign, ArticleDisplay, Pillar } from '@guardian/libs';
import { render, waitFor } from '@testing-library/react';
import { FollowButton } from './FollowButton';

Expand All @@ -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();
Expand All @@ -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(() =>
Expand Down
28 changes: 10 additions & 18 deletions dotcom-rendering/src/components/FollowButton.tsx
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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;
Expand All @@ -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 (
<>
<button
onClick={onClickHandler}
type="button"
css={buttonStyles(format)}
>
<span css={containerStyles}>
<FollowIcon isFollowing={isFollowing} />
<span>
{isFollowing ? 'Unfollow' : 'Follow'} {displayName}
</span>
<button onClick={onClickHandler} type="button" css={buttonStyles}>
<span css={containerStyles}>
<FollowIcon isFollowing={isFollowing} />
<span>
{isFollowing ? 'Unfollow' : 'Follow'} {displayName}
</span>
</button>
</>
</span>
</button>
);
};
1 change: 0 additions & 1 deletion dotcom-rendering/src/components/FollowWrapper.importable.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ export const FollowWrapper = ({ id, displayName, format }: Props) => {
onClickHandler={
isFollowing !== undefined ? handler : () => undefined
}
format={format}
/>
</div>
);
Expand Down
160 changes: 160 additions & 0 deletions dotcom-rendering/src/palette.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 =>
Expand Down Expand Up @@ -706,6 +862,10 @@ const paletteColours = {
light: standfirstLinkBorderLight,
dark: standfirstLinkBorderDark,
},
'--follow': {
light: followLight,
dark: followDark,
},
} satisfies PaletteColours;

/**
Expand Down

0 comments on commit 6583d13

Please sign in to comment.