@primer/components 29.1.0-rc.79e8b21e → 29.1.0

package/src/__tests__/Flash.tsx

@@ -1,46 +0,0 @@
-import React from 'react'
-import {Flash} from '..'
-import {COMMON} from '../constants'
-import theme from '../theme'
-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('Flash', () => {
-  behavesAsComponent({Component: Flash, systemPropArray: [COMMON]})
-
-  checkExports('Flash', {
-    default: Flash
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Flash variant="warning" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the "full" prop', () => {
-    expect(render(<Flash full />)).toHaveStyleRule('margin-top', '-1px')
-    expect(render(<Flash full />)).toHaveStyleRule('border-radius', '0')
-    expect(render(<Flash full />)).toHaveStyleRule('border-width', '1px 0px')
-  })
-
-  it('respects the "variant" prop', () => {
-    expect(render(<Flash variant="warning" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.alert?.warn.bg
-    )
-    expect(render(<Flash variant="danger" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.alert?.error.bg
-    )
-    expect(render(<Flash variant="success" />)).toHaveStyleRule(
-      'background-color',
-      theme.colorSchemes.light.colors.alert?.success.bg
-    )
-    expect(render(<Flash />)).toHaveStyleRule('background-color', theme.colorSchemes.light.colors.alert?.info.bg)
-  })
-})

package/src/__tests__/Flex.tsx

@@ -1,59 +0,0 @@
-import React from 'react'
-import {Flex} from '..'
-import {COMMON, FLEX, LAYOUT} from '../constants'
-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('Flex', () => {
-  behavesAsComponent({Component: Flex, systemPropArray: [COMMON, FLEX, LAYOUT]})
-
-  checkExports('Flex', {
-    default: Flex
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Flex />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('gets display: flex by default', () => {
-    expect(render(<Flex />)).toHaveStyleRule('display', 'flex')
-  })
-
-  it('respects flexWrap', () => {
-    expect(render(<Flex flexWrap="nowrap" />)).toMatchSnapshot()
-  })
-
-  it('respects flexDirection', () => {
-    expect(render(<Flex flexDirection="row" />)).toMatchSnapshot()
-  })
-
-  it('respects justifyContent', () => {
-    expect(render(<Flex justifyContent="start" />)).toMatchSnapshot()
-  })
-
-  it('respects alignItems', () => {
-    expect(render(<Flex alignItems="start" />)).toMatchSnapshot()
-  })
-
-  it('respects alignContent', () => {
-    expect(render(<Flex alignContent="start" />)).toMatchSnapshot()
-  })
-
-  it('respects display', () => {
-    expect(render(<Flex display="inline-flex" />)).toHaveStyleRule('display', 'inline-flex')
-  })
-
-  it('respects responsive display', () => {
-    expect(render(<Flex display={['flex', 'inline-flex']} />)).toMatchSnapshot()
-  })
-
-  it('renders a div by default', () => {
-    expect(render(<Flex />).type).toEqual('div')
-  })
-})

package/src/__tests__/FormGroup.tsx

@@ -1,39 +0,0 @@
-import React from 'react'
-import {FormGroup} from '..'
-import {COMMON, TYPOGRAPHY} from '../constants'
-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('FormGroup', () => {
-  behavesAsComponent({Component: FormGroup, systemPropArray: [COMMON]})
-
-  checkExports('FormGroup', {
-    default: FormGroup
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(
-      <FormGroup>
-        <FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
-        <input id="example-text" value="Example Value" readOnly />
-      </FormGroup>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})
-
-describe('FormGroup.Label', () => {
-  behavesAsComponent({Component: FormGroup.Label, systemPropArray: [COMMON, TYPOGRAPHY]})
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})

package/src/__tests__/Grid.tsx

@@ -1,83 +0,0 @@
-import React from 'react'
-import {Grid} from '..'
-import {COMMON, FLEX, LAYOUT, GRID} from '../constants'
-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('Grid', () => {
-  behavesAsComponent({Component: Grid, systemPropArray: [COMMON, FLEX, LAYOUT, GRID]})
-
-  checkExports('Grid', {
-    default: Grid
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Grid />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('gets display: grid by default', () => {
-    expect(render(<Grid />)).toHaveStyleRule('display', 'grid')
-  })
-
-  it('respects gridGap', () => {
-    expect(render(<Grid gridGap={1} />)).toMatchSnapshot()
-  })
-
-  it('respects gridColumnGap', () => {
-    expect(render(<Grid gridColumnGap={2} />)).toMatchSnapshot()
-  })
-
-  it('respects gridRowGap', () => {
-    expect(render(<Grid gridRowGap={2} />)).toMatchSnapshot()
-  })
-
-  it('respects gridColumn', () => {
-    expect(render(<Grid gridColumn="1 / 2" />)).toMatchSnapshot()
-  })
-
-  it('respects gridRow', () => {
-    expect(render(<Grid gridRow="1 / 2" />)).toMatchSnapshot()
-  })
-
-  it('respects gridArea', () => {
-    expect(render(<Grid gridArea="sidebar" />)).toMatchSnapshot()
-  })
-
-  it('respects gridAutoFlow', () => {
-    expect(render(<Grid gridAutoFlow="row" />)).toMatchSnapshot()
-  })
-
-  it('respects gridAutoRows', () => {
-    expect(render(<Grid gridAutoRows="1fr" />)).toMatchSnapshot()
-  })
-
-  it('respects gridAutoColumns', () => {
-    expect(render(<Grid gridAutoColumns="1fr" />)).toMatchSnapshot()
-  })
-
-  it('respects gridTemplateColumns', () => {
-    expect(render(<Grid gridTemplateColumns="200px 1fr" />)).toMatchSnapshot()
-  })
-
-  it('respects gridTemplateRows', () => {
-    expect(render(<Grid gridTemplateRows=" 200px 1fr" />)).toMatchSnapshot()
-  })
-
-  it('respects gridTemplateAreas', () => {
-    expect(render(<Grid gridTemplateAreas="sidebar  main" />)).toMatchSnapshot()
-  })
-
-  it('respects responsive display', () => {
-    expect(render(<Grid display={['grid', 'inline-grid']} />)).toMatchSnapshot()
-  })
-
-  it('renders a div by default', () => {
-    expect(render(<Grid />).type).toEqual('div')
-  })
-})

package/src/__tests__/Header.tsx

@@ -1,50 +0,0 @@
-import React from 'react'
-import {Header} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {BORDER, COMMON, TYPOGRAPHY} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Header', () => {
-  behavesAsComponent({Component: Header, systemPropArray: [COMMON, BORDER]})
-
-  checkExports('Header', {
-    default: Header
-  })
-
-  describe('Header.Item', () => {
-    behavesAsComponent({Component: Header.Item, systemPropArray: [COMMON, BORDER]})
-  })
-
-  describe('Header.Link', () => {
-    behavesAsComponent({Component: Header.Link, systemPropArray: [COMMON, BORDER, TYPOGRAPHY]})
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(
-      <Header>
-        <Header.Item full>
-          <Header.Link href="#">One</Header.Link>
-        </Header.Item>
-        <Header.Item>
-          <Header.Link href="#">Two</Header.Link>
-        </Header.Item>
-        <Header.Item>Three</Header.Item>
-      </Header>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('renders a <div> and <a>', () => {
-    expect(render(<Header />).type).toEqual('div')
-    expect(render(<Header.Link />).type).toEqual('a')
-  })
-
-  it('sets aria-label appropriately', () => {
-    expect(render(<Header aria-label="foo" />).props['aria-label']).toEqual('foo')
-  })
-})

package/src/__tests__/Heading.tsx

@@ -1,92 +0,0 @@
-import React from 'react'
-import {Heading} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {TYPOGRAPHY, COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-const theme = {
-  breakpoints: ['400px', '640px', '960px', '1280px'],
-  colors: {
-    green: ['#010', '#020', '#030', '#040', '#050', '#060']
-  },
-  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'],
-  fonts: {
-    normal: 'Helvetica,sans-serif',
-    mono: 'Consolas,monospace'
-  },
-  lineHeights: {
-    normal: 1.5,
-    condensed: 1.25,
-    condensedUltra: 1
-  },
-  fontWeights: {
-    light: '300',
-    normal: '400',
-    semibold: '500',
-    bold: '600'
-  }
-}
-
-describe('Heading', () => {
-  behavesAsComponent({Component: Heading, systemPropArray: [COMMON, TYPOGRAPHY]})
-
-  checkExports('Heading', {
-    default: Heading
-  })
-
-  it('renders <h2> by default', () => {
-    expect(render(<Heading />).type).toEqual('h2')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Heading>Hello</Heading>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects fontWeight', () => {
-    expect(render(<Heading fontWeight="bold" theme={theme} />)).toHaveStyleRule('font-weight', theme.fontWeights.bold)
-    expect(render(<Heading fontWeight="normal" theme={theme} />)).toHaveStyleRule(
-      'font-weight',
-      theme.fontWeights.normal
-    )
-    expect(render(<Heading fontWeight="semibold" theme={theme} />)).toHaveStyleRule(
-      'font-weight',
-      theme.fontWeights.semibold
-    )
-    expect(render(<Heading fontWeight="light" theme={theme} />)).toHaveStyleRule('font-weight', theme.fontWeights.light)
-  })
-
-  it('respects lineHeight', () => {
-    expect(render(<Heading lineHeight="normal" theme={theme} />)).toHaveStyleRule(
-      'line-height',
-      String(theme.lineHeights.normal)
-    )
-    expect(render(<Heading lineHeight="condensed" theme={theme} />)).toHaveStyleRule(
-      'line-height',
-      String(theme.lineHeights.condensed)
-    )
-    expect(render(<Heading lineHeight="condensedUltra" theme={theme} />)).toHaveStyleRule(
-      'line-height',
-      String(theme.lineHeights.condensedUltra)
-    )
-  })
-
-  it('respects fontFamily="mono"', () => {
-    expect(render(<Heading fontFamily="mono" theme={theme} />)).toHaveStyleRule('font-family', theme.fonts.mono)
-  })
-
-  it('renders fontSize', () => {
-    for (const fontSize of theme.fontSizes) {
-      expect(render(<Heading fontSize={fontSize} theme={theme} />)).toHaveStyleRule('font-size', `${fontSize}`)
-    }
-  })
-
-  it('respects the "fontStyle" prop', () => {
-    expect(render(<Heading fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-  })
-})

package/src/__tests__/Label.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import {Label} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Label', () => {
-  behavesAsComponent({Component: Label, systemPropArray: [COMMON]})
-
-  checkExports('Label', {
-    default: Label
-  })
-
-  it('renders a <span>', () => {
-    expect(render(<Label />).type).toEqual('span')
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Label>hello</Label>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the "outline" prop', () => {
-    expect(render(<Label outline />)).toMatchSnapshot()
-  })
-
-  it('respects the "variant" prop', () => {
-    expect(render(<Label variant="xl" />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/LabelGroup.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import {LabelGroup, Label} from '..'
-import {behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-const comp = (
-  <LabelGroup>
-    <Label>Default label</Label>
-    <Label>Darker gray label</Label>
-    <Label outline>Default outline label</Label>
-  </LabelGroup>
-)
-
-describe('LabelGroup', () => {
-  behavesAsComponent({Component: LabelGroup, systemPropArray: [COMMON]})
-
-  checkExports('LabelGroup', {
-    default: LabelGroup
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(comp)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})

package/src/__tests__/Link.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import {Link} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {COMMON, TYPOGRAPHY} from '../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-describe('Link', () => {
-  behavesAsComponent({Component: Link, systemPropArray: [COMMON, TYPOGRAPHY]})
-
-  checkExports('Link', {
-    default: Link
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Link href="www.github.com">GitHub</Link>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('passes href down to link element', () => {
-    expect(render(<Link href="https://github.com" />)).toMatchSnapshot()
-  })
-
-  it('respects hoverColor prop', () => {
-    expect(render(<Link hoverColor="text.link" />)).toMatchSnapshot()
-  })
-
-  it('respects the "fontStyle" prop', () => {
-    expect(render(<Link fontStyle="italic" />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Link as="i" fontStyle="normal" />)).toHaveStyleRule('font-style', 'normal')
-  })
-
-  it('applies button styles when rendering a button element', () => {
-    expect(render(<Link as="button" />)).toMatchSnapshot()
-  })
-
-  it('respectes the "muted" prop', () => {
-    expect(render(<Link muted />)).toMatchSnapshot()
-  })
-
-  it('respectes the "color" prop when "muted" prop is also passed', () => {
-    expect(render(<Link muted color="fg.onEmphasis" />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/Overlay.tsx

@@ -1,103 +0,0 @@
-import React, {useRef, useState} from 'react'
-import {Overlay, Box, Text, ButtonDanger, Button} from '..'
-import {render, cleanup, waitFor, fireEvent, act} from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import theme from '../theme'
-import BaseStyles from '../BaseStyles'
-import {ThemeProvider} from '../ThemeProvider'
-
-expect.extend(toHaveNoViolations)
-
-type TestComponentSettings = {
-  initialFocus?: 'button'
-  callback?: () => void
-}
-const TestComponent = ({initialFocus, callback}: TestComponentSettings) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const buttonRef = useRef<HTMLButtonElement>(null)
-  const confirmButtonRef = useRef<HTMLButtonElement>(null)
-  const anchorRef = useRef<HTMLDivElement>(null)
-  const closeOverlay = () => {
-    setIsOpen(false)
-    if (callback) {
-      callback()
-    }
-  }
-  return (
-    <ThemeProvider theme={theme}>
-      <BaseStyles>
-        <Box position="absolute" top={0} left={0} bottom={0} right={0} ref={anchorRef}>
-          <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>
-            open overlay
-          </Button>
-          <Button>outside</Button>
-          {isOpen ? (
-            <Overlay
-              initialFocusRef={initialFocus === 'button' ? confirmButtonRef : undefined}
-              returnFocusRef={buttonRef}
-              ignoreClickRefs={[buttonRef]}
-              onEscape={closeOverlay}
-              onClickOutside={closeOverlay}
-              width="small"
-            >
-              <Box display="flex" flexDirection="column" p={2}>
-                <Text>Are you sure?</Text>
-                <ButtonDanger onClick={closeOverlay}>Cancel</ButtonDanger>
-                <Button onClick={closeOverlay} ref={confirmButtonRef}>
-                  Confirm
-                </Button>
-              </Box>
-            </Overlay>
-          ) : null}
-        </Box>
-      </BaseStyles>
-    </ThemeProvider>
-  )
-}
-
-describe('Overlay', () => {
-  it('should have no axe violations', async () => {
-    const {container} = render(<TestComponent />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('should focus element passed into function', async () => {
-    const {getByText} = render(<TestComponent initialFocus="button" />)
-    userEvent.click(getByText('open overlay'))
-    await waitFor(() => getByText('Confirm'))
-    const confirmButton = getByText('Confirm')
-    expect(document.activeElement).toEqual(confirmButton)
-  })
-
-  it('should focus first element when nothing is passed', async () => {
-    const {getByText} = render(<TestComponent />)
-    userEvent.click(getByText('open overlay'))
-    await waitFor(() => getByText('Cancel'))
-    const cancelButton = getByText('Cancel')
-    expect(document.activeElement).toEqual(cancelButton)
-  })
-
-  it('should call function when user clicks outside container', () => {
-    const mockFunction = jest.fn()
-    const {getByText, queryAllByText} = render(<TestComponent callback={mockFunction} />)
-    act(() => userEvent.click(getByText('open overlay')))
-    act(() => userEvent.click(getByText('outside')))
-    expect(mockFunction).toHaveBeenCalledTimes(1)
-    const cancelButtons = queryAllByText('Cancel')
-    expect(cancelButtons).toHaveLength(0)
-  })
-
-  it('should call function when user presses escape', () => {
-    const mockFunction = jest.fn()
-    const {getByText, queryAllByText} = render(<TestComponent callback={mockFunction} />)
-    act(() => userEvent.click(getByText('open overlay')))
-    const domNode = getByText('Are you sure?')
-    fireEvent.keyDown(domNode, {key: 'Escape', code: 'Escape', keyCode: 27, charCode: 27})
-    expect(mockFunction).toHaveBeenCalledTimes(1)
-    const cancelButtons = queryAllByText('Cancel')
-    expect(cancelButtons).toHaveLength(0)
-  })
-})

package/src/__tests__/Pagehead.tsx

@@ -1,24 +0,0 @@
-import React from 'react'
-import {Pagehead} from '..'
-import {COMMON} from '../constants'
-import theme from '../theme'
-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('Pagehead', () => {
-  behavesAsComponent({Component: Pagehead, systemPropArray: [COMMON]})
-
-  checkExports('Pagehead', {
-    default: Pagehead
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<Pagehead theme={theme}>Pagehead</Pagehead>)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})

package/src/__tests__/Pagination/Pagination.tsx

@@ -1,31 +0,0 @@
-import React from 'react'
-import Pagination from '../../Pagination'
-import {behavesAsComponent} from '../../utils/testing'
-import {COMMON} from '../../constants'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-expect.extend(toHaveNoViolations)
-
-const reqProps = {pageCount: 10, currentPage: 1}
-const comp = <Pagination {...reqProps} />
-
-describe('Pagination', () => {
-  behavesAsComponent({Component: Pagination, systemPropArray: [COMMON], toRender: () => comp})
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(comp)
-    const results = await axe(container, {
-      rules: {
-        // The skip-link rule has to do with entire documents
-        // and is not relevant to this component.
-        // See https://dequeuniversity.com/rules/axe/3.3/skip-link?application=axeAPI
-        'skip-link': {
-          enabled: false
-        }
-      }
-    })
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-})