@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
68 lines • 3.12 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { text, color } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// ANCHOR
import { Typography } from '..';
import { RootTheme } from '../theme';
import * as README from './README.md';
import SomeImage from './temporary/some_image.svg';
import { Button } from '../Button';
// SUBJECT
import { Hero } from './Hero.component';
const { Title, Subtitle } = Hero;
const StyledStory = styled('div') `
background: white;
width: 100vw;
`;
const tealGradient = `linear-gradient(224deg, #00CCCD, #00E0D1)`;
storiesOf('Components/Hero', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Default', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Hero, { background: color('Hero Background', tealGradient), minHeight: "9.375rem" },
React.createElement(Title, null, text('Title', 'Baratheon')),
React.createElement("div", null,
React.createElement(Subtitle, null, text('Subtitle', 'Ours is the Fury'))))))))
.add('Simple', () => {
const BreadCrumbs = styled(Typography) `
// https://github.com/styled-components/styled-components/issues/1816
&& {
margin-bottom: 6px;
}
`;
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Hero, { background: color('Hero Background', tealGradient), color: color('Hero Color', '') || undefined },
React.createElement(BreadCrumbs, { scale: 14, weight: 500 }, text('Subtext', 'Westeros / House Tyrell')),
React.createElement(Title, null, text('Title', 'Olenna Tyrell'))))));
})
.add('CTA', () => {
const StyledImageWrapper = styled('div') `
position: absolute;
right: 0;
bottom: 0;
svg {
display: block;
}
`;
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, null,
React.createElement(Hero, { background: color('Hero Background', tealGradient), minHeight: "12.5rem" },
React.createElement("div", null,
React.createElement(StyledImageWrapper, null,
React.createElement(SomeImage, null)),
React.createElement(Title, { scale: 44 }, text('Title', 'House Lannister')),
React.createElement("div", null,
React.createElement(Subtitle, null, text('Subtitle', 'A Lannister always pays his debts'))),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", reverse: true, onClick: () => alert('Paid!'), margin: "0 auto" }, text('Button Text', 'Pay Debts Today'))))))));
});
//# sourceMappingURL=Hero.stories.js.map