lucid-ui
Version:
A UI component library from Xandr.
63 lines • 3.18 kB
JavaScript
import React from 'react';
import SplitButton from './SplitButton';
export default {
title: 'Controls/SplitButton',
component: SplitButton,
parameters: {
docs: {
description: {
component: SplitButton.peek.description,
},
},
},
args: SplitButton.defaultProps,
};
/* Basic */
export const Basic = (args) => {
const style = { marginRight: '20px', height: 100 };
return (React.createElement("section", null,
React.createElement(SplitButton, { ...args, style: style },
React.createElement(SplitButton.Button, null, "Basic"),
React.createElement(SplitButton.Button, null, "One"),
React.createElement(SplitButton.Button, null, "Two")),
React.createElement(SplitButton, { ...args, kind: 'primary', style: style },
React.createElement(SplitButton.Button, null, "Primary"),
React.createElement(SplitButton.Button, null, "One"),
React.createElement(SplitButton.Button, null, "Two"))));
};
/* Disabled */
export const Disabled = (args) => {
return (React.createElement("section", { style: { height: 100 } },
React.createElement(SplitButton, { ...args },
React.createElement(SplitButton.Button, { isDisabled: true }, "Save"),
React.createElement(SplitButton.Button, { isDisabled: true }, "This action should be disabled"),
React.createElement(SplitButton.Button, null, "This one should be enabled"),
React.createElement(SplitButton.Button, { isDisabled: true }, "This should be disabled, too"))));
};
/* Up */
export const Up = (args) => {
return (React.createElement("section", { style: { height: 100 } },
React.createElement(SplitButton, { ...args, direction: 'up', kind: 'primary' },
React.createElement(SplitButton.Button, null, "Save"),
React.createElement(SplitButton.Button, null, "Action 01"),
React.createElement(SplitButton.Button, null, "Here's Another Action"),
React.createElement(SplitButton.Button, null, "And Another Action"))));
};
/* Sizes */
export const Sizes = (args) => {
const style = { marginRight: '20px', height: 100 };
return (React.createElement("section", null,
React.createElement(SplitButton, { ...args, size: 'large', style: style },
React.createElement(SplitButton.Button, null, "Large"),
React.createElement(SplitButton.Button, null, "One"),
React.createElement(SplitButton.Button, null, "Two")),
React.createElement(SplitButton, { ...args, size: 'small', style: style },
React.createElement(SplitButton.Button, null, "Small"),
React.createElement(SplitButton.Button, null, "One"),
React.createElement(SplitButton.Button, null, "Two")),
React.createElement(SplitButton, { ...args, size: 'short', style: style },
React.createElement(SplitButton.Button, null, "Short"),
React.createElement(SplitButton.Button, null, "One"),
React.createElement(SplitButton.Button, null, "Two"))));
};
//# sourceMappingURL=SplitButton.stories.js.map