lucid-ui
Version:
A UI component library from Xandr.
45 lines • 1.82 kB
JavaScript
import _ from 'lodash';
import React from 'react';
import CheckIcon from '../Icon/CheckIcon/CheckIcon';
import { Button } from './Button';
const kinds = [undefined, 'primary', 'link', 'danger', 'invisible'];
const sizes = [undefined, 'small', 'short', 'large'];
export default {
title: 'Controls/Button',
component: Button,
parameters: {
docs: {
description: {
component: Button.peek.description,
},
inlineStories: true,
},
},
};
export const Basic = (args) => React.createElement(Button, { ...args }, "Button");
export const AllTypes = () => (React.createElement("div", { style: {
display: 'grid',
gridGap: '10px',
gridTemplateColumns: `repeat(${kinds.length}, auto)`,
justifyItems: 'start',
alignItems: 'center',
gridAutoFlow: 'column',
} }, _.map(sizes, (size, sizeIndex) => _.map(kinds, (kind) => (React.createElement(React.Fragment, { key: `${size}-${kind}` },
React.createElement(Button, { style: { gridColumn: sizeIndex + 1 }, size: size, kind: kind },
size ? size : 'standard',
" ",
kind),
React.createElement(Button, { style: { gridColumn: sizeIndex + 1 }, size: size, kind: kind },
React.createElement(CheckIcon, null),
size ? size : 'standard',
" ",
kind),
React.createElement(Button, { isDisabled: true, style: { gridColumn: sizeIndex + 1 }, size: size, kind: kind },
React.createElement(CheckIcon, null),
"disabled ",
size ? size : 'standard',
" ",
kind),
React.createElement(Button, { style: { gridColumn: sizeIndex + 1 }, size: size, kind: kind, hasOnlyIcon: true },
React.createElement(CheckIcon, null))))))));
//# sourceMappingURL=Button.stories.js.map