lucid-ui
Version:
A UI component library from Xandr.
56 lines • 2.27 kB
JavaScript
import React, { useState } from 'react';
import createClass from 'create-react-class';
import RadioButton from './RadioButton';
export default {
title: 'Controls/RadioButton',
component: RadioButton,
parameters: {
docs: {
description: {
component: RadioButton.peek.description,
},
},
},
};
/* Interactive */
export const Interactive = (args) => {
const style = {
listStyleType: 'none',
display: 'flex',
alignItems: 'center',
};
const [selected, setSelected] = useState(false);
const handleSelected = (value) => {
setSelected(!value);
};
return (React.createElement("ul", null,
React.createElement("li", { style: style },
React.createElement("label", null, "Enabled"),
React.createElement(RadioButton, { ...args, isSelected: selected, name: 'interactive-radio-buttons', onSelect: () => handleSelected(selected), tabIndex: 20 }))));
};
/* States */
export const States = (args) => {
const style = {
display: 'flex',
alignItems: 'center',
};
const Component = createClass({
render() {
return (React.createElement("ul", null,
React.createElement("li", { style: style },
React.createElement("label", null, "Unselected"),
React.createElement(RadioButton, { ...args, tabIndex: 20 })),
React.createElement("li", { style: style },
React.createElement("label", null, "Selected"),
React.createElement(RadioButton, { ...args, isSelected: true, tabIndex: 21 })),
React.createElement("li", { style: style },
React.createElement("label", null, "Disabled"),
React.createElement(RadioButton, { ...args, isDisabled: true, tabIndex: 22 })),
React.createElement("li", { style: style },
React.createElement("label", null, "Disabled & selected"),
React.createElement(RadioButton, { ...args, isDisabled: true, isSelected: true, tabIndex: 23 }))));
},
});
return React.createElement(Component, null);
};
//# sourceMappingURL=RadioButton.stories.js.map