@primer/components 31.2.0-rc.fbb10090 → 31.2.1-rc.48ecca6e

package/lib/__tests__/DropdownMenu.test.jsx

@@ -0,0 +1,119 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = require("@testing-library/react");
+require("babel-polyfill");
+const jest_axe_1 = require("jest-axe");
+const react_2 = __importDefault(require("react"));
+const theme_1 = __importDefault(require("../theme"));
+const DropdownMenu_1 = require("../DropdownMenu");
+const testing_1 = require("../utils/testing");
+const __1 = require("..");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const items = [{ text: 'Foo' }, { text: 'Bar' }, { text: 'Baz' }, { text: 'Bon' }];
+function SimpleDropdownMenu() {
+    const [selectedItem, setSelectedItem] = react_2.default.useState();
+    return (<__1.ThemeProvider theme={theme_1.default}>
+      <__1.SSRProvider>
+        <__1.BaseStyles>
+          <div id="something-else">X</div>
+          <DropdownMenu_1.DropdownMenu items={items} placeholder="Select an Option" selectedItem={selectedItem} onChange={setSelectedItem}/>
+          <div id="portal-root"></div>
+        </__1.BaseStyles>
+      </__1.SSRProvider>
+    </__1.ThemeProvider>);
+}
+describe('DropdownMenu', () => {
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+    testing_1.behavesAsComponent({
+        Component: DropdownMenu_1.DropdownMenu,
+        options: { skipAs: true, skipSx: true },
+        toRender: () => (<__1.SSRProvider>
+        <DropdownMenu_1.DropdownMenu items={[]}/>
+      </__1.SSRProvider>)
+    });
+    testing_1.checkExports('DropdownMenu', {
+        default: undefined,
+        DropdownMenu: DropdownMenu_1.DropdownMenu,
+        DropdownButton: DropdownMenu_1.DropdownButton
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<SimpleDropdownMenu />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+    it('should trigger the overlay on trigger click', async () => {
+        const menu = react_1.render(<SimpleDropdownMenu />);
+        let portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeNull();
+        const anchor = await menu.findByText('Select an Option');
+        react_1.act(() => {
+            react_1.fireEvent.click(anchor);
+        });
+        portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeTruthy();
+        const itemText = items
+            .map((i) => {
+            if (i.hasOwnProperty('text')) {
+                return i.text;
+            }
+        })
+            .join('');
+        expect(portalRoot?.textContent?.trim()).toEqual(itemText);
+    });
+    it('should dismiss the overlay on dropdown item click', async () => {
+        const menu = react_1.render(<SimpleDropdownMenu />);
+        let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeNull();
+        const anchor = await menu.findByText('Select an Option');
+        react_1.act(() => {
+            react_1.fireEvent.click(anchor);
+        });
+        portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeTruthy();
+        const menuItem = await menu.queryByText('Baz');
+        react_1.act(() => {
+            react_1.fireEvent.click(menuItem);
+        });
+        // portal is closed after click
+        expect(portalRoot?.textContent).toEqual(''); // menu items are hidden
+    });
+    it('option should be selected when chosen from the dropdown menu', async () => {
+        const menu = react_1.render(<SimpleDropdownMenu />);
+        let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeNull();
+        const anchor = await menu.findByText('Select an Option');
+        react_1.act(() => {
+            react_1.fireEvent.click(anchor);
+        });
+        portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeTruthy();
+        const menuItem = await menu.queryByText('Baz');
+        react_1.act(() => {
+            react_1.fireEvent.click(menuItem);
+        });
+        expect(anchor.textContent).toEqual('Baz');
+    });
+    it('should dismiss the overlay on clicking outside overlay', async () => {
+        const menu = react_1.render(<SimpleDropdownMenu />);
+        let portalRoot = await menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeNull();
+        const anchor = await menu.findByText('Select an Option');
+        react_1.act(() => {
+            react_1.fireEvent.click(anchor);
+        });
+        portalRoot = menu.baseElement.querySelector('#__primerPortalRoot__');
+        expect(portalRoot).toBeTruthy();
+        const somethingElse = (await menu.baseElement.querySelector('#something-else'));
+        react_1.act(() => {
+            react_1.fireEvent.mouseDown(somethingElse);
+        });
+        // portal is closed after click
+        expect(portalRoot?.textContent).toEqual(''); // menu items are hidden
+    });
+});

package/lib/__tests__/FilterList.test.jsx

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('FilterList', () => {
+    testing_1.behavesAsComponent({ Component: __1.FilterList });
+    testing_1.checkExports('FilterList', {
+        default: __1.FilterList
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.FilterList>Hello</__1.FilterList>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders a <ul>', () => {
+        expect(testing_1.render(<__1.FilterList />).type).toEqual('ul');
+    });
+});

package/lib/__tests__/FilterListItem.test.jsx

@@ -0,0 +1,31 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('FilterList.Item', () => {
+    testing_1.behavesAsComponent({ Component: __1.FilterList.Item });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.FilterList.Item>stuff</__1.FilterList.Item>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders an <a> by default', () => {
+        expect(testing_1.render(<__1.FilterList.Item />).type).toEqual('a');
+    });
+    it('respects the "selected" prop', () => {
+        expect(testing_1.render(<__1.FilterList.Item selected/>)).toMatchSnapshot();
+    });
+    it('respects "count" prop', () => {
+        const { getByText } = react_2.render(<__1.FilterList.Item count={400}/>);
+        expect(getByText('400')).toBeTruthy();
+    });
+});

package/lib/__tests__/FilteredSearch.test.jsx

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('FilteredSearch', () => {
+    testing_1.behavesAsComponent({ Component: __1.FilteredSearch });
+    testing_1.checkExports('FilteredSearch', {
+        default: __1.FilteredSearch
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.FilteredSearch>Hello</__1.FilteredSearch>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders a <div>', () => {
+        expect(testing_1.render(<__1.FilteredSearch />).type).toEqual('div');
+    });
+});

package/lib/__tests__/Flash.test.jsx

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const theme_1 = __importDefault(require("../theme"));
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Flash', () => {
+    testing_1.behavesAsComponent({ Component: __1.Flash });
+    testing_1.checkExports('Flash', {
+        default: __1.Flash
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Flash variant="warning"/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects the "full" prop', () => {
+        expect(testing_1.render(<__1.Flash full/>)).toHaveStyleRule('margin-top', '-1px');
+        expect(testing_1.render(<__1.Flash full/>)).toHaveStyleRule('border-radius', '0');
+        expect(testing_1.render(<__1.Flash full/>)).toHaveStyleRule('border-width', '1px 0px');
+    });
+    it('respects the "variant" prop', () => {
+        expect(testing_1.render(<__1.Flash variant="warning"/>)).toHaveStyleRule('background-color', theme_1.default.colorSchemes.light.colors.attention?.subtle);
+        expect(testing_1.render(<__1.Flash variant="danger"/>)).toHaveStyleRule('background-color', theme_1.default.colorSchemes.light.colors.danger?.subtle);
+        expect(testing_1.render(<__1.Flash variant="success"/>)).toHaveStyleRule('background-color', theme_1.default.colorSchemes.light.colors.success?.subtle);
+        expect(testing_1.render(<__1.Flash />)).toHaveStyleRule('background-color', theme_1.default.colorSchemes.light.colors.accent?.subtle);
+    });
+});

package/lib/__tests__/Flex.test.jsx

@@ -0,0 +1,51 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Flex', () => {
+    testing_1.behavesAsComponent({ Component: __1.Flex });
+    testing_1.checkExports('Flex', {
+        default: __1.Flex
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Flex />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('gets display: flex by default', () => {
+        expect(testing_1.render(<__1.Flex />)).toHaveStyleRule('display', 'flex');
+    });
+    it('respects flexWrap', () => {
+        expect(testing_1.render(<__1.Flex flexWrap="nowrap"/>)).toMatchSnapshot();
+    });
+    it('respects flexDirection', () => {
+        expect(testing_1.render(<__1.Flex flexDirection="row"/>)).toMatchSnapshot();
+    });
+    it('respects justifyContent', () => {
+        expect(testing_1.render(<__1.Flex justifyContent="start"/>)).toMatchSnapshot();
+    });
+    it('respects alignItems', () => {
+        expect(testing_1.render(<__1.Flex alignItems="start"/>)).toMatchSnapshot();
+    });
+    it('respects alignContent', () => {
+        expect(testing_1.render(<__1.Flex alignContent="start"/>)).toMatchSnapshot();
+    });
+    it('respects display', () => {
+        expect(testing_1.render(<__1.Flex display="inline-flex"/>)).toHaveStyleRule('display', 'inline-flex');
+    });
+    it('respects responsive display', () => {
+        expect(testing_1.render(<__1.Flex display={['flex', 'inline-flex']}/>)).toMatchSnapshot();
+    });
+    it('renders a div by default', () => {
+        expect(testing_1.render(<__1.Flex />).type).toEqual('div');
+    });
+});

package/lib/__tests__/FormGroup.test.jsx

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('FormGroup', () => {
+    testing_1.behavesAsComponent({ Component: __1.FormGroup });
+    testing_1.checkExports('FormGroup', {
+        default: __1.FormGroup
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.FormGroup>
+        <__1.FormGroup.Label htmlFor="example-text">Example text</__1.FormGroup.Label>
+        <input id="example-text" value="Example Value" readOnly/>
+      </__1.FormGroup>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});
+describe('FormGroup.Label', () => {
+    testing_1.behavesAsComponent({ Component: __1.FormGroup.Label });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.FormGroup.Label htmlFor="example-text">Example text</__1.FormGroup.Label>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});

package/lib/__tests__/Grid.test.jsx

@@ -0,0 +1,69 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Grid', () => {
+    testing_1.behavesAsComponent({ Component: __1.Grid });
+    testing_1.checkExports('Grid', {
+        default: __1.Grid
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Grid />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('gets display: grid by default', () => {
+        expect(testing_1.render(<__1.Grid />)).toHaveStyleRule('display', 'grid');
+    });
+    it('respects gridGap', () => {
+        expect(testing_1.render(<__1.Grid gridGap={1}/>)).toMatchSnapshot();
+    });
+    it('respects gridColumnGap', () => {
+        expect(testing_1.render(<__1.Grid gridColumnGap={2}/>)).toMatchSnapshot();
+    });
+    it('respects gridRowGap', () => {
+        expect(testing_1.render(<__1.Grid gridRowGap={2}/>)).toMatchSnapshot();
+    });
+    it('respects gridColumn', () => {
+        expect(testing_1.render(<__1.Grid gridColumn="1 / 2"/>)).toMatchSnapshot();
+    });
+    it('respects gridRow', () => {
+        expect(testing_1.render(<__1.Grid gridRow="1 / 2"/>)).toMatchSnapshot();
+    });
+    it('respects gridArea', () => {
+        expect(testing_1.render(<__1.Grid gridArea="sidebar"/>)).toMatchSnapshot();
+    });
+    it('respects gridAutoFlow', () => {
+        expect(testing_1.render(<__1.Grid gridAutoFlow="row"/>)).toMatchSnapshot();
+    });
+    it('respects gridAutoRows', () => {
+        expect(testing_1.render(<__1.Grid gridAutoRows="1fr"/>)).toMatchSnapshot();
+    });
+    it('respects gridAutoColumns', () => {
+        expect(testing_1.render(<__1.Grid gridAutoColumns="1fr"/>)).toMatchSnapshot();
+    });
+    it('respects gridTemplateColumns', () => {
+        expect(testing_1.render(<__1.Grid gridTemplateColumns="200px 1fr"/>)).toMatchSnapshot();
+    });
+    it('respects gridTemplateRows', () => {
+        expect(testing_1.render(<__1.Grid gridTemplateRows=" 200px 1fr"/>)).toMatchSnapshot();
+    });
+    it('respects gridTemplateAreas', () => {
+        expect(testing_1.render(<__1.Grid gridTemplateAreas="sidebar  main"/>)).toMatchSnapshot();
+    });
+    it('respects responsive display', () => {
+        expect(testing_1.render(<__1.Grid display={['grid', 'inline-grid']}/>)).toMatchSnapshot();
+    });
+    it('renders a div by default', () => {
+        expect(testing_1.render(<__1.Grid />).type).toEqual('div');
+    });
+});

package/lib/__tests__/Header.test.jsx

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Header', () => {
+    testing_1.behavesAsComponent({ Component: __1.Header });
+    testing_1.checkExports('Header', {
+        default: __1.Header
+    });
+    describe('Header.Item', () => {
+        testing_1.behavesAsComponent({ Component: __1.Header.Item });
+    });
+    describe('Header.Link', () => {
+        testing_1.behavesAsComponent({ Component: __1.Header.Link });
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Header>
+        <__1.Header.Item full>
+          <__1.Header.Link href="#">One</__1.Header.Link>
+        </__1.Header.Item>
+        <__1.Header.Item>
+          <__1.Header.Link href="#">Two</__1.Header.Link>
+        </__1.Header.Item>
+        <__1.Header.Item>Three</__1.Header.Item>
+      </__1.Header>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('renders a <div> and <a>', () => {
+        expect(testing_1.render(<__1.Header />).type).toEqual('div');
+        expect(testing_1.render(<__1.Header.Link />).type).toEqual('a');
+    });
+    it('sets aria-label appropriately', () => {
+        expect(testing_1.render(<__1.Header aria-label="foo"/>).props['aria-label']).toEqual('foo');
+    });
+});

package/lib/__tests__/Heading.test.jsx

@@ -0,0 +1,71 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.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', () => {
+    testing_1.behavesAsComponent({ Component: __1.Heading });
+    testing_1.checkExports('Heading', {
+        default: __1.Heading
+    });
+    it('renders <h2> by default', () => {
+        expect(testing_1.render(<__1.Heading />).type).toEqual('h2');
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Heading>Hello</__1.Heading>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects fontWeight', () => {
+        expect(testing_1.render(<__1.Heading fontWeight="bold" theme={theme}/>)).toHaveStyleRule('font-weight', theme.fontWeights.bold);
+        expect(testing_1.render(<__1.Heading fontWeight="normal" theme={theme}/>)).toHaveStyleRule('font-weight', theme.fontWeights.normal);
+        expect(testing_1.render(<__1.Heading fontWeight="semibold" theme={theme}/>)).toHaveStyleRule('font-weight', theme.fontWeights.semibold);
+        expect(testing_1.render(<__1.Heading fontWeight="light" theme={theme}/>)).toHaveStyleRule('font-weight', theme.fontWeights.light);
+    });
+    it('respects lineHeight', () => {
+        expect(testing_1.render(<__1.Heading lineHeight="normal" theme={theme}/>)).toHaveStyleRule('line-height', String(theme.lineHeights.normal));
+        expect(testing_1.render(<__1.Heading lineHeight="condensed" theme={theme}/>)).toHaveStyleRule('line-height', String(theme.lineHeights.condensed));
+        expect(testing_1.render(<__1.Heading lineHeight="condensedUltra" theme={theme}/>)).toHaveStyleRule('line-height', String(theme.lineHeights.condensedUltra));
+    });
+    it('respects fontFamily="mono"', () => {
+        expect(testing_1.render(<__1.Heading fontFamily="mono" theme={theme}/>)).toHaveStyleRule('font-family', theme.fonts.mono);
+    });
+    it('renders fontSize', () => {
+        for (const fontSize of theme.fontSizes) {
+            expect(testing_1.render(<__1.Heading fontSize={fontSize} theme={theme}/>)).toHaveStyleRule('font-size', `${fontSize}`);
+        }
+    });
+    it('respects the "fontStyle" prop', () => {
+        expect(testing_1.render(<__1.Heading fontStyle="italic"/>)).toHaveStyleRule('font-style', 'italic');
+    });
+});

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

@@ -1,3 +1,4 @@
+import { Union } from 'ts-toolbelt';
 import { KeyPaths } from '../utils/types/KeyPaths';
 declare type NestedObject = {
     a: string;
@@ -6,5 +7,5 @@ declare type NestedObject = {
         b2: string;
     };
 };
-export declare function generatesKeyPathsFromObject(x: KeyPaths<NestedObject>): 'a' | 'b.b1' | 'b.b2';
+export declare function generatesKeyPathsFromObject(x: Union.Diff<KeyPaths<NestedObject>, 'a' | 'b.b1' | 'b.b2'>): never;
 export {};

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

@@ -1,10 +1,7 @@
 "use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generatesKeyPathsFromObject = generatesKeyPathsFromObject;
-
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generatesKeyPathsFromObject = void 0;
 function generatesKeyPathsFromObject(x) {
-  return x;
-}
+    return x;
+}
+exports.generatesKeyPathsFromObject = generatesKeyPathsFromObject;

package/lib/__tests__/Label.test.jsx

@@ -0,0 +1,33 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Label', () => {
+    testing_1.behavesAsComponent({ Component: __1.Label });
+    testing_1.checkExports('Label', {
+        default: __1.Label
+    });
+    it('renders a <span>', () => {
+        expect(testing_1.render(<__1.Label />).type).toEqual('span');
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Label>hello</__1.Label>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('respects the "outline" prop', () => {
+        expect(testing_1.render(<__1.Label outline/>)).toMatchSnapshot();
+    });
+    it('respects the "variant" prop', () => {
+        expect(testing_1.render(<__1.Label variant="xl"/>)).toMatchSnapshot();
+    });
+});

package/lib/__tests__/LabelGroup.test.jsx

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+const comp = (<__1.LabelGroup>
+    <__1.Label>Default label</__1.Label>
+    <__1.Label>Darker gray label</__1.Label>
+    <__1.Label outline>Default outline label</__1.Label>
+  </__1.LabelGroup>);
+describe('LabelGroup', () => {
+    testing_1.behavesAsComponent({ Component: __1.LabelGroup });
+    testing_1.checkExports('LabelGroup', {
+        default: __1.LabelGroup
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(comp);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});

package/lib/__tests__/Link.test.jsx

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const __1 = require("..");
+const testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Link', () => {
+    testing_1.behavesAsComponent({ Component: __1.Link });
+    testing_1.checkExports('Link', {
+        default: __1.Link
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_2.render(<__1.Link href="www.github.com">GitHub</__1.Link>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+    it('passes href down to link element', () => {
+        expect(testing_1.render(<__1.Link href="https://github.com"/>)).toMatchSnapshot();
+    });
+    it('respects hoverColor prop', () => {
+        expect(testing_1.render(<__1.Link hoverColor="accent.fg"/>)).toMatchSnapshot();
+    });
+    it('respects the "fontStyle" prop', () => {
+        expect(testing_1.render(<__1.Link fontStyle="italic"/>)).toHaveStyleRule('font-style', 'italic');
+        expect(testing_1.render(<__1.Link as="i" fontStyle="normal"/>)).toHaveStyleRule('font-style', 'normal');
+    });
+    it('applies button styles when rendering a button element', () => {
+        expect(testing_1.render(<__1.Link as="button"/>)).toMatchSnapshot();
+    });
+    it('respectes the "muted" prop', () => {
+        expect(testing_1.render(<__1.Link muted/>)).toMatchSnapshot();
+    });
+    it('respectes the "color" prop when "muted" prop is also passed', () => {
+        expect(testing_1.render(<__1.Link muted color="fg.onEmphasis"/>)).toMatchSnapshot();
+    });
+});