@primer/components 33.0.0-rc.cface7dc → 33.1.0

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

package/src/__tests__/Overlay.test.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__/Overlay.types.test.tsx

@@ -1,33 +0,0 @@
-import React from 'react'
-import Overlay from '../Overlay'
-
-export function shouldAcceptCallWithNoProps(ref: React.RefObject<HTMLElement>) {
-  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} />
-}
-
-export function shouldAcceptCallWithDOMProps(ref: React.RefObject<HTMLElement>) {
-  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} onMouseDown={() => null} />
-}
-
-export function shouldNotAcceptCallWithDOMPropsThatDontMatchElement(ref: React.RefObject<HTMLElement>) {
-  // @ts-expect-error href should not be allowed on a <div>
-  return <Overlay returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
-}
-
-export function shouldAcceptCallWithAsAndDOMProps(ref: React.RefObject<HTMLElement>) {
-  return (
-    <Overlay as="a" returnFocusRef={ref} onClickOutside={() => null} onEscape={() => null} href="//primer.style/" />
-  )
-}
-
-export function shouldNotAcceptSystemProps(ref: React.RefObject<HTMLElement>) {
-  return (
-    <Overlay
-      returnFocusRef={ref}
-      onClickOutside={() => null}
-      onEscape={() => null}
-      // @ts-expect-error system props should not be accepted
-      backgroundColor="olivedrab"
-    />
-  )
-}

package/src/__tests__/Pagehead.test.tsx

@@ -1,23 +0,0 @@
-import React from 'react'
-import {Pagehead} from '..'
-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})
-
-  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__/Pagehead.types.test.tsx

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

package/src/__tests__/Pagination/Pagination.test.tsx

@@ -1,30 +0,0 @@
-import React from 'react'
-import Pagination from '../../Pagination'
-import {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)
-
-const reqProps = {pageCount: 10, currentPage: 1}
-const comp = <Pagination {...reqProps} />
-
-describe('Pagination', () => {
-  behavesAsComponent({Component: Pagination, 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()
-  })
-})

package/src/__tests__/Pagination/PaginationModel.test.tsx

@@ -1,133 +0,0 @@
-import 'babel-polyfill'
-import {buildPaginationModel} from '../../Pagination/model'
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function first(array: Array<any>, count = 1) {
-  const slice = array.slice(0, count)
-  return count === 1 ? slice[0] : slice
-}
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-function last(array: Array<any>, count = 1) {
-  const len = array.length
-  const slice = array.slice(len - count, len)
-  return count === 1 ? slice[0] : slice
-}
-
-describe('Pagination model', () => {
-  it('sets disabled on prev links', () => {
-    const model1 = buildPaginationModel(10, 1, true, 1, 2)
-    expect(first(model1).type).toEqual('PREV')
-    expect(first(model1).disabled).toBe(true)
-
-    const model2 = buildPaginationModel(10, 2, true, 1, 2)
-    expect(first(model2).type).toEqual('PREV')
-    expect(first(model2).disabled).toBe(false)
-  })
-
-  it('sets disabled on next links', () => {
-    const model1 = buildPaginationModel(10, 10, true, 1, 2)
-    expect(last(model1).type).toEqual('NEXT')
-    expect(last(model1).disabled).toBe(true)
-
-    const model2 = buildPaginationModel(10, 9, true, 1, 2)
-    expect(last(model2).type).toEqual('NEXT')
-    expect(last(model2).disabled).toBe(false)
-  })
-
-  it('sets the page number for prev and next links', () => {
-    const model = buildPaginationModel(10, 5, true, 1, 2)
-    expect(first(model).num).toEqual(4)
-    expect(last(model).num).toEqual(6)
-  })
-
-  it('ensures margin pages on the left', () => {
-    const model = buildPaginationModel(10, 10, true, 2, 0)
-    const slice = first(model, 5)
-
-    const expected = [
-      {type: 'PREV', num: 9},
-      {type: 'NUM', num: 1},
-      {type: 'NUM', num: 2},
-      {type: 'BREAK'},
-      {type: 'NUM'}
-    ]
-
-    expect(slice).toMatchObject(expected)
-  })
-
-  it('ensures margin pages on the right', () => {
-    const model = buildPaginationModel(10, 1, true, 2, 0)
-    const slice = last(model, 5)
-
-    const expected = [
-      {type: 'NUM'},
-      {type: 'BREAK'},
-      {type: 'NUM', num: 9},
-      {type: 'NUM', num: 10},
-      {type: 'NEXT', num: 2}
-    ]
-
-    expect(slice).toMatchObject(expected)
-  })
-
-  it('ensures that the current page is surrounded by the right number of pages', () => {
-    const model = buildPaginationModel(10, 5, true, 1, 1)
-    const expected = [
-      {type: 'PREV', num: 4},
-      {type: 'NUM', num: 1},
-      {type: 'BREAK'},
-      {type: 'NUM', num: 4},
-      {type: 'NUM', num: 5, selected: true},
-      {type: 'NUM', num: 6},
-      {type: 'BREAK'},
-      {type: 'NUM', num: 10},
-      {type: 'NEXT', num: 6}
-    ]
-    expect(model).toMatchObject(expected)
-  })
-
-  it('adds items to the right if it hits bounds to the left', () => {
-    const model = buildPaginationModel(15, 2, true, 1, 1)
-    const expected = [
-      {type: 'PREV', num: 1},
-      {type: 'NUM', num: 1},
-      {type: 'NUM', num: 2, selected: true},
-      {type: 'NUM', num: 3},
-      // normally with a surround of 1, only 1 and 3 would be shown
-      // however, since 1 was already shown, we extend to 4
-      {type: 'NUM', num: 4},
-      {type: 'BREAK'}
-    ]
-    expect(first(model, 6)).toMatchObject(expected)
-  })
-
-  it('adds items to the left if it hits bounds to the right', () => {
-    const model = buildPaginationModel(15, 14, true, 1, 1)
-    const expected = [
-      // normally with a surround of 1, only 13 and 15 would be shown
-      // however, since 15 was already shown, we extend to 12
-      {type: 'BREAK'},
-      {type: 'NUM', num: 12},
-      {type: 'NUM', num: 13},
-      {type: 'NUM', num: 14, selected: true},
-      {type: 'NUM', num: 15},
-      {type: 'NEXT', num: 15}
-    ]
-    expect(last(model, 6)).toMatchObject(expected)
-  })
-
-  it('correctly creates breaks next to the next/prev links when margin is 0', () => {
-    const model = buildPaginationModel(10, 5, true, 0, 1)
-    const expected = [
-      {type: 'PREV'},
-      {type: 'BREAK', num: 1},
-      {type: 'NUM', num: 4},
-      {type: 'NUM', num: 5, selected: true},
-      {type: 'NUM', num: 6},
-      {type: 'BREAK', num: 10},
-      {type: 'NEXT'}
-    ]
-    expect(model).toMatchObject(expected)
-  })
-})

package/src/__tests__/Pagination/__snapshots__/Pagination.test.tsx.snap

@@ -1,184 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Pagination renders consistently 1`] = `
-.c1 {
-  display: inline-block;
-}
-
-.c2 {
-  display: inline-block;
-  min-width: 32px;
-  padding: 5px 10px;
-  font-style: normal;
-  line-height: 20px;
-  color: #24292f;
-  text-align: center;
-  white-space: nowrap;
-  vertical-align: middle;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  margin-right: 4px;
-  border: 1px solid transparent;
-  border-radius: 6px;
-  -webkit-transition: border-color 0.2s cubic-bezier(0.3,0,0.5,1);
-  transition: border-color 0.2s cubic-bezier(0.3,0,0.5,1);
-}
-
-.c2:last-child {
-  margin-right: 0;
-}
-
-.c2:hover,
-.c2:focus {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  border-color: #d0d7de;
-  outline: 0;
-  -webkit-transition-duration: 0.1s;
-  transition-duration: 0.1s;
-}
-
-.c2:active {
-  border-color: hsla(210,18%,87%,1);
-}
-
-.c2[rel='prev'],
-.c2[rel='next'] {
-  color: #0969da;
-}
-
-.c2[aria-current],
-.c2[aria-current]:hover {
-  color: #ffffff;
-  background-color: #0969da;
-  border-color: transparent;
-}
-
-.c2[aria-disabled],
-.c2[aria-disabled]:hover {
-  color: #8c959f;
-  cursor: default;
-  border-color: transparent;
-}
-
-.c0 {
-  margin-top: 20px;
-  margin-bottom: 15px;
-  text-align: center;
-}
-
-@supports (-webkit-clip-path:polygon(50% 0,100% 50%,50% 100%)) or (clip-path:polygon(50% 0,100% 50%,50% 100%)) {
-  .c2[rel='prev']::before,
-  .c2[rel='next']::after {
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    vertical-align: text-bottom;
-    content: '';
-    background-color: currentColor;
-  }
-
-  .c2[rel='prev']::before {
-    margin-right: 4px;
-    -webkit-clip-path: polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );
-    clip-path: polygon( 9.8px 12.8px,8.7px 12.8px,4.5px 8.5px,4.5px 7.5px,8.7px 3.2px,9.8px 4.3px,6.1px 8px,9.8px 11.7px,9.8px 12.8px );
-  }
-
-  .c2[rel='next']::after {
-    margin-left: 4px;
-    -webkit-clip-path: polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );
-    clip-path: polygon( 6.2px 3.2px,7.3px 3.2px,11.5px 7.5px,11.5px 8.5px,7.3px 12.8px,6.2px 11.7px,9.9px 8px,6.2px 4.3px,6.2px 3.2px );
-  }
-}
-
-<nav
-  aria-label="Pagination"
-  className="c0"
->
-  <div
-    className="c1"
-    display="inline-block"
-  >
-    <span
-      aria-disabled="true"
-      className="c2"
-    >
-      Previous
-    </span>
-    <em
-      aria-current="page"
-      className="c2"
-    >
-      1
-    </em>
-    <a
-      aria-label="Page 2"
-      className="c2"
-      href="#2"
-      onClick={[Function]}
-    >
-      2
-    </a>
-    <a
-      aria-label="Page 3"
-      className="c2"
-      href="#3"
-      onClick={[Function]}
-    >
-      3
-    </a>
-    <a
-      aria-label="Page 4"
-      className="c2"
-      href="#4"
-      onClick={[Function]}
-    >
-      4
-    </a>
-    <a
-      aria-label="Page 5"
-      className="c2"
-      href="#5"
-      onClick={[Function]}
-    >
-      5
-    </a>
-    <a
-      aria-label="Page 6"
-      className="c2"
-      href="#6"
-      onClick={[Function]}
-    >
-      6
-    </a>
-    <span
-      aria-disabled={true}
-      className="c2"
-    >
-      …
-    </span>
-    <a
-      aria-label="Page 10"
-      className="c2"
-      href="#10"
-      onClick={[Function]}
-    >
-      10
-    </a>
-    <a
-      aria-label="Next Page"
-      className="c2"
-      href="#2"
-      onClick={[Function]}
-      rel="next"
-    >
-      Next
-    </a>
-  </div>
-</nav>
-`;

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

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

package/src/__tests__/PointerBox.test.tsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import {PointerBox} 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('PointerBox', () => {
-  behavesAsComponent({Component: PointerBox})
-
-  checkExports('PointerBox', {
-    default: PointerBox
-  })
-
-  it('renders a <Caret> in <BorderBox> with relative positioning', () => {
-    expect(render(<PointerBox />)).toMatchSnapshot()
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<PointerBox />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
-    expect(render(<PointerBox borderColor="danger.emphasis" />)).toMatchSnapshot()
-  })
-
-  it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
-    expect(render(<PointerBox bg="danger.subtle" />)).toMatchSnapshot()
-  })
-})