@primer/components 32.1.0 → 33.0.0-rc.b495ba4a

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

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

package/src/__tests__/Truncate.test.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import {Truncate} 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('Truncate', () => {
+  behavesAsComponent({
+    Component: Truncate,
+    toRender: () => <Truncate title="a-long-branch-name" />
+  })
+
+  checkExports('Truncate', {
+    default: Truncate
+  })
+
+  it('renders a <div> by default', () => {
+    expect(render(<Truncate title="a-long-branch-name" />).type).toEqual('div')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<Truncate title="a-long-branch-name">a-long-branch-name</Truncate>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects the maxWidth prop', () => {
+    expect(render(<Truncate maxWidth={250} title="a-long-branch-name" />)).toHaveStyleRule('max-width', '250px')
+  })
+
+  it('respects the inline prop', () => {
+    expect(render(<Truncate inline title="a-long-branch-name" />)).toHaveStyleRule('display', 'inline-block')
+  })
+
+  it('respects the expandable prop', () => {
+    expect(render(<Truncate expandable title="a-long-branch-name" />)).toHaveStyleRule('max-width', '10000px', {
+      modifier: ':hover'
+    })
+  })
+})

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

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

package/src/__tests__/UnderlineNav.test.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+import {UnderlineNav} from '..'
+import {mount, render, rendersClass, 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('UnderlineNav', () => {
+  behavesAsComponent({Component: UnderlineNav})
+
+  checkExports('UnderlineNav', {
+    default: UnderlineNav
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<UnderlineNav />)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('renders a <nav>', () => {
+    expect(render(<UnderlineNav />).type).toEqual('nav')
+  })
+
+  it('adds the UnderlineNav class', () => {
+    expect(rendersClass(<UnderlineNav />, 'UnderlineNav')).toEqual(true)
+  })
+
+  it('respects the "align" prop', () => {
+    expect(rendersClass(<UnderlineNav align="right" />, 'UnderlineNav--right')).toEqual(true)
+  })
+
+  it('respects the "full" prop', () => {
+    expect(rendersClass(<UnderlineNav full />, 'UnderlineNav--full')).toEqual(true)
+  })
+
+  it('sets aria-label to the "label" prop', () => {
+    expect(render(<UnderlineNav label="foo" />).props['aria-label']).toEqual('foo')
+  })
+
+  it('wraps its children in an "UnderlineNav-body" div', () => {
+    const children = <b>yo</b>
+    const wrapper = mount(<UnderlineNav>{children}</UnderlineNav>)
+    const body = wrapper.find('.UnderlineNav-body')
+    expect(body.exists()).toEqual(true)
+    expect(body.childAt(0).type()).toEqual('b')
+  })
+
+  it('respects the "actions" prop', () => {
+    const content = <h1>hi!</h1>
+    const wrapper = mount(<UnderlineNav actions={content} />)
+    const actions = wrapper.find('.UnderlineNav-actions')
+    expect(actions.exists()).toEqual(true)
+    expect(actions.text()).toEqual('hi!')
+  })
+})

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

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

package/src/__tests__/UnderlineNavLink.test.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import {UnderlineNav} from '..'
+import {render, 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)
+
+describe('UnderlineNav.Link', () => {
+  behavesAsComponent({Component: UnderlineNav.Link})
+
+  it('renders an <a> by default', () => {
+    expect(render(<UnderlineNav.Link />).type).toEqual('a')
+  })
+
+  it('should have no axe violations', async () => {
+    const {container} = HTMLRender(<UnderlineNav.Link href="www.github.com">Go to GitHub</UnderlineNav.Link>)
+    const results = await axe(container)
+    expect(results).toHaveNoViolations()
+    cleanup()
+  })
+
+  it('respects the "selected" prop', () => {
+    expect(render(<UnderlineNav.Link selected />)).toMatchSnapshot()
+  })
+
+  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
+    const Link = ({theme: _ignoredTheme, ...props}: Record<string, unknown>) => <div {...props} />
+    expect(render(<UnderlineNav.Link as={Link} to="#" />)).toMatchSnapshot()
+  })
+})

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

@@ -0,0 +1,223 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionList renders consistently 1`] = `
+.c1 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+
+.c0 {
+  font-size: 14px;
+  line-height: 20px;
+}
+
+.c0[data-has-active-descendant],
+.c0:focus-within {
+  --item-hover-bg-override: none;
+  --item-hover-divider-border-color-override: hsla(210,18%,87%,1);
+}
+
+<div
+  className="c0"
+>
+  <div
+    className="c1"
+  />
+</div>
+`;
+
+exports[`ActionList.Item renders consistently 1`] = `
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+  position: relative;
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c4 {
+  -webkit-align-items: baseline;
+  -webkit-box-align: baseline;
+  -ms-flex-align: baseline;
+  align-items: baseline;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  min-width: 0;
+  -webkit-flex-direction: var(--main-content-flex-direction);
+  -ms-flex-direction: var(--main-content-flex-direction);
+  flex-direction: var(--main-content-flex-direction);
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+}
+
+.c5:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
+  margin-top: 0;
+}
+
+.c5:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  top: -7px;
+  border: 0 solid hsla(210,18%,87%,1);
+  border-top-width: 0;
+}
+
+.c5:hover .c2::before,
+.c5:hover + * .c2::before {
+  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
+}
+
+.c5:focus .c2::before,
+.c5:focus + * .c2::before,
+.c5[data-is-active-descendant] .c2::before,
+[data-is-active-descendant] + .c5 .c2::before {
+  border-color: transparent !important;
+}
+
+.c6:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
+  margin-top: 0;
+}
+
+.c6:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  top: -7px;
+  border: 0 solid hsla(210,18%,87%,1);
+  border-top-width: 0;
+}
+
+.c6:hover .c2::before,
+.c6:hover + * .c2::before {
+  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
+}
+
+.c6:focus .c2::before,
+.c6:focus + * .c2::before,
+.c6[data-is-active-descendant] .c2::before,
+[data-is-active-descendant] + .c6 .c2::before {
+  border-color: transparent !important;
+}
+
+.c7:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
+  margin-top: 0;
+}
+
+.c7:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  top: -7px;
+  border: 0 solid hsla(210,18%,87%,1);
+  border-top-width: 0;
+}
+
+.c7:hover .c2::before,
+.c7:hover + * .c2::before {
+  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
+}
+
+.c7:focus .c2::before,
+.c7:focus + * .c2::before,
+.c7[data-is-active-descendant] .c2::before,
+[data-is-active-descendant] + .c7 .c2::before {
+  border-color: transparent !important;
+}
+
+.c1 {
+  padding: 6px 8px;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  border-radius: 6px;
+  color: #24292f;
+  -webkit-transition: background 33.333ms linear;
+  transition: background 33.333ms linear;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c1:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) {
+  margin-top: 0;
+}
+
+.c1:not(:first-of-type):not(.c9 + .c0):not(.c8 + .c0) .c2::before {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  top: -7px;
+  border: 0 solid hsla(210,18%,87%,1);
+  border-top-width: 0;
+}
+
+.c1:hover .c2::before,
+.c1:hover + * .c2::before {
+  border-color: var(--item-hover-divider-border-color-override,transparent) !important;
+}
+
+.c1:focus .c2::before,
+.c1:focus + * .c2::before,
+.c1[data-is-active-descendant] .c2::before,
+[data-is-active-descendant] + .c1 .c2::before {
+  border-color: transparent !important;
+}
+
+.c1[data-is-active-descendant='activated-directly'] {
+  background: rgba(208,215,222,0.48);
+}
+
+.c1[data-is-active-descendant='activated-indirectly'] {
+  background: rgba(208,215,222,0.32);
+}
+
+.c1:focus {
+  background: rgba(208,215,222,0.48);
+  outline: none;
+}
+
+.c1:active {
+  background: rgba(208,215,222,0.48);
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c1:hover {
+    background: var( --item-hover-bg-override,rgba(208,215,222,0.32) );
+    cursor: pointer;
+  }
+}
+
+<div
+  className="c0 c1"
+  onClick={[Function]}
+  onKeyPress={[Function]}
+  tabIndex={-1}
+>
+  <div
+    className="c2 c3"
+  >
+    <div
+      className="c4"
+      style={
+        Object {
+          "--main-content-flex-direction": "row",
+        }
+      }
+    />
+  </div>
+</div>
+`;

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

@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionList renders consistently 1`] = `
+.c0 {
+  margin: 0;
+  padding-inline-start: 0;
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+
+<ul
+  className="c0"
+/>
+`;

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

@@ -0,0 +1,80 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ActionMenu renders consistently 1`] = `
+.c0 {
+  position: relative;
+  display: inline-block;
+  padding: 6px 16px;
+  font-family: inherit;
+  font-weight: 600;
+  line-height: 20px;
+  white-space: nowrap;
+  vertical-align: middle;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  border-radius: 6px;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  text-align: center;
+  font-size: 14px;
+  color: #24292f;
+  background-color: #f6f8fa;
+  border: 1px solid rgba(27,31,36,0.15);
+  box-shadow: 0 1px 0 rgba(27,31,36,0.04),inset 0 1px 0 rgba(255,255,255,0.25);
+}
+
+.c0:hover {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+}
+
+.c0:focus {
+  outline: none;
+}
+
+.c0:disabled {
+  cursor: default;
+}
+
+.c0:disabled svg {
+  opacity: 0.6;
+}
+
+.c0:hover {
+  background-color: #f3f4f6;
+  border-color: rgba(27,31,36,0.15);
+}
+
+.c0:focus {
+  border-color: rgba(27,31,36,0.15);
+  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
+}
+
+.c0:active {
+  background-color: hsla(220,14%,94%,1);
+  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
+}
+
+.c0:disabled {
+  color: #8c959f;
+  background-color: #f6f8fa;
+  border-color: rgba(27,31,36,0.15);
+}
+
+<button
+  aria-haspopup="true"
+  aria-label="menu"
+  aria-labelledby="react-aria-1"
+  className="c0"
+  id="react-aria-1"
+  onClick={[Function]}
+  onKeyDown={[Function]}
+  tabIndex={0}
+/>
+`;