@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/src/__tests__/Breadcrumbs.types.test.tsx

@@ -1,22 +0,0 @@
-import React from 'react'
-import Breadcrumbs from '../Breadcrumbs'
-
-export function shouldAcceptCallWithNoProps() {
-  return (
-    <>
-      <Breadcrumbs />
-      <Breadcrumbs.Item />
-    </>
-  )
-}
-
-export function shouldNotAcceptSystemProps() {
-  return (
-    <>
-      {/* @ts-expect-error system props should not be accepted */}
-      <Breadcrumbs backgroundColor="maroon" />
-      {/* @ts-expect-error system props should not be accepted */}
-      <Breadcrumbs.Item backgroundColor="fuchsia" />
-    </>
-  )
-}

package/src/__tests__/BreadcrumbsItem.test.tsx

@@ -1,31 +0,0 @@
-import {cleanup, render as HTMLRender} from '@testing-library/react'
-import 'babel-polyfill'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React from 'react'
-import {Breadcrumbs} from '..'
-import {behavesAsComponent, render} from '../utils/testing'
-expect.extend(toHaveNoViolations)
-
-describe('Breadcrumbs.Item', () => {
-  behavesAsComponent({Component: Breadcrumbs.Item})
-
-  it('renders an <a> by default', () => {
-    expect(render(<Breadcrumbs.Item />).type).toEqual('a')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Breadcrumbs.Item />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the "selected" prop', () => {
-    expect(render(<Breadcrumbs.Item selected />)).toMatchSnapshot()
-  })
-
-  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
-    const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
-    expect(render(<Breadcrumbs.Item as={Link} to="#" />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/Button.test.tsx

@@ -1,128 +0,0 @@
-import React from 'react'
-import {
-  Button,
-  ButtonPrimary,
-  ButtonClose,
-  ButtonDanger,
-  ButtonOutline,
-  ButtonInvisible,
-  ButtonGroup,
-  ButtonTableList
-} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() {}
-
-describe('Button', () => {
-  behavesAsComponent({Component: Button})
-
-  checkExports('Button', {
-    default: Button,
-    ButtonPrimary,
-    ButtonDanger,
-    ButtonOutline,
-    ButtonInvisible,
-    ButtonGroup,
-    ButtonTableList,
-    ButtonClose
-  })
-
-  it('renders a <button>', () => {
-    expect(render(<Button />).type).toEqual('button')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Button>Click here</Button>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('preserves "onClick" prop', () => {
-    expect(render(<Button onClick={noop} />).props.onClick).toEqual(noop)
-  })
-
-  it('respects width props', () => {
-    expect(render(<Button sx={{width: 200}} />)).toHaveStyleRule('width', '200px')
-  })
-
-  it('respects the "disabled" prop', () => {
-    const item = render(<Button disabled />)
-    expect(item.props.disabled).toEqual(true)
-    expect(item).toMatchSnapshot()
-  })
-
-  it('respects the "variant" prop', () => {
-    expect(render(<Button variant="small" />)).toHaveStyleRule('font-size', '12px')
-    expect(render(<Button variant="large" />)).toHaveStyleRule('font-size', '16px')
-  })
-
-  it('respects the "fontSize" prop over the "variant" prop', () => {
-    expect(render(<Button variant="small" sx={{fontSize: 20}} />)).toHaveStyleRule('font-size', '20px')
-  })
-})
-
-describe('ButtonPrimary', () => {
-  behavesAsComponent({Component: ButtonPrimary})
-
-  it('renders a <button>', () => {
-    expect(render(<ButtonPrimary />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonPrimary disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonDanger', () => {
-  behavesAsComponent({Component: ButtonDanger})
-
-  it('renders a <button>', () => {
-    expect(render(<ButtonDanger />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonDanger disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonOutline', () => {
-  behavesAsComponent({Component: ButtonOutline})
-
-  it('renders a <button> by default', () => {
-    expect(render(<ButtonOutline />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonOutline disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonInvisible', () => {
-  behavesAsComponent({Component: ButtonOutline})
-
-  it('renders a <button> by default', () => {
-    expect(render(<ButtonInvisible />).type).toEqual('button')
-  })
-
-  it('renders correct disabled styles', () => {
-    const item = render(<ButtonInvisible disabled />)
-    expect(item).toMatchSnapshot()
-  })
-})
-
-describe('ButtonGroup', () => {
-  behavesAsComponent({Component: ButtonGroup})
-})
-
-describe('ButtonTableList', () => {
-  behavesAsComponent({Component: ButtonTableList})
-})

package/src/__tests__/Caret.test.tsx

@@ -1,36 +0,0 @@
-import React from 'react'
-import Caret, {CaretProps} from '../Caret'
-import {render, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Caret', () => {
-  it('renders <svg>', () => {
-    expect(render(<Caret />).type).toEqual('svg')
-  })
-
-  checkExports('Caret', {
-    default: Caret
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Caret />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders cardinal directions', () => {
-    for (const location of ['top', 'right', 'bottom', 'left']) {
-      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
-    }
-    for (const location of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) {
-      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
-    }
-    for (const location of ['left-top', 'left-bottom', 'right-top', 'right-bottom']) {
-      expect(render(<Caret location={location as CaretProps['location']} />)).toMatchSnapshot()
-    }
-  })
-})

package/src/__tests__/CircleBadge.test.tsx

@@ -1,66 +0,0 @@
-import React from 'react'
-import {CircleBadge} from '..'
-import {CheckIcon} from '@primer/octicons-react'
-import {render, mount, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-const imgInput = <img alt="" src="primer.jpg" />
-
-describe('CircleBadge', () => {
-  behavesAsComponent({
-    Component: CircleBadge,
-    toRender: () => <CircleBadge>{imgInput}</CircleBadge>
-  })
-
-  checkExports('CircleBadge', {
-    default: CircleBadge
-  })
-
-  describe('CircleBadge.Icon', () => {
-    behavesAsComponent({
-      Component: CircleBadge.Icon,
-      toRender: () => <CircleBadge.Icon icon={CheckIcon} />
-    })
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<CircleBadge variant="large" size={20} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the inline prop', () => {
-    expect(render(<CircleBadge inline />)).toMatchSnapshot()
-  })
-
-  it('respects the variant prop', () => {
-    expect(render(<CircleBadge variant="large" />)).toMatchSnapshot()
-  })
-
-  it('uses the size prop to override the variant prop', () => {
-    expect(render(<CircleBadge variant="large" size={20} />)).toMatchSnapshot()
-  })
-
-  it('applies title', () => {
-    expect(
-      render(
-        <CircleBadge as="a" title="primer logo">
-          {imgInput}
-        </CircleBadge>
-      ).props['title']
-    ).toEqual('primer logo')
-  })
-
-  it('preserves child class names', () => {
-    const comp = mount(
-      <CircleBadge>
-        <img className="primer" alt="" src="primer.jpg" />
-      </CircleBadge>
-    )
-    expect(comp.find('img').hasClass('primer')).toEqual(true)
-  })
-})

package/src/__tests__/CircleBadge.types.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import CircleBadge from '../CircleBadge'
-
-export function shouldAcceptCallWithNoProps() {
-  return <CircleBadge />
-}
-
-export function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
-  return <CircleBadge backgroundColor="thistle" />
-}

package/src/__tests__/CircleOcticon.test.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import {CheckIcon} from '@primer/octicons-react'
-import theme from '../theme'
-import {CircleOcticon} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('CircleOcticon', () => {
-  behavesAsComponent({
-    Component: CircleOcticon,
-    toRender: () => <CircleOcticon icon={CheckIcon} />
-  })
-
-  checkExports('CircleOcticon', {
-    default: CircleOcticon
-  })
-
-  it('renders a <div> with width and height', () => {
-    const result = render(<CircleOcticon icon={CheckIcon} size={10} />)
-    expect(result).toHaveStyleRule('width', '10px')
-    expect(result).toHaveStyleRule('height', '10px')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<CircleOcticon icon={CheckIcon} size={10} />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders {borderRadius: 50%}', () => {
-    expect(render(<CircleOcticon icon={CheckIcon} />)).toHaveStyleRule('border-radius', '50%')
-  })
-
-  it('respects the bg prop', () => {
-    expect(render(<CircleOcticon icon={CheckIcon} bg="danger.subtle" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.danger?.subtle
-    )
-  })
-
-  it('has a default size', () => {
-    const result = render(<CircleOcticon icon={CheckIcon} />)
-    expect(result).toHaveStyleRule('width', '32px')
-    expect(result).toHaveStyleRule('height', '32px')
-  })
-})

package/src/__tests__/ConfirmationDialog.test.tsx

@@ -1,120 +0,0 @@
-import 'babel-polyfill'
-import {render as HTMLRender, cleanup, act, fireEvent} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React, {useCallback, useRef, useState} from 'react'
-
-import {ActionMenu} from '../ActionMenu'
-import BaseStyles from '../BaseStyles'
-import Box from '../Box'
-import Button from '../Button/Button'
-import {ConfirmationDialog, useConfirm} from '../Dialog/ConfirmationDialog'
-import theme from '../theme'
-import {ThemeProvider} from '../ThemeProvider'
-import {SSRProvider} from '../utils/ssr'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-
-expect.extend(toHaveNoViolations)
-
-const Basic = () => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const onDialogClose = useCallback(() => setIsOpen(false), [])
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-            Show dialog
-          </Button>
-          {isOpen && (
-            <ConfirmationDialog
-              title="Confirm"
-              onClose={onDialogClose}
-              cancelButtonContent="Secondary"
-              confirmButtonContent="Primary"
-            >
-              Lorem ipsum dolor sit Pippin good dog.
-            </ConfirmationDialog>
-          )}
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-const ShorthandHookFromActionMenu = () => {
-  const confirm = useConfirm()
-  const [text, setText] = useState('Show menu')
-  const onButtonClick = useCallback(async () => {
-    if (
-      await confirm({
-        title: 'Confirm',
-        content: 'Confirm',
-        cancelButtonContent: 'Secondary',
-        confirmButtonContent: 'Primary'
-      })
-    ) {
-      setText('Confirmed')
-    }
-  }, [confirm])
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <Box display="flex" flexDirection="column" alignItems="flex-start">
-            <ActionMenu
-              renderAnchor={props => <Button {...props}>{text}</Button>}
-              items={[{text: 'Show dialog', onAction: onButtonClick}]}
-            />
-          </Box>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('ConfirmationDialog', () => {
-  behavesAsComponent({
-    Component: ConfirmationDialog,
-    toRender: () => <Basic />,
-    options: {skipAs: true, skipSx: true}
-  })
-
-  checkExports('Dialog/ConfirmationDialog', {
-    default: undefined,
-    useConfirm,
-    ConfirmationDialog
-  })
-
-  it('should have no axe violations', async () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation()
-    const {container} = HTMLRender(<Basic />)
-    spy.mockRestore()
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('focuses the primary action when opened', async () => {
-    const {getByText} = HTMLRender(<Basic />)
-    act(() => {
-      fireEvent.click(getByText('Show dialog'))
-    })
-    expect(getByText('Primary')).toEqual(document.activeElement)
-    expect(getByText('Secondary')).not.toEqual(document.activeElement)
-    cleanup()
-  })
-
-  it('supports nested `focusTrap`s', async () => {
-    const {getByText} = HTMLRender(<ShorthandHookFromActionMenu />)
-    act(() => {
-      fireEvent.click(getByText('Show menu'))
-    })
-    act(() => {
-      fireEvent.click(getByText('Show dialog'))
-    })
-    expect(getByText('Primary')).toEqual(document.activeElement)
-    expect(getByText('Secondary')).not.toEqual(document.activeElement)
-    cleanup()
-  })
-})

package/src/__tests__/CounterLabel.test.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import {CounterLabel} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import theme from '../theme'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-
-expect.extend(toHaveNoViolations)
-
-describe('CounterLabel', () => {
-  behavesAsComponent({Component: CounterLabel})
-
-  checkExports('CounterLabel', {
-    default: CounterLabel
-  })
-
-  it('renders a <span>', () => {
-    expect(render(<CounterLabel />).type).toEqual('span')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<CounterLabel />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the primary "scheme" prop', () => {
-    expect(render(<CounterLabel scheme="primary" />)).toHaveStyleRule(
-      'color',
-      theme.colorSchemes.light.colors.fg?.onEmphasis.trim()
-    )
-    expect(render(<CounterLabel scheme="primary" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.neutral?.emphasis.trim()
-    )
-  })
-
-  it('respects the secondary "scheme" prop', () => {
-    expect(render(<CounterLabel scheme="secondary" />)).toHaveStyleRule(
-      'color',
-      theme.colorSchemes.light.colors.fg?.default.trim()
-    )
-    expect(render(<CounterLabel scheme="secondary" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.neutral?.muted
-    )
-  })
-})

package/src/__tests__/CounterLabel.types.test.tsx

@@ -1,11 +0,0 @@
-import React from 'react'
-import CounterLabel from '../CounterLabel'
-
-export function shouldAcceptCallWithNoProps() {
-  return <CounterLabel />
-}
-
-export function shouldNotAcceptSystemProps() {
-  // @ts-expect-error system props should not be accepted
-  return <CounterLabel backgroundColor="whitesmoke" />
-}

package/src/__tests__/Details.test.tsx

@@ -1,115 +0,0 @@
-import React from 'react'
-import {Details, useDetails, Button, ButtonPrimary, Box} from '..'
-import {ButtonProps} from '../Button/Button'
-import {mount, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Details', () => {
-  behavesAsComponent({Component: Details})
-
-  checkExports('Details', {
-    default: Details
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Details />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('Toggles when you click outside', () => {
-    const Component = () => {
-      const {getDetailsProps} = useDetails({closeOnOutsideClick: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <summary>hi</summary>
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-
-    document.body.click()
-
-    const dom = wrapper.getDOMNode()
-
-    expect(dom.hasAttribute('open')).toEqual(false)
-
-    wrapper.unmount()
-  })
-
-  it('Accurately passes down open state', () => {
-    const Component = () => {
-      const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-
-    document.body.click()
-
-    const dom = wrapper.getDOMNode()
-    const summary = wrapper.find('summary')
-    expect(summary.text()).toEqual('Closed')
-
-    expect(dom.hasAttribute('open')).toEqual(false)
-
-    wrapper.unmount()
-  })
-
-  it('Can manipulate state with setOpen', () => {
-    const CloseButton = (props: ButtonProps) => <Button {...props} />
-    const Component = () => {
-      const {getDetailsProps, setOpen, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
-          <CloseButton onClick={() => setOpen(false)} />
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-
-    wrapper.find(CloseButton).simulate('click')
-
-    const dom = wrapper.getDOMNode()
-    const summary = wrapper.find('summary')
-    expect(summary.text()).toEqual('Closed')
-
-    expect(dom.hasAttribute('open')).toEqual(false)
-
-    wrapper.unmount()
-  })
-
-  it('Does not toggle when you click inside', () => {
-    const Component = () => {
-      const {getDetailsProps, open} = useDetails({closeOnOutsideClick: true, defaultOpen: true})
-      return (
-        <Details {...getDetailsProps()}>
-          <Button as="summary">{open ? 'Open' : 'Closed'}</Button>
-          <Box>
-            <ButtonPrimary>hi</ButtonPrimary>
-          </Box>
-        </Details>
-      )
-    }
-
-    const wrapper = mount(<Component />)
-    const summary = wrapper.find('summary')
-
-    wrapper.find(ButtonPrimary).simulate('click')
-
-    expect(summary.text()).toEqual('Open')
-
-    wrapper.unmount()
-  })
-})