@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib-esm/__tests__/Spinner.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Spinner } from '..';
+import { 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('Spinner', () => {
+  afterEach(() => {
+    cleanup();
+  });
+  behavesAsComponent({
+    Component: Spinner,
+    systemPropArray: [COMMON]
+  });
+  checkExports('Spinner', {
+    default: Spinner
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Spinner, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+  });
+  it('should respect size arguments', () => {
+    const expectSize = (input, expectedSize) => {
+      const {
+        container
+      } = HTMLRender( /*#__PURE__*/React.createElement(Spinner, {
+        size: input
+      }));
+      const svg = container.querySelector('svg');
+      expect(svg.getAttribute('height')).toEqual(expectedSize);
+      expect(svg.getAttribute('width')).toEqual(expectedSize);
+    }; // default: medium
+
+
+    expectSize(undefined, '32px');
+    expectSize('small', '16px');
+    expectSize('medium', '32px');
+    expectSize('large', '64px');
+  });
+});

package/lib-esm/__tests__/StateLabel.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/StateLabel.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { StateLabel } 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('StateLabel', () => {
+  behavesAsComponent({
+    Component: StateLabel,
+    systemPropArray: [COMMON],
+    toRender: () => /*#__PURE__*/React.createElement(StateLabel, {
+      status: "issueOpened"
+    }, "Open"),
+    options: {
+      // Rendering a StyledOcticon seems to break getComputedStyles, which
+      // the sx prop implementation test uses to make sure the prop is working correctly.
+      // Despite my best efforts, I cannot figure out why this is happening. So,
+      // unfortunately, we will simply skip this test.
+      skipSx: true
+    }
+  });
+  checkExports('StateLabel', {
+    default: StateLabel
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(StateLabel, {
+      status: "issueOpened"
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the status prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(StateLabel, {
+      status: "issueOpened"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(StateLabel, {
+      status: "issueClosed"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(StateLabel, {
+      status: "pullMerged"
+    }))).toMatchSnapshot();
+  });
+  it('respects the variant prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(StateLabel, {
+      variant: "small",
+      status: "issueOpened"
+    }))).toMatchSnapshot();
+    expect(render( /*#__PURE__*/React.createElement(StateLabel, {
+      variant: "normal",
+      status: "issueOpened"
+    }))).toMatchSnapshot();
+  });
+  it('renders children', () => {
+    expect(render( /*#__PURE__*/React.createElement(StateLabel, {
+      status: "issueOpened"
+    }, "hi"))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/StyledOcticon.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/StyledOcticon.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { XIcon } from '@primer/octicons-react';
+import { StyledOcticon } from '..';
+import { 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('StyledOcticon', () => {
+  behavesAsComponent({
+    Component: StyledOcticon,
+    systemPropArray: [COMMON],
+    toRender: () => /*#__PURE__*/React.createElement(StyledOcticon, {
+      icon: XIcon
+    })
+  });
+  checkExports('StyledOcticon', {
+    default: StyledOcticon
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(StyledOcticon, {
+      icon: XIcon
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});

package/lib-esm/__tests__/SubNav.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/SubNav.js

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

package/lib-esm/__tests__/SubNavLink.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/SubNavLink.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { SubNav } from '..';
+import { COMMON } from '../constants';
+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('SubNav.Link', () => {
+  behavesAsComponent({
+    Component: SubNav.Link,
+    systemPropArray: [COMMON]
+  });
+  it('renders an <a> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(SubNav.Link, null)).type).toEqual('a');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(SubNav.Link, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the "selected" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(SubNav.Link, {
+      selected: true
+    }))).toMatchSnapshot();
+  });
+  it('adds activeClassName={SELECTED_CLASS} when it gets a "to" prop', () => {
+    const Link = ({
+      theme: _ignoredTheme,
+      ...props
+    }) => /*#__PURE__*/React.createElement("div", props);
+
+    expect(render( /*#__PURE__*/React.createElement(SubNav.Link, {
+      as: Link,
+      to: "#"
+    }))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/TabNav.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/TabNav.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { TabNav } from '..';
+import { 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('TabNav', () => {
+  behavesAsComponent({
+    Component: TabNav,
+    systemPropArray: [COMMON]
+  });
+  checkExports('TabNav', {
+    default: TabNav
+  });
+  describe('TabNav.Link', () => {
+    behavesAsComponent({
+      Component: TabNav.Link,
+      systemPropArray: [COMMON]
+    });
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(TabNav, {
+      "aria-label": "main"
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('sets aria-label appropriately', () => {
+    const {
+      getByLabelText
+    } = HTMLRender( /*#__PURE__*/React.createElement(TabNav, {
+      "aria-label": "stuff"
+    }));
+    expect(getByLabelText('stuff')).toBeTruthy();
+    expect(getByLabelText('stuff').tagName).toEqual('NAV');
+  });
+});

package/lib-esm/__tests__/Text.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/Text.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Text } from '..';
+import theme from '../theme';
+import { px, render, renderStyles, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON, TYPOGRAPHY } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('Text', () => {
+  behavesAsComponent({
+    Component: Text,
+    systemPropArray: [COMMON, TYPOGRAPHY]
+  });
+  checkExports('Text', {
+    default: Text
+  });
+  it('renders a <span> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(Text, null)).type).toEqual('span');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Text, null, "hello"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders fontSize', () => {
+    for (const fontSize of theme.fontSizes) {
+      expect(render( /*#__PURE__*/React.createElement(Text, {
+        fontSize: fontSize
+      }))).toHaveStyleRule('font-size', px(fontSize));
+    }
+  });
+  it('renders responsive fontSize', () => {
+    expect(renderStyles( /*#__PURE__*/React.createElement(Text, {
+      fontSize: [1, 2]
+    }))).toEqual({
+      'font-size': px(theme.fontSizes[1]),
+      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
+        'font-size': px(theme.fontSizes[2])
+      }
+    });
+  });
+  it('renders responsive lineHeight', () => {
+    expect(renderStyles( /*#__PURE__*/React.createElement(Text, {
+      lineHeight: ['condensed', 'default']
+    }))).toEqual({
+      'line-height': String(theme.lineHeights.condensed),
+      [`@media screen and (min-width:${px(theme.breakpoints[0])})`]: {
+        'line-height': String(theme.lineHeights.default)
+      }
+    });
+  });
+  it('respects fontWeight', () => {
+    expect(render( /*#__PURE__*/React.createElement(Text, {
+      fontWeight: "bold"
+    }))).toHaveStyleRule('font-weight', '600');
+    expect(render( /*#__PURE__*/React.createElement(Text, {
+      fontWeight: "normal"
+    }))).toHaveStyleRule('font-weight', '400');
+  });
+  it('respects the "fontStyle" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Text, {
+      fontStyle: "italic"
+    }))).toHaveStyleRule('font-style', 'italic');
+    expect(render( /*#__PURE__*/React.createElement(Text, {
+      as: "i",
+      fontStyle: "normal"
+    }))).toHaveStyleRule('font-style', 'normal');
+  });
+  it('respects lineHeight', () => {
+    for (const [name, value] of Object.entries(theme.lineHeights)) {
+      expect(render( /*#__PURE__*/React.createElement(Text, {
+        lineHeight: name
+      }))).toHaveStyleRule('line-height', String(value));
+    }
+  });
+  it('respects fontFamily="mono"', () => {
+    // styled-components removes the whitespace between font-family values
+    const mono = theme.fonts.mono.replace(/, /g, ',');
+    expect(render( /*#__PURE__*/React.createElement(Text, {
+      fontFamily: "mono"
+    }))).toHaveStyleRule('font-family', mono);
+  });
+  it('respects other values for fontSize', () => {
+    expect(render( /*#__PURE__*/React.createElement(Text, {
+      fontSize: "2em"
+    }))).toHaveStyleRule('font-size', '2em');
+    expect(render( /*#__PURE__*/React.createElement(Text, {
+      fontSize: 100
+    }))).toHaveStyleRule('font-size', '100px');
+  });
+});

package/lib-esm/__tests__/TextInput.d.ts

@@ -0,0 +1 @@
+import 'babel-polyfill';

package/lib-esm/__tests__/TextInput.js

@@ -0,0 +1,70 @@
+import React from 'react';
+import { TextInput } from '..';
+import { render, mount, 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('TextInput', () => {
+  behavesAsComponent({
+    Component: TextInput,
+    systemPropArray: [COMMON],
+    options: {
+      skipAs: true
+    }
+  });
+  checkExports('TextInput', {
+    default: TextInput
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(TextInput, {
+      "aria-label": "zipcode",
+      name: "zipcode",
+      variant: "small"
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders', () => {
+    expect(render( /*#__PURE__*/React.createElement(TextInput, {
+      name: "zipcode"
+    }))).toMatchSnapshot();
+  });
+  it('renders small', () => {
+    expect(render( /*#__PURE__*/React.createElement(TextInput, {
+      name: "zipcode",
+      variant: "small"
+    }))).toMatchSnapshot();
+  });
+  it('renders large', () => {
+    expect(render( /*#__PURE__*/React.createElement(TextInput, {
+      name: "zipcode",
+      variant: "large"
+    }))).toMatchSnapshot();
+  });
+  it('renders block', () => {
+    expect(render( /*#__PURE__*/React.createElement(TextInput, {
+      name: "zipcode",
+      block: true
+    }))).toMatchSnapshot();
+  });
+  it('should call onChange prop with input value', () => {
+    const onChangeMock = jest.fn();
+    const component = mount( /*#__PURE__*/React.createElement(TextInput, {
+      onChange: onChangeMock,
+      value: "test"
+    }));
+    component.find('input').simulate('change');
+    expect(onChangeMock).toHaveBeenCalled();
+  });
+  it('should render a password input', () => {
+    expect(render( /*#__PURE__*/React.createElement(TextInput, {
+      name: "password",
+      type: "password"
+    }))).toMatchSnapshot();
+  });
+});

package/lib-esm/__tests__/ThemeProvider.d.ts

@@ -0,0 +1 @@
+import 'jest-styled-components';