Skip to content
This repository was archived by the owner on Dec 6, 2022. It is now read-only.

Commit fada52d

Browse files
sophie-macmillansophie-macmillan
authored
Add theming and a dark theme to expanding wrapper (#1625)
* Add theming to the Expanding Wrapper * changeset
1 parent 2197de7 commit fada52d

4 files changed

Lines changed: 65 additions & 21 deletions

File tree

‎.changeset/gorgeous-peas-trade.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@guardian/source-react-components-development-kitchen': patch
3+
---
4+
5+
Add theming and a dark theme to the Expanding Wrapper

‎packages/@guardian/source-react-components-development-kitchen/src/expanding-wrapper/ExpandingWrapper.tsx‎

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {
1111
overlayStyles,
1212
showHideLabelStyles,
1313
} from './styles';
14+
import type { Theme } from './theme';
1415
import type { ExpandingWrapperProps } from './types';
1516

1617
export type { ExpandingWrapperProps } from './types';
@@ -23,7 +24,7 @@ export const ExpandingWrapper: FC<ExpandingWrapperProps> = ({
2324
}) => {
2425
const [isExpanded, setIsExpanded] = useState(false);
2526
return (
26-
<div id="expander" css={containerStyles}>
27+
<div id="expander" css={(theme: Theme) => containerStyles(theme.expander)}>
2728
<input
2829
type="checkbox"
2930
css={css`
@@ -45,11 +46,16 @@ export const ExpandingWrapper: FC<ExpandingWrapperProps> = ({
4546
{children}
4647
</div>
4748

48-
{!isExpanded && <div id="expander-overlay" css={overlayStyles} />}
49+
{!isExpanded && (
50+
<div
51+
id="expander-overlay"
52+
css={(theme: Theme) => overlayStyles(theme.expander)}
53+
/>
54+
)}
4955
{renderExtra && <span css={extraStyles}>{renderExtra()}</span>}
5056
<label
5157
aria-hidden={true}
52-
css={showHideLabelStyles}
58+
css={(theme: Theme) => showHideLabelStyles(theme.expander)}
5359
htmlFor="expander-checkbox"
5460
id="expander-button"
5561
>

‎packages/@guardian/source-react-components-development-kitchen/src/expanding-wrapper/styles.ts‎

Lines changed: 26 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,40 @@
11
import { css } from '@emotion/react';
2+
import type { SerializedStyles } from '@emotion/react';
23
import {
34
focusHalo,
4-
neutral,
55
remHeight,
66
remSpace,
77
textSans,
88
} from '@guardian/source-foundations';
9+
import { expandingWrapperThemeDefault } from './theme';
910

10-
export const containerStyles = css`
11+
export const containerStyles = (
12+
expander = expandingWrapperThemeDefault.expander,
13+
): SerializedStyles => css`
1114
border-image: repeating-linear-gradient(
1215
to bottom,
13-
${neutral[86]},
14-
${neutral[86]} 1px,
16+
${expander.border},
17+
${expander.border} 1px,
1518
transparent 1px,
1619
transparent 4px
1720
)
1821
13;
19-
border-top: 13px solid ${neutral[86]};
20-
background: ${neutral[97]};
22+
border-top: 13px solid ${expander.border};
23+
background: ${expander.collapseBackground};
2124
box-shadow: none;
2225
position: relative;
2326
margin-bottom: ${remSpace[12]};
2427
2528
#expander-checkbox:checked ~ label {
26-
background: ${neutral[100]};
27-
color: ${neutral[7]};
28-
29+
background: ${expander.collapseBackground};
30+
color: ${expander.collapseText};
31+
border: 1px solid ${expander.collapseText};
2932
#svgminus {
30-
fill: ${neutral[7]};
33+
fill: ${expander.collapseText};
3134
}
3235
}
3336
#expander-checkbox ~ label #svgplus {
34-
fill: ${neutral[100]};
37+
fill: ${expander.expandText};
3538
}
3639
3740
#expander-checkbox:checked ~ #collapsible-body {
@@ -44,11 +47,13 @@ export const containerStyles = css`
4447
}
4548
`;
4649

47-
export const overlayStyles = css`
50+
export const overlayStyles = (
51+
expander = expandingWrapperThemeDefault.expander,
52+
): SerializedStyles => css`
4853
background-image: linear-gradient(
4954
0deg,
50-
${neutral[97]},
51-
${neutral[97]} 40%,
55+
${expander.collapseBackground},
56+
${expander.collapseBackground} 40%,
5257
rgba(255, 255, 255, 0)
5358
);
5459
height: 5rem;
@@ -57,7 +62,10 @@ export const overlayStyles = css`
5762
width: 100%;
5863
display: block;
5964
`;
60-
export const showHideLabelStyles = css`
65+
66+
export const showHideLabelStyles = (
67+
expander = expandingWrapperThemeDefault.expander,
68+
): SerializedStyles => css`
6169
display: inline-flex;
6270
justify-content: space-between;
6371
box-shadow: none;
@@ -68,10 +76,10 @@ export const showHideLabelStyles = css`
6876
bottom: -${remSpace[6]};
6977
border-radius: ${remHeight.ctaMedium}rem;
7078
padding: 0 ${remSpace[5]};
71-
border: 1px solid ${neutral[7]};
79+
border: 1px solid ${expander.expandBackground};
7280
text-decoration: none;
73-
background: ${neutral[7]};
74-
color: ${neutral[100]};
81+
background: ${expander.expandBackground};
82+
color: ${expander.expandText};
7583
height: ${remHeight.ctaMedium}rem;
7684
min-height: ${remHeight.ctaMedium}rem;
7785
${textSans.medium({ fontWeight: 'bold' })};

‎packages/@guardian/source-react-components-development-kitchen/src/expanding-wrapper/theme.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import type { Theme as EmotionTheme } from '@emotion/react';
2+
import { palette } from '@guardian/source-foundations';
3+
4+
export const expandingWrapperThemeDefault = {
5+
expander: {
6+
border: palette.neutral[86],
7+
expandBackground: palette.neutral[7],
8+
expandText: palette.neutral[100],
9+
collapseBackground: palette.neutral[100],
10+
collapseText: palette.neutral[7],
11+
},
12+
};
13+
export const expandingWrapperDarkTheme = {
14+
expander: {
15+
border: palette.neutral[60],
16+
expandBackground: palette.neutral[86],
17+
expandText: palette.neutral[7],
18+
collapseBackground: palette.neutral[10],
19+
collapseText: palette.neutral[86],
20+
},
21+
};
22+
23+
export interface Theme extends EmotionTheme {
24+
expander?: typeof expandingWrapperThemeDefault.expander;
25+
}

0 commit comments

Comments
 (0)