@primer/components 33.0.0 → 33.1.0-rc.6856bcf5

package/lib/__tests__/Checkbox.test.js

@@ -0,0 +1,189 @@
+"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");
+
+require("@testing-library/jest-dom");
+
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Checkbox', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    (0, _react2.cleanup)();
+  });
+  (0, _testing.behavesAsComponent)({
+    Component: _.Checkbox
+  });
+  (0, _testing.checkExports)('Checkbox', {
+    default: _.Checkbox
+  });
+  it('renders a valid checkbox input', () => {
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, null));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toBeDefined();
+  });
+  it('renders an unchecked checkbox by default', () => {
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, null));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an active checkbox when checked attribute is passed', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      checked: true,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(true);
+  });
+  it('accepts a change handler that can alter the checkbox state', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(false);
+
+    _userEvent.default.click(checkbox);
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(checkbox.checked).toEqual(true);
+
+    _userEvent.default.click(checkbox);
+
+    expect(handleChange).toHaveBeenCalled();
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an indeterminate prop correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      indeterminate: true,
+      checked: true,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.indeterminate).toEqual(true);
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an inactive checkbox state correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      disabled: true,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.disabled).toEqual(true);
+    expect(checkbox.checked).toEqual(false);
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true');
+
+    _userEvent.default.click(checkbox);
+
+    expect(checkbox.disabled).toEqual(true);
+    expect(checkbox.checked).toEqual(false);
+    expect(checkbox).toHaveAttribute('aria-disabled', 'true'); // remove disabled attribute and retest
+
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    expect(checkbox).toHaveAttribute('aria-disabled', 'false');
+  });
+  it('renders an uncontrolled component correctly', () => {
+    const {
+      getByRole
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      defaultChecked: true
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox.checked).toEqual(true);
+
+    _userEvent.default.click(checkbox);
+
+    expect(checkbox.checked).toEqual(false);
+  });
+  it('renders an aria-checked attribute correctly', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      checked: false,
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-checked', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      checked: true,
+      onChange: handleChange
+    }));
+    expect(checkbox).toHaveAttribute('aria-checked', 'true');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      indeterminate: true,
+      checked: true,
+      onChange: handleChange
+    }));
+    expect(checkbox).toHaveAttribute('aria-checked', 'mixed');
+  });
+  it('renders an invalid aria state when validation prop indicates an error', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange,
+      validationStatus: "success"
+    }));
+    expect(checkbox).toHaveAttribute('aria-invalid', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange,
+      validationStatus: "error"
+    }));
+    expect(checkbox).toHaveAttribute('aria-invalid', 'true');
+  });
+  it('renders an aria state indicating the field is required', () => {
+    const handleChange = jest.fn();
+    const {
+      getByRole,
+      rerender
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange
+    }));
+    const checkbox = getByRole('checkbox');
+    expect(checkbox).toHaveAttribute('aria-required', 'false');
+    rerender( /*#__PURE__*/_react.default.createElement(_.Checkbox, {
+      onChange: handleChange,
+      required: true
+    }));
+    expect(checkbox).toHaveAttribute('aria-required', 'true');
+  });
+});

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

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

package/lib/__tests__/CircleBadge.test.js

@@ -0,0 +1,83 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _octiconsReact = require("@primer/octicons-react");
+
+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 imgInput = /*#__PURE__*/_react.default.createElement("img", {
+  alt: "",
+  src: "primer.jpg"
+});
+
+describe('CircleBadge', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.CircleBadge,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.CircleBadge, null, imgInput)
+  });
+  (0, _testing.checkExports)('CircleBadge', {
+    default: _.CircleBadge
+  });
+  describe('CircleBadge.Icon', () => {
+    (0, _testing.behavesAsComponent)({
+      Component: _.CircleBadge.Icon,
+      toRender: () => /*#__PURE__*/_react.default.createElement(_.CircleBadge.Icon, {
+        icon: _octiconsReact.CheckIcon
+      })
+    });
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.CircleBadge, {
+      variant: "large",
+      size: 20
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('respects the inline prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleBadge, {
+      inline: true
+    }))).toMatchSnapshot();
+  });
+  it('respects the variant prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleBadge, {
+      variant: "large"
+    }))).toMatchSnapshot();
+  });
+  it('uses the size prop to override the variant prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleBadge, {
+      variant: "large",
+      size: 20
+    }))).toMatchSnapshot();
+  });
+  it('applies title', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleBadge, {
+      as: "a",
+      title: "primer logo"
+    }, imgInput)).props['title']).toEqual('primer logo');
+  });
+  it('preserves child class names', () => {
+    const comp = (0, _testing.mount)( /*#__PURE__*/_react.default.createElement(_.CircleBadge, null, /*#__PURE__*/_react.default.createElement("img", {
+      className: "primer",
+      alt: "",
+      src: "primer.jpg"
+    })));
+    expect(comp.find('img').hasClass('primer')).toEqual(true);
+  });
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
+exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CircleBadge = _interopRequireDefault(require("../CircleBadge"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_CircleBadge.default, null);
+}
+
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+
+function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/_react.default.createElement(_CircleBadge.default, {
+    backgroundColor: "thistle"
+  });
+}
+
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

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

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

package/lib/__tests__/CircleOcticon.test.js

@@ -0,0 +1,71 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _octiconsReact = require("@primer/octicons-react");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+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('CircleOcticon', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.CircleOcticon,
+    toRender: () => /*#__PURE__*/_react.default.createElement(_.CircleOcticon, {
+      icon: _octiconsReact.CheckIcon
+    })
+  });
+  (0, _testing.checkExports)('CircleOcticon', {
+    default: _.CircleOcticon
+  });
+  it('renders a <div> with width and height', () => {
+    const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleOcticon, {
+      icon: _octiconsReact.CheckIcon,
+      size: 10
+    }));
+    expect(result).toHaveStyleRule('width', '10px');
+    expect(result).toHaveStyleRule('height', '10px');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.CircleOcticon, {
+      icon: _octiconsReact.CheckIcon,
+      size: 10
+    }));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('renders {borderRadius: 50%}', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleOcticon, {
+      icon: _octiconsReact.CheckIcon
+    }))).toHaveStyleRule('border-radius', '50%');
+  });
+  it('respects the bg prop', () => {
+    var _theme$colorSchemes$l;
+
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleOcticon, {
+      icon: _octiconsReact.CheckIcon,
+      bg: "danger.subtle"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l = _theme.default.colorSchemes.light.colors.danger) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.subtle);
+  });
+  it('has a default size', () => {
+    const result = (0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CircleOcticon, {
+      icon: _octiconsReact.CheckIcon
+    }));
+    expect(result).toHaveStyleRule('width', '32px');
+    expect(result).toHaveStyleRule('height', '32px');
+  });
+});

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

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

package/lib/__tests__/ConfirmationDialog.test.js

@@ -0,0 +1,134 @@
+"use strict";
+
+require("babel-polyfill");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _react2 = _interopRequireWildcard(require("react"));
+
+var _ActionMenu = require("../ActionMenu");
+
+var _BaseStyles = _interopRequireDefault(require("../BaseStyles"));
+
+var _Box = _interopRequireDefault(require("../Box"));
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _ConfirmationDialog = require("../Dialog/ConfirmationDialog");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _ssr = require("../utils/ssr");
+
+var _testing = require("../utils/testing");
+
+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 Basic = () => {
+  const [isOpen, setIsOpen] = (0, _react2.useState)(false);
+  const buttonRef = (0, _react2.useRef)(null);
+  const onDialogClose = (0, _react2.useCallback)(() => setIsOpen(false), []);
+  return /*#__PURE__*/_react2.default.createElement(_ThemeProvider.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_ssr.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react2.default.createElement(_Button.default, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "Show dialog"), isOpen && /*#__PURE__*/_react2.default.createElement(_ConfirmationDialog.ConfirmationDialog, {
+    title: "Confirm",
+    onClose: onDialogClose,
+    cancelButtonContent: "Secondary",
+    confirmButtonContent: "Primary"
+  }, "Lorem ipsum dolor sit Pippin good dog."))));
+};
+
+Basic.displayName = "Basic";
+
+const ShorthandHookFromActionMenu = () => {
+  const confirm = (0, _ConfirmationDialog.useConfirm)();
+  const [text, setText] = (0, _react2.useState)('Show menu');
+  const onButtonClick = (0, _react2.useCallback)(async () => {
+    if (await confirm({
+      title: 'Confirm',
+      content: 'Confirm',
+      cancelButtonContent: 'Secondary',
+      confirmButtonContent: 'Primary'
+    })) {
+      setText('Confirmed');
+    }
+  }, [confirm]);
+  return /*#__PURE__*/_react2.default.createElement(_ThemeProvider.ThemeProvider, {
+    theme: _theme.default
+  }, /*#__PURE__*/_react2.default.createElement(_ssr.SSRProvider, null, /*#__PURE__*/_react2.default.createElement(_BaseStyles.default, null, /*#__PURE__*/_react2.default.createElement(_Box.default, {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: "flex-start"
+  }, /*#__PURE__*/_react2.default.createElement(_ActionMenu.ActionMenu, {
+    renderAnchor: props => /*#__PURE__*/_react2.default.createElement(_Button.default, props, text),
+    items: [{
+      text: 'Show dialog',
+      onAction: onButtonClick
+    }]
+  })))));
+};
+
+ShorthandHookFromActionMenu.displayName = "ShorthandHookFromActionMenu";
+describe('ConfirmationDialog', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _ConfirmationDialog.ConfirmationDialog,
+    toRender: () => /*#__PURE__*/_react2.default.createElement(Basic, null),
+    options: {
+      skipAs: true,
+      skipSx: true
+    }
+  });
+  (0, _testing.checkExports)('Dialog/ConfirmationDialog', {
+    default: undefined,
+    useConfirm: _ConfirmationDialog.useConfirm,
+    ConfirmationDialog: _ConfirmationDialog.ConfirmationDialog
+  });
+  it('should have no axe violations', async () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation();
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Basic, null));
+    spy.mockRestore();
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('focuses the primary action when opened', async () => {
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Basic, null));
+    (0, _react.act)(() => {
+      _react.fireEvent.click(getByText('Show dialog'));
+    });
+    expect(getByText('Primary')).toEqual(document.activeElement);
+    expect(getByText('Secondary')).not.toEqual(document.activeElement);
+    (0, _react.cleanup)();
+  });
+  it('supports nested `focusTrap`s', async () => {
+    const {
+      getByText
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(ShorthandHookFromActionMenu, null));
+    (0, _react.act)(() => {
+      _react.fireEvent.click(getByText('Show menu'));
+    });
+    (0, _react.act)(() => {
+      _react.fireEvent.click(getByText('Show dialog'));
+    });
+    expect(getByText('Primary')).toEqual(document.activeElement);
+    expect(getByText('Secondary')).not.toEqual(document.activeElement);
+    (0, _react.cleanup)();
+  });
+});

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

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

package/lib/__tests__/CounterLabel.test.js

@@ -0,0 +1,58 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+var _testing = require("../utils/testing");
+
+var _theme = _interopRequireDefault(require("../theme"));
+
+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('CounterLabel', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.CounterLabel
+  });
+  (0, _testing.checkExports)('CounterLabel', {
+    default: _.CounterLabel
+  });
+  it('renders a <span>', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CounterLabel, null)).type).toEqual('span');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_.CounterLabel, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react2.cleanup)();
+  });
+  it('respects the primary "scheme" prop', () => {
+    var _theme$colorSchemes$l, _theme$colorSchemes$l2;
+
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CounterLabel, {
+      scheme: "primary"
+    }))).toHaveStyleRule('color', (_theme$colorSchemes$l = _theme.default.colorSchemes.light.colors.fg) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.onEmphasis.trim());
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CounterLabel, {
+      scheme: "primary"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l2 = _theme.default.colorSchemes.light.colors.neutral) === null || _theme$colorSchemes$l2 === void 0 ? void 0 : _theme$colorSchemes$l2.emphasis.trim());
+  });
+  it('respects the secondary "scheme" prop', () => {
+    var _theme$colorSchemes$l3, _theme$colorSchemes$l4;
+
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CounterLabel, {
+      scheme: "secondary"
+    }))).toHaveStyleRule('color', (_theme$colorSchemes$l3 = _theme.default.colorSchemes.light.colors.fg) === null || _theme$colorSchemes$l3 === void 0 ? void 0 : _theme$colorSchemes$l3.default.trim());
+    expect((0, _testing.render)( /*#__PURE__*/_react.default.createElement(_.CounterLabel, {
+      scheme: "secondary"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l4 = _theme.default.colorSchemes.light.colors.neutral) === null || _theme$colorSchemes$l4 === void 0 ? void 0 : _theme$colorSchemes$l4.muted);
+  });
+});

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function shouldAcceptCallWithNoProps(): JSX.Element;
+export declare function shouldNotAcceptSystemProps(): JSX.Element;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
+exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _CounterLabel = _interopRequireDefault(require("../CounterLabel"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_CounterLabel.default, null);
+}
+
+shouldAcceptCallWithNoProps.displayName = "shouldAcceptCallWithNoProps";
+
+function shouldNotAcceptSystemProps() {
+  // @ts-expect-error system props should not be accepted
+  return /*#__PURE__*/_react.default.createElement(_CounterLabel.default, {
+    backgroundColor: "whitesmoke"
+  });
+}
+
+shouldNotAcceptSystemProps.displayName = "shouldNotAcceptSystemProps";

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

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