@primer/components 32.0.2-rc.859381a1 → 32.1.0-rc.6f5d2b00

package/src/__tests__/Checkbox.test.tsx

@@ -0,0 +1,155 @@
+import React from 'react'
+import {Checkbox} from '..'
+import {behavesAsComponent, checkExports} from '../utils/testing'
+import {render, cleanup} from '@testing-library/react'
+import {toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import '@testing-library/jest-dom'
+import userEvent from '@testing-library/user-event'
+
+expect.extend(toHaveNoViolations)
+
+describe('Checkbox', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+    cleanup()
+  })
+  behavesAsComponent({Component: Checkbox})
+
+  checkExports('Checkbox', {
+    default: Checkbox
+  })
+
+  it('renders a valid checkbox input', () => {
+    const {getByRole} = render(<Checkbox />)
+
+    const checkbox = getByRole('checkbox')
+
+    expect(checkbox).toBeDefined()
+  })
+
+  it('renders an unchecked checkbox by default', () => {
+    const {getByRole} = render(<Checkbox />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an active checkbox when checked attribute is passed', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox checked onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(true)
+  })
+
+  it('accepts a change handler that can alter the checkbox state', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(false)
+
+    userEvent.click(checkbox)
+    expect(handleChange).toHaveBeenCalled()
+    expect(checkbox.checked).toEqual(true)
+
+    userEvent.click(checkbox)
+    expect(handleChange).toHaveBeenCalled()
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an indeterminate prop correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole} = render(<Checkbox indeterminate checked onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.indeterminate).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an inactive checkbox state correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox disabled onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.disabled).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
+
+    userEvent.click(checkbox)
+
+    expect(checkbox.disabled).toEqual(true)
+    expect(checkbox.checked).toEqual(false)
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true')
+
+    // remove disabled attribute and retest
+    rerender(<Checkbox onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-disabled', 'false')
+  })
+
+  it('renders an uncontrolled component correctly', () => {
+    const {getByRole} = render(<Checkbox defaultChecked />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox.checked).toEqual(true)
+
+    userEvent.click(checkbox)
+
+    expect(checkbox.checked).toEqual(false)
+  })
+
+  it('renders an aria-checked attribute correctly', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox checked={false} onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'false')
+
+    rerender(<Checkbox checked={true} onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'true')
+
+    rerender(<Checkbox indeterminate checked onChange={handleChange} />)
+
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed')
+  })
+
+  it('renders an invalid aria state when validation prop indicates an error', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Checkbox onChange={handleChange} validationStatus="success" />)
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false')
+
+    rerender(<Checkbox onChange={handleChange} validationStatus="error" />)
+
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true')
+  })
+
+  it('renders an aria state indicating the field is required', () => {
+    const handleChange = jest.fn()
+    const {getByRole, rerender} = render(<Checkbox onChange={handleChange} />)
+
+    const checkbox = getByRole('checkbox') as HTMLInputElement
+
+    expect(checkbox).toHaveAttribute('aria-required', 'false')
+
+    rerender(<Checkbox onChange={handleChange} required />)
+
+    expect(checkbox).toHaveAttribute('aria-required', 'true')
+  })
+})

package/src/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkbox renders consistently 1`] = `
+.c0 {
+  cursor: pointer;
+}
+
+<input
+  aria-checked="false"
+  aria-disabled="false"
+  aria-invalid="false"
+  aria-required="false"
+  className="c0"
+  type="checkbox"
+/>
+`;

package/src/index.ts

@@ -169,4 +169,7 @@ export type {TruncateProps} from './Truncate'
 export {default as UnderlineNav} from './UnderlineNav'
 export type {UnderlineNavProps, UnderlineNavLinkProps} from './UnderlineNav'
 
+export {default as Checkbox} from './Checkbox'
+export type {CheckboxProps} from './Checkbox'
+
 export {SSRProvider, useSSRSafeId} from './utils/ssr'

package/src/stories/Checkbox.stories.tsx

@@ -0,0 +1,164 @@
+import React, {useLayoutEffect, useRef, useState} from 'react'
+import {Meta} from '@storybook/react'
+import styled from 'styled-components'
+
+import {BaseStyles, Box, Checkbox, CheckboxProps, Text, ThemeProvider} from '..'
+import {action} from '@storybook/addon-actions'
+import {COMMON, get} from '../constants'
+
+export default {
+  title: 'Forms/Checkbox',
+  component: Checkbox,
+  decorators: [
+    Story => {
+      return (
+        <ThemeProvider>
+          <BaseStyles>
+            <Box paddingTop={5}>{Story()}</Box>
+          </BaseStyles>
+        </ThemeProvider>
+      )
+    }
+  ],
+  argTypes: {
+    sx: {
+      table: {
+        disable: true
+      }
+    },
+    disabled: {
+      name: 'Disabled',
+      defaultValue: false,
+      control: {
+        type: 'boolean'
+      }
+    }
+  }
+} as Meta
+
+const StyledLabel = styled.label`
+  user-select: none;
+  font-weight: 600;
+  font-size: 14px;
+  line-height: 18px;
+  margin-left: 16px;
+  ${COMMON}
+`
+
+const StyledSubLabel = styled(Text)`
+  color: ${get('colors.fg.muted')};
+  font-size: 13px;
+  ${COMMON}
+`
+
+export const Default = (args: CheckboxProps) => {
+  const [isChecked, setChecked] = useState<boolean>(false)
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked(event.target.checked)
+    action('Change event triggered')
+  }
+
+  return (
+    <>
+      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
+        <Checkbox id="controlled-checkbox" onChange={handleChange} checked={isChecked} {...args} />
+        <StyledLabel htmlFor="controlled-checkbox">
+          <Text sx={{display: 'block'}}>Default checkbox</Text>
+          <StyledSubLabel>controlled</StyledSubLabel>
+        </StyledLabel>
+      </Box>
+      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
+        <Checkbox id="always-checked-checkbox" checked {...args} />
+        <StyledLabel htmlFor="always-checked-checkbox">
+          <Text sx={{display: 'block'}}>Always checked</Text>
+          <StyledSubLabel>checked=&quot;true&quot;</StyledSubLabel>
+        </StyledLabel>
+      </Box>
+      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
+        <Checkbox id="always-unchecked-checkbox" checked={false} {...args} />
+        <StyledLabel htmlFor="always-unchecked-checkbox">
+          <Text sx={{display: 'block'}}>Always unchecked</Text>
+          <StyledSubLabel>checked=&quot;false&quot;</StyledSubLabel>
+        </StyledLabel>
+      </Box>
+      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
+        <Checkbox id="disabled-checkbox" disabled checked={false} />
+        <StyledLabel htmlFor="disabled-checkbox">
+          <Text sx={{display: 'block'}}>Inactive</Text>
+          <StyledSubLabel>disabled=&quot;true&quot;</StyledSubLabel>
+        </StyledLabel>
+      </Box>
+    </>
+  )
+}
+
+export const Uncontrolled = (args: CheckboxProps) => {
+  const checkboxRef = useRef<HTMLInputElement | null>(null)
+
+  useLayoutEffect(() => {
+    if (checkboxRef.current) {
+      checkboxRef.current.checked = true
+    }
+  }, [])
+
+  return (
+    <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
+      <Checkbox id="uncontrolled-checkbox" ref={checkboxRef} {...args} />
+      <StyledLabel htmlFor="uncontrolled-checkbox">
+        <Text sx={{display: 'block'}}>Uncontrolled checkbox</Text>
+        <StyledSubLabel>Checked by default</StyledSubLabel>
+      </StyledLabel>
+    </Box>
+  )
+}
+
+export const Indeterminate = (args: CheckboxProps) => {
+  const [checkboxes, setCheckboxes] = useState<boolean[]>([false, false, false, false])
+
+  const handleChange = (_: React.ChangeEvent<HTMLInputElement>, index: number) => {
+    const newCheckboxes = [...checkboxes]
+    newCheckboxes[index] = !checkboxes[index]
+    setCheckboxes(newCheckboxes)
+  }
+
+  const handleIndeterminateChange = () => {
+    if (checkboxes.every(checkbox => checkbox)) {
+      return setCheckboxes(checkboxes.map(() => false))
+    }
+
+    const newCheckboxes = checkboxes.map(() => true)
+    setCheckboxes(newCheckboxes)
+  }
+
+  return (
+    <>
+      <Box as="form" sx={{p: 3, display: 'flex', alignItems: 'flex-start'}}>
+        <Checkbox
+          id="indeterminate-checkbox"
+          checked={checkboxes.every(Boolean)}
+          onChange={handleIndeterminateChange}
+          indeterminate={!checkboxes.every(Boolean)}
+        />
+        <StyledLabel htmlFor="controlled-checkbox">
+          <Text sx={{display: 'block'}}>Default checkbox</Text>
+          <StyledSubLabel>controlled</StyledSubLabel>
+        </StyledLabel>
+      </Box>
+
+      {checkboxes.map((field, index) => (
+        <Box key={`sub-checkbox-${index}`} as="form" sx={{p: 1, pl: 7, display: 'flex', alignItems: 'flex-start'}}>
+          <Checkbox
+            id={`sub-checkbox-${index}`}
+            checked={checkboxes[index]}
+            onChange={event => handleChange(event, index)}
+            {...args}
+          />
+          <StyledLabel htmlFor={`sub-checkbox-${index}`}>
+            <Text sx={{display: 'block'}}>Checkbox {index + 1}</Text>
+          </StyledLabel>
+        </Box>
+      ))}
+    </>
+  )
+}