@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
142 lines (140 loc) • 7.42 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { boolean, select, text } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import * as README from './README.md';
import { Typography, Avatar, Button, Close } from '..';
import { RootTheme } from '../theme';
import { typography } from '../theme/typography.theme';
import { Skeleton } from './Skeleton.component';
const StyledStory = styled('div') `
padding: 2rem 4rem;
color: text.base;
font-family: base;
`;
const Card = styled('div') `
width: 20.5rem;
background-color: white;
border-radius: base;
box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.2);
display: flex;
flex-direction: column;
`;
const CardHeader = styled('div') `
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
position: relative;
button {
position: absolute;
top: 0.75rem;
right: 0.5rem;
}
.anchor-avatar {
background-color: #ec5673;
}
`;
const CardInfo = styled('div') `
margin-left: 1rem;
display: flex;
flex-grow: 1;
flex-direction: column;
justify-content: center;
`;
const CardImage = styled('div') `
width: 100%;
height: 12rem;
background: linear-gradient(170deg, #df206c 0%, #f16667 100%);
`;
const CardContent = styled('div') `
width: 100%;
`;
const CardFooter = styled('div') `
padding: 1rem 1rem 1.5rem;
`;
const Tags = [''].concat(Object.keys(typography.as));
const Scales = ['']
.concat(Object.keys(typography.scale))
.map(x => parseInt(x, 10) || '');
storiesOf('Components/Skeleton', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Text', () => {
const loading = boolean('loading', true);
const defaultText = `For a long time in software companies the practice
of building software as one-off initiatives at has
been called into question and deemed insular. Its
no longer acceptable to deliver a piece of software
that solves a particular problem and call it a
solution. As new requirements emerge, narrowing our
focus just to a particular challenges requirements
results in organizational tension, substandard
solutions, churn, code rot, technical debt, etc.`;
const textLength = parseInt(text('textLength', ''), 10) || undefined;
const as = select('Typography tag', Tags, '');
const scale = select('Typography scale', Scales, '');
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Typography, { as: as || undefined, scale: scale || undefined },
React.createElement(Skeleton, { loading: loading, textLength: textLength, blockRatio: parseFloat(text('blockRatio', '')) || undefined, fontSize: text('fontSize', '') || undefined, lineHeight: text('lineHeight', '') || undefined, textChar: text('textChar', '') || undefined, colorStart: text('colorStart', '') || undefined, colorEnd: text('colorEnd', '') || undefined }, text('Text', defaultText))))));
})
.add('Custom Shape', () => {
const loading = boolean('loading', true);
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Skeleton, { loading: loading, display: text('display', '') || undefined, borderRadius: text('borderRadius', 'circular'), width: text('width', '10rem') || undefined, height: text('height', '2rem') || undefined, maxWidth: text('maxWidth', '') || undefined, maxHeight: text('maxHeight', '') || undefined, minWidth: text('minWidth', '') || undefined, minHeight: text('minHeight', '') || undefined, margin: text('margin', '') || undefined, padding: text('padding', '') || undefined, textLength: parseInt(text('textLength', ''), 10) || undefined, variant: text('variant', 'base') || undefined, colorStart: text('colorStart', '') || undefined, colorEnd: text('colorEnd', '') || undefined }))));
})
.add('Multiple Colors', () => {
const loading = boolean('loading', true);
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Skeleton, { loading: loading, textLength: 200, colorStart: text('A: colorStart', '') || undefined, colorEnd: text('A: colorEnd', '') || undefined }),
React.createElement(Skeleton, { loading: loading, textLength: 200, colorStart: text('B: colorStart', 'accent.light') || undefined, colorEnd: text('B: colorEnd', 'accent.dark') || undefined }),
React.createElement(Skeleton, { loading: loading, textLength: 200, colorStart: text('C: colorStart', 'secondary.light') ||
undefined, colorEnd: text('C: colorEnd', 'secondary.dark') || undefined }))));
})
.add('Default', () => {
const loading = boolean('loading', true);
const fetchedData = {
title: text('title', 'Keanu Reeves'),
subtitle: text('subtitle', 'Actor, Musician'),
description: text('description', 'Keanu Charles Reeves is a Canadian actor and musician. You may know him by his real name, John Wick.'),
initials: text('initials', 'KR'),
};
const placeholderData = {
title: text('loading.title', 'Friendly title'),
subtitle: text('loading.subtitle', 'Lovely subtitle'),
description: text('loading.description', "The text here doesn't actually matter, its just used to determine how long to make the skeleton text."),
initials: text('loading.initials', '') || undefined,
};
const { title, subtitle, initials, description } = loading
? placeholderData
: fetchedData;
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Card, null,
React.createElement(CardHeader, null,
React.createElement(Skeleton, { loading: loading, borderRadius: "circular" },
React.createElement(Avatar, { label: initials })),
React.createElement(CardInfo, null,
React.createElement(Typography, { scale: 16, weight: 500 },
React.createElement(Skeleton, { loading: loading }, title)),
React.createElement(Typography, { scale: 14 },
React.createElement(Skeleton, { loading: loading }, subtitle))),
!loading && (React.createElement(Button, { variant: "minimal", circular: true, size: "sm", prefix: React.createElement(Close, null) }))),
React.createElement(CardContent, null,
React.createElement(Skeleton, { loading: loading, display: "block" },
React.createElement(CardImage, null))),
React.createElement(CardFooter, null,
React.createElement(Typography, { scale: 14 },
React.createElement(Skeleton, { loading: loading }, description)))))));
});
//# sourceMappingURL=Skeleton.stories.js.map