@retailmenot/anchor
Version:
A React UI Library by RetailMeNot
68 lines • 3.79 kB
JavaScript
// REACT
import * as React from 'react';
// STORYBOOK
import { storiesOf } from '@storybook/react';
import { boolean, color, number } from '@storybook/addon-knobs';
// VENDOR
import styled, { ThemeProvider } from '@xstyled/styled-components';
// COMPONENTS
import { Badge } from './Badge.component';
import { Cart } from '../Icon';
// README
import * as README from './README.md';
// THEME
import { RootTheme } from '../theme';
const StyledStory = styled('div') `
padding: 2rem 5rem;
background-color: primary.base;
color: white;
`;
const { useState } = React;
const StateBasedBadgeStoryDot = () => {
const [isHovered, setIsHovered] = useState(false);
const handleOnMouseEnter = () => {
setIsHovered(true);
};
const handleOnMouseLeave = () => {
setIsHovered(false);
};
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, { onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
React.createElement(Badge, { backgroundColor: color('Background Color', '') || undefined, borderColor: color('Border Color', '') || undefined, borderColorHover: color('Border Color on Hover', '') || undefined, count: number('Count', 1), isParentHovered: isHovered, offsetBottom: number('Offset Bottom in rems', 1.2), offsetLeft: number('Offset Left in rems', 0.9), showZero: boolean('Show Zero', false) },
React.createElement(Cart, { scale: "lg" })))));
};
const StateBasedBadgeStorySmall = () => {
const [isHovered, setIsHovered] = useState(false);
const handleOnMouseEnter = () => {
setIsHovered(true);
};
const handleOnMouseLeave = () => {
setIsHovered(false);
};
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, { onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
React.createElement(Badge, { backgroundColor: color('Background Color', '') || undefined, borderColor: color('Border Color', '') || undefined, borderColorHover: color('Border Color on Hover', '') || undefined, count: number('Count', 1), isParentHovered: isHovered, offsetBottom: number('Offset Bottom in rems', 1.1), offsetLeft: number('Offset Left in rems', 0.6), overflowCount: number('Overflow Count', 9), showZero: boolean('Show Zero', false), size: "small", textColor: color('Text Color', '') || undefined },
React.createElement(Cart, { scale: "lg" })))));
};
const StateBasedBadgeStoryLargeStandalone = () => {
const [isHovered, setIsHovered] = useState(false);
const handleOnMouseEnter = () => {
setIsHovered(true);
};
const handleOnMouseLeave = () => {
setIsHovered(false);
};
return (React.createElement(ThemeProvider, { theme: RootTheme },
React.createElement(StyledStory, { onMouseEnter: handleOnMouseEnter, onMouseLeave: handleOnMouseLeave },
React.createElement(Badge, { backgroundColor: color('Background Color', '') || undefined, borderColor: color('Border Color', '') || undefined, borderColorHover: color('Border Color on Hover', '') || undefined, count: number('Count', 1), isParentHovered: isHovered, overflowCount: number('Overflow Count', 9), showZero: boolean('Show Zero', false), size: "large", standalone: true, textColor: color('Text Color', '') || undefined }))));
};
storiesOf('Components/Badge', module)
.addParameters({
readme: {
sidebar: README,
},
})
.add('Dot', () => React.createElement(StateBasedBadgeStoryDot, null))
.add('Small', () => React.createElement(StateBasedBadgeStorySmall, null))
.add('Large Standalone', () => React.createElement(StateBasedBadgeStoryLargeStandalone, null));
//# sourceMappingURL=Badge.stories.js.map