lucid-ui
Version:
A UI component library from Xandr.
67 lines • 3.28 kB
JavaScript
import React, { useState } from 'react';
import _ from 'lodash';
import ButtonGroup from './ButtonGroup';
export default {
title: 'Controls/ButtonGroup',
component: ButtonGroup,
subcomponents: { 'ButtonGroup.Button': ButtonGroup.Button },
args: ButtonGroup.defaultProps,
parameters: {
docs: {
inlineStories: false,
description: {
component: ButtonGroup.peek.description,
},
},
},
};
export const Basic = (args) => {
const buttonStyle = { width: '100px' };
return (React.createElement(ButtonGroup, { ...args },
React.createElement(ButtonGroup.Button, { style: buttonStyle }, "Smol"),
React.createElement(ButtonGroup.Button, { style: buttonStyle }, "Lonnnnnnnng"),
React.createElement(ButtonGroup.Button, { style: buttonStyle }, "Medium")));
};
export const Stateful = (args) => {
const [selectedIndices, setSelectedIndices] = useState([]);
const handleSelect = (selectedIndex, { event, props }) => {
const currentIndices = selectedIndices;
// If the item does not exist in the original array add it, if it exists remove it.
setSelectedIndices(_.xor(currentIndices, [selectedIndex]));
};
return (React.createElement(ButtonGroup, { ...args, selectedIndices: selectedIndices, onSelect: handleSelect },
React.createElement(ButtonGroup.Button, null, "Zero"),
React.createElement(ButtonGroup.Button, null, "One"),
React.createElement(ButtonGroup.Button, null, "Two"),
React.createElement(ButtonGroup.Button, null, "Three")));
};
export const Stateless = (args) => {
return (React.createElement(ButtonGroup, { ...args, selectedIndices: [7, 8] },
React.createElement(ButtonGroup.Button, null, "Zero"),
React.createElement(ButtonGroup.Button, null, "One"),
React.createElement(ButtonGroup.Button, null, "Two"),
React.createElement(ButtonGroup.Button, null, "Three"),
React.createElement(ButtonGroup.Button, null, "Four"),
React.createElement(ButtonGroup.Button, { isDisabled: true }, "Five"),
React.createElement(ButtonGroup.Button, null, "Six"),
React.createElement(ButtonGroup.Button, null, "Seven"),
React.createElement(ButtonGroup.Button, null, "Eight"),
React.createElement(ButtonGroup.Button, null, "Nine")));
};
export const Disabled = (args) => {
const buttonStyle = { width: '100px' };
return (React.createElement(ButtonGroup, { ...args },
React.createElement(ButtonGroup.Button, { style: buttonStyle }, "Zero"),
React.createElement(ButtonGroup.Button, { isDisabled: true, style: buttonStyle }, "One"),
React.createElement(ButtonGroup.Button, { style: buttonStyle }, "Two"),
React.createElement(ButtonGroup.Button, { style: buttonStyle }, "Three")));
};
export const OnClick = (args) => {
const handleClick = (label) => {
alert(label);
};
return (React.createElement(ButtonGroup, { ...args },
React.createElement(ButtonGroup.Button, { onClick: () => handleClick('Zero') }, "Zero"),
React.createElement(ButtonGroup.Button, { onClick: () => handleClick('One') }, "One")));
};
//# sourceMappingURL=ButtonGroup.stories.js.map