@primer/components 29.1.0 → 29.1.1-rc.cea79543

package/lib-esm/__tests__/Heading.js

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Heading } from '..';
+import { render, behavesAsComponent, checkExports } from '../utils/testing';
+import { TYPOGRAPHY, 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 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', () => {
+  behavesAsComponent({
+    Component: Heading,
+    systemPropArray: [COMMON, TYPOGRAPHY]
+  });
+  checkExports('Heading', {
+    default: Heading
+  });
+  it('renders <h2> by default', () => {
+    expect(render( /*#__PURE__*/React.createElement(Heading, null)).type).toEqual('h2');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Heading, null, "Hello"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects fontWeight', () => {
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      fontWeight: "bold",
+      theme: theme
+    }))).toHaveStyleRule('font-weight', theme.fontWeights.bold);
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      fontWeight: "normal",
+      theme: theme
+    }))).toHaveStyleRule('font-weight', theme.fontWeights.normal);
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      fontWeight: "semibold",
+      theme: theme
+    }))).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      fontWeight: "light",
+      theme: theme
+    }))).toHaveStyleRule('font-weight', theme.fontWeights.light);
+  });
+  it('respects lineHeight', () => {
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      lineHeight: "normal",
+      theme: theme
+    }))).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      lineHeight: "condensed",
+      theme: theme
+    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      lineHeight: "condensedUltra",
+      theme: theme
+    }))).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
+  });
+  it('respects fontFamily="mono"', () => {
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      fontFamily: "mono",
+      theme: theme
+    }))).toHaveStyleRule('font-family', theme.fonts.mono);
+  });
+  it('renders fontSize', () => {
+    for (const fontSize of theme.fontSizes) {
+      expect(render( /*#__PURE__*/React.createElement(Heading, {
+        fontSize: fontSize,
+        theme: theme
+      }))).toHaveStyleRule('font-size', `${fontSize}`);
+    }
+  });
+  it('respects the "fontStyle" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Heading, {
+      fontStyle: "italic"
+    }))).toHaveStyleRule('font-style', 'italic');
+  });
+});

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

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

package/lib-esm/__tests__/Label.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Label } 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('Label', () => {
+  behavesAsComponent({
+    Component: Label,
+    systemPropArray: [COMMON]
+  });
+  checkExports('Label', {
+    default: Label
+  });
+  it('renders a <span>', () => {
+    expect(render( /*#__PURE__*/React.createElement(Label, null)).type).toEqual('span');
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Label, null, "hello"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('respects the "outline" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Label, {
+      outline: true
+    }))).toMatchSnapshot();
+  });
+  it('respects the "variant" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Label, {
+      variant: "xl"
+    }))).toMatchSnapshot();
+  });
+});

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

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

package/lib-esm/__tests__/LabelGroup.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { LabelGroup, Label } 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);
+const comp = /*#__PURE__*/React.createElement(LabelGroup, null, /*#__PURE__*/React.createElement(Label, null, "Default label"), /*#__PURE__*/React.createElement(Label, null, "Darker gray label"), /*#__PURE__*/React.createElement(Label, {
+  outline: true
+}, "Default outline label"));
+describe('LabelGroup', () => {
+  behavesAsComponent({
+    Component: LabelGroup,
+    systemPropArray: [COMMON]
+  });
+  checkExports('LabelGroup', {
+    default: LabelGroup
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender(comp);
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+});

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

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

package/lib-esm/__tests__/Link.js

@@ -0,0 +1,62 @@
+import React from 'react';
+import { Link } from '..';
+import { render, 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('Link', () => {
+  behavesAsComponent({
+    Component: Link,
+    systemPropArray: [COMMON, TYPOGRAPHY]
+  });
+  checkExports('Link', {
+    default: Link
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(Link, {
+      href: "www.github.com"
+    }, "GitHub"));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('passes href down to link element', () => {
+    expect(render( /*#__PURE__*/React.createElement(Link, {
+      href: "https://github.com"
+    }))).toMatchSnapshot();
+  });
+  it('respects hoverColor prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Link, {
+      hoverColor: "text.link"
+    }))).toMatchSnapshot();
+  });
+  it('respects the "fontStyle" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Link, {
+      fontStyle: "italic"
+    }))).toHaveStyleRule('font-style', 'italic');
+    expect(render( /*#__PURE__*/React.createElement(Link, {
+      as: "i",
+      fontStyle: "normal"
+    }))).toHaveStyleRule('font-style', 'normal');
+  });
+  it('applies button styles when rendering a button element', () => {
+    expect(render( /*#__PURE__*/React.createElement(Link, {
+      as: "button"
+    }))).toMatchSnapshot();
+  });
+  it('respectes the "muted" prop', () => {
+    expect(render( /*#__PURE__*/React.createElement(Link, {
+      muted: true
+    }))).toMatchSnapshot();
+  });
+  it('respectes the "color" prop when "muted" prop is also passed', () => {
+    expect(render( /*#__PURE__*/React.createElement(Link, {
+      muted: true,
+      color: "fg.onEmphasis"
+    }))).toMatchSnapshot();
+  });
+});

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

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

package/lib-esm/__tests__/Overlay.js

@@ -0,0 +1,123 @@
+import React, { useRef, useState } from 'react';
+import { Overlay, Box, Text, ButtonDanger, Button } from '..';
+import { render, cleanup, waitFor, fireEvent, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { axe, toHaveNoViolations } from 'jest-axe';
+import theme from '../theme';
+import BaseStyles from '../BaseStyles';
+import { ThemeProvider } from '../ThemeProvider';
+expect.extend(toHaveNoViolations);
+
+const TestComponent = ({
+  initialFocus,
+  callback
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const buttonRef = useRef(null);
+  const confirmButtonRef = useRef(null);
+  const anchorRef = useRef(null);
+
+  const closeOverlay = () => {
+    setIsOpen(false);
+
+    if (callback) {
+      callback();
+    }
+  };
+
+  return /*#__PURE__*/React.createElement(ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/React.createElement(BaseStyles, null, /*#__PURE__*/React.createElement(Box, {
+    position: "absolute",
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+    ref: anchorRef
+  }, /*#__PURE__*/React.createElement(Button, {
+    ref: buttonRef,
+    onClick: () => setIsOpen(!isOpen)
+  }, "open overlay"), /*#__PURE__*/React.createElement(Button, null, "outside"), isOpen ? /*#__PURE__*/React.createElement(Overlay, {
+    initialFocusRef: initialFocus === 'button' ? confirmButtonRef : undefined,
+    returnFocusRef: buttonRef,
+    ignoreClickRefs: [buttonRef],
+    onEscape: closeOverlay,
+    onClickOutside: closeOverlay,
+    width: "small"
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "flex",
+    flexDirection: "column",
+    p: 2
+  }, /*#__PURE__*/React.createElement(Text, null, "Are you sure?"), /*#__PURE__*/React.createElement(ButtonDanger, {
+    onClick: closeOverlay
+  }, "Cancel"), /*#__PURE__*/React.createElement(Button, {
+    onClick: closeOverlay,
+    ref: confirmButtonRef
+  }, "Confirm"))) : null)));
+};
+
+TestComponent.displayName = "TestComponent";
+describe('Overlay', () => {
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = render( /*#__PURE__*/React.createElement(TestComponent, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('should focus element passed into function', async () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(TestComponent, {
+      initialFocus: "button"
+    }));
+    userEvent.click(getByText('open overlay'));
+    await waitFor(() => getByText('Confirm'));
+    const confirmButton = getByText('Confirm');
+    expect(document.activeElement).toEqual(confirmButton);
+  });
+  it('should focus first element when nothing is passed', async () => {
+    const {
+      getByText
+    } = render( /*#__PURE__*/React.createElement(TestComponent, null));
+    userEvent.click(getByText('open overlay'));
+    await 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
+    } = render( /*#__PURE__*/React.createElement(TestComponent, {
+      callback: mockFunction
+    }));
+    act(() => userEvent.click(getByText('open overlay')));
+    act(() => userEvent.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
+    } = render( /*#__PURE__*/React.createElement(TestComponent, {
+      callback: mockFunction
+    }));
+    act(() => userEvent.click(getByText('open overlay')));
+    const domNode = getByText('Are you sure?');
+    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-esm/__tests__/Pagehead.d.ts

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

package/lib-esm/__tests__/Pagehead.js

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

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

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

package/lib-esm/__tests__/Pagination/Pagination.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import Pagination from '../../Pagination';
+import { behavesAsComponent } 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 reqProps = {
+  pageCount: 10,
+  currentPage: 1
+};
+const comp = /*#__PURE__*/React.createElement(Pagination, reqProps);
+describe('Pagination', () => {
+  behavesAsComponent({
+    Component: Pagination,
+    systemPropArray: [COMMON],
+    toRender: () => comp
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender(comp);
+    const results = await 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();
+    cleanup();
+  });
+});

package/lib-esm/__tests__/Pagination/PaginationModel.d.ts

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

package/lib-esm/__tests__/Pagination/PaginationModel.js

@@ -0,0 +1,182 @@
+import 'babel-polyfill';
+import { buildPaginationModel } from '../../Pagination/model'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+function first(array, count = 1) {
+  const slice = array.slice(0, count);
+  return count === 1 ? slice[0] : slice;
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
+
+function last(array, count = 1) {
+  const len = array.length;
+  const slice = array.slice(len - count, len);
+  return count === 1 ? slice[0] : slice;
+}
+
+describe('Pagination model', () => {
+  it('sets disabled on prev links', () => {
+    const model1 = buildPaginationModel(10, 1, true, 1, 2);
+    expect(first(model1).type).toEqual('PREV');
+    expect(first(model1).disabled).toBe(true);
+    const model2 = buildPaginationModel(10, 2, true, 1, 2);
+    expect(first(model2).type).toEqual('PREV');
+    expect(first(model2).disabled).toBe(false);
+  });
+  it('sets disabled on next links', () => {
+    const model1 = buildPaginationModel(10, 10, true, 1, 2);
+    expect(last(model1).type).toEqual('NEXT');
+    expect(last(model1).disabled).toBe(true);
+    const model2 = buildPaginationModel(10, 9, true, 1, 2);
+    expect(last(model2).type).toEqual('NEXT');
+    expect(last(model2).disabled).toBe(false);
+  });
+  it('sets the page number for prev and next links', () => {
+    const model = buildPaginationModel(10, 5, true, 1, 2);
+    expect(first(model).num).toEqual(4);
+    expect(last(model).num).toEqual(6);
+  });
+  it('ensures margin pages on the left', () => {
+    const model = buildPaginationModel(10, 10, true, 2, 0);
+    const slice = first(model, 5);
+    const expected = [{
+      type: 'PREV',
+      num: 9
+    }, {
+      type: 'NUM',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 2
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM'
+    }];
+    expect(slice).toMatchObject(expected);
+  });
+  it('ensures margin pages on the right', () => {
+    const model = buildPaginationModel(10, 1, true, 2, 0);
+    const slice = last(model, 5);
+    const expected = [{
+      type: 'NUM'
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 9
+    }, {
+      type: 'NUM',
+      num: 10
+    }, {
+      type: 'NEXT',
+      num: 2
+    }];
+    expect(slice).toMatchObject(expected);
+  });
+  it('ensures that the current page is surrounded by the right number of pages', () => {
+    const model = buildPaginationModel(10, 5, true, 1, 1);
+    const expected = [{
+      type: 'PREV',
+      num: 4
+    }, {
+      type: 'NUM',
+      num: 1
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 4
+    }, {
+      type: 'NUM',
+      num: 5,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 6
+    }, {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 10
+    }, {
+      type: 'NEXT',
+      num: 6
+    }];
+    expect(model).toMatchObject(expected);
+  });
+  it('adds items to the right if it hits bounds to the left', () => {
+    const model = buildPaginationModel(15, 2, true, 1, 1);
+    const expected = [{
+      type: 'PREV',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 2,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 3
+    }, // normally with a surround of 1, only 1 and 3 would be shown
+    // however, since 1 was already shown, we extend to 4
+    {
+      type: 'NUM',
+      num: 4
+    }, {
+      type: 'BREAK'
+    }];
+    expect(first(model, 6)).toMatchObject(expected);
+  });
+  it('adds items to the left if it hits bounds to the right', () => {
+    const model = buildPaginationModel(15, 14, true, 1, 1);
+    const expected = [// normally with a surround of 1, only 13 and 15 would be shown
+    // however, since 15 was already shown, we extend to 12
+    {
+      type: 'BREAK'
+    }, {
+      type: 'NUM',
+      num: 12
+    }, {
+      type: 'NUM',
+      num: 13
+    }, {
+      type: 'NUM',
+      num: 14,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 15
+    }, {
+      type: 'NEXT',
+      num: 15
+    }];
+    expect(last(model, 6)).toMatchObject(expected);
+  });
+  it('correctly creates breaks next to the next/prev links when margin is 0', () => {
+    const model = buildPaginationModel(10, 5, true, 0, 1);
+    const expected = [{
+      type: 'PREV'
+    }, {
+      type: 'BREAK',
+      num: 1
+    }, {
+      type: 'NUM',
+      num: 4
+    }, {
+      type: 'NUM',
+      num: 5,
+      selected: true
+    }, {
+      type: 'NUM',
+      num: 6
+    }, {
+      type: 'BREAK',
+      num: 10
+    }, {
+      type: 'NEXT'
+    }];
+    expect(model).toMatchObject(expected);
+  });
+});

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

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

package/lib-esm/__tests__/PointerBox.js

@@ -0,0 +1,38 @@
+import React from 'react';
+import { PointerBox } from '..';
+import { COMMON, LAYOUT, BORDER, FLEX } from '../constants';
+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('PointerBox', () => {
+  behavesAsComponent({
+    Component: PointerBox,
+    systemPropArray: [COMMON, LAYOUT, BORDER, FLEX]
+  });
+  checkExports('PointerBox', {
+    default: PointerBox
+  });
+  it('renders a <Caret> in <BorderBox> with relative positioning', () => {
+    expect(render( /*#__PURE__*/React.createElement(PointerBox, null))).toMatchSnapshot();
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = HTMLRender( /*#__PURE__*/React.createElement(PointerBox, null));
+    const results = await axe(container);
+    expect(results).toHaveNoViolations();
+    cleanup();
+  });
+  it('passes the "borderColor" prop to both <BorderBox> and <Caret>', () => {
+    expect(render( /*#__PURE__*/React.createElement(PointerBox, {
+      borderColor: "danger.emphasis"
+    }))).toMatchSnapshot();
+  });
+  it('passes the "bg" prop to both <BorderBox> and <Caret>', () => {
+    expect(render( /*#__PURE__*/React.createElement(PointerBox, {
+      bg: "danger.subtle"
+    }))).toMatchSnapshot();
+  });
+});

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

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