@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
47 lines • 2.63 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { select, text } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { RootTheme } from '../../src/theme';
import { Table } from './Table.component';
import { Typography } from '../Typography';
const { Cell, Row, Head, Body, HeaderCell } = Table;
const StyledStory = styled('div') `
padding: 2rem;
color: text.base;
font-family: base;
`;
const createData = (name, color, rating) => ({
name,
color,
rating,
});
const data = [
createData('Pear', 'Green', '4/5'),
createData('Apple', 'Red', '2/5'),
createData('Banana', 'Yellow', '4/5'),
createData('Grapefruit', 'Orange', '3.5/5'),
createData('Apricot', 'Orange', '1.5/5'),
];
storiesOf('Components/Table', module).add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "h3", scale: 24, weight: 500, mb: "0.5rem", color: "text.light" }, "Fruit Table"),
React.createElement(Table, { width: text('width', '33.75rem'), size: select('size', ['md', 'sm'], 'md'), background: text('background', '') || undefined, altBackground: text('altBackground', '') || undefined },
React.createElement(Head, null,
React.createElement(Row, null,
React.createElement(HeaderCell, { scope: "col" }),
React.createElement(HeaderCell, { scope: "col" },
React.createElement(Typography, { scale: 28, weight: 600, as: "p" }, "$4"),
React.createElement(Typography, { scale: 14, color: "text.light", weight: "normal" }, "(30 Day Qty)")),
React.createElement(HeaderCell, { scope: "col" },
React.createElement(Typography, { scale: 28, weight: 600, as: "p" }, "$10"),
React.createElement(Typography, { scale: 14, color: "text.light", weight: "normal" }, "(90 Day Qty)")))),
React.createElement(Body, null, data.map(({ name, color, rating }) => (React.createElement(Row, { key: name },
React.createElement(HeaderCell, { scope: "row", align: "left", color: "#91609c", fontWeight: 600 }, name),
React.createElement(Cell, { align: "center", width: { xs: '1px', md: '200px' } }, color),
React.createElement(Cell, { align: "center", width: { xs: '1px', md: '200px' } }, rating))))))))));
//# sourceMappingURL=Table.stories.js.map