@primer/components 32.1.0-rc.6f5d2b00 → 32.1.0

package/src/__tests__/Flex.test.tsx

@@ -1,58 +0,0 @@
-import React from 'react'
-import {Flex} 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('Flex', () => {
-  behavesAsComponent({Component: Flex})
-
-  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.test.tsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import {FormGroup} 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('FormGroup', () => {
-  behavesAsComponent({Component: FormGroup})
-
-  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})
-
-  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__/FormGroup.types.test.tsx

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

package/src/__tests__/Grid.test.tsx

@@ -1,82 +0,0 @@
-import React from 'react'
-import {Grid} 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('Grid', () => {
-  behavesAsComponent({Component: 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.test.tsx

@@ -1,49 +0,0 @@
-import React from 'react'
-import {Header} 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('Header', () => {
-  behavesAsComponent({Component: Header})
-
-  checkExports('Header', {
-    default: Header
-  })
-
-  describe('Header.Item', () => {
-    behavesAsComponent({Component: Header.Item})
-  })
-
-  describe('Header.Link', () => {
-    behavesAsComponent({Component: Header.Link})
-  })
-
-  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__/Header.types.test.tsx

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

package/src/__tests__/Heading.test.tsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import {Heading} 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)
-
-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})
-
-  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__/KeyPaths.types.test.ts

@@ -1,14 +0,0 @@
-import {Union} from 'ts-toolbelt'
-import {KeyPaths} from '../utils/types/KeyPaths'
-
-type NestedObject = {
-  a: string
-  b: {
-    b1: string
-    b2: string
-  }
-}
-
-export function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never {
-  return x
-}

package/src/__tests__/Label.test.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import {Label} 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('Label', () => {
-  behavesAsComponent({Component: Label})
-
-  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__/Label.types.test.tsx

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

package/src/__tests__/LabelGroup.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import {LabelGroup, Label} 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)
-
-const comp = (
-  <LabelGroup>
-    <Label>Default label</Label>
-    <Label>Darker gray label</Label>
-    <Label outline>Default outline label</Label>
-  </LabelGroup>
-)
-
-describe('LabelGroup', () => {
-  behavesAsComponent({Component: LabelGroup})
-
-  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__/LabelGroup.types.test.tsx

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

package/src/__tests__/Link.test.tsx

@@ -1,47 +0,0 @@
-import React from 'react'
-import {Link} 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('Link', () => {
-  behavesAsComponent({Component: Link})
-
-  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="accent.fg" />)).toMatchSnapshot()
-  })
-
-  it('respects the "sx" prop', () => {
-    expect(render(<Link sx={{fontStyle: 'italic'}} />)).toHaveStyleRule('font-style', 'italic')
-    expect(render(<Link as="i" sx={{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  "sx" prop when "muted" prop is also passed', () => {
-    expect(render(<Link muted sx={{color: 'fg.onEmphasis'}} />)).toMatchSnapshot()
-  })
-})

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

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

package/src/__tests__/Merge.types.test.ts

@@ -1,39 +0,0 @@
-import {Merge} from '../utils/types/Merge'
-
-type AString = {
-  a: string
-}
-
-type BString = {
-  b: string
-}
-
-type CString = {
-  c: string
-}
-
-type CNumber = {
-  c: number
-}
-
-type DOptionalString = {
-  d?: string
-}
-
-export function canMergeTwoTypes(x: Merge<AString, BString>): {a: string; b: string} {
-  return x
-}
-
-export function overridesAsExpected(x: Merge<CString, CNumber>): {c: number} {
-  return x
-}
-
-export function optionalityIsPreservedInFirstParameter(x: Merge<DOptionalString, AString>): {d: number} {
-  // @ts-expect-error: d is optional
-  return x
-}
-
-export function optionalityIsPreservedInSecondParameter(x: Merge<DOptionalString, AString>): {d: number} {
-  // @ts-expect-error: d is optional
-  return x
-}

package/src/__tests__/NewButton.test.tsx

@@ -1,70 +0,0 @@
-import React from 'react'
-import {NewButton as Button} from '../NewButton'
-import {render, behavesAsComponent} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {SearchIcon} from '@primer/octicons-react'
-expect.extend(toHaveNoViolations)
-
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-function noop() {}
-
-describe('Button', () => {
-  behavesAsComponent({Component: Button})
-
-  it('renders a <button>', () => {
-    expect(render(<Button>Default</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}>Noop</Button>).props.onClick).toEqual(noop)
-  })
-
-  it('respects width props', () => {
-    expect(render(<Button sx={{width: 200}}>Block</Button>)).toHaveStyleRule('width', '200px')
-  })
-
-  it('respects the "disabled" prop', () => {
-    const item = render(<Button disabled> Disabled</Button>)
-    expect(item.props.disabled).toEqual(true)
-    expect(item).toMatchSnapshot()
-  })
-
-  it('respects the "variant" prop', () => {
-    expect(render(<Button size="small">Smol</Button>)).toHaveStyleRule('font-size', '12px')
-    expect(render(<Button size="large">Large</Button>)).toHaveStyleRule('font-size', '16px')
-  })
-
-  it('respects the "fontSize" prop over the "variant" prop', () => {
-    expect(
-      render(
-        <Button size="small" sx={{fontSize: 20}}>
-          Big Smol
-        </Button>
-      )
-    ).toHaveStyleRule('font-size', '20px')
-  })
-
-  it('styles primary button appropriately', () => {
-    expect(render(<Button variant="primary">Primary</Button>)).toHaveStyleRule('background-color', '#2da44e')
-  })
-  it('styles invisible button appropriately', () => {
-    expect(render(<Button variant="invisible">Invisible</Button>)).toHaveStyleRule('background-color', 'transparent')
-  })
-  it('styles danger button appropriately', () => {
-    expect(render(<Button variant="danger">Danger</Button>)).toHaveStyleRule('background-color', '#f6f8fa')
-  })
-  it('styles icon only button to make it a square', () => {
-    const IconOnlyButton = render(<Button icon={SearchIcon}>Search icon only button</Button>)
-    expect(IconOnlyButton).toHaveStyleRule('padding-right', '7px')
-    expect(IconOnlyButton).toMatchSnapshot()
-  })
-})