@primer/components 31.2.0-rc.b718ff50 → 31.2.0-rc.decfca99

package/lib/__tests__/TextInputWithTokens.test.jsx

@@ -0,0 +1,302 @@
+"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 testing_1 = require("../utils/testing");
+const react_2 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+require("babel-polyfill");
+const TokenBase_1 = require("../Token/TokenBase");
+const Token_1 = require("../Token");
+const TextInputWithTokens_1 = __importDefault(require("../TextInputWithTokens"));
+expect.extend(jest_axe_1.toHaveNoViolations);
+const mockTokens = [
+    { text: 'zero', id: 0 },
+    { text: 'one', id: 1 },
+    { text: 'two', id: 2 },
+    { text: 'three', id: 3 },
+    { text: 'four', id: 4 },
+    { text: 'five', id: 5 },
+    { text: 'six', id: 6 },
+    { text: 'seven', id: 7 }
+];
+const LabelledTextInputWithTokens = ({ onTokenRemove, tokens, ...rest }) => (<>
+    {/* eslint-disable-next-line jsx-a11y/label-has-for */}
+    <label htmlFor="tokenInput" id="tokenLabel">
+      Tokens
+    </label>
+    <TextInputWithTokens_1.default tokens={tokens} onTokenRemove={onTokenRemove} id="tokenInput" {...rest}/>
+  </>);
+jest.useFakeTimers();
+describe('TextInputWithTokens', () => {
+    it('renders without tokens', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={[]} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders as block layout', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default block tokens={[]} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders with tokens', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders with tokens using a custom token component', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock} tokenComponent={Token_1.IssueLabelToken}/>)).toMatchSnapshot();
+    });
+    it('renders at a maximum height when specified', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default maxHeight="20px" tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders tokens on a single line when specified', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default preventTokenWrapping tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders tokens at the specified sizes', () => {
+        const onRemoveMock = jest.fn();
+        const tokenSizeKeys = Object.keys(TokenBase_1.tokenSizes);
+        for (const tokenSizeKey of tokenSizeKeys) {
+            expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock} size={tokenSizeKey}/>)).toMatchSnapshot();
+        }
+    });
+    it('renders tokens without a remove button when specified', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default hideTokenRemoveButtons tokens={mockTokens} onTokenRemove={onRemoveMock}/>)).toMatchSnapshot();
+    });
+    it('renders a truncated set of tokens', () => {
+        const onRemoveMock = jest.fn();
+        expect(testing_1.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2}/>)).toMatchSnapshot();
+    });
+    it('focuses the previous token when keying ArrowLeft', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenIndex = mockTokens.length - 1;
+        const lastTokenNode = getByText(mockTokens[lastTokenIndex].text);
+        expect(document.activeElement).not.toEqual(lastTokenNode);
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'ArrowLeft' });
+        expect(document.activeElement?.id).toEqual(lastTokenNode.id);
+        react_2.fireEvent.keyDown(lastTokenNode, { key: 'ArrowLeft' });
+        expect(document.activeElement?.id).toEqual(getByText(mockTokens[lastTokenIndex - 1].text).id);
+    });
+    it('focuses the next token when keying ArrowRight', () => {
+        const onRemoveMock = jest.fn();
+        const { getByText } = react_2.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[4].text);
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'ArrowRight' });
+        expect(document.activeElement?.id).toEqual(getByText(mockTokens[5].text).id);
+    });
+    it('focuses the input when keying ArrowLeft on the first token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const firstTokenNode = getByText(mockTokens[0].text);
+        expect(document.activeElement).not.toEqual(firstTokenNode);
+        react_2.fireEvent.focus(firstTokenNode);
+        react_2.fireEvent.keyDown(firstTokenNode, { key: 'ArrowLeft' });
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('focuses the input when keying ArrowRight on the last token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text);
+        expect(document.activeElement).not.toEqual(lastTokenNode);
+        react_2.fireEvent.focus(lastTokenNode);
+        react_2.fireEvent.keyDown(lastTokenNode, { key: 'ArrowRight' });
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('focuses the input when keying Escape when focused on a token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenNode = getByText(mockTokens[mockTokens.length - 1].text);
+        expect(document.activeElement?.id).not.toEqual(inputNode.id);
+        react_2.fireEvent.focus(lastTokenNode);
+        expect(document.activeElement?.id).toEqual(lastTokenNode.id);
+        react_2.fireEvent.keyUp(lastTokenNode, { key: 'Escape' });
+        expect(document.activeElement?.id).not.toEqual(lastTokenNode.id);
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('does not focus the input when clicking a token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2}/>);
+        const inputNode = getByLabelText('Tokens');
+        const tokenNode = getByText(mockTokens[0].text);
+        expect(document.activeElement).not.toEqual(inputNode.id);
+        react_2.fireEvent.click(tokenNode);
+        expect(document.activeElement?.id).not.toEqual(inputNode.id);
+    });
+    it('focuses the input when clicking somewhere in the component besides the tokens', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={2}/>);
+        const inputNode = getByLabelText('Tokens');
+        const truncatedTokenCount = getByText('+6');
+        expect(document.activeElement).not.toEqual(inputNode.id);
+        react_2.fireEvent.click(truncatedTokenCount);
+        expect(document.activeElement?.id).toEqual(inputNode.id);
+    });
+    it('shows all tokens when the input is focused and hides them when it is blurred (when visibleTokenCount is set)', () => {
+        const onRemoveMock = jest.fn();
+        const visibleTokenCount = 2;
+        const { getByLabelText, getByText } = react_2.render(<>
+        <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={visibleTokenCount}/>
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>);
+        const inputNode = getByLabelText('Tokens');
+        const focusableOutsideComponentNode = getByText('Focus me');
+        const allTokenLabels = mockTokens.map(token => token.text);
+        const truncatedTokenCountNode = getByText('+6');
+        react_2.act(() => {
+            jest.runAllTimers();
+            react_2.fireEvent.focus(inputNode);
+        });
+        setTimeout(() => {
+            for (const tokenLabel of allTokenLabels) {
+                const tokenNode = getByText(tokenLabel);
+                expect(tokenNode).toBeDefined();
+            }
+        }, 0);
+        react_2.act(() => {
+            jest.runAllTimers();
+            // onBlur isn't called on input unless we specifically fire the "blur" event
+            // eslint-disable-next-line github/no-blur
+            react_2.fireEvent.blur(inputNode);
+            react_2.fireEvent.focus(focusableOutsideComponentNode);
+        });
+        setTimeout(() => {
+            expect(truncatedTokenCountNode).toBeDefined();
+            for (const tokenLabel of allTokenLabels) {
+                const tokenNode = getByText(tokenLabel);
+                if (allTokenLabels.indexOf(tokenLabel) > visibleTokenCount) {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(tokenNode).toBeDefined();
+                }
+                else {
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(tokenNode).not.toBeDefined();
+                }
+            }
+        }, 0);
+        jest.useRealTimers();
+    });
+    it('does not hide tokens when blurring the input to focus within the component (when visibleTokenCount is set)', () => {
+        const onRemoveMock = jest.fn();
+        const visibleTokenCount = 2;
+        const { getByLabelText, getByText } = react_2.render(<>
+        <LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} visibleTokenCount={visibleTokenCount}/>
+        <button id="focusableOutsideComponent">Focus me</button>
+      </>);
+        const inputNode = getByLabelText('Tokens');
+        const firstTokenNode = getByText(mockTokens[visibleTokenCount - 1].text);
+        const allTokenLabels = mockTokens.map(token => token.text);
+        const truncatedTokenCountNode = getByText('+6');
+        react_2.act(() => {
+            react_2.fireEvent.focus(inputNode);
+            react_2.fireEvent.focus(firstTokenNode);
+        });
+        expect(truncatedTokenCountNode).toBeDefined();
+        for (const tokenLabel of allTokenLabels) {
+            const tokenNode = getByText(tokenLabel);
+            expect(tokenNode).toBeDefined();
+        }
+    });
+    it('focuses the first token when keying ArrowRight in the input', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText, getByText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const firstTokenNode = getByText(mockTokens[0].text);
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'ArrowRight' });
+        expect(document.activeElement?.id).not.toEqual(inputNode.id);
+        expect(document.activeElement?.id).toEqual(firstTokenNode.id);
+    });
+    it('calls onTokenRemove on the last token when keying Backspace in an empty input', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenIndex = mockTokens.length - 1;
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'Backspace' });
+        expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[lastTokenIndex].id);
+    });
+    it("sets the input text to the last token's text when keying Backspace in an empty input", () => {
+        const onRemoveMock = jest.fn();
+        const { getByDisplayValue, getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        const lastTokenIndex = mockTokens.length - 1;
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'Backspace' });
+        expect(getByDisplayValue(mockTokens[lastTokenIndex].text).id).toEqual(inputNode.id);
+    });
+    it('does not call onTokenRemove on the last token when keying Backspace in an input that has a value', () => {
+        const onRemoveMock = jest.fn();
+        const { getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} defaultValue="test"/>);
+        const inputNode = getByLabelText('Tokens');
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'Backspace' });
+        expect(onRemoveMock).not.toHaveBeenCalled();
+    });
+    it('calls onTokenRemove on the focused token when keying Backspace and moves focus to the next token', () => {
+        const onRemoveMock = jest.fn();
+        const { getByText } = react_2.render(<TextInputWithTokens_1.default tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[4].text);
+        expect(onRemoveMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'Backspace' });
+        expect(onRemoveMock).toHaveBeenCalledWith(mockTokens[4].id);
+    });
+    it('moves focus to the next token when removing the first token', () => {
+        jest.useFakeTimers();
+        const onRemoveMock = jest.fn();
+        const { getByText } = react_2.render(<TextInputWithTokens_1.default tokens={[...mockTokens].slice(0, 2)} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[0].text);
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'Backspace' });
+        jest.runAllTimers();
+        setTimeout(() => {
+            expect(document.activeElement?.textContent).toBe(mockTokens[1].text);
+        }, 0);
+        jest.useRealTimers();
+    });
+    it('moves focus to the input when the last token is removed', () => {
+        jest.useFakeTimers();
+        const onRemoveMock = jest.fn();
+        const { getByText, getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={[mockTokens[0]]} onTokenRemove={onRemoveMock}/>);
+        const tokenNode = getByText(mockTokens[0].text);
+        const inputNode = getByLabelText('Tokens');
+        react_2.fireEvent.focus(tokenNode);
+        react_2.fireEvent.keyDown(tokenNode, { key: 'Backspace' });
+        jest.runAllTimers();
+        setTimeout(() => {
+            expect(document.activeElement?.id).toBe(inputNode.id);
+        }, 0);
+        jest.useRealTimers();
+    });
+    it('calls onKeyDown', () => {
+        const onRemoveMock = jest.fn();
+        const onKeyDownMock = jest.fn();
+        const { getByLabelText } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock} onKeyDown={onKeyDownMock}/>);
+        const inputNode = getByLabelText('Tokens');
+        expect(onKeyDownMock).not.toHaveBeenCalled();
+        react_2.fireEvent.focus(inputNode);
+        react_2.fireEvent.keyDown(inputNode, { key: 'a' });
+        expect(onKeyDownMock).toHaveBeenCalled();
+    });
+    it('should have no axe violations', async () => {
+        const onRemoveMock = jest.fn();
+        const { container } = react_2.render(<LabelledTextInputWithTokens tokens={mockTokens} onTokenRemove={onRemoveMock}/>);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_2.cleanup();
+    });
+});

package/lib/__tests__/ThemeProvider.test.jsx

@@ -0,0 +1,314 @@
+"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("jest-styled-components");
+const react_2 = __importDefault(require("react"));
+const __1 = require("..");
+// window.matchMedia() is not implmented by JSDOM so we have to create a mock:
+// https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: jest.fn().mockImplementation(query => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn()
+    }))
+});
+const exampleTheme = {
+    colors: {
+        text: '#f00'
+    },
+    colorSchemes: {
+        light: {
+            colors: {
+                text: 'black'
+            }
+        },
+        dark: {
+            colors: {
+                text: 'white'
+            }
+        },
+        dark_dimmed: {
+            colors: {
+                text: 'gray'
+            }
+        }
+    }
+};
+it('respects theme prop', () => {
+    const theme = {
+        colors: {
+            text: '#f00'
+        },
+        space: ['0', '0.25rem']
+    };
+    react_1.render(<__1.ThemeProvider theme={theme}>
+      <__1.Text color="text" mb={1}>
+        Hello
+      </__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', '#f00');
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('margin-bottom', '0.25rem');
+});
+it('has default theme', () => {
+    react_1.render(<__1.ThemeProvider>
+      <__1.Text color="fg.default" mb={1}>
+        Hello
+      </__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toMatchSnapshot();
+});
+it('inherits theme from parent', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme}>
+      <__1.ThemeProvider>
+        <__1.Text color="text">Hello</__1.Text>
+      </__1.ThemeProvider>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('defaults to light color scheme', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme}>
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('defaults to dark color scheme in night mode', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="night">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+});
+it('defaults to first color scheme when passed an invalid color scheme name', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} dayScheme="foo">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('respects nightScheme prop', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="night" nightScheme="dark_dimmed">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'gray');
+});
+it('respects dayScheme prop', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="day" dayScheme="dark" nightScheme="dark_dimmed">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+});
+it('works in auto mode', () => {
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="auto">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('works in auto mode (dark)', () => {
+    const matchMediaSpy = jest.spyOn(window, 'matchMedia').mockImplementation(query => ({
+        matches: true,
+        media: query,
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+        addEventListener: jest.fn(),
+        removeEventListener: jest.fn(),
+        dispatchEvent: jest.fn()
+    }));
+    react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="auto">
+      <__1.Text color="text">Hello</__1.Text>
+    </__1.ThemeProvider>);
+    expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+    matchMediaSpy.mockRestore();
+});
+it('updates when colorMode prop changes', async () => {
+    function App() {
+        const [colorMode, setColorMode] = react_2.default.useState('day');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+        <__1.Text color="text">{colorMode}</__1.Text>
+        <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    // starts in day mode (light scheme)
+    expect(react_1.screen.getByText('day')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => 
+    // clicking the toggle button enables night mode (dark scheme)
+    expect(react_1.screen.getByText('night')).toHaveStyleRule('color', 'white'));
+});
+it('updates when dayScheme prop changes', async () => {
+    function App() {
+        const [dayScheme, setDayScheme] = react_2.default.useState('light');
+        return (<__1.ThemeProvider theme={exampleTheme} dayScheme={dayScheme}>
+        <__1.Text color="text">{dayScheme}</__1.Text>
+        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    // starts in day mode (light scheme)
+    expect(react_1.screen.getByText('light')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => 
+    // clicking the toggle sets the day scheme to dark_dimmed
+    expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('updates when nightScheme prop changes', async () => {
+    function App() {
+        const [nightScheme, setNightScheme] = react_2.default.useState('dark');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode="night" nightScheme={nightScheme}>
+        <__1.Text color="text">{nightScheme}</__1.Text>
+        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    // starts in night mode (dark scheme)
+    expect(react_1.screen.getByText('dark')).toHaveStyleRule('color', 'white');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => 
+    // clicking the toggle button sets the night scheme to dark_dimmed
+    expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('inherits colorMode from parent', async () => {
+    function App() {
+        const [colorMode, setcolorMode] = react_2.default.useState('day');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode={colorMode}>
+        <button onClick={() => setcolorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>
+        <__1.ThemeProvider>
+          <__1.Text color="text">{colorMode}</__1.Text>
+        </__1.ThemeProvider>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    expect(react_1.screen.getByText('day')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => expect(react_1.screen.getByText('night')).toHaveStyleRule('color', 'white'));
+});
+it('inherits dayScheme from parent', async () => {
+    function App() {
+        const [dayScheme, setDayScheme] = react_2.default.useState('light');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode="night" dayScheme={dayScheme}>
+        <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')}>Toggle</button>
+        <__1.ThemeProvider colorMode="day">
+          <__1.Text color="text">{dayScheme}</__1.Text>
+        </__1.ThemeProvider>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    expect(react_1.screen.getByText('light')).toHaveStyleRule('color', 'black');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('inherits nightScheme from parent', async () => {
+    function App() {
+        const [nightScheme, setNightScheme] = react_2.default.useState('dark');
+        return (<__1.ThemeProvider theme={exampleTheme} colorMode="day" nightScheme={nightScheme}>
+        <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>
+        <__1.ThemeProvider colorMode="night">
+          <__1.Text color="text">{nightScheme}</__1.Text>
+        </__1.ThemeProvider>
+      </__1.ThemeProvider>);
+    }
+    react_1.render(<App />);
+    expect(react_1.screen.getByText('dark')).toHaveStyleRule('color', 'white');
+    react_1.screen.getByRole('button').click();
+    await react_1.waitFor(() => expect(react_1.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+describe('setColorMode', () => {
+    it('changes the color mode', () => {
+        function ToggleMode() {
+            const { colorMode, setColorMode } = __1.useTheme();
+            return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="day">
+        <__1.Text color="text">Hello</__1.Text>
+        <ToggleMode />
+      </__1.ThemeProvider>);
+        // starts in day mode (light scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+        react_1.screen.getByRole('button').click();
+        // clicking the toggle button enables night mode (dark scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+    });
+});
+describe('setDayScheme', () => {
+    it('changes the day scheme', () => {
+        function ToggleDayScheme() {
+            const { dayScheme, setDayScheme } = __1.useTheme();
+            return <button onClick={() => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')}>Toggle</button>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="day">
+        <__1.Text color="text">Hello</__1.Text>
+        <ToggleDayScheme />
+      </__1.ThemeProvider>);
+        // starts in day mode (light scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+        react_1.screen.getByRole('button').click();
+        // clicking the toggle button sets day scheme to dark
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+    });
+});
+describe('setNightScheme', () => {
+    it('changes the night scheme', () => {
+        function ToggleNightScheme() {
+            const { nightScheme, setNightScheme } = __1.useTheme();
+            return <button onClick={() => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')}>Toggle</button>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} colorMode="night">
+        <__1.Text color="text">Hello</__1.Text>
+        <ToggleNightScheme />
+      </__1.ThemeProvider>);
+        // starts in night mode (dark scheme)
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+        react_1.screen.getByRole('button').click();
+        // clicking the toggle button sets night scheme to dark_dimmed
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('color', 'gray');
+    });
+});
+describe('useColorSchemeVar', () => {
+    it('updates value when scheme changes', () => {
+        function ToggleMode() {
+            const { colorMode, setColorMode } = __1.useTheme();
+            return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>;
+        }
+        function CustomBg() {
+            const customBg = __1.useColorSchemeVar({
+                light: 'red',
+                dark: 'blue',
+                dark_dimmed: 'green'
+            }, 'inherit');
+            return <__1.Text bg={customBg}>Hello</__1.Text>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme} nightScheme="dark_dimmed">
+        <CustomBg />
+        <ToggleMode />
+      </__1.ThemeProvider>);
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'red');
+        react_1.screen.getByRole('button').click();
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'green');
+    });
+    it('supports fallback value', () => {
+        function ToggleMode() {
+            const { colorMode, setColorMode } = __1.useTheme();
+            return <button onClick={() => setColorMode(colorMode === 'day' ? 'night' : 'day')}>Toggle</button>;
+        }
+        function CustomBg() {
+            const customBg = __1.useColorSchemeVar({ dark: 'blue' }, 'red');
+            return <__1.Text bg={customBg}>Hello</__1.Text>;
+        }
+        react_1.render(<__1.ThemeProvider theme={exampleTheme}>
+        <CustomBg />
+        <ToggleMode />
+      </__1.ThemeProvider>);
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'red');
+        react_1.screen.getByRole('button').click();
+        expect(react_1.screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue');
+    });
+});

package/lib/__tests__/Timeline.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 });
+require("babel-polyfill");
+const react_1 = require("@testing-library/react");
+const jest_axe_1 = require("jest-axe");
+const testing_1 = require("../utils/testing");
+const react_2 = __importDefault(require("react"));
+const __1 = require("..");
+expect.extend(jest_axe_1.toHaveNoViolations);
+describe('Timeline', () => {
+    testing_1.behavesAsComponent({ Component: __1.Timeline });
+    testing_1.checkExports('Timeline', {
+        default: __1.Timeline
+    });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<__1.Timeline />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+    it('renders with clipSidebar prop', () => {
+        expect(testing_1.render(<__1.Timeline clipSidebar/>)).toMatchSnapshot();
+    });
+});
+describe('Timeline.Item', () => {
+    testing_1.behavesAsComponent({ Component: __1.Timeline.Item });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<__1.Timeline.Item />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+    it('renders with condensed prop', () => {
+        expect(testing_1.render(<__1.Timeline.Item condensed/>)).toMatchSnapshot();
+    });
+    it('adds the Timeline-Item class', () => {
+        expect(testing_1.rendersClass(<__1.Timeline.Item />, 'Timeline-Item')).toEqual(true);
+    });
+});
+describe('Timeline.Badge', () => {
+    testing_1.behavesAsComponent({ Component: __1.Timeline.Badge, options: { skipAs: true } });
+    it('should have no axe violations', async () => {
+        const { container } = react_1.render(<__1.Timeline.Badge />);
+        const results = await jest_axe_1.axe(container);
+        expect(results).toHaveNoViolations();
+        react_1.cleanup();
+    });
+});