Skip to content

Commit c42070c

Browse files
cemms1cemms1
committed
add scheme palette colours for dark mode compatibility and include storybook story
1 parent cb67776 commit c42070c

File tree

4 files changed

+142
-56
lines changed

4 files changed

+142
-56
lines changed

‎dotcom-rendering/src/components/LabsLogo.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { css } from '@emotion/react';
2-
import { palette } from '@guardian/source/foundations';
2+
import { palette as schemePalette } from '../palette';
33

44
const labsLogoContainer = css`
5-
background-color: ${palette.labs[100]};
5+
background-color: ${schemePalette('--labs-logo-background')};
66
border-radius: 50%;
77
position: relative;
88
`;
@@ -30,7 +30,7 @@ export const LabsLogo = ({ size = 71 }: LabsLogoProps) => {
3030
<svg
3131
xmlns="http://www.w3.org/2000/svg"
3232
viewBox="0 0 89 47"
33-
fill={palette.neutral[100]}
33+
fill={schemePalette('--labs-logo-text')}
3434
css={labsLogoSvgText}
3535
>
3636
<title>Guardian Labs</title>

‎dotcom-rendering/src/components/LabsSectionHeader.stories.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
import type { Meta, StoryObj } from '@storybook/react';
2+
import { userEvent, within } from '@storybook/test';
3+
import { splitTheme } from '../../.storybook/decorators/splitThemeDecorator';
4+
import {
5+
ArticleDesign,
6+
ArticleDisplay,
7+
ArticleSpecial,
8+
} from '../lib/articleFormat';
9+
import { LabsSectionHeader } from './LabsSectionHeader';
10+
11+
const meta = {
12+
component: LabsSectionHeader,
13+
title: 'Components/LabsSectionHeader',
14+
args: {
15+
title: 'Container Title',
16+
},
17+
render: (args) => (
18+
<div
19+
style={{
20+
display: 'flex',
21+
gap: '20px',
22+
alignItems: 'center',
23+
maxWidth: '1300px',
24+
}}
25+
>
26+
<LabsSectionHeader {...args} />
27+
</div>
28+
),
29+
decorators: [
30+
splitTheme(
31+
[
32+
{
33+
theme: ArticleSpecial.Labs,
34+
design: ArticleDesign.Feature,
35+
display: ArticleDisplay.Standard,
36+
},
37+
],
38+
{ orientation: 'vertical' },
39+
),
40+
],
41+
} satisfies Meta<typeof LabsSectionHeader>;
42+
export default meta;
43+
44+
type Story = StoryObj<typeof meta>;
45+
46+
export const WithDetailsOpen: Story = {
47+
play: async ({ canvasElement }) => {
48+
const canvas = within(canvasElement);
49+
const expandDetailsButtons = canvas.getAllByText('About');
50+
await Promise.all(
51+
expandDetailsButtons.map((button) => userEvent.click(button)),
52+
);
53+
},
54+
};

‎dotcom-rendering/src/components/LabsSectionHeader.tsx‎

Lines changed: 53 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { css } from '@emotion/react';
22
import {
33
from,
4-
palette as sourcePalette,
54
space,
65
textSans14,
76
textSansBold15,
@@ -12,6 +11,7 @@ import {
1211
LinkButton,
1312
SvgArrowRightStraight,
1413
} from '@guardian/source/react-components';
14+
import { palette as schemePalette } from '../palette';
1515
import { Details } from './Details';
1616
import { LabsLogo } from './LabsLogo';
1717

@@ -22,7 +22,7 @@ type Props = {
2222
const headerStyles = css`
2323
width: 100%;
2424
height: 100%;
25-
background-color: ${sourcePalette.labs[700]};
25+
background-color: ${schemePalette('--labs-header-background')};
2626
padding: ${space[2]}px;
2727
display: flex;
2828
flex-grow: 1;
@@ -46,7 +46,7 @@ const dividerStylesUntilLeftCol = css`
4646
top: 0;
4747
bottom: 0;
4848
right: -${space[2]}px;
49-
border-right: 1px solid ${sourcePalette.neutral[73]};
49+
border-right: 1px solid ${schemePalette('--section-border')};
5050
}
5151
}
5252
`;
@@ -71,7 +71,7 @@ const labelAndAboutStyles = css`
7171

7272
const labelStyles = css`
7373
${textSansBold15}
74-
color: ${sourcePalette.labs[100]};
74+
color: ${schemePalette('--labs-header-label-text')};
7575
`;
7676

7777
const aboutStyles = css`
@@ -81,59 +81,59 @@ const aboutStyles = css`
8181

8282
const titleStyles = css`
8383
${textSansBold20};
84+
color: ${schemePalette('--labs-header-title')};
8485
`;
8586

86-
export const LabsSectionHeader = ({ title }: Props) => {
87-
return (
88-
<div css={headerStyles}>
89-
<div css={[logoStyles, dividerStylesUntilLeftCol]}>
90-
<LabsLogo />
91-
</div>
87+
const detailsStyles = css`
88+
background-color: ${schemePalette('--labs-about-dropdown-background')};
89+
color: ${schemePalette('--labs-about-dropdown-text')};
90+
padding: 20px;
91+
`;
92+
93+
export const LabsSectionHeader = ({ title }: Props) => (
94+
<div css={headerStyles}>
95+
<div css={[logoStyles, dividerStylesUntilLeftCol]}>
96+
<LabsLogo />
97+
</div>
9298

93-
<div css={textLayoutStyles}>
94-
<div css={labelAndAboutStyles}>
95-
<span css={labelStyles}>Paid content</span>
96-
<div css={aboutStyles}>
97-
<Details
98-
label="About"
99-
labelSize="xsmall"
100-
positionStyles={css`
101-
right: 0;
102-
`}
103-
>
104-
<div
105-
css={css`
106-
background-color: ${sourcePalette
107-
.labs[600]};
108-
color: ${sourcePalette.labs[100]};
109-
padding: 20px;
110-
`}
99+
<div css={textLayoutStyles}>
100+
<div css={labelAndAboutStyles}>
101+
<span css={labelStyles}>Paid content</span>
102+
<div css={aboutStyles}>
103+
<Details
104+
label="About"
105+
labelSize="xsmall"
106+
positionStyles={css`
107+
right: 0;
108+
`}
109+
>
110+
<div css={detailsStyles}>
111+
<p>
112+
Paid content is paid for and controlled by an
113+
advertiser and produced by the Guardian Labs
114+
team.
115+
</p>
116+
<br />
117+
<LinkButton
118+
iconSide="right"
119+
size="xsmall"
120+
priority="subdued"
121+
icon={<SvgArrowRightStraight />}
122+
href="https://www.theguardian.com/info/2016/jan/25/content-funding"
123+
theme={{
124+
textSubdued: schemePalette(
125+
'--labs-about-dropdown-link',
126+
),
127+
}}
111128
>
112-
<p>
113-
Paid content is paid for and controlled by
114-
an advertiser and produced by the Guardian
115-
Labs team.
116-
</p>
117-
<br />
118-
<LinkButton
119-
iconSide="right"
120-
size="xsmall"
121-
priority="subdued"
122-
icon={<SvgArrowRightStraight />}
123-
href="https://www.theguardian.com/info/2016/jan/25/content-funding"
124-
theme={{
125-
textSubdued: sourcePalette.labs[100],
126-
}}
127-
>
128-
Learn more about Guardian Labs content
129-
</LinkButton>
130-
</div>
131-
</Details>
132-
</div>
129+
Learn more about Guardian Labs content
130+
</LinkButton>
131+
</div>
132+
</Details>
133133
</div>
134-
135-
<div css={titleStyles}>{title}</div>
136134
</div>
135+
136+
<div css={titleStyles}>{title}</div>
137137
</div>
138-
);
139-
};
138+
</div>
139+
);

‎dotcom-rendering/src/paletteDeclarations.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7173,6 +7173,30 @@ const paletteColours = {
71737173
light: liveKickerTextLight,
71747174
dark: liveKickerTextDark,
71757175
},
7176+
'--labs-about-dropdown-background': {
7177+
light: () => sourcePalette.neutral[93],
7178+
dark: () => sourcePalette.neutral[0],
7179+
},
7180+
'--labs-about-dropdown-link': {
7181+
light: () => sourcePalette.labs[200],
7182+
dark: () => sourcePalette.labs[400],
7183+
},
7184+
'--labs-about-dropdown-text': {
7185+
light: () => sourcePalette.neutral[7],
7186+
dark: () => sourcePalette.neutral[100],
7187+
},
7188+
'--labs-header-background': {
7189+
light: () => sourcePalette.labs[700],
7190+
dark: () => sourcePalette.labs[100],
7191+
},
7192+
'--labs-header-label-text': {
7193+
light: () => sourcePalette.labs[100],
7194+
dark: () => sourcePalette.labs[700],
7195+
},
7196+
'--labs-header-title': {
7197+
light: () => sourcePalette.neutral[0],
7198+
dark: () => sourcePalette.neutral[100],
7199+
},
71767200
'--labs-legacy-article-section-title': {
71777201
light: () => sourcePalette.neutral[100],
71787202
dark: () => sourcePalette.neutral[97],
@@ -7189,6 +7213,14 @@ const paletteColours = {
71897213
light: () => sourcePalette.neutral[46],
71907214
dark: () => sourcePalette.neutral[38],
71917215
},
7216+
'--labs-logo-background': {
7217+
light: () => sourcePalette.labs[100],
7218+
dark: () => sourcePalette.labs[200],
7219+
},
7220+
'--labs-logo-text': {
7221+
light: () => sourcePalette.neutral[100],
7222+
dark: () => sourcePalette.neutral[100],
7223+
},
71927224
'--last-updated-text': {
71937225
light: lastUpdatedTextLight,
71947226
dark: lastUpdatedTextDark,

0 commit comments

Comments
 (0)