@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
795 lines • 64.3 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { boolean, text, select, number, object } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
import { RootTheme } from '../theme';
// README
import * as README from './README.md';
// COMPONENT
import { Button } from './Button.component';
import { HitArea } from './HitArea/HitArea.component';
import * as Icon from '../Icon';
import { Typography, Cut, SuccessOutline } from '..';
const alternateColors = {
base: '#14A382',
light: '#00CDAD',
dark: '#268068',
};
const StyledStory = styled('div') `
padding: 2rem 3rem;
`;
const StyledStoryPrime = styled(StyledStory) `
width: 1200px;
`;
const StyledReverseStory = styled(StyledStory) `
width: 1200px;
background-color: primary.base;
color: white;
`;
const Label = styled(Typography) `
&& {
text-transform: uppercase;
color: text.light;
font-size: 12px;
font-weight: bold;
display: block;
margin-bottom: 1rem;
}
`;
const ReverseLabel = styled(Label) `
&& {
color: white;
}
`;
const Heading = styled(Typography) `
&& {
font-size: 14px;
font-weight: bold;
margin: 3rem 0 1rem 0;
display: block;
}
`;
const ShowHitbox = styled('div') `
button > ${HitArea} {
background: rgba(255, 0, 0, 0.1);
}
`;
const BlockBox = styled('div') `
border: light;
width: 375px;
padding: 1rem;
`;
storiesOf('Components/Button', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Filled', () => {
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStoryPrime, null,
React.createElement(Typography, { as: "h2", weight: 'bold' }, "Filled Buttons"),
React.createElement(Heading, null, "Large Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { size: "lg" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { size: "lg" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { size: "lg", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Medium Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { size: "md" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { size: "md" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with flip")),
React.createElement("div", null,
React.createElement(Button, { size: "md", flip: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "min width - 112px")),
React.createElement("div", null,
React.createElement(Button, { size: "md", minWidth: "7rem" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { size: "md", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 80 px")),
React.createElement("div", null,
React.createElement(Button, { size: "sm" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { size: "sm" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { size: "sm", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "x-Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 64 px")),
React.createElement("div", null,
React.createElement(Button, { size: "xs" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { size: "xs" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { size: "xs", prefix: React.createElement(Cut, null) }, "CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "hit area")),
React.createElement("div", null,
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "xs", onClick: action('onClick!') }, "CTA")))),
React.createElement(Heading, null, "Button States"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "default")),
React.createElement("div", null,
React.createElement(Button, null, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "default")),
React.createElement("div", null,
React.createElement(Button, { flip: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { flip: true, forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "pressed")),
React.createElement("div", null,
React.createElement(Button, { forceActive: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "pressed")),
React.createElement("div", null,
React.createElement(Button, { flip: true, forceActive: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "focused")),
React.createElement("div", null,
React.createElement(Button, { forceFocus: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "focused")),
React.createElement("div", null,
React.createElement(Button, { flip: true, forceFocus: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "disabled")),
React.createElement("div", null,
React.createElement(Button, { disabled: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "revealed")),
React.createElement("div", null,
React.createElement(Button, { flip: true, revealed: true }, "Code Revealed"))),
React.createElement(Heading, null, "Alternate Theme Color"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "default")),
React.createElement("div", null,
React.createElement(Button, { colorTheme: alternateColors }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "button with flip")),
React.createElement("div", null,
React.createElement(Button, { colorTheme: alternateColors, flip: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { colorTheme: alternateColors, forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "hover with flip")),
React.createElement("div", null,
React.createElement(Button, { colorTheme: alternateColors, flip: true, forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "disabled")),
React.createElement("div", null,
React.createElement(Button, { colorTheme: alternateColors, disabled: true }, "CTA"))),
React.createElement(Heading, null, "Block Buttons"),
React.createElement("div", { style: {
border: 'light',
width: '375px',
padding: '1rem',
} },
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Button, { size: "md", block: true }, "CTA")),
React.createElement("div", null,
React.createElement(Button, { size: "md", block: true, disabled: true }, "CTA")))))));
})
.add('Outline', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStoryPrime, null,
React.createElement(Typography, { as: "h2", weight: 'bold' }, "Outline Buttons"),
React.createElement(Heading, null, "Large Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "lg" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "lg" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "lg", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Medium Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "md" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "md" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "min width - 112px")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "md", minWidth: "7rem" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "md", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 80 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "sm" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "sm" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "sm", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "x-Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 64 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "xs" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "xs" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", size: "xs", prefix: React.createElement(Cut, null) }, "CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "hit area")),
React.createElement("div", null,
React.createElement(ShowHitbox, null,
React.createElement(Button, { variant: "outline", size: "xs", onClick: action('onClick!') }, "CTA")))),
React.createElement(Heading, null, "Button States"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "default")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "pressed")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", forceActive: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "focused")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", forceFocus: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "disabled")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", disabled: true }, "CTA"))),
React.createElement(Heading, null, "Alternate Theme Color"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "default")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", colorTheme: alternateColors }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", colorTheme: alternateColors, forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "disabled")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", colorTheme: alternateColors, disabled: true }, "CTA"))),
React.createElement(Heading, null, "Block Buttons"),
React.createElement(BlockBox, null,
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Button, { variant: "outline", block: true }, "CTA")),
React.createElement("div", null,
React.createElement(Button, { variant: "outline", block: true, disabled: true }, "CTA"))))))))
.add('Minimal', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStoryPrime, null,
React.createElement(Typography, { as: "h2", weight: 'bold' }, "Minimal Buttons"),
React.createElement(Heading, null, "Large Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "lg" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "lg" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "lg", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Medium Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "md" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "md" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "min width - 112px")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "md", minWidth: "7rem" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "md", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 80 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "sm" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "sm" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "sm", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "x-Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 64 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "xs" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "xs" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "xs", prefix: React.createElement(Cut, null) }, "CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "hit area")),
React.createElement("div", null,
React.createElement(ShowHitbox, null,
React.createElement(Button, { variant: "minimal", size: "xs", onClick: action('onClick!') }, "CTA")))),
React.createElement(Heading, null, "Button States"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "default")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "pressed")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", forceActive: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "focused")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", forceFocus: true }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "disabled")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", disabled: true }, "CTA"))),
React.createElement(Heading, null, "Alternate Theme Color"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Label, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", colorTheme: alternateColors }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", colorTheme: alternateColors }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(Label, null, "min width - 112px")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", colorTheme: alternateColors, minWidth: "7rem" }, "CTA")),
React.createElement("div", null,
React.createElement(Label, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", colorTheme: alternateColors, prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Block Buttons"),
React.createElement(BlockBox, null,
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "md", block: true }, "CTA")),
React.createElement("div", null,
React.createElement(Button, { variant: "minimal", size: "md", block: true, disabled: true }, "CTA"))))))))
.add('Icons', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStoryPrime, null,
React.createElement(Typography, { as: "h2", weight: 'bold' }, "Icons Only Buttons"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Heading, null, "Filled")),
React.createElement("div", null,
React.createElement(Label, null, "large"),
React.createElement(Button, { size: "lg", prefix: React.createElement(SuccessOutline, null) })),
React.createElement("div", null,
React.createElement(Label, null, "Medium"),
React.createElement(Button, { size: "md", prefix: React.createElement(SuccessOutline, null) })),
React.createElement("div", null,
React.createElement(Label, null, "small"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "sm", prefix: React.createElement(SuccessOutline, null) }))),
React.createElement("div", null,
React.createElement(Label, null, "xsmall"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "xs", prefix: React.createElement(SuccessOutline, null) }))),
React.createElement("div", null,
React.createElement(Heading, null, "Outline")),
React.createElement("div", null,
React.createElement(Label, null, "large"),
React.createElement(Button, { size: "lg", prefix: React.createElement(SuccessOutline, null), variant: "outline" })),
React.createElement("div", null,
React.createElement(Label, null, "Medium"),
React.createElement(Button, { size: "md", prefix: React.createElement(SuccessOutline, null), variant: "outline" })),
React.createElement("div", null,
React.createElement(Label, null, "small"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "sm", prefix: React.createElement(SuccessOutline, null), variant: "outline" }))),
React.createElement("div", null,
React.createElement(Label, null, "xsmall"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "xs", prefix: React.createElement(SuccessOutline, null), variant: "outline" }))),
React.createElement("div", null,
React.createElement(Heading, null, "Minimal")),
React.createElement("div", null,
React.createElement(Label, null, "large"),
React.createElement(Button, { size: "lg", prefix: React.createElement(SuccessOutline, null), variant: "minimal" })),
React.createElement("div", null,
React.createElement(Label, null, "Medium"),
React.createElement(Button, { size: "md", prefix: React.createElement(SuccessOutline, null), variant: "minimal" })),
React.createElement("div", null,
React.createElement(Label, null, "small"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "sm", prefix: React.createElement(SuccessOutline, null), variant: "minimal" }))),
React.createElement("div", null,
React.createElement(Label, null, "xsmall"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "xs", prefix: React.createElement(SuccessOutline, null), variant: "minimal" }))),
React.createElement("div", null,
React.createElement(Heading, null, "Filled + Circular")),
React.createElement("div", null,
React.createElement(Label, null, "large"),
React.createElement(Button, { size: "lg", prefix: React.createElement(SuccessOutline, null), circular: true })),
React.createElement("div", null,
React.createElement(Label, null, "Medium"),
React.createElement(Button, { size: "md", prefix: React.createElement(SuccessOutline, null), circular: true })),
React.createElement("div", null,
React.createElement(Label, null, "small"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "sm", prefix: React.createElement(SuccessOutline, null), circular: true }))),
React.createElement("div", null,
React.createElement(Label, null, "xsmall"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "xs", prefix: React.createElement(SuccessOutline, null), circular: true }))),
React.createElement("div", null,
React.createElement(Heading, null, "Outline + Circular")),
React.createElement("div", null,
React.createElement(Label, null, "large"),
React.createElement(Button, { size: "lg", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "outline" })),
React.createElement("div", null,
React.createElement(Label, null, "Medium"),
React.createElement(Button, { size: "md", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "outline" })),
React.createElement("div", null,
React.createElement(Label, null, "small"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "sm", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "outline" }))),
React.createElement("div", null,
React.createElement(Label, null, "xsmall"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "xs", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "outline" }))),
React.createElement("div", null,
React.createElement(Heading, null, "Minimal + Circular")),
React.createElement("div", null,
React.createElement(Label, null, "large"),
React.createElement(Button, { size: "lg", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "minimal" })),
React.createElement("div", null,
React.createElement(Label, null, "Medium"),
React.createElement(Button, { size: "md", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "minimal" })),
React.createElement("div", null,
React.createElement(Label, null, "small"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "sm", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "minimal" }))),
React.createElement("div", null,
React.createElement(Label, null, "xsmall"),
React.createElement(ShowHitbox, null,
React.createElement(Button, { size: "xs", prefix: React.createElement(SuccessOutline, null), circular: true, variant: "minimal" }))))))))
.add('Reverse | Filled', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledReverseStory, null,
React.createElement(Typography, { as: "h2", weight: 'bold' }, "Filled Buttons"),
React.createElement(Heading, null, "Large Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "lg" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "lg" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "lg", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Medium Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "md" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "md" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 112px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "md", minWidth: "7rem" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "md", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 80 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "sm" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "sm" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "sm", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "x-Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 64 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "xs" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "xs" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, size: "xs", prefix: React.createElement(Cut, null) }, "CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "hit area")),
React.createElement("div", null,
React.createElement(ShowHitbox, null,
React.createElement(Button, { reverse: true, size: "xs", onClick: action('onClick!') }, "CTA")))),
React.createElement(Heading, null, "Button States"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "default")),
React.createElement("div", null,
React.createElement(Button, { reverse: true }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "pressed")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, forceActive: true }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "focused")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, forceFocus: true }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "disabled")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, disabled: true }, "CTA"))),
React.createElement(Heading, null, "Block Buttons"),
React.createElement(BlockBox, null,
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Button, { reverse: true, block: true }, "CTA")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, block: true, disabled: true }, "CTA"))))))))
.add('Reverse | Outline', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledReverseStory, null,
React.createElement(Typography, { as: "h2", weight: 'bold' }, "Outline Buttons"),
React.createElement(Heading, null, "Large Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "lg" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "lg" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "lg", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Medium Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "md" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "md" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 112px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "md", minWidth: "7rem" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "md", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 80 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "sm" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "sm" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "sm", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "x-Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 64 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "xs" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "xs" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "xs", prefix: React.createElement(Cut, null) }, "CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "hit area")),
React.createElement("div", null,
React.createElement(ShowHitbox, null,
React.createElement(Button, { reverse: true, variant: "outline", size: "xs", onClick: action('onClick!') }, "CTA")))),
React.createElement(Heading, null, "Button States"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "default")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "hover")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", forceHover: true }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "pressed")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", forceActive: true }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "focused")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", forceFocus: true }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "disabled")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", disabled: true }, "CTA"))),
React.createElement(Heading, null, "Block Buttons"),
React.createElement(BlockBox, null,
React.createElement("div", null,
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "md", block: true }, "CTA")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "outline", size: "md", block: true, disabled: true }, "CTA"))))))))
.add('Reverse | Minimal', () => (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledReverseStory, null,
React.createElement(Typography, { as: "h2", weight: 'bold' }, "Minimal Buttons"),
React.createElement(Heading, null, "Large Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "lg" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "lg" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "lg", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Medium Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 200 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "md" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "md" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 112px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "md", minWidth: "7rem" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "md", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 80 px")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "sm" }, "CTA")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "flex width")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "sm" }, "I'm a very long CTA Text")),
React.createElement("div", null,
React.createElement(ReverseLabel, null, "button with icon")),
React.createElement("div", null,
React.createElement(Button, { reverse: true, variant: "minimal", size: "sm", prefix: React.createElement(Cut, null) }, "CTA Text"))),
React.createElement(Heading, null, "x-Small Button"),
React.createElement("div", null,
React.createElement("div", null,
React.createElement(ReverseLabel, null, "min width - 64 px")),
React.createElement("div", null,
React.