Skip to content

Commit 728c572

Browse files
stuarthendrenstuarthendren
authored
Merge pull request #222 from commitd/stuarthendren/issue221
feat(switch): adds `brand` variant to switch component
2 parents 658085c + 58a7cf4 commit 728c572

File tree

3 files changed

+97
-50
lines changed

3 files changed

+97
-50
lines changed

‎src/components/Switch/Switch.stories.tsx

Lines changed: 59 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,16 @@ export const Variants = () => {
2222
)
2323
}
2424

25+
export const Brand = () => {
26+
const [value, { toggle }] = useBoolean(false)
27+
28+
return (
29+
<Row css={{ padding: '$4', backgroundColor: '$brand' }}>
30+
<Switch variant="brand" checked={value} onCheckedChange={toggle} />
31+
</Row>
32+
)
33+
}
34+
2535
export const Destructive = () => {
2636
const [value, { toggle }] = useBoolean(false)
2737

@@ -70,31 +80,54 @@ export const Disabled = () => (
7080

7181
export const States = () => {
7282
return (
73-
<Grid css={{ gap: '$4', gridTemplateColumns: '$6 $6 $6' }}>
74-
<Switch variant="primary" checked={false} />
75-
<Switch variant="primary" checked={false} force="hover" />
76-
<Switch variant="primary" checked={false} force="focus" />
77-
<Switch variant="primary" checked={true} />
78-
<Switch variant="primary" checked={true} force="hover" />
79-
<Switch variant="primary" checked={true} force="focus" />
80-
<Switch variant="secondary" checked={false} />
81-
<Switch variant="secondary" checked={false} force="hover" />
82-
<Switch variant="secondary" checked={false} force="focus" />
83-
<Switch variant="secondary" checked={true} />
84-
<Switch variant="secondary" checked={true} force="hover" />
85-
<Switch variant="secondary" checked={true} force="focus" />
86-
<Switch destructive variant="primary" checked={false} />
87-
<Switch destructive variant="primary" checked={false} force="hover" />
88-
<Switch destructive variant="primary" checked={false} force="focus" />
89-
<Switch destructive variant="primary" checked={true} />
90-
<Switch destructive variant="primary" checked={true} force="hover" />
91-
<Switch destructive variant="primary" checked={true} force="focus" />
92-
<Switch destructive variant="secondary" checked={false} />
93-
<Switch destructive variant="secondary" checked={false} force="hover" />
94-
<Switch destructive variant="secondary" checked={false} force="focus" />
95-
<Switch destructive variant="secondary" checked={true} />
96-
<Switch destructive variant="secondary" checked={true} force="hover" />
97-
<Switch destructive variant="secondary" checked={true} force="focus" />
98-
</Grid>
83+
<>
84+
<Grid css={{ p: '$4', gap: '$4', gridTemplateColumns: '$6 $6 $6' }}>
85+
<Switch variant="primary" checked={false} />
86+
<Switch variant="primary" checked={false} force="hover" />
87+
<Switch variant="primary" checked={false} force="focus" />
88+
<Switch variant="primary" checked={true} />
89+
<Switch variant="primary" checked={true} force="hover" />
90+
<Switch variant="primary" checked={true} force="focus" />
91+
<Switch variant="secondary" checked={false} />
92+
<Switch variant="secondary" checked={false} force="hover" />
93+
<Switch variant="secondary" checked={false} force="focus" />
94+
<Switch variant="secondary" checked={true} />
95+
<Switch variant="secondary" checked={true} force="hover" />
96+
<Switch variant="secondary" checked={true} force="focus" />
97+
<Switch destructive variant="primary" checked={false} />
98+
<Switch destructive variant="primary" checked={false} force="hover" />
99+
<Switch destructive variant="primary" checked={false} force="focus" />
100+
<Switch destructive variant="primary" checked={true} />
101+
<Switch destructive variant="primary" checked={true} force="hover" />
102+
<Switch destructive variant="primary" checked={true} force="focus" />
103+
<Switch destructive variant="secondary" checked={false} />
104+
<Switch destructive variant="secondary" checked={false} force="hover" />
105+
<Switch destructive variant="secondary" checked={false} force="focus" />
106+
<Switch destructive variant="secondary" checked={true} />
107+
<Switch destructive variant="secondary" checked={true} force="hover" />
108+
<Switch destructive variant="secondary" checked={true} force="focus" />
109+
</Grid>
110+
<Grid
111+
css={{
112+
p: '$4',
113+
gap: '$4',
114+
gridTemplateColumns: '$6 $6 $6',
115+
backgroundColor: '$brand',
116+
}}
117+
>
118+
<Switch variant="brand" checked={false} />
119+
<Switch variant="brand" checked={false} force="hover" />
120+
<Switch variant="brand" checked={false} force="focus" />
121+
<Switch variant="brand" checked={true} />
122+
<Switch variant="brand" checked={true} force="hover" />
123+
<Switch variant="brand" checked={true} force="focus" />
124+
<Switch variant="brand" disabled checked={false} />
125+
<Switch variant="brand" disabled checked={false} force="hover" />
126+
<Switch variant="brand" disabled checked={false} force="focus" />
127+
<Switch variant="brand" disabled checked={true} />
128+
<Switch variant="brand" disabled checked={true} force="hover" />
129+
<Switch variant="brand" disabled checked={true} force="focus" />
130+
</Grid>
131+
</>
99132
)
100133
}

‎src/components/Switch/Switch.test.tsx

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,30 @@
11
import React from 'react'
2-
import { renderLight, renderDark } from 'test-utils'
3-
import { Default } from './Switch.stories'
2+
import { renderLight, renderDark, userEvent, screen } from 'test-utils'
3+
import { Default as Switch, States } from './Switch.stories'
44

55
it('renders light without error', () => {
6-
const { asFragment } = renderLight(<Default />)
7-
expect(asFragment()).toBeDefined()
6+
const onClickSpy = jest.fn()
7+
renderLight(<Switch onClick={onClickSpy} />)
8+
const buttonElement = screen.getByRole('switch')
9+
buttonElement.click()
10+
expect(onClickSpy).toHaveBeenCalled()
11+
})
12+
13+
it('renders and can be accessed with keyboard', () => {
14+
const onClickSpy = jest.fn()
15+
renderLight(<Switch onClick={onClickSpy} />)
16+
userEvent.tab()
17+
userEvent.keyboard('{enter}')
18+
expect(onClickSpy).toHaveBeenCalled()
19+
})
20+
21+
it('renders disabled without role', async () => {
22+
renderDark(<Switch disabled />)
23+
const buttons = await screen.findAllByRole('switch')
24+
buttons.forEach((b) => expect(b).toHaveAttribute('disabled'))
825
})
926

10-
it('renders dark without error', () => {
11-
const { asFragment } = renderDark(<Default />)
27+
it('renders all variants without error', () => {
28+
const { asFragment } = renderDark(<States />)
1229
expect(asFragment()).toBeDefined()
1330
})

‎src/components/Switch/Switch.tsx

Lines changed: 15 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ import { styled } from '../../stitches.config'
77
const StyledThumb = styled(Thumb, {
88
$$border: '$colors$default',
99
$$background: '$colors$paper',
10-
$$borderDisabled: '$colors$defaultLowlight',
11-
$$backgroundDisabled: '$colors$grey3',
1210

1311
position: 'absolute',
1412
left: 0,
@@ -25,11 +23,6 @@ const StyledThumb = styled(Thumb, {
2523
'&[data-state="checked"]': {
2624
transform: 'translateX(14px)',
2725
},
28-
29-
'&[data-disabled]': {
30-
borderColor: '$$borderDisabled',
31-
backgroundColor: '$$backgroundDisabled',
32-
},
3326
})
3427

3528
const hover = {
@@ -42,11 +35,8 @@ const focus = hover
4235

4336
const StyledSwitch = styled(Root, {
4437
$$background: '$colors$grey4',
45-
$$backgroundDisabled: '$colors$grey3',
4638
$$thumbBorder: '$colors$default',
47-
$$thumbBorderDisabled: '$colors$defaultLowlight',
4839
$$thumbBackgroundChecked: '$colors$paper',
49-
$$thumbBackgroundCheckedDisabled: '$colors$3',
5040
$$thumbBackgroundHighlight: '$colors$grey4',
5141

5242
// Reset
@@ -78,11 +68,9 @@ const StyledSwitch = styled(Root, {
7868

7969
[`& ${StyledThumb}`]: {
8070
$$border: '$$thumbBorder',
81-
$$borderDisabled: '$$thumbBorderDisabled',
8271

8372
'&[data-state="checked"]': {
8473
$$background: '$$thumbBackgroundChecked',
85-
$$backgroundDisabled: '$$thumbBackgroundCheckedDisabled',
8674
},
8775
},
8876

@@ -91,29 +79,38 @@ const StyledSwitch = styled(Root, {
9179

9280
'&:disabled': {
9381
pointerEvents: 'none',
94-
$$background: ' $$backgroundDisabled',
82+
opacity: 0.3,
9583
},
9684

9785
variants: {
9886
variant: {
9987
primary: {
10088
$$background: '$colors$brandYellow6',
101-
$$backgroundDisabled: '$colors$brandYellow4',
10289
$$thumbBorder: '$colors$primary',
103-
$$thumbBorderDisabled: '$colors$primaryLowlight',
10490
$$thumbBackgroundChecked: '$$thumbBorder',
105-
$$thumbBackgroundCheckedDisabled: ' $$thumbBorderDisabled',
10691
$$thumbBackgroundHighlight: '$colors$primaryHighlight',
10792
},
10893
secondary: {},
94+
brand: {
95+
$$background: '$colors$brandLowlight',
96+
$$thumbBorder: '$colors$brandYellow',
97+
$$thumbBackgroundChecked: '$colors$brandYellow',
98+
$$thumbBackgroundHighlight: '$colors$brandYellow',
99+
[`& ${StyledThumb}`]: {
100+
$$border: '$$thumbBorder',
101+
$$background: '$colors$brand',
102+
103+
'&[data-state="checked"]': {
104+
$$background: '$$thumbBackgroundChecked',
105+
},
106+
},
107+
},
109108
},
110109
destructive: {
111110
false: {},
112111
true: {
113112
$$background: '$colors$errorBackground',
114-
$$backgroundDisabled: '$colors$errorBackground',
115113
$$thumbBorder: '$colors$error',
116-
$$thumbBorderDisabled: '$colors$errorLowlight',
117114
$$thumbBackgroundHighlight: '$colors$errorLowlight',
118115
},
119116
},

0 commit comments

Comments
 (0)