@primer/components 31.0.2-rc.1e80de40 → 31.1.0

package/lib/__tests__/Heading.test.js

@@ -1,109 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-const theme = {
-  breakpoints: ['400px', '640px', '960px', '1280px'],
-  colors: {
-    green: ['#010', '#020', '#030', '#040', '#050', '#060']
-  },
-  fontSizes: ['12px', '14px', '16px', '20px', '24px', '32px', '40px', '48px'],
-  fonts: {
-    normal: 'Helvetica,sans-serif',
-    mono: 'Consolas,monospace'
-  },
-  lineHeights: {
-    normal: 1.5,
-    condensed: 1.25,
-    condensedUltra: 1
-  },
-  fontWeights: {
-    light: '300',
-    normal: '400',
-    semibold: '500',
-    bold: '600'
-  }
-};
-describe('Heading', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _.Heading
-  });
-  (0, _testing.checkExports)('Heading', {
-    default: _.Heading
-  });
-  it('renders <h2> by default', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, null)).type).toEqual('h2');
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Heading, null, "Hello"));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('respects fontWeight', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "bold",
-      theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "normal",
-      theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "semibold",
-      theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontWeight: "light",
-      theme: theme
-    }))).toHaveStyleRule('font-weight', theme.fontWeights.light);
-  });
-  it('respects lineHeight', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "normal",
-      theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "condensed",
-      theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      lineHeight: "condensedUltra",
-      theme: theme
-    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
-  });
-  it('respects fontFamily="mono"', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontFamily: "mono",
-      theme: theme
-    }))).toHaveStyleRule('font-family', theme.fonts.mono);
-  });
-  it('renders fontSize', () => {
-    for (const fontSize of theme.fontSizes) {
-      expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-        fontSize: fontSize,
-        theme: theme
-      }))).toHaveStyleRule('font-size', `${fontSize}`);
-    }
-  });
-  it('respects the "fontStyle" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Heading, {
-      fontStyle: "italic"
-    }))).toHaveStyleRule('font-style', 'italic');
-  });
-});

package/lib/__tests__/Label.test.d.ts

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

package/lib/__tests__/Label.test.js

@@ -1,46 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-describe('Label', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _.Label
-  });
-  (0, _testing.checkExports)('Label', {
-    default: _.Label
-  });
-  it('renders a <span>', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Label, null)).type).toEqual('span');
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Label, null, "hello"));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('respects the "outline" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Label, {
-      outline: true
-    }))).toMatchSnapshot();
-  });
-  it('respects the "variant" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Label, {
-      variant: "xl"
-    }))).toMatchSnapshot();
-  });
-});

package/lib/__tests__/LabelGroup.test.d.ts

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

package/lib/__tests__/LabelGroup.test.js

@@ -1,38 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-
-const comp = /*#__PURE__*/_react.default.createElement(_.LabelGroup, null, /*#__PURE__*/_react.default.createElement(_.Label, null, "Default label"), /*#__PURE__*/_react.default.createElement(_.Label, null, "Darker gray label"), /*#__PURE__*/_react.default.createElement(_.Label, {
-  outline: true
-}, "Default outline label"));
-
-describe('LabelGroup', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _.LabelGroup
-  });
-  (0, _testing.checkExports)('LabelGroup', {
-    default: _.LabelGroup
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)(comp);
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-});

package/lib/__tests__/Link.test.d.ts

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

package/lib/__tests__/Link.test.js

@@ -1,70 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-describe('Link', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _.Link
-  });
-  (0, _testing.checkExports)('Link', {
-    default: _.Link
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      href: "www.github.com"
-    }, "GitHub"));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('passes href down to link element', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      href: "https://github.com"
-    }))).toMatchSnapshot();
-  });
-  it('respects hoverColor prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      hoverColor: "accent.fg"
-    }))).toMatchSnapshot();
-  });
-  it('respects the "fontStyle" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      fontStyle: "italic"
-    }))).toHaveStyleRule('font-style', 'italic');
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      as: "i",
-      fontStyle: "normal"
-    }))).toHaveStyleRule('font-style', 'normal');
-  });
-  it('applies button styles when rendering a button element', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      as: "button"
-    }))).toMatchSnapshot();
-  });
-  it('respectes the "muted" prop', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      muted: true
-    }))).toMatchSnapshot();
-  });
-  it('respectes the "color" prop when "muted" prop is also passed', () => {
-    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.Link, {
-      muted: true,
-      color: "fg.onEmphasis"
-    }))).toMatchSnapshot();
-  });
-});

package/lib/__tests__/Merge.types.test.d.ts

@@ -1,30 +0,0 @@
-import { Merge } from '../utils/types/Merge';
-declare type AString = {
-    a: string;
-};
-declare type BString = {
-    b: string;
-};
-declare type CString = {
-    c: string;
-};
-declare type CNumber = {
-    c: number;
-};
-declare type DOptionalString = {
-    d?: string;
-};
-export declare function canMergeTwoTypes(x: Merge<AString, BString>): {
-    a: string;
-    b: string;
-};
-export declare function overridesAsExpected(x: Merge<CString, CNumber>): {
-    c: number;
-};
-export declare function optionalityIsPreservedInFirstParameter(x: Merge<DOptionalString, AString>): {
-    d: number;
-};
-export declare function optionalityIsPreservedInSecondParameter(x: Merge<DOptionalString, AString>): {
-    d: number;
-};
-export {};

package/lib/__tests__/Merge.types.test.js

@@ -1,27 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.canMergeTwoTypes = canMergeTwoTypes;
-exports.overridesAsExpected = overridesAsExpected;
-exports.optionalityIsPreservedInFirstParameter = optionalityIsPreservedInFirstParameter;
-exports.optionalityIsPreservedInSecondParameter = optionalityIsPreservedInSecondParameter;
-
-function canMergeTwoTypes(x) {
-  return x;
-}
-
-function overridesAsExpected(x) {
-  return x;
-}
-
-function optionalityIsPreservedInFirstParameter(x) {
-  // @ts-expect-error: d is optional
-  return x;
-}
-
-function optionalityIsPreservedInSecondParameter(x) {
-  // @ts-expect-error: d is optional
-  return x;
-}

package/lib/__tests__/Overlay.test.d.ts

@@ -1 +0,0 @@
-export {};

package/lib/__tests__/Overlay.test.js

@@ -1,145 +0,0 @@
-"use strict";
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _ = require("..");
-
-var _react2 = require("@testing-library/react");
-
-var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
-
-var _jestAxe = require("jest-axe");
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
-
-var _ThemeProvider = require("../ThemeProvider");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-
-const TestComponent = ({
-  initialFocus,
-  callback
-}) => {
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const buttonRef = (0, _react.useRef)(null);
-  const confirmButtonRef = (0, _react.useRef)(null);
-  const anchorRef = (0, _react.useRef)(null);
-
-  const closeOverlay = () => {
-    setIsOpen(false);
-
-    if (callback) {
-      callback();
-    }
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_ThemeProvider.ThemeProvider, {
-    theme: _theme.default
-  }, /*#__PURE__*/_react.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react.default.createElement(_.Box, {
-    position: "absolute",
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    ref: anchorRef
-  }, /*#__PURE__*/_react.default.createElement(_.Button, {
-    ref: buttonRef,
-    onClick: () => setIsOpen(!isOpen)
-  }, "open overlay"), /*#__PURE__*/_react.default.createElement(_.Button, null, "outside"), isOpen ? /*#__PURE__*/_react.default.createElement(_.Overlay, {
-    initialFocusRef: initialFocus === 'button' ? confirmButtonRef : undefined,
-    returnFocusRef: buttonRef,
-    ignoreClickRefs: [buttonRef],
-    onEscape: closeOverlay,
-    onClickOutside: closeOverlay,
-    width: "small"
-  }, /*#__PURE__*/_react.default.createElement(_.Box, {
-    display: "flex",
-    flexDirection: "column",
-    p: 2
-  }, /*#__PURE__*/_react.default.createElement(_.Text, null, "Are you sure?"), /*#__PURE__*/_react.default.createElement(_.ButtonDanger, {
-    onClick: closeOverlay
-  }, "Cancel"), /*#__PURE__*/_react.default.createElement(_.Button, {
-    onClick: closeOverlay,
-    ref: confirmButtonRef
-  }, "Confirm"))) : null)));
-};
-
-TestComponent.displayName = "TestComponent";
-describe('Overlay', () => {
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, null));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-  it('should focus element passed into function', async () => {
-    const {
-      getByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
-      initialFocus: "button"
-    }));
-
-    _userEvent.default.click(getByText('open overlay'));
-
-    await (0, _react2.waitFor)(() => getByText('Confirm'));
-    const confirmButton = getByText('Confirm');
-    expect(document.activeElement).toEqual(confirmButton);
-  });
-  it('should focus first element when nothing is passed', async () => {
-    const {
-      getByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, null));
-
-    _userEvent.default.click(getByText('open overlay'));
-
-    await (0, _react2.waitFor)(() => getByText('Cancel'));
-    const cancelButton = getByText('Cancel');
-    expect(document.activeElement).toEqual(cancelButton);
-  });
-  it('should call function when user clicks outside container', () => {
-    const mockFunction = jest.fn();
-    const {
-      getByText,
-      queryAllByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
-      callback: mockFunction
-    }));
-    (0, _react2.act)(() => _userEvent.default.click(getByText('open overlay')));
-    (0, _react2.act)(() => _userEvent.default.click(getByText('outside')));
-    expect(mockFunction).toHaveBeenCalledTimes(1);
-    const cancelButtons = queryAllByText('Cancel');
-    expect(cancelButtons).toHaveLength(0);
-  });
-  it('should call function when user presses escape', () => {
-    const mockFunction = jest.fn();
-    const {
-      getByText,
-      queryAllByText
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComponent, {
-      callback: mockFunction
-    }));
-    (0, _react2.act)(() => _userEvent.default.click(getByText('open overlay')));
-    const domNode = getByText('Are you sure?');
-
-    _react2.fireEvent.keyDown(domNode, {
-      key: 'Escape',
-      code: 'Escape',
-      keyCode: 27,
-      charCode: 27
-    });
-
-    expect(mockFunction).toHaveBeenCalledTimes(1);
-    const cancelButtons = queryAllByText('Cancel');
-    expect(cancelButtons).toHaveLength(0);
-  });
-});

package/lib/__tests__/Pagehead.test.d.ts

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

package/lib/__tests__/Pagehead.test.js

@@ -1,37 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _ = require("..");
-
-var _theme = _interopRequireDefault(require("../theme"));
-
-var _testing = require("../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-describe('Pagehead', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _.Pagehead
-  });
-  (0, _testing.checkExports)('Pagehead', {
-    default: _.Pagehead
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Pagehead, {
-      theme: _theme.default
-    }, "Pagehead"));
-    const results = await (0, _jestAxe.axe)(container);
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-});

package/lib/__tests__/Pagination/Pagination.test.d.ts

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

package/lib/__tests__/Pagination/Pagination.test.js

@@ -1,47 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Pagination = _interopRequireDefault(require("../../Pagination"));
-
-var _testing = require("../../utils/testing");
-
-var _react2 = require("@testing-library/react");
-
-var _jestAxe = require("jest-axe");
-
-require("babel-polyfill");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-expect.extend(_jestAxe.toHaveNoViolations);
-const reqProps = {
-  pageCount: 10,
-  currentPage: 1
-};
-
-const comp = /*#__PURE__*/_react.default.createElement(_Pagination.default, reqProps);
-
-describe('Pagination', () => {
-  (0, _testing.behavesAsComponent)({
-    Component: _Pagination.default,
-    toRender: () => comp
-  });
-  it('should have no axe violations', async () => {
-    const {
-      container
-    } = (0, _react2.render)(comp);
-    const results = await (0, _jestAxe.axe)(container, {
-      rules: {
-        // The skip-link rule has to do with entire documents
-        // and is not relevant to this component.
-        // See https://dequeuniversity.com/rules/axe/3.3/skip-link?application=axeAPI
-        'skip-link': {
-          enabled: false
-        }
-      }
-    });
-    expect(results).toHaveNoViolations();
-    (0, _react2.cleanup)();
-  });
-});

package/lib/__tests__/Pagination/PaginationModel.test.d.ts

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