@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib-esm/__tests__/Caret.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import Caret from '../Caret';
+import { render, 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('Caret', () => {
+  it('renders <svg>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Caret, null)).type).toEqual('svg');
+  });
+  checkExports('Caret', {
+    default: Caret
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Caret, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders cardinal directions', () => {
+    for (const location of ['top', 'right', 'bottom', 'left']) {
+      expect(render( /*#__PURE__*/React.createElement(Caret, {
+        location: location
+      }))).toMatchSnapshot();
+    }
+
+    for (const location of ['top-left', 'top-right', 'bottom-left', 'bottom-right']) {
+      expect(render( /*#__PURE__*/React.createElement(Caret, {
+        location: location
+      }))).toMatchSnapshot();
+    }
+
+    for (const location of ['left-top', 'left-bottom', 'right-top', 'right-bottom']) {
+      expect(render( /*#__PURE__*/React.createElement(Caret, {
+        location: location
+      }))).toMatchSnapshot();
+    }
+  });
+});

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

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

package/lib-esm/__tests__/CircleBadge.js

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

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

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

package/lib-esm/__tests__/CircleOcticon.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { CheckIcon } from '@primer/octicons-react';
+import theme from '../theme';
+import { CircleOcticon } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON, FLEX, LAYOUT } from '../constants';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('CircleOcticon', () => {
+  behavesAsComponent({
+    Component: CircleOcticon,
+    systemPropArray: [COMMON, FLEX, LAYOUT],
+    toRender: () => /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon
+    })
+  });
+  checkExports('CircleOcticon', {
+    default: CircleOcticon
+  });
+  it('renders a <div> with width and height', () => {
+    const result = render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon,
+      size: 10
+    }));
+    expect(result).toHaveStyleRule('width', '10px');
+    expect(result).toHaveStyleRule('height', '10px');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon,
+      size: 10
+    }));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('renders {borderRadius: 50%}', () => {
+    expect(render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon
+    }))).toHaveStyleRule('border-radius', '50%');
+  });
+  it('respects the bg prop', () => {
+    var _theme$colorSchemes$l;
+
+    expect(render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon,
+      bg: "danger.subtle"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l = theme.colorSchemes.light.colors.bg) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.danger);
+  });
+  it('has a default size', () => {
+    const result = render( /*#__PURE__*/React.createElement(CircleOcticon, {
+      icon: CheckIcon
+    }));
+    expect(result).toHaveStyleRule('width', '32px');
+    expect(result).toHaveStyleRule('height', '32px');
+  });
+});

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

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

package/lib-esm/__tests__/CounterLabel.js

@@ -0,0 +1,49 @@
+import React from 'react';
+import { CounterLabel } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { COMMON } from '../constants';
+import theme from '../theme';
+import { render as HTMLRender, cleanup } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+expect.extend(toHaveNoViolations);
+describe('CounterLabel', () => {
+  behavesAsComponent({
+    Component: CounterLabel,
+    systemPropArray: [COMMON]
+  });
+  checkExports('CounterLabel', {
+    default: CounterLabel
+  });
+  it('renders a <span>', () => {
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, null)).type).toEqual('span');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(CounterLabel, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the primary "scheme" prop', () => {
+    var _theme$colorSchemes$l, _theme$colorSchemes$l2;
+
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "primary"
+    }))).toHaveStyleRule('color', (_theme$colorSchemes$l = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l === void 0 ? void 0 : _theme$colorSchemes$l.primary.text.trim());
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "primary"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l2 = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l2 === void 0 ? void 0 : _theme$colorSchemes$l2.primary.bg.trim());
+  });
+  it('respects the secondary "scheme" prop', () => {
+    var _theme$colorSchemes$l3, _theme$colorSchemes$l4;
+
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "secondary"
+    }))).toHaveStyleRule('color', (_theme$colorSchemes$l3 = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l3 === void 0 ? void 0 : _theme$colorSchemes$l3.text.trim());
+    expect(render( /*#__PURE__*/React.createElement(CounterLabel, {
+      scheme: "secondary"
+    }))).toHaveStyleRule('background-color', (_theme$colorSchemes$l4 = theme.colorSchemes.light.colors.counter) === null || _theme$colorSchemes$l4 === void 0 ? void 0 : _theme$colorSchemes$l4.bg);
+  });
+});

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

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

package/lib-esm/__tests__/Details.js

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Details, useDetails, Button, ButtonPrimary, Box } from '..';
+import { 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('Details', () => {
+  behavesAsComponent({
+    Component: Details,
+    systemPropArray: [COMMON]
+  });
+  checkExports('Details', {
+    default: Details
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Details, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('Toggles when you click outside', () => {
+    const Component = () => {
+      const {
+        getDetailsProps
+      } = useDetails({
+        closeOnOutsideClick: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement("summary", null, "hi"));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    document.body.click();
+    const dom = wrapper.getDOMNode();
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Accurately passes down open state', () => {
+    const Component = () => {
+      const {
+        getDetailsProps,
+        open
+      } = useDetails({
+        closeOnOutsideClick: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement(Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    document.body.click();
+    const dom = wrapper.getDOMNode();
+    const summary = wrapper.find('summary');
+    expect(summary.text()).toEqual('Closed');
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Can manipulate state with setOpen', () => {
+    const CloseButton = props => /*#__PURE__*/React.createElement(Button, props);
+
+    const Component = () => {
+      const {
+        getDetailsProps,
+        setOpen,
+        open
+      } = useDetails({
+        closeOnOutsideClick: true,
+        defaultOpen: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement(Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement(CloseButton, {
+        onClick: () => setOpen(false)
+      }));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    wrapper.find(CloseButton).simulate('click');
+    const dom = wrapper.getDOMNode();
+    const summary = wrapper.find('summary');
+    expect(summary.text()).toEqual('Closed');
+    expect(dom.hasAttribute('open')).toEqual(false);
+    wrapper.unmount();
+  });
+  it('Does not toggle when you click inside', () => {
+    const Component = () => {
+      const {
+        getDetailsProps,
+        open
+      } = useDetails({
+        closeOnOutsideClick: true,
+        defaultOpen: true
+      });
+      return /*#__PURE__*/React.createElement(Details, getDetailsProps(), /*#__PURE__*/React.createElement(Button, {
+        as: "summary"
+      }, open ? 'Open' : 'Closed'), /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(ButtonPrimary, null, "hi")));
+    };
+
+    const wrapper = mount( /*#__PURE__*/React.createElement(Component, null));
+    const summary = wrapper.find('summary');
+    wrapper.find(ButtonPrimary).simulate('click');
+    expect(summary.text()).toEqual('Open');
+    wrapper.unmount();
+  });
+});

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

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

package/lib-esm/__tests__/Dialog.js

@@ -0,0 +1,174 @@
+import React, { useState, useRef } from 'react';
+import { Dialog, Box, Text, Button } from '..';
+import { COMMON, FLEX, LAYOUT } from '../constants';
+import { render as HTMLRender, cleanup, act, fireEvent } from '@testing-library/react';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import 'babel-polyfill';
+import { behavesAsComponent, checkExports } from '../utils/testing';
+expect.extend(toHaveNoViolations);
+const comp = /*#__PURE__*/React.createElement(Dialog, {
+  isOpen: true,
+  onDismiss: () => null,
+  "aria-labelledby": "header"
+}, /*#__PURE__*/React.createElement(Dialog.Header, {
+  id: "header"
+}, "Title"), /*#__PURE__*/React.createElement(Box, {
+  p: 3
+}, /*#__PURE__*/React.createElement(Text, {
+  fontFamily: "sans-serif"
+}, "Some content")));
+
+const Component = () => {
+  const [isOpen, setIsOpen] = useState(true);
+  const returnFocusRef = useRef(null);
+  return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Button, {
+    "data-testid": "trigger-button",
+    ref: returnFocusRef,
+    onClick: () => setIsOpen(true)
+  }, "Show Dialog"), /*#__PURE__*/React.createElement(Dialog, {
+    returnFocusRef: returnFocusRef,
+    isOpen: isOpen,
+    onDismiss: () => setIsOpen(false),
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/React.createElement(Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/React.createElement(Box, {
+    p: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontFamily: "sans-serif"
+  }, "Some content")))));
+};
+
+Component.displayName = "Component";
+
+const ClosedDialog = () => {
+  return /*#__PURE__*/React.createElement(Dialog, {
+    isOpen: false,
+    onDismiss: () => null,
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/React.createElement(Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/React.createElement(Box, {
+    p: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontFamily: "sans-serif"
+  }, "Some content"))));
+};
+
+ClosedDialog.displayName = "ClosedDialog";
+
+const DialogWithCustomFocusRef = () => {
+  const buttonRef = useRef(null);
+  return /*#__PURE__*/React.createElement(Dialog, {
+    isOpen: true,
+    initialFocusRef: buttonRef,
+    onDismiss: () => null,
+    "aria-labelledby": "header"
+  }, /*#__PURE__*/React.createElement("div", {
+    "data-testid": "inner"
+  }, /*#__PURE__*/React.createElement(Dialog.Header, {
+    id: "header"
+  }, "Title"), /*#__PURE__*/React.createElement(Box, {
+    p: 3
+  }, /*#__PURE__*/React.createElement(Text, {
+    fontFamily: "sans-serif"
+  }, "Some content"), /*#__PURE__*/React.createElement("button", {
+    "data-testid": "inner-button",
+    ref: buttonRef
+  }, "hi"))));
+};
+
+DialogWithCustomFocusRef.displayName = "DialogWithCustomFocusRef";
+describe('Dialog', () => {
+  // because Dialog returns a React fragment the as and sx tests fail always, so they are skipped
+  behavesAsComponent({
+    Component: Dialog,
+    systemPropArray: [COMMON, LAYOUT],
+    toRender: () => comp,
+    options: {
+      skipAs: true,
+      skipSx: true
+    }
+  });
+  checkExports('Dialog', {
+    default: Dialog
+  });
+  describe('Dialog.Header', () => {
+    behavesAsComponent({
+      Component: Dialog.Header,
+      systemPropArray: [COMMON, FLEX, LAYOUT]
+    });
+  });
+  it('should have no axe violations', async () => {
+    const spy = jest.spyOn(console, 'warn').mockImplementation();
+    const {
+      container
+    } = HTMLRender(comp);
+    spy.mockRestore();
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('Toggles when you click close button', async () => {
+    const {
+      getByLabelText,
+      getByTestId,
+      queryByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    act(() => {
+      fireEvent.click(getByLabelText('Close'));
+    });
+    expect(queryByTestId('inner')).toBeNull();
+    cleanup();
+  });
+  it('Renders dialog when isOpen is true', async () => {
+    const {
+      getByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    cleanup();
+  });
+  it('Does not render dialog when isOpen is false', async () => {
+    const {
+      queryByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(ClosedDialog, null));
+    expect(queryByTestId('inner')).toBeNull();
+    cleanup();
+  });
+  it('Focuses close button when Dialog is opened', async () => {
+    const {
+      getByLabelText
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    const closeButton = getByLabelText('Close');
+    expect(document.activeElement).toEqual(closeButton);
+    cleanup();
+  });
+  it('Focuses custom ref when Dialog is opened', async () => {
+    const {
+      getByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(DialogWithCustomFocusRef, null));
+    const innerButton = getByTestId('inner-button');
+    expect(document.activeElement).toEqual(innerButton);
+    cleanup();
+  });
+  it('Returns focus to returnFocusRef', async () => {
+    const {
+      getByLabelText,
+      getByTestId,
+      queryByTestId
+    } = HTMLRender( /*#__PURE__*/React.createElement(Component, null));
+    expect(getByTestId('inner')).toBeTruthy();
+    act(() => {
+      fireEvent.click(getByLabelText('Close'));
+    });
+    expect(queryByTestId('inner')).toBeNull();
+    const triggerButton = getByTestId('trigger-button');
+    expect(document.activeElement).toEqual(triggerButton);
+    cleanup();
+  });
+});

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

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

package/lib-esm/__tests__/Dropdown.js

@@ -0,0 +1,59 @@
+import React from 'react';
+import { Dropdown } 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('Dropdown', () => {
+  behavesAsComponent({
+    Component: Dropdown,
+    systemPropArray: [COMMON],
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown, null, "Hello!")
+  });
+  checkExports('Dropdown', {
+    default: Dropdown
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Dropdown, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});
+describe('Dropdown.Item', () => {
+  behavesAsComponent({
+    Component: Dropdown.Item,
+    systemPropArray: [COMMON],
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown.Item, null, "Hello!")
+  });
+});
+describe('Dropdown.Button', () => {
+  behavesAsComponent({
+    Component: Dropdown.Button,
+    systemPropArray: [COMMON],
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown.Button, null, "Hello!")
+  });
+});
+describe('Dropdown.Caret', () => {
+  behavesAsComponent({
+    Component: Dropdown.Caret,
+    systemPropArray: [COMMON]
+  });
+});
+describe('Dropdown.Menu', () => {
+  behavesAsComponent({
+    Component: Dropdown.Menu,
+    systemPropArray: [COMMON],
+    toRender: () => /*#__PURE__*/React.createElement(Dropdown.Menu, null, /*#__PURE__*/React.createElement("li", {
+      key: "a"
+    }, "1"), /*#__PURE__*/React.createElement("li", {
+      key: "b"
+    }, "2"), /*#__PURE__*/React.createElement("li", {
+      key: "c"
+    }, "3"))
+  });
+});

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

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