@primer/components 29.0.0-rc.f749c85e → 29.1.0

package/src/__tests__/Pagination/PaginationModel.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.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: #24292e;
-  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: #e1e4e8;
-  outline: 0;
-  -webkit-transition-duration: 0.1s;
-  transition-duration: 0.1s;
-}
-
-.c2:active {
-  border-color: hsla(214,13%,93%,1);
-}
-
-.c2[rel='prev'],
-.c2[rel='next'] {
-  color: #0366d6;
-}
-
-.c2[aria-current],
-.c2[aria-current]:hover {
-  color: #ffffff;
-  background-color: #0366d6;
-  border-color: transparent;
-}
-
-.c2[aria-disabled],
-.c2[aria-disabled]:hover {
-  color: #959da5;
-  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__/PointerBox.tsx

@@ -1,35 +0,0 @@
-import React from 'react'
-import {PointerBox} from '..'
-import {COMMON, LAYOUT, BORDER, FLEX} 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('PointerBox', () => {
-  behavesAsComponent({Component: PointerBox, systemPropArray: [COMMON, LAYOUT, BORDER, FLEX]})
-
-  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="border.danger" />)).toMatchSnapshot()
-  })
-
-  it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
-    expect(render(<PointerBox bg="bg.danger" />)).toMatchSnapshot()
-  })
-})

package/src/__tests__/Popover.tsx

@@ -1,69 +0,0 @@
-import React from 'react'
-import Popover, {PopoverProps} from '../Popover'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {BORDER, COMMON, LAYOUT, POSITION} 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 = (
-  <Popover caret="top" open>
-    <Popover.Content>Hello!</Popover.Content>
-  </Popover>
-)
-
-describe('Popover', () => {
-  behavesAsComponent({Component: Popover, systemPropArray: [COMMON, LAYOUT, POSITION], toRender: () => comp})
-
-  checkExports('Popover', {
-    default: Popover
-  })
-
-  describe('Popover.Content', () => {
-    behavesAsComponent({Component: Popover.Content, systemPropArray: [COMMON, LAYOUT, BORDER], toRender: () => comp})
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(
-      <Popover caret="top" open>
-        <Popover.Content>Hello!</Popover.Content>
-      </Popover>
-    )
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  const CARET_POSITIONS: PopoverProps['caret'][] = [
-    'top',
-    'bottom',
-    'left',
-    'right',
-    'bottom-left',
-    'bottom-right',
-    'top-left',
-    'top-right',
-    'left-bottom',
-    'left-top',
-    'right-bottom',
-    'right-top'
-  ]
-
-  for (const pos of CARET_POSITIONS) {
-    it(`renders correctly for a caret position of ${pos}`, () => {
-      const element = (
-        <Popover caret={pos} open>
-          <Popover.Content>Hello!</Popover.Content>
-        </Popover>
-      )
-
-      expect(render(element)).toMatchSnapshot()
-    })
-  }
-
-  it('renders both elements as a <div>', () => {
-    expect(render(<Popover />).type).toEqual('div')
-    expect(render(<Popover.Content />).type).toEqual('div')
-  })
-})

package/src/__tests__/Portal.tsx

@@ -1,103 +0,0 @@
-import Portal, {registerPortalRoot} from '../Portal/index'
-
-import {render} from '@testing-library/react'
-import React from 'react'
-import BaseStyles from '../BaseStyles'
-
-describe('Portal', () => {
-  it('renders a default portal into document.body (no BaseStyles present)', () => {
-    const {baseElement} = render(<Portal>123test123</Portal>)
-    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__')
-    expect(generatedRoot).toBeInstanceOf(HTMLElement)
-    expect(generatedRoot?.textContent?.trim()).toEqual('123test123')
-    baseElement.innerHTML = ''
-  })
-
-  it('renders a default portal into nearest BaseStyles element', () => {
-    const toRender = (
-      <div id="renderedRoot">
-        <BaseStyles>
-          <div id="baseStylesRoot">
-            <Portal>123test123</Portal>
-          </div>
-        </BaseStyles>
-      </div>
-    )
-
-    const {baseElement} = render(toRender)
-    const baseStylesRoot = baseElement.querySelector('#baseStylesRoot')
-    const baseStylesElement = baseStylesRoot?.parentElement
-    const generatedRoot = baseStylesElement?.querySelector('#__primerPortalRoot__')
-
-    expect(baseStylesRoot).toBeInstanceOf(HTMLElement)
-    expect(baseStylesElement).toBeInstanceOf(HTMLElement)
-    expect(generatedRoot).toBeInstanceOf(HTMLElement)
-    expect(generatedRoot?.textContent?.trim()).toEqual('123test123')
-
-    baseElement.innerHTML = ''
-  })
-
-  it('renders into the custom portal root (default root name - declarative)', () => {
-    const toRender = (
-      <div id="renderedRoot">
-        <div id="__primerPortalRoot__"></div>
-        <Portal>123test123</Portal>
-      </div>
-    )
-    const {baseElement} = render(toRender)
-    const renderedRoot = baseElement.querySelector('#renderedRoot')
-    const portalRoot = renderedRoot?.querySelector('#__primerPortalRoot__')
-
-    expect(portalRoot).toBeInstanceOf(HTMLElement)
-    expect(portalRoot?.textContent?.trim()).toEqual('123test123')
-
-    baseElement.innerHTML = ''
-  })
-
-  it('renders into the custom portal root (default root name - imperative)', () => {
-    const portalRootJSX = <div id="myPortalRoot"></div>
-    let {baseElement} = render(portalRootJSX)
-    const portalRoot = baseElement.querySelector('#myPortalRoot')
-    expect(portalRoot).toBeInstanceOf(HTMLElement)
-
-    registerPortalRoot(baseElement.querySelector('#myPortalRoot')!)
-
-    const toRender = <Portal>123test123</Portal>
-    ;({baseElement} = render(toRender))
-    expect(portalRoot?.textContent?.trim()).toEqual('123test123')
-
-    baseElement.innerHTML = ''
-  })
-
-  it('renders into multiple custom portal roots (named)', () => {
-    const portalRootJSX = (
-      <main>
-        <div id="myPortalRoot1"></div>
-        <div id="myPortalRoot2"></div>
-      </main>
-    )
-    let {baseElement} = render(portalRootJSX)
-    const fancyPortalRoot1 = baseElement.querySelector('#myPortalRoot1')
-    const fancyPortalRoot2 = baseElement.querySelector('#myPortalRoot2')
-    expect(fancyPortalRoot1).toBeInstanceOf(HTMLElement)
-    expect(fancyPortalRoot2).toBeInstanceOf(HTMLElement)
-
-    registerPortalRoot(baseElement.querySelector('#myPortalRoot1')!, 'fancyPortal1')
-    registerPortalRoot(baseElement.querySelector('#myPortalRoot2')!, 'fancyPortal2')
-
-    const toRender = (
-      <>
-        <Portal>123test123</Portal>
-        <Portal containerName="fancyPortal1">456test456</Portal>
-        <Portal containerName="fancyPortal2">789test789</Portal>
-      </>
-    )
-    ;({baseElement} = render(toRender))
-    const generatedRoot = baseElement.querySelector('#__primerPortalRoot__')
-    expect(generatedRoot?.textContent?.trim()).toEqual('123test123')
-    expect(fancyPortalRoot1?.textContent?.trim()).toEqual('456test456')
-    expect(fancyPortalRoot2?.textContent?.trim()).toEqual('789test789')
-
-    baseElement.innerHTML = ''
-  })
-})

package/src/__tests__/Position.tsx

@@ -1,118 +0,0 @@
-import React from 'react'
-import {LAYOUT, POSITION} from '../constants'
-import {Box, Position, Absolute, Fixed, Relative, Sticky} 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('position components', () => {
-  describe('Absolute', () => {
-    behavesAsComponent({Component: Absolute, systemPropArray: [LAYOUT, POSITION]})
-
-    checkExports('Position', {
-      default: Position,
-      Absolute,
-      Fixed,
-      Relative,
-      Sticky
-    })
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Absolute />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: absolute', () => {
-      expect(render(<Absolute />)).toHaveStyleRule('position', 'absolute')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Absolute as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'absolute')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-
-  describe('Fixed', () => {
-    behavesAsComponent({Component: Fixed, systemPropArray: [LAYOUT, POSITION]})
-
-    it('respects the "as" prop', () => {
-      expect(render(<Fixed as="span" />).type).toEqual('span')
-    })
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Fixed />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: fixed', () => {
-      expect(render(<Fixed />)).toHaveStyleRule('position', 'fixed')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Fixed as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'fixed')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-
-  describe('Relative', () => {
-    behavesAsComponent({Component: Relative, systemPropArray: [LAYOUT, POSITION]})
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Relative />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: relative', () => {
-      expect(render(<Relative />)).toHaveStyleRule('position', 'relative')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Relative as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'relative')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-
-  describe('Sticky', () => {
-    behavesAsComponent({Component: Sticky, systemPropArray: [LAYOUT, POSITION]})
-
-    it('should have no axe violations', async () => {
-      const {container} = HTMLRender(<Sticky />)
-      const results = await axe(container)
-      expect(results).toHaveNoViolations()
-      cleanup()
-    })
-
-    it('sets position: sticky', () => {
-      expect(render(<Sticky />)).toHaveStyleRule('position', 'sticky')
-    })
-
-    it('can render other components with the as prop', () => {
-      const result = render(
-        <Sticky as={Box} borderWidth="1px" borderStyle="solid" borderColor="border.primary" borderRadius={2} />
-      )
-      expect(result).toHaveStyleRule('position', 'sticky')
-      expect(result).toHaveStyleRule('border-width', '1px')
-      expect(result).toHaveStyleRule('border-style', 'solid')
-    })
-  })
-})

package/src/__tests__/ProgressBar.tsx

@@ -1,41 +0,0 @@
-import React from 'react'
-import {ProgressBar} 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('ProgressBar', () => {
-  behavesAsComponent({Component: ProgressBar, systemPropArray: [COMMON]})
-
-  checkExports('ProgressBar', {
-    default: ProgressBar
-  })
-
-  it('should have no axe violations', async () => {
-    const {container} = HTMLRender(<ProgressBar progress={80} barSize="small" />)
-    const results = await axe(container)
-    expect(results).toHaveNoViolations()
-    cleanup()
-  })
-
-  it('respects the "barSize" prop', () => {
-    expect(render(<ProgressBar progress={80} barSize="small" />)).toHaveStyleRule('height', '5px')
-    expect(render(<ProgressBar progress={80} barSize="default" />)).toHaveStyleRule('height', '8px')
-    expect(render(<ProgressBar progress={80} barSize="large" />)).toHaveStyleRule('height', '10px')
-  })
-
-  it('respects the "inline" prop', () => {
-    expect(render(<ProgressBar progress={80} inline />)).toHaveStyleRule('display', 'inline-flex')
-  })
-
-  it('respects the "width" prop', () => {
-    expect(render(<ProgressBar progress={80} inline width="100px" />)).toHaveStyleRule('width', '100px')
-  })
-
-  it('respects the "progress" prop', () => {
-    expect(render(<ProgressBar progress={80} />)).toMatchSnapshot()
-  })
-})