@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
87 lines • 2.94 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { text, select } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { Typography, } from './Typography.component';
import * as README from './README.md';
import { RootTheme } from '../theme';
import { typography } from '../theme/typography.theme';
const StyledStory = styled('div') `
padding: 2rem 5rem;
font-family: base;
color: text.base;
`;
const scales = [62, 52, 44, 36, 32, 28, 24, 20, 18, 16, 14, 12];
const alignments = [
'center',
'left',
'right',
'inherit',
'justify',
'start',
'end',
];
const weights = [
'normal',
'bold',
'bolder',
'lighter',
100,
200,
300,
400,
500,
600,
700,
800,
900,
'initial',
'inherit',
];
const transforms = [
'none',
'capitalize',
'uppercase',
'lowercase',
'initial',
'inherit',
];
const as = Object.keys(typography.as);
const Tags = [''].concat(as);
const Scales = ['']
.concat(Object.keys(typography.scale))
.map(x => parseInt(x, 10) || '');
const Alignments = [''].concat(alignments);
const Weights = weights.concat('');
const Transforms = [''].concat(transforms);
storiesOf('Components/Typography', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: "h1" }, "Scales"),
React.createElement("div", null, scales.map((scale) => (React.createElement("div", { key: scale },
React.createElement(Typography, { scale: scale },
"Font size is ",
scale,
"px | Scale value = ",
scale))))),
React.createElement(Typography, { as: "h1" }, "Elements"),
React.createElement("div", null, as.map((element) => (React.createElement("div", { key: element },
React.createElement(Typography, { as: element },
"Element: ",
element)))))))))
.add('Knobus Propus', () => {
const content = text('content', 'The quick brown fox jumps over the lazy dog.');
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: select('as', Tags, '') || undefined, scale: select('scale', Scales, '') || undefined, color: text('color', '') || undefined, size: text('size', '') || undefined, lineHeight: text('lineHeight', '') || undefined, align: select('align', Alignments, '') || undefined, weight: select('weight', Weights, '') || undefined, transform: select('transform', Transforms, '') || undefined }, content))));
});
//# sourceMappingURL=Typography.stories.js.map