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

package/lib/__tests__/ThemeProvider.test.js

@@ -0,0 +1,558 @@
+"use strict";
+
+var _react = require("@testing-library/react");
+
+require("jest-styled-components");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// 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(),
+    // deprecated
+    removeListener: jest.fn(),
+    // deprecated
+    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']
+  };
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: theme
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text",
+    mb: 1
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', '#f00');
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('margin-bottom', '0.25rem');
+});
+it('has default theme', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "fg.default",
+    mb: 1
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toMatchSnapshot();
+});
+it('inherits theme from parent', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme
+  }, /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello"))));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('defaults to light color scheme', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('defaults to dark color scheme in night mode', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme,
+    colorMode: "night"
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+});
+it('defaults to first color scheme when passed an invalid color scheme name', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme,
+    dayScheme: "foo"
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('respects nightScheme prop', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme,
+    colorMode: "night",
+    nightScheme: "dark_dimmed"
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'gray');
+});
+it('respects dayScheme prop', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme,
+    colorMode: "day",
+    dayScheme: "dark",
+    nightScheme: "dark_dimmed"
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+});
+it('works in auto mode', () => {
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme,
+    colorMode: "auto"
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+});
+it('works in auto mode (dark)', () => {
+  const matchMediaSpy = jest.spyOn(window, 'matchMedia').mockImplementation(query => ({
+    matches: true,
+    // enable dark mode
+    media: query,
+    onchange: null,
+    addListener: jest.fn(),
+    // deprecated
+    removeListener: jest.fn(),
+    // deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn()
+  }));
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+    theme: exampleTheme,
+    colorMode: "auto"
+  }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+    color: "text"
+  }, "Hello")));
+  expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+  matchMediaSpy.mockRestore();
+});
+it('updates when colorMode prop changes', async () => {
+  function App() {
+    const [colorMode, setColorMode] = _react2.default.useState('day');
+
+    return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: colorMode
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, colorMode), /*#__PURE__*/_react2.default.createElement("button", {
+      onClick: () => setColorMode(colorMode === 'day' ? 'night' : 'day')
+    }, "Toggle"));
+  }
+
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(App, null)); // starts in day mode (light scheme)
+
+  expect(_react.screen.getByText('day')).toHaveStyleRule('color', 'black');
+
+  _react.screen.getByRole('button').click();
+
+  await (0, _react.waitFor)(() => // clicking the toggle button enables night mode (dark scheme)
+  expect(_react.screen.getByText('night')).toHaveStyleRule('color', 'white'));
+});
+it('updates when dayScheme prop changes', async () => {
+  function App() {
+    const [dayScheme, setDayScheme] = _react2.default.useState('light');
+
+    return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      dayScheme: dayScheme
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, dayScheme), /*#__PURE__*/_react2.default.createElement("button", {
+      onClick: () => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')
+    }, "Toggle"));
+  }
+
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(App, null)); // starts in day mode (light scheme)
+
+  expect(_react.screen.getByText('light')).toHaveStyleRule('color', 'black');
+
+  _react.screen.getByRole('button').click();
+
+  await (0, _react.waitFor)(() => // clicking the toggle sets the day scheme to dark_dimmed
+  expect(_react.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('updates when nightScheme prop changes', async () => {
+  function App() {
+    const [nightScheme, setNightScheme] = _react2.default.useState('dark');
+
+    return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "night",
+      nightScheme: nightScheme
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, nightScheme), /*#__PURE__*/_react2.default.createElement("button", {
+      onClick: () => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')
+    }, "Toggle"));
+  }
+
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(App, null)); // starts in night mode (dark scheme)
+
+  expect(_react.screen.getByText('dark')).toHaveStyleRule('color', 'white');
+
+  _react.screen.getByRole('button').click();
+
+  await (0, _react.waitFor)(() => // clicking the toggle button sets the night scheme to dark_dimmed
+  expect(_react.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('inherits colorMode from parent', async () => {
+  function App() {
+    const [colorMode, setcolorMode] = _react2.default.useState('day');
+
+    return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: colorMode
+    }, /*#__PURE__*/_react2.default.createElement("button", {
+      onClick: () => setcolorMode(colorMode === 'day' ? 'night' : 'day')
+    }, "Toggle"), /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, colorMode)));
+  }
+
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(App, null));
+  expect(_react.screen.getByText('day')).toHaveStyleRule('color', 'black');
+
+  _react.screen.getByRole('button').click();
+
+  await (0, _react.waitFor)(() => expect(_react.screen.getByText('night')).toHaveStyleRule('color', 'white'));
+});
+it('inherits dayScheme from parent', async () => {
+  function App() {
+    const [dayScheme, setDayScheme] = _react2.default.useState('light');
+
+    return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "night",
+      dayScheme: dayScheme
+    }, /*#__PURE__*/_react2.default.createElement("button", {
+      onClick: () => setDayScheme(dayScheme === 'light' ? 'dark_dimmed' : 'light')
+    }, "Toggle"), /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      colorMode: "day"
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, dayScheme)));
+  }
+
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(App, null));
+  expect(_react.screen.getByText('light')).toHaveStyleRule('color', 'black');
+
+  _react.screen.getByRole('button').click();
+
+  await (0, _react.waitFor)(() => expect(_react.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+it('inherits nightScheme from parent', async () => {
+  function App() {
+    const [nightScheme, setNightScheme] = _react2.default.useState('dark');
+
+    return /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      nightScheme: nightScheme
+    }, /*#__PURE__*/_react2.default.createElement("button", {
+      onClick: () => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')
+    }, "Toggle"), /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      colorMode: "night"
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, nightScheme)));
+  }
+
+  (0, _react.render)( /*#__PURE__*/_react2.default.createElement(App, null));
+  expect(_react.screen.getByText('dark')).toHaveStyleRule('color', 'white');
+
+  _react.screen.getByRole('button').click();
+
+  await (0, _react.waitFor)(() => expect(_react.screen.getByText('dark_dimmed')).toHaveStyleRule('color', 'gray'));
+});
+describe('setColorMode', () => {
+  it('changes the color mode', () => {
+    function ToggleMode() {
+      const {
+        colorMode,
+        setColorMode
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement("button", {
+        onClick: () => setColorMode(colorMode === 'day' ? 'night' : 'day')
+      }, "Toggle");
+    }
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day"
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, "Hello"), /*#__PURE__*/_react2.default.createElement(ToggleMode, null))); // starts in day mode (light scheme)
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+
+    _react.screen.getByRole('button').click(); // clicking the toggle button enables night mode (dark scheme)
+
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+  });
+});
+describe('setDayScheme', () => {
+  it('changes the day scheme', () => {
+    function ToggleDayScheme() {
+      const {
+        dayScheme,
+        setDayScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement("button", {
+        onClick: () => setDayScheme(dayScheme === 'light' ? 'dark' : 'light')
+      }, "Toggle");
+    }
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day"
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, "Hello"), /*#__PURE__*/_react2.default.createElement(ToggleDayScheme, null))); // starts in day mode (light scheme)
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'black');
+
+    _react.screen.getByRole('button').click(); // clicking the toggle button sets day scheme to dark
+
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+  });
+});
+describe('setNightScheme', () => {
+  it('changes the night scheme', () => {
+    function ToggleNightScheme() {
+      const {
+        nightScheme,
+        setNightScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement("button", {
+        onClick: () => setNightScheme(nightScheme === 'dark' ? 'dark_dimmed' : 'dark')
+      }, "Toggle");
+    }
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "night"
+    }, /*#__PURE__*/_react2.default.createElement(_.Text, {
+      color: "text"
+    }, "Hello"), /*#__PURE__*/_react2.default.createElement(ToggleNightScheme, null))); // starts in night mode (dark scheme)
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'white');
+
+    _react.screen.getByRole('button').click(); // clicking the toggle button sets night scheme to dark_dimmed
+
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('color', 'gray');
+  });
+});
+describe('useColorSchemeVar', () => {
+  it('updates value when scheme changes', () => {
+    function ToggleMode() {
+      const {
+        colorMode,
+        setColorMode
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement("button", {
+        onClick: () => setColorMode(colorMode === 'day' ? 'night' : 'day')
+      }, "Toggle");
+    }
+
+    function CustomBg() {
+      const customBg = (0, _.useColorSchemeVar)({
+        light: 'red',
+        dark: 'blue',
+        dark_dimmed: 'green'
+      }, 'inherit');
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        bg: customBg
+      }, "Hello");
+    }
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      nightScheme: "dark_dimmed"
+    }, /*#__PURE__*/_react2.default.createElement(CustomBg, null), /*#__PURE__*/_react2.default.createElement(ToggleMode, null)));
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('background-color', 'red');
+
+    _react.screen.getByRole('button').click();
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('background-color', 'green');
+  });
+  it('supports fallback value', () => {
+    function ToggleMode() {
+      const {
+        colorMode,
+        setColorMode
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement("button", {
+        onClick: () => setColorMode(colorMode === 'day' ? 'night' : 'day')
+      }, "Toggle");
+    }
+
+    function CustomBg() {
+      const customBg = (0, _.useColorSchemeVar)({
+        dark: 'blue'
+      }, 'red');
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        bg: customBg
+      }, "Hello");
+    }
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme
+    }, /*#__PURE__*/_react2.default.createElement(CustomBg, null), /*#__PURE__*/_react2.default.createElement(ToggleMode, null)));
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('background-color', 'red');
+
+    _react.screen.getByRole('button').click();
+
+    expect(_react.screen.getByText('Hello')).toHaveStyleRule('background-color', 'blue');
+  });
+});
+describe('useTheme().resolvedColorScheme', () => {
+  it('is undefined when not in a theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(Component, null));
+    expect(_react.screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is undefined when the theme has no colorScheme object', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: {
+        color: 'red'
+      }
+    }, /*#__PURE__*/_react2.default.createElement(Component, null)));
+    expect(_react.screen.getByTestId('text').textContent).toEqual('');
+  });
+  it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'dark';
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/_react2.default.createElement(Component, null)));
+    expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+    expect(_react.screen.getByTestId('text').textContent).toEqual(schemeToApply);
+  });
+  it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+    const Component = () => {
+      const {
+        resolvedColorScheme
+      } = (0, _.useTheme)();
+      return /*#__PURE__*/_react2.default.createElement(_.Text, {
+        "data-testid": "text"
+      }, resolvedColorScheme);
+    };
+
+    const schemeToApply = 'totally-invalid-colorscheme';
+    (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+      theme: exampleTheme,
+      colorMode: "day",
+      dayScheme: schemeToApply
+    }, /*#__PURE__*/_react2.default.createElement(Component, null)));
+    const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+    expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+    expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+    expect(_react.screen.getByTestId('text').textContent).toEqual('light');
+  });
+  describe('nested theme', () => {
+    it('is the same as the applied colorScheme, when that colorScheme is in the theme', () => {
+      const Component = () => {
+        const {
+          resolvedColorScheme
+        } = (0, _.useTheme)();
+        return /*#__PURE__*/_react2.default.createElement(_.Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'dark';
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(Component, null))));
+      expect(exampleTheme.colorSchemes).toHaveProperty(schemeToApply);
+      expect(_react.screen.getByTestId('text').textContent).toEqual(schemeToApply);
+    });
+    it('is the value of the fallback colorScheme applied when attempting to apply an invalid colorScheme', () => {
+      const Component = () => {
+        const {
+          resolvedColorScheme
+        } = (0, _.useTheme)();
+        return /*#__PURE__*/_react2.default.createElement(_.Text, {
+          "data-testid": "text"
+        }, resolvedColorScheme);
+      };
+
+      const schemeToApply = 'totally-invalid-colorscheme';
+      (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, {
+        theme: exampleTheme,
+        colorMode: "day",
+        dayScheme: schemeToApply
+      }, /*#__PURE__*/_react2.default.createElement(_.ThemeProvider, null, /*#__PURE__*/_react2.default.createElement(Component, null))));
+      const defaultThemeColorScheme = Object.keys(exampleTheme.colorSchemes)[0];
+      expect(defaultThemeColorScheme).not.toEqual(schemeToApply);
+      expect(exampleTheme.colorSchemes).not.toHaveProperty(schemeToApply);
+      expect(_react.screen.getByTestId('text').textContent).toEqual('light');
+    });
+  });
+});

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

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

package/lib/__tests__/Timeline.test.js

@@ -0,0 +1,75 @@
+"use strict";
+
+require("babel-polyfill");
+
+var _react = require("@testing-library/react");
+
+var _jestAxe = require("jest-axe");
+
+var _testing = require("../utils/testing");
+
+var _react2 = _interopRequireDefault(require("react"));
+
+var _ = require("..");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+expect.extend(_jestAxe.toHaveNoViolations);
+describe('Timeline', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Timeline
+  });
+  (0, _testing.checkExports)('Timeline', {
+    default: _.Timeline
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Timeline, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('renders with clipSidebar prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Timeline, {
+      clipSidebar: true
+    }))).toMatchSnapshot();
+  });
+});
+describe('Timeline.Item', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Timeline.Item
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Timeline.Item, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+  it('renders with condensed prop', () => {
+    expect((0, _testing.render)( /*#__PURE__*/_react2.default.createElement(_.Timeline.Item, {
+      condensed: true
+    }))).toMatchSnapshot();
+  });
+  it('adds the Timeline-Item class', () => {
+    expect((0, _testing.rendersClass)( /*#__PURE__*/_react2.default.createElement(_.Timeline.Item, null), 'Timeline-Item')).toEqual(true);
+  });
+});
+describe('Timeline.Badge', () => {
+  (0, _testing.behavesAsComponent)({
+    Component: _.Timeline.Badge,
+    options: {
+      skipAs: true
+    }
+  });
+  it('should have no axe violations', async () => {
+    const {
+      container
+    } = (0, _react.render)( /*#__PURE__*/_react2.default.createElement(_.Timeline.Badge, null));
+    const results = await (0, _jestAxe.axe)(container);
+    expect(results).toHaveNoViolations();
+    (0, _react.cleanup)();
+  });
+});

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

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

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

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.shouldAcceptCallWithNoProps = shouldAcceptCallWithNoProps;
+exports.shouldNotAcceptSystemProps = shouldNotAcceptSystemProps;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Timeline = _interopRequireDefault(require("../Timeline"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function shouldAcceptCallWithNoProps() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Timeline.default, null), /*#__PURE__*/_react.default.createElement(_Timeline.default.Item, null), /*#__PURE__*/_react.default.createElement(_Timeline.default.Badge, null), /*#__PURE__*/_react.default.createElement(_Timeline.default.Body, null), /*#__PURE__*/_react.default.createElement(_Timeline.default.Break, null));
+}
+
+function shouldNotAcceptSystemProps() {
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Timeline.default, {
+    backgroundColor: "red"
+  }), /*#__PURE__*/_react.default.createElement(_Timeline.default.Item, {
+    backgroundColor: "orange"
+  }), /*#__PURE__*/_react.default.createElement(_Timeline.default.Badge, {
+    backgroundColor: "yellow"
+  }), /*#__PURE__*/_react.default.createElement(_Timeline.default.Body, {
+    backgroundColor: "green"
+  }), /*#__PURE__*/_react.default.createElement(_Timeline.default.Break, {
+    backgroundColor: "blue"
+  }));
+}

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

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