@primer/components 32.0.2-rc.859381a1 → 32.1.1-rc.b4502a34

package/src/__tests__/themePreval.test.ts

@@ -0,0 +1,8 @@
+import fs from 'fs'
+import path from 'path'
+
+test('snapshot theme-preval.js', () => {
+  // Snapshot test the build output of theme-preval.js to catch any unexpected changes
+  const themePrevalFile = fs.readFileSync(path.resolve(__dirname, '../../lib/theme-preval.js'), 'utf8')
+  expect(themePrevalFile).toMatchSnapshot()
+})

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/ActionList2.stories.tsx

@@ -801,7 +801,7 @@ export function AllCombinations(): JSX.Element {
             L + I + B<ActionList.Description variant="inline">inline description</ActionList.Description>
             <ActionList.Description variant="block">Block description</ActionList.Description>
           </ActionList.Item>
-          <ActionList.Item>
+          <ActionList.Item disabled>
             <ActionList.LeadingVisual>
               <StarIcon />
             </ActionList.LeadingVisual>
@@ -810,7 +810,7 @@ export function AllCombinations(): JSX.Element {
               <StarIcon />
             </ActionList.TrailingVisual>
           </ActionList.Item>
-          <ActionList.Item>
+          <ActionList.Item disabled>
             <ActionList.LeadingVisual>
               <StarIcon />
             </ActionList.LeadingVisual>
@@ -819,7 +819,7 @@ export function AllCombinations(): JSX.Element {
               <StarIcon />
             </ActionList.TrailingVisual>
           </ActionList.Item>
-          <ActionList.Item>
+          <ActionList.Item disabled>
             I + B + T<ActionList.Description variant="inline">inline description</ActionList.Description>
             <ActionList.Description variant="block">Block description</ActionList.Description>
             <ActionList.TrailingVisual>
@@ -1051,9 +1051,14 @@ export function MemexGroupBy(): JSX.Element {
       <h1>Memex GroupBy List</h1>
       <ErsatzOverlay>
         <ActionList>
-          <ActionList.Group title="Group by" selectionVariant="single">
+          <ActionList.Group title="Group by" selectionVariant="single" role="listbox">
             {options.map((option, index) => (
-              <ActionList.Item key={index} selected={index === selectedIndex} onSelect={() => setSelectedIndex(index)}>
+              <ActionList.Item
+                key={index}
+                selected={index === selectedIndex}
+                onSelect={() => setSelectedIndex(index)}
+                role="option"
+              >
                 <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
                 {option.text}
               </ActionList.Item>
@@ -1119,10 +1124,11 @@ export function MemexSortable(): JSX.Element {
       <ErsatzOverlay>
         <DndProvider backend={HTML5Backend}>
           <ActionList selectionVariant="multiple">
-            <ActionList.Group title="Visible fields (can be reordered)">
+            <ActionList.Group title="Visible fields (can be reordered)" role="listbox">
               {visibleOptions.map(option => (
                 <SortableItem
                   key={option.text}
+                  role="option"
                   option={option}
                   onSelect={() => toggle(option.text)}
                   reorder={reorder}
@@ -1130,6 +1136,7 @@ export function MemexSortable(): JSX.Element {
               ))}
             </ActionList.Group>
             <ActionList.Group
+              role="listbox"
               title="Hidden fields"
               selectionVariant={
                 /** selectionVariant override on Group: disable selection if there are no options */
@@ -1137,7 +1144,12 @@ export function MemexSortable(): JSX.Element {
               }
             >
               {hiddenOptions.map((option, index) => (
-                <ActionList.Item key={index} selected={option.selected} onSelect={() => toggle(option.text)}>
+                <ActionList.Item
+                  key={index}
+                  role="option"
+                  selected={option.selected}
+                  onSelect={() => toggle(option.text)}
+                >
                   <ActionList.LeadingVisual>{option.icon}</ActionList.LeadingVisual>
                   {option.text}
                 </ActionList.Item>
@@ -1154,10 +1166,11 @@ MemexSortable.storyName = 'Memex Sortable List'
 
 type SortableItemProps = {
   option: Option
+  role: ItemProps['role']
   onSelect: ItemProps['onSelect']
   reorder: ({optionToMove, moveAfterOption}: {optionToMove: Option; moveAfterOption: Option}) => void
 }
-const SortableItem: React.FC<SortableItemProps> = ({option, onSelect, reorder}) => {
+const SortableItem: React.FC<SortableItemProps> = ({option, role, onSelect, reorder}) => {
   const [{isDragging}, dragRef] = useDrag(() => ({
     type: 'ITEM',
     item: option,
@@ -1178,6 +1191,7 @@ const SortableItem: React.FC<SortableItemProps> = ({option, onSelect, reorder})
 
   return (
     <ActionList.Item
+      role={role}
       ref={element => dragRef(element) && dropRef(element)} // merge refs
       selected={option.selected}
       onSelect={onSelect}

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

package/src/utils/testing.tsx

@@ -3,6 +3,9 @@ import {promisify} from 'util'
 import renderer from 'react-test-renderer'
 import enzyme from 'enzyme'
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17'
+import {cleanup, render as HTMLRender} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import type {Story as StoryType} from '@storybook/react'
 import {ThemeProvider} from '..'
 import {default as defaultTheme} from '../theme'
 
@@ -240,3 +243,22 @@ export function checkExports(path: string, exports: Record<any, any>): void {
     expect(mod).toSetExports(exports)
   })
 }
+
+expect.extend(toHaveNoViolations)
+export function checkStoriesForAxeViolations(name: string) {
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const stories = require(`../stories/${name}.stories`)
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars -- _meta
+  const {default: _meta, ...Stories} = stories
+  Object.values(Stories).map(Story => {
+    if (typeof Story !== 'function') return
+
+    it(`story ${(Story as StoryType).storyName} should have no axe violations`, async () => {
+      const {container} = HTMLRender(<Story />)
+      const results = await axe(container)
+      expect(results).toHaveNoViolations()
+      cleanup()
+    })
+  })
+}