@primer/components 31.2.0-rc.c53cfd9e → 31.2.0

package/src/__tests__/Truncate.test.tsx

@@ -1,43 +0,0 @@
-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__/UnderlineNav.test.tsx

@@ -1,58 +0,0 @@
-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__/UnderlineNavLink.test.tsx

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

@@ -1,223 +0,0 @@
-// 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(54,77,100,0.16);
-}
-
-.c1[data-is-active-descendant='activated-indirectly'] {
-  background: rgba(46,77,108,0.06);
-}
-
-.c1:focus {
-  background: rgba(54,77,100,0.16);
-  outline: none;
-}
-
-.c1:active {
-  background: rgba(54,77,100,0.16);
-}
-
-@media (hover:hover) and (pointer:fine) {
-  .c1:hover {
-    background: var(--item-hover-bg-override,rgba(46,77,108,0.06));
-    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

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

@@ -1,80 +0,0 @@
-// 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}
-/>
-`;

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

@@ -1,232 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AnchoredOverlay renders consistently 1`] = `
-.c0 {
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-  line-height: 1.5;
-  color: #24292f;
-}
-
-.c1 {
-  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);
-}
-
-.c1:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:disabled {
-  cursor: default;
-}
-
-.c1:disabled svg {
-  opacity: 0.6;
-}
-
-.c1:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
-}
-
-.c1:focus {
-  border-color: rgba(27,31,36,0.15);
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-.c1:active {
-  background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
-}
-
-.c1:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
-}
-
-<div
-  className="c0"
-  color="fg.default"
-  data-portal-root={true}
-  fontFamily="normal"
->
-  <button
-    aria-haspopup="true"
-    aria-labelledby="react-aria-1"
-    className="c1"
-    id="react-aria-1"
-    onClick={[Function]}
-    onKeyDown={[Function]}
-    tabIndex={0}
-  >
-    Anchor Button
-  </button>
-</div>
-`;
-
-exports[`AnchoredOverlay should render consistently when open 1`] = `
-.c0 {
-  font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
-  line-height: 1.5;
-  color: #24292f;
-}
-
-.c1 {
-  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);
-}
-
-.c1:hover {
-  -webkit-text-decoration: none;
-  text-decoration: none;
-}
-
-.c1:focus {
-  outline: none;
-}
-
-.c1:disabled {
-  cursor: default;
-}
-
-.c1:disabled svg {
-  opacity: 0.6;
-}
-
-.c1:hover {
-  background-color: #f3f4f6;
-  border-color: rgba(27,31,36,0.15);
-}
-
-.c1:focus {
-  border-color: rgba(27,31,36,0.15);
-  box-shadow: 0 0 0 3px rgba(9,105,218,0.3);
-}
-
-.c1:active {
-  background-color: hsla(220,14%,94%,1);
-  box-shadow: inset 0 0.15em 0.3em rgba(27,31,36,0.15);
-}
-
-.c1:disabled {
-  color: #8c959f;
-  background-color: #f6f8fa;
-  border-color: rgba(27,31,36,0.15);
-}
-
-.c2 {
-  background-color: #ffffff;
-  box-shadow: 0 1px 3px rgba(27,31,36,0.12),0 8px 24px rgba(66,74,83,0.12);
-  position: absolute;
-  min-width: 192px;
-  max-width: 640px;
-  height: auto;
-  width: auto;
-  border-radius: 12px;
-  overflow: hidden;
-  -webkit-animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
-  animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
-  visibility: var(--styled-overlay-visibility);
-}
-
-.c2:focus {
-  outline: none;
-}
-
-<div>
-  <div
-    class="c0"
-    color="fg.default"
-    data-portal-root="true"
-    font-family="normal"
-  >
-    <button
-      aria-haspopup="true"
-      aria-labelledby="react-aria-1"
-      class="c1"
-      id="react-aria-1"
-      tabindex="0"
-    >
-      Anchor Button
-    </button>
-    <div
-      id="__primerPortalRoot__"
-      style="position: absolute; top: 0px; left: 0px;"
-    >
-      <div
-        style="position: relative; z-index: 1;"
-      >
-        <div
-          class="c2"
-          data-focus-trap="active"
-          height="auto"
-          role="none"
-          style="top: 4px; left: 0px; --styled-overlay-visibility: visible;"
-          width="auto"
-        >
-          <button
-            class="focus-visible"
-            data-focus-visible-added=""
-            tabindex="0"
-            type="button"
-          >
-            Focusable Child
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;