@primer/components 33.0.0-rc.cface7dc → 33.1.0

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

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

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

package/src/__tests__/Dialog.test.tsx

@@ -1,155 +0,0 @@
-import React, {useState, useRef} from 'react'
-import {Dialog, Box, Text, Button} from '..'
-import {render as HTMLRender, cleanup, act, fireEvent} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-expect.extend(toHaveNoViolations)
-
-const comp = (
-  <Dialog isOpen onDismiss={() => null} aria-labelledby="header">
-    <Dialog.Header id="header">Title</Dialog.Header>
-    <Box p={3}>
-      <Text fontFamily="sans-serif">Some content</Text>
-    </Box>
-  </Dialog>
-)
-
-const Component = () => {
-  const [isOpen, setIsOpen] = useState(true)
-  const returnFocusRef = useRef(null)
-  return (
-    <div>
-      <Button data-testid="trigger-button" ref={returnFocusRef} onClick={() => setIsOpen(true)}>
-        Show Dialog
-      </Button>
-      <Dialog
-        returnFocusRef={returnFocusRef}
-        isOpen={isOpen}
-        onDismiss={() => setIsOpen(false)}
-        aria-labelledby="header"
-      >
-        <div data-testid="inner">
-          <Dialog.Header id="header">Title</Dialog.Header>
-          <Box p={3}>
-            <Text fontFamily="sans-serif">Some content</Text>
-          </Box>
-        </div>
-      </Dialog>
-    </div>
-  )
-}
-
-const ClosedDialog = () => {
-  return (
-    <Dialog isOpen={false} onDismiss={() => null} aria-labelledby="header">
-      <div data-testid="inner">
-        <Dialog.Header id="header">Title</Dialog.Header>
-        <Box p={3}>
-          <Text fontFamily="sans-serif">Some content</Text>
-        </Box>
-      </div>
-    </Dialog>
-  )
-}
-
-const DialogWithCustomFocusRef = () => {
-  const buttonRef = useRef(null)
-  return (
-    <Dialog isOpen initialFocusRef={buttonRef} onDismiss={() => null} aria-labelledby="header">
-      <div data-testid="inner">
-        <Dialog.Header id="header">Title</Dialog.Header>
-        <Box p={3}>
-          <Text fontFamily="sans-serif">Some content</Text>
-          <button data-testid="inner-button" ref={buttonRef}>
-            hi
-          </button>
-        </Box>
-      </div>
-    </Dialog>
-  )
-}
-
-describe('Dialog', () => {
-  // because Dialog returns a React fragment the as and sx tests fail always, so they are skipped
-  behavesAsComponent({
-    Component: Dialog,
-    toRender: () => comp,
-    options: {skipAs: true, skipSx: true}
-  })
-
-  checkExports('Dialog', {
-    default: Dialog
-  })
-
-  describe('Dialog.Header', () => {
-    behavesAsComponent({Component: Dialog.Header})
-  })
-
-  it('should have no axe violations', async () => {
-    const spy = jest.spyOn(console, 'warn').mockImplementation()
-    const {container} = HTMLRender(comp)
-    spy.mockRestore()
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('Toggles when you click close button', async () => {
-    const {getByLabelText, getByTestId, queryByTestId} = HTMLRender(<Component />)
-
-    expect(getByTestId('inner')).toBeTruthy()
-    act(() => {
-      fireEvent.click(getByLabelText('Close'))
-    })
-
-    expect(queryByTestId('inner')).toBeNull()
-
-    cleanup()
-  })
-
-  it('Renders dialog when isOpen is true', async () => {
-    const {getByTestId} = HTMLRender(<Component />)
-
-    expect(getByTestId('inner')).toBeTruthy()
-
-    cleanup()
-  })
-
-  it('Does not render dialog when isOpen is false', async () => {
-    const {queryByTestId} = HTMLRender(<ClosedDialog />)
-
-    expect(queryByTestId('inner')).toBeNull()
-
-    cleanup()
-  })
-
-  it('Focuses close button when Dialog is opened', async () => {
-    const {getByLabelText} = HTMLRender(<Component />)
-    const closeButton = getByLabelText('Close')
-    expect(document.activeElement).toEqual(closeButton)
-    cleanup()
-  })
-
-  it('Focuses custom ref when Dialog is opened', async () => {
-    const {getByTestId} = HTMLRender(<DialogWithCustomFocusRef />)
-    const innerButton = getByTestId('inner-button')
-    expect(document.activeElement).toEqual(innerButton)
-    cleanup()
-  })
-
-  it('Returns focus to returnFocusRef', async () => {
-    const {getByLabelText, getByTestId, queryByTestId} = HTMLRender(<Component />)
-
-    expect(getByTestId('inner')).toBeTruthy()
-    act(() => {
-      fireEvent.click(getByLabelText('Close'))
-    })
-
-    expect(queryByTestId('inner')).toBeNull()
-    const triggerButton = getByTestId('trigger-button')
-    expect(document.activeElement).toEqual(triggerButton)
-
-    cleanup()
-  })
-})

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

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

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

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

package/src/__tests__/Dropdown.test.tsx

@@ -1,53 +0,0 @@
-import React from 'react'
-import {Dropdown} from '..'
-import {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('Dropdown', () => {
-  behavesAsComponent({Component: Dropdown, toRender: () => <Dropdown>Hello!</Dropdown>})
-
-  checkExports('Dropdown', {
-    default: Dropdown
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Dropdown />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})
-
-describe('Dropdown.Item', () => {
-  behavesAsComponent({
-    Component: Dropdown.Item,
-    toRender: () => <Dropdown.Item>Hello!</Dropdown.Item>
-  })
-})
-
-describe('Dropdown.Button', () => {
-  behavesAsComponent({
-    Component: Dropdown.Button,
-    toRender: () => <Dropdown.Button>Hello!</Dropdown.Button>
-  })
-})
-
-describe('Dropdown.Caret', () => {
-  behavesAsComponent({Component: Dropdown.Caret})
-})
-
-describe('Dropdown.Menu', () => {
-  behavesAsComponent({
-    Component: Dropdown.Menu,
-    toRender: () => (
-      <Dropdown.Menu>
-        <li key="a">1</li>
-        <li key="b">2</li>
-        <li key="c">3</li>
-      </Dropdown.Menu>
-    )
-  })
-})

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

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

package/src/__tests__/DropdownMenu.test.tsx

@@ -1,136 +0,0 @@
-import {cleanup, render as HTMLRender, act, fireEvent} from '@testing-library/react'
-import 'babel-polyfill'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import React from 'react'
-import theme from '../theme'
-import {DropdownMenu, DropdownButton} from '../DropdownMenu'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {BaseStyles, ThemeProvider, SSRProvider} from '..'
-import {ItemInput} from '../ActionList/List'
-
-expect.extend(toHaveNoViolations)
-
-const items = [{text: 'Foo'}, {text: 'Bar'}, {text: 'Baz'}, {text: 'Bon'}] as ItemInput[]
-
-function SimpleDropdownMenu(): JSX.Element {
-  const [selectedItem, setSelectedItem] = React.useState<ItemInput | undefined>()
-
-  return (
-    <ThemeProvider theme={theme}>
-      <SSRProvider>
-        <BaseStyles>
-          <div id="something-else">X</div>
-          <DropdownMenu
-            items={items}
-            placeholder="Select an Option"
-            selectedItem={selectedItem}
-            onChange={setSelectedItem}
-          />
-          <div id="portal-root"></div>
-        </BaseStyles>
-      </SSRProvider>
-    </ThemeProvider>
-  )
-}
-
-describe('DropdownMenu', () => {
-  afterEach(() => {
-    jest.clearAllMocks()
-  })
-
-  behavesAsComponent({
-    Component: DropdownMenu,
-    options: {skipAs: true, skipSx: true},
-    toRender: () => (
-      <SSRProvider>
-        <DropdownMenu items={[]} />
-      </SSRProvider>
-    )
-  })
-
-  checkExports('DropdownMenu', {
-    default: undefined,
-    DropdownMenu,
-    DropdownButton
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<SimpleDropdownMenu />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should trigger the overlay on trigger click', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const itemText = items
-      .map((i: ItemInput) => {
-        if (i.hasOwnProperty('text')) {
-          return i.text
-        }
-      })
-      .join('')
-    expect(portalRoot?.textContent?.trim()).toEqual(itemText)
-  })
-
-  it('should dismiss the overlay on dropdown item click', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = await menu.queryByText('Baz')
-    act(() => {
-      fireEvent.click(menuItem as Element)
-    })
-    // portal is closed after click
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-
-  it('option should be selected when chosen from the dropdown menu', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const menuItem = await menu.queryByText('Baz')
-    act(() => {
-      fireEvent.click(menuItem as Element)
-    })
-    expect(anchor.textContent).toEqual('Baz')
-  })
-
-  it('should dismiss the overlay on clicking outside overlay', async () => {
-    const menu = HTMLRender(<SimpleDropdownMenu />)
-    let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeNull()
-    const anchor = await menu.findByText('Select an Option')
-    act(() => {
-      fireEvent.click(anchor)
-    })
-    portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__')
-    expect(portalRoot).toBeTruthy()
-    const somethingElse = (await menu.baseElement.querySelector('#something-else')) as HTMLElement
-    act(() => {
-      fireEvent.mouseDown(somethingElse)
-    })
-    // portal is closed after click
-    expect(portalRoot?.textContent).toEqual('') // menu items are hidden
-  })
-})

package/src/__tests__/FilterList.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import {FilterList} 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('FilterList', () => {
-  behavesAsComponent({Component: FilterList})
-
-  checkExports('FilterList', {
-    default: FilterList
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<FilterList>Hello</FilterList>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <ul>', () => {
-    expect(render(<FilterList />).type).toEqual('ul')
-  })
-})

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

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

package/src/__tests__/FilterListItem.test.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import {FilterList} from '..'
-import {render, behavesAsComponent} 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('FilterList.Item', () => {
-  behavesAsComponent({Component: FilterList.Item})
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<FilterList.Item>stuff</FilterList.Item>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders an <a> by default', () => {
-    expect(render(<FilterList.Item />).type).toEqual('a')
-  })
-
-  it('respects the "selected" prop', () => {
-    expect(render(<FilterList.Item selected />)).toMatchSnapshot()
-  })
-
-  it('respects "count" prop', () => {
-    const {getByText} = HTMLRender(<FilterList.Item count={400} />)
-    expect(getByText('400')).toBeTruthy()
-  })
-})

package/src/__tests__/FilteredSearch.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react'
-import {FilteredSearch} 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('FilteredSearch', () => {
-  behavesAsComponent({Component: FilteredSearch})
-
-  checkExports('FilteredSearch', {
-    default: FilteredSearch
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<FilteredSearch>Hello</FilteredSearch>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <div>', () => {
-    expect(render(<FilteredSearch />).type).toEqual('div')
-  })
-})