Skip to content

Commit

Permalink
Merge pull request #222 from commitd/stuarthendren/issue221
Browse files Browse the repository at this point in the history
feat(switch): adds `brand` variant to switch component
  • Loading branch information
stuarthendren authored Sep 7, 2021
2 parents 658085c + 58a7cf4 commit 728c572
Show file tree
Hide file tree
Showing 3 changed files with 97 additions and 50 deletions.
85 changes: 59 additions & 26 deletions src/components/Switch/Switch.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,16 @@ export const Variants = () => {
)
}

export const Brand = () => {
const [value, { toggle }] = useBoolean(false)

return (
<Row css={{ padding: '$4', backgroundColor: '$brand' }}>
<Switch variant="brand" checked={value} onCheckedChange={toggle} />
</Row>
)
}

export const Destructive = () => {
const [value, { toggle }] = useBoolean(false)

Expand Down Expand Up @@ -70,31 +80,54 @@ export const Disabled = () => (

export const States = () => {
return (
<Grid css={{ gap: '$4', gridTemplateColumns: '$6 $6 $6' }}>
<Switch variant="primary" checked={false} />
<Switch variant="primary" checked={false} force="hover" />
<Switch variant="primary" checked={false} force="focus" />
<Switch variant="primary" checked={true} />
<Switch variant="primary" checked={true} force="hover" />
<Switch variant="primary" checked={true} force="focus" />
<Switch variant="secondary" checked={false} />
<Switch variant="secondary" checked={false} force="hover" />
<Switch variant="secondary" checked={false} force="focus" />
<Switch variant="secondary" checked={true} />
<Switch variant="secondary" checked={true} force="hover" />
<Switch variant="secondary" checked={true} force="focus" />
<Switch destructive variant="primary" checked={false} />
<Switch destructive variant="primary" checked={false} force="hover" />
<Switch destructive variant="primary" checked={false} force="focus" />
<Switch destructive variant="primary" checked={true} />
<Switch destructive variant="primary" checked={true} force="hover" />
<Switch destructive variant="primary" checked={true} force="focus" />
<Switch destructive variant="secondary" checked={false} />
<Switch destructive variant="secondary" checked={false} force="hover" />
<Switch destructive variant="secondary" checked={false} force="focus" />
<Switch destructive variant="secondary" checked={true} />
<Switch destructive variant="secondary" checked={true} force="hover" />
<Switch destructive variant="secondary" checked={true} force="focus" />
</Grid>
<>
<Grid css={{ p: '$4', gap: '$4', gridTemplateColumns: '$6 $6 $6' }}>
<Switch variant="primary" checked={false} />
<Switch variant="primary" checked={false} force="hover" />
<Switch variant="primary" checked={false} force="focus" />
<Switch variant="primary" checked={true} />
<Switch variant="primary" checked={true} force="hover" />
<Switch variant="primary" checked={true} force="focus" />
<Switch variant="secondary" checked={false} />
<Switch variant="secondary" checked={false} force="hover" />
<Switch variant="secondary" checked={false} force="focus" />
<Switch variant="secondary" checked={true} />
<Switch variant="secondary" checked={true} force="hover" />
<Switch variant="secondary" checked={true} force="focus" />
<Switch destructive variant="primary" checked={false} />
<Switch destructive variant="primary" checked={false} force="hover" />
<Switch destructive variant="primary" checked={false} force="focus" />
<Switch destructive variant="primary" checked={true} />
<Switch destructive variant="primary" checked={true} force="hover" />
<Switch destructive variant="primary" checked={true} force="focus" />
<Switch destructive variant="secondary" checked={false} />
<Switch destructive variant="secondary" checked={false} force="hover" />
<Switch destructive variant="secondary" checked={false} force="focus" />
<Switch destructive variant="secondary" checked={true} />
<Switch destructive variant="secondary" checked={true} force="hover" />
<Switch destructive variant="secondary" checked={true} force="focus" />
</Grid>
<Grid
css={{
p: '$4',
gap: '$4',
gridTemplateColumns: '$6 $6 $6',
backgroundColor: '$brand',
}}
>
<Switch variant="brand" checked={false} />
<Switch variant="brand" checked={false} force="hover" />
<Switch variant="brand" checked={false} force="focus" />
<Switch variant="brand" checked={true} />
<Switch variant="brand" checked={true} force="hover" />
<Switch variant="brand" checked={true} force="focus" />
<Switch variant="brand" disabled checked={false} />
<Switch variant="brand" disabled checked={false} force="hover" />
<Switch variant="brand" disabled checked={false} force="focus" />
<Switch variant="brand" disabled checked={true} />
<Switch variant="brand" disabled checked={true} force="hover" />
<Switch variant="brand" disabled checked={true} force="focus" />
</Grid>
</>
)
}
29 changes: 23 additions & 6 deletions src/components/Switch/Switch.test.tsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,30 @@
import React from 'react'
import { renderLight, renderDark } from 'test-utils'
import { Default } from './Switch.stories'
import { renderLight, renderDark, userEvent, screen } from 'test-utils'
import { Default as Switch, States } from './Switch.stories'

it('renders light without error', () => {
const { asFragment } = renderLight(<Default />)
expect(asFragment()).toBeDefined()
const onClickSpy = jest.fn()
renderLight(<Switch onClick={onClickSpy} />)
const buttonElement = screen.getByRole('switch')
buttonElement.click()
expect(onClickSpy).toHaveBeenCalled()
})

it('renders and can be accessed with keyboard', () => {
const onClickSpy = jest.fn()
renderLight(<Switch onClick={onClickSpy} />)
userEvent.tab()
userEvent.keyboard('{enter}')
expect(onClickSpy).toHaveBeenCalled()
})

it('renders disabled without role', async () => {
renderDark(<Switch disabled />)
const buttons = await screen.findAllByRole('switch')
buttons.forEach((b) => expect(b).toHaveAttribute('disabled'))
})

it('renders dark without error', () => {
const { asFragment } = renderDark(<Default />)
it('renders all variants without error', () => {
const { asFragment } = renderDark(<States />)
expect(asFragment()).toBeDefined()
})
33 changes: 15 additions & 18 deletions src/components/Switch/Switch.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,6 @@ import { styled } from '../../stitches.config'
const StyledThumb = styled(Thumb, {
$$border: '$colors$default',
$$background: '$colors$paper',
$$borderDisabled: '$colors$defaultLowlight',
$$backgroundDisabled: '$colors$grey3',

position: 'absolute',
left: 0,
Expand All @@ -25,11 +23,6 @@ const StyledThumb = styled(Thumb, {
'&[data-state="checked"]': {
transform: 'translateX(14px)',
},

'&[data-disabled]': {
borderColor: '$$borderDisabled',
backgroundColor: '$$backgroundDisabled',
},
})

const hover = {
Expand All @@ -42,11 +35,8 @@ const focus = hover

const StyledSwitch = styled(Root, {
$$background: '$colors$grey4',
$$backgroundDisabled: '$colors$grey3',
$$thumbBorder: '$colors$default',
$$thumbBorderDisabled: '$colors$defaultLowlight',
$$thumbBackgroundChecked: '$colors$paper',
$$thumbBackgroundCheckedDisabled: '$colors$3',
$$thumbBackgroundHighlight: '$colors$grey4',

// Reset
Expand Down Expand Up @@ -78,11 +68,9 @@ const StyledSwitch = styled(Root, {

[`& ${StyledThumb}`]: {
$$border: '$$thumbBorder',
$$borderDisabled: '$$thumbBorderDisabled',

'&[data-state="checked"]': {
$$background: '$$thumbBackgroundChecked',
$$backgroundDisabled: '$$thumbBackgroundCheckedDisabled',
},
},

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

'&:disabled': {
pointerEvents: 'none',
$$background: ' $$backgroundDisabled',
opacity: 0.3,
},

variants: {
variant: {
primary: {
$$background: '$colors$brandYellow6',
$$backgroundDisabled: '$colors$brandYellow4',
$$thumbBorder: '$colors$primary',
$$thumbBorderDisabled: '$colors$primaryLowlight',
$$thumbBackgroundChecked: '$$thumbBorder',
$$thumbBackgroundCheckedDisabled: ' $$thumbBorderDisabled',
$$thumbBackgroundHighlight: '$colors$primaryHighlight',
},
secondary: {},
brand: {
$$background: '$colors$brandLowlight',
$$thumbBorder: '$colors$brandYellow',
$$thumbBackgroundChecked: '$colors$brandYellow',
$$thumbBackgroundHighlight: '$colors$brandYellow',
[`& ${StyledThumb}`]: {
$$border: '$$thumbBorder',
$$background: '$colors$brand',

'&[data-state="checked"]': {
$$background: '$$thumbBackgroundChecked',
},
},
},
},
destructive: {
false: {},
true: {
$$background: '$colors$errorBackground',
$$backgroundDisabled: '$colors$errorBackground',
$$thumbBorder: '$colors$error',
$$thumbBorderDisabled: '$colors$errorLowlight',
$$thumbBackgroundHighlight: '$colors$errorLowlight',
},
},
Expand Down

0 comments on commit 728c572

Please sign in to comment.