feat(switch): adds brand variant to switch component

src/components/Switch/Switch.stories.tsx

@@ -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)
 
@@ -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>
+    </>
   )
 }

src/components/Switch/Switch.test.tsx

@@ -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()
 })

src/components/Switch/Switch.tsx

@@ -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,
@@ -25,11 +23,6 @@ const StyledThumb = styled(Thumb, {
   '&[data-state="checked"]': {
     transform: 'translateX(14px)',
   },
-
-  '&[data-disabled]': {
-    borderColor: '$$borderDisabled',
-    backgroundColor: '$$backgroundDisabled',
-  },
 })
 
 const hover = {
@@ -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
@@ -78,11 +68,9 @@ const StyledSwitch = styled(Root, {
 
   [`& ${StyledThumb}`]: {
     $$border: '$$thumbBorder',
-    $$borderDisabled: '$$thumbBorderDisabled',
 
     '&[data-state="checked"]': {
       $$background: '$$thumbBackgroundChecked',
-      $$backgroundDisabled: '$$thumbBackgroundCheckedDisabled',
     },
   },
 
@@ -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',
       },
     },