@primer/components 31.0.0 → 31.0.2-rc.c7dafefb

package/src/__tests__/Pagination/__snapshots__/Pagination.test.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: #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__/PointerBox.test.tsx

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

package/src/__tests__/Popover.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react'
+import Popover, {PopoverProps} from '../Popover'
+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 comp = (
+  <Popover caret="top" open>
+    <Popover.Content>Hello!</Popover.Content>
+  </Popover>
+)
+
+describe('Popover', () => {
+  behavesAsComponent({Component: Popover, toRender: () => comp})
+
+  checkExports('Popover', {
+    default: Popover
+  })
+
+  describe('Popover.Content', () => {
+    behavesAsComponent({Component: Popover.Content, 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.test.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.test.tsx

@@ -0,0 +1,117 @@
+import React from 'react'
+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})
+
+    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})
+
+    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})
+
+    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})
+
+    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.test.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import {ProgressBar} 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('ProgressBar', () => {
+  behavesAsComponent({Component: ProgressBar})
+
+  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()
+  })
+})

package/src/__tests__/SelectMenu.test.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+import {SelectMenu, Button} from '..'
+import {mount, render, renderRoot, COMPONENT_DISPLAY_NAME_REGEX, checkExports} from '../utils/testing'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+import {SelectMenuModalProps, SelectMenuItemProps, SelectMenuTabProps} from '../SelectMenu'
+expect.extend(toHaveNoViolations)
+
+const BasicSelectMenu = ({
+  onClick,
+  as,
+  align = 'left'
+}: {
+  onClick?: SelectMenuItemProps['onClick']
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  as?: any
+  align?: SelectMenuModalProps['align']
+}) => {
+  return (
+    <SelectMenu as={as}>
+      <Button as="summary">Projects</Button>
+      <SelectMenu.Modal title="Projects" align={align}>
+        <SelectMenu.List>
+          <SelectMenu.Item selected href="#">
+            Primer Components bugs
+          </SelectMenu.Item>
+          <SelectMenu.Item onClick={onClick} as={as} data-test="menu-item" href="#">
+            Primer Components roadmap
+          </SelectMenu.Item>
+          <SelectMenu.Divider>stuff</SelectMenu.Divider>
+          <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
+          <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
+          <SelectMenu.Footer>footer</SelectMenu.Footer>
+        </SelectMenu.List>
+      </SelectMenu.Modal>
+    </SelectMenu>
+  )
+}
+
+const MenuWithTabs = ({onClick}: {onClick?: SelectMenuTabProps['onClick']}) => {
+  return (
+    <SelectMenu initialTab="Organization">
+      <Button as="summary">Projects</Button>
+      <SelectMenu.Modal title="Projects">
+        <SelectMenu.Tabs>
+          <SelectMenu.Tab index={0} onClick={onClick} data-test="repo-tab" tabName="Repository" />
+          <SelectMenu.Tab index={1} tabName="Organization" />
+        </SelectMenu.Tabs>
+        <SelectMenu.TabPanel tabName="Repository">
+          <SelectMenu.Item href="#">Primer Components bugs</SelectMenu.Item>
+          <SelectMenu.Item href="#">Primer Components roadmap</SelectMenu.Item>
+          <SelectMenu.Item href="#"> Project 3</SelectMenu.Item>
+          <SelectMenu.Item href="#">Project 4</SelectMenu.Item>
+        </SelectMenu.TabPanel>
+        <SelectMenu.TabPanel tabName="Organization">
+          <SelectMenu.Item href="#"> Project 2</SelectMenu.Item>
+        </SelectMenu.TabPanel>
+        <SelectMenu.Footer>Showing 3 of 3</SelectMenu.Footer>
+      </SelectMenu.Modal>
+    </SelectMenu>
+  )
+}
+
+describe('SelectMenu', () => {
+  checkExports('SelectMenu', {
+    default: SelectMenu
+  })
+
+  for (const Comp of [
+    SelectMenu.List,
+    SelectMenu.Divider,
+    SelectMenu.Filter,
+    SelectMenu.Item,
+    SelectMenu.List,
+    SelectMenu.Modal,
+    SelectMenu.Tabs,
+    SelectMenu.Tab,
+    SelectMenu.TabPanel,
+    SelectMenu.Header
+  ]) {
+    it('sets a valid displayName', () => {
+      expect(Comp.displayName).toMatch(COMPONENT_DISPLAY_NAME_REGEX)
+    })
+  }
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<BasicSelectMenu />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('does not allow the "as" prop on SelectMenu', () => {
+    const component = mount(<BasicSelectMenu as="span" />)
+    expect(component.find('details').length).toEqual(1)
+  })
+
+  it('shows correct initial tab', () => {
+    const testInstance = renderRoot(<MenuWithTabs />)
+    expect(testInstance.findByProps({'aria-selected': true}).props.children).toBe('Organization')
+  })
+
+  it('clicking on a tab opens the tab', () => {
+    const component = mount(<MenuWithTabs />)
+    const tab = component.find("[data-test='repo-tab']").first()
+    tab.simulate('click')
+    expect(tab.getDOMNode().attributes.getNamedItem('aria-selected')).toBeTruthy()
+  })
+
+  it('selected items have aria-checked', () => {
+    const testInstance = renderRoot(<BasicSelectMenu />)
+    expect(testInstance.findByProps({'aria-checked': true}).props.children[1]).toBe('Primer Components bugs')
+  })
+
+  it('clicking on a list item calls user provided onClick handler', () => {
+    const mockClick = jest.fn()
+    const component = mount(<BasicSelectMenu onClick={mockClick} />)
+    const item = component.find("[data-test='menu-item']").first()
+    item.simulate('click')
+    expect(mockClick.mock.calls.length).toEqual(1)
+  })
+
+  it('clicking on a tab calls user provided onClick handler', () => {
+    const mockClick = jest.fn()
+    const component = mount(<MenuWithTabs onClick={mockClick} />)
+    const item = component.find("[data-test='repo-tab']").first()
+    item.simulate('click')
+    expect(mockClick.mock.calls.length).toEqual(1)
+  })
+
+  it('clicking on an item closes the modal', () => {
+    const component = mount(<BasicSelectMenu />)
+    const item = component.find("[data-test='menu-item']").first()
+    item.simulate('click')
+    expect(component.getDOMNode().attributes.getNamedItem('open')).toBeFalsy()
+  })
+
+  it('right-aligned modal has right: 0px', () => {
+    expect(render(<BasicSelectMenu align="right" />)).toMatchSnapshot()
+  })
+})