@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/src/__tests__/Pagination/PaginationModel.tsx

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,184 @@
+// 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: #57606a;
+  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

@@ -0,0 +1,35 @@
+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="danger.emphasis" />)).toMatchSnapshot()
+  })
+
+  it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
+    expect(render(<PointerBox bg="danger.subtle" />)).toMatchSnapshot()
+  })
+})

package/src/__tests__/Popover.tsx

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,103 @@
+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

@@ -0,0 +1,118 @@
+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.default" 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.default" 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.default" 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.default" borderRadius={2} />
+      )
+      expect(result).toHaveStyleRule('position', 'sticky')
+      expect(result).toHaveStyleRule('border-width', '1px')
+      expect(result).toHaveStyleRule('border-style', 'solid')
+    })
+  })
+})

package/src/__tests__/ProgressBar.tsx

@@ -0,0 +1,41 @@
+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()
+  })
+})