Skip to content

Commit 0b81d4f

Browse files
catarakcatarak
committed
Update Button component to have primary and secondary styles
1 parent 1562a5d commit 0b81d4f

File tree

6 files changed

+240
-151
lines changed

6 files changed

+240
-151
lines changed

‎client/common/Button.jsx

Lines changed: 64 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,12 @@ import { Link } from 'react-router';
66
import { remSize, prop } from '../theme';
77

88
const kinds = {
9+
primary: 'primary',
10+
secondary: 'secondary'
11+
};
12+
13+
const displays = {
914
block: 'block',
10-
icon: 'icon',
1115
inline: 'inline'
1216
};
1317

@@ -23,45 +27,49 @@ const StyledButton = styled.button`
2327
width: max-content;
2428
text-decoration: none;
2529
26-
color: ${prop('Button.default.foreground')};
27-
background-color: ${prop('Button.default.background')};
30+
color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
31+
background-color: ${({ kind }) =>
32+
prop(`Button.${kind}.default.background`)};
2833
cursor: pointer;
29-
border: 2px solid ${prop('Button.default.border')};
34+
border: 2px solid ${({ kind }) => prop(`Button.${kind}.default.border`)};
3035
border-radius: 2px;
3136
padding: ${remSize(8)} ${remSize(25)};
3237
line-height: 1;
3338
3439
svg * {
35-
fill: ${prop('Button.default.foreground')};
40+
fill: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
3641
}
3742
3843
&:hover:not(:disabled) {
39-
color: ${prop('Button.hover.foreground')};
40-
background-color: ${prop('Button.hover.background')};
41-
border-color: ${prop('Button.hover.border')};
44+
color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
45+
background-color: ${({ kind }) =>
46+
prop(`Button.${kind}.hover.background`)};
47+
border-color: ${({ kind }) => prop(`Button.${kind}.hover.border`)};
4248
4349
svg * {
44-
fill: ${prop('Button.hover.foreground')};
50+
fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
4551
}
4652
}
4753
4854
&:active:not(:disabled) {
49-
color: ${prop('Button.active.foreground')};
50-
background-color: ${prop('Button.active.background')};
55+
color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
56+
background-color: ${({ kind }) =>
57+
prop(`Button.${kind}.active.background`)};
5158
5259
svg * {
53-
fill: ${prop('Button.active.foreground')};
60+
fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
5461
}
5562
}
5663
5764
&:disabled {
58-
color: ${prop('Button.disabled.foreground')};
59-
background-color: ${prop('Button.disabled.background')};
60-
border-color: ${prop('Button.disabled.border')};
65+
color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
66+
background-color: ${({ kind }) =>
67+
prop(`Button.${kind}.disabled.background`)};
68+
border-color: ${({ kind }) => prop(`Button.${kind}.disabled.border`)};
6169
cursor: not-allowed;
6270
6371
svg * {
64-
fill: ${prop('Button.disabled.foreground')};
72+
fill: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
6573
}
6674
}
6775
@@ -108,35 +116,38 @@ const StyledIconButton = styled.button`
108116
height: ${remSize(32)}px;
109117
text-decoration: none;
110118
111-
color: ${prop('Button.default.foreground')};
112-
background-color: ${prop('Button.hover.background')};
119+
color: ${({ kind }) => prop(`Button.${kind}.default.foreground`)};
120+
background-color: ${({ kind }) => prop(`Button.${kind}.hover.background`)};
113121
cursor: pointer;
114122
border: 1px solid transparent;
115123
border-radius: 50%;
116124
padding: ${remSize(8)} ${remSize(25)};
117125
line-height: 1;
118126
119127
&:hover:not(:disabled) {
120-
color: ${prop('Button.hover.foreground')};
121-
background-color: ${prop('Button.hover.background')};
128+
color: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
129+
background-color: ${({ kind }) =>
130+
prop(`Button.${kind}.hover.background`)};
122131
123132
svg * {
124-
fill: ${prop('Button.hover.foreground')};
133+
fill: ${({ kind }) => prop(`Button.${kind}.hover.foreground`)};
125134
}
126135
}
127136
128137
&:active:not(:disabled) {
129-
color: ${prop('Button.active.foreground')};
130-
background-color: ${prop('Button.active.background')};
138+
color: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
139+
background-color: ${({ kind }) =>
140+
prop(`Button.${kind}.active.background`)};
131141
132142
svg * {
133-
fill: ${prop('Button.active.foreground')};
143+
fill: ${({ kind }) => prop(`Button.${kind}.active.foreground`)};
134144
}
135145
}
136146
137147
&:disabled {
138-
color: ${prop('Button.disabled.foreground')};
139-
background-color: ${prop('Button.disabled.background')};
148+
color: ${({ kind }) => prop(`Button.${kind}.disabled.foreground`)};
149+
background-color: ${({ kind }) =>
150+
prop(`Button.${kind}.disabled.background`)};
140151
cursor: not-allowed;
141152
}
142153
@@ -151,10 +162,12 @@ const StyledIconButton = styled.button`
151162
*/
152163
const Button = ({
153164
children,
165+
display,
154166
href,
155167
kind,
156168
iconBefore,
157169
iconAfter,
170+
iconOnly,
158171
'aria-label': ariaLabel,
159172
to,
160173
type,
@@ -170,16 +183,19 @@ const Button = ({
170183
);
171184
let StyledComponent = StyledButton;
172185

173-
if (kind === kinds.inline) {
186+
if (display === displays.inline) {
174187
StyledComponent = StyledInlineButton;
175-
} else if (kind === kinds.icon) {
188+
}
189+
190+
if (iconOnly) {
176191
StyledComponent = StyledIconButton;
177192
}
178193

179194
if (href) {
180195
return (
181196
<StyledComponent
182197
kind={kind}
198+
display={display}
183199
as="a"
184200
aria-label={ariaLabel}
185201
href={href}
@@ -194,6 +210,7 @@ const Button = ({
194210
return (
195211
<StyledComponent
196212
kind={kind}
213+
display={display}
197214
as={Link}
198215
aria-label={ariaLabel}
199216
to={to}
@@ -205,7 +222,13 @@ const Button = ({
205222
}
206223

207224
return (
208-
<StyledComponent kind={kind} aria-label={ariaLabel} type={type} {...props}>
225+
<StyledComponent
226+
kind={kind}
227+
display={display}
228+
aria-label={ariaLabel}
229+
type={type}
230+
{...props}
231+
>
209232
{content}
210233
</StyledComponent>
211234
);
@@ -214,16 +237,19 @@ const Button = ({
214237
Button.defaultProps = {
215238
children: null,
216239
disabled: false,
240+
display: displays.block,
217241
iconAfter: null,
218242
iconBefore: null,
219-
kind: kinds.block,
243+
iconOnly: false,
244+
kind: kinds.primary,
220245
href: null,
221246
'aria-label': null,
222247
to: null,
223248
type: 'button'
224249
};
225250

226251
Button.kinds = kinds;
252+
Button.displays = displays;
227253

228254
Button.propTypes = {
229255
/**
@@ -235,6 +261,10 @@ Button.propTypes = {
235261
If the button can be activated or not
236262
*/
237263
disabled: PropTypes.bool,
264+
/**
265+
* The display type of the button—inline or block
266+
*/
267+
display: PropTypes.string,
238268
/**
239269
* SVG icon to place after child content
240270
*/
@@ -243,6 +273,10 @@ Button.propTypes = {
243273
* SVG icon to place before child content
244274
*/
245275
iconBefore: PropTypes.element,
276+
/**
277+
* If the button content is only an SVG icon
278+
*/
279+
iconOnly: PropTypes.bool,
246280
/**
247281
* The kind of button - determines how it appears visually
248282
*/

‎client/common/Button.stories.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ export const ButtonWithIconAfter = () => (
5959
);
6060

6161
export const InlineButtonWithIconAfter = () => (
62-
<Button iconAfter={<DropdownArrowIcon />} kind={Button.kinds.inline}>
62+
<Button iconAfter={<DropdownArrowIcon />} display={Button.displays.inline}>
6363
File name
6464
</Button>
6565
);
@@ -68,6 +68,6 @@ export const InlineIconOnlyButton = () => (
6868
<Button
6969
aria-label="Add to collection"
7070
iconBefore={<PlusIcon />}
71-
kind={Button.kinds.inline}
71+
display={Button.displays.inline}
7272
/>
7373
);

‎client/components/mobile/IconButton.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const IconButton = (props) => {
1919
return (
2020
<ButtonWrapper
2121
iconBefore={icon && <Icon />}
22-
kind={Button.kinds.inline}
22+
display={Button.displays.inline}
2323
focusable="false"
2424
{...otherProps}
2525
/>

‎client/modules/User/components/CookieConsent.jsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -127,7 +127,9 @@ function CookieConsent() {
127127
allow.
128128
</CookieConsentCopy>
129129
<CookieConsentButtons>
130-
<Button onClick={acceptAllCookies}>Allow All</Button>
130+
<Button kind={Button.kinds.secondary} onClick={acceptAllCookies}>
131+
Allow All
132+
</Button>
131133
<Button onClick={acceptEssentialCookies}>Allow Essential</Button>
132134
</CookieConsentButtons>
133135
</CookieConsentContent>

0 commit comments

Comments
 (0)