@navinc/base-react-components/dist/story.js

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import { storiesOf } from '@storybook/react';
import Copy from './copy.js';
import { theme } from './theme.js';
const Container = styled.div.withConfig({ displayName: "brc-sc-Container", componentId: "brc-sc-1cd56kp" }) `
  display: flex;
  flex-wrap: wrap;
`;
const Row = styled.div.withConfig({ displayName: "brc-sc-Row", componentId: "brc-sc-wnuvzd" }) `
  display: flex;
  width: 100%;

  & > ${Copy} {
    margin-top: 8px;
    margin-right: 8px;
  }
`;
const ColorItem = styled.div.withConfig({ displayName: "brc-sc-ColorItem", componentId: "brc-sc-1p4ywq8" }) `
  flex: 1 1 160px;
  padding: 16px;
  & > * {
    text-align: center;
    margin: 0 auto;
  }
`;
const ColorDot = styled.div.withConfig({ displayName: "brc-sc-ColorDot", componentId: "brc-sc-1srnlnh" }) `
  height: 32px;
  width: 32px;
  background-color: ${({ color }) => color};
  border-radius: 50%;
`;
storiesOf('2. Misc | Theme', module).add('theme', () => (_jsx(Container, { children: Object.entries(theme).map(([key, value]) => {
        if (typeof value === 'string' && (value.startsWith('#') || value.startsWith('rgba')))
            return (_jsxs(ColorItem, { children: [_jsx(Copy, Object.assign({ bold: true }, { children: key })), _jsx(Copy, Object.assign({ light: true }, { children: value })), _jsx(ColorDot, { color: value })] }));
        else
            return (_jsxs(Row, { children: [_jsx(Copy, Object.assign({ bold: true }, { children: key })), _jsx(Copy, { children: typeof value === 'function' ? 'is function, see theme.js for details.' : JSON.stringify(value) })] }));
    }) })));
//# sourceMappingURL=story.js.map