lucid-ui
Version:
A UI component library from Xandr.
89 lines • 4.9 kB
JavaScript
import React, { useState } from 'react';
import RadioButtonLabeled from './RadioButtonLabeled';
export default {
title: 'Controls/RadioButtonLabeled',
component: RadioButtonLabeled,
parameters: {
docs: {
description: {
component: RadioButtonLabeled.peek.description,
},
},
},
args: RadioButtonLabeled.defaultProps,
};
/* Basic */
export const Basic = (args) => {
const style = {
marginBottom: '3px',
};
const [flavor, setFlavor] = useState('vanilla');
const handleSelectedFlavor = (flavor) => {
setFlavor(flavor);
};
return (React.createElement("section", null,
React.createElement("span", { style: {
display: 'inline-flex',
flexDirection: 'column',
alignItems: 'flex-start',
} },
React.createElement(RadioButtonLabeled, { ...args, isSelected: flavor === 'vanilla', name: 'interactive-radio-buttons', onSelect: () => handleSelectedFlavor('vanilla'), style: style },
React.createElement(RadioButtonLabeled.Label, null, "Vanilla")),
React.createElement(RadioButtonLabeled, { ...args, isSelected: flavor === 'chocolate', name: 'interactive-radio-buttons', onSelect: () => handleSelectedFlavor('chocolate'), style: style },
React.createElement(RadioButtonLabeled.Label, null, "Chocolate")),
React.createElement(RadioButtonLabeled, { ...args, isSelected: flavor === 'strawberry', name: 'interactive-radio-buttons', onSelect: () => handleSelectedFlavor('strawberry'), style: style },
React.createElement(RadioButtonLabeled.Label, null, "Strawberry")),
React.createElement(RadioButtonLabeled, { ...args, isSelected: flavor === 'saltedCaramel', name: 'interactive-radio-buttons', onSelect: () => handleSelectedFlavor('saltedCaramel'), style: style },
React.createElement(RadioButtonLabeled.Label, null, "Salted caramel")),
React.createElement(RadioButtonLabeled, { ...args, isSelected: flavor === 'mintChip', name: 'interactive-radio-buttons', onSelect: () => handleSelectedFlavor('mintChip'), style: style },
React.createElement(RadioButtonLabeled.Label, null, "Mint chocolate chip (the best)")))));
};
/* States */
export const States = (args) => {
const style = {
marginBottom: '3px',
marginRight: '13px',
};
return (React.createElement("section", null,
React.createElement(RadioButtonLabeled, { ...args, style: style },
React.createElement(RadioButtonLabeled.Label, null, "(default props)")),
React.createElement("section", { style: { display: 'flex' } },
React.createElement(RadioButtonLabeled, { ...args, isDisabled: true, style: style },
React.createElement(RadioButtonLabeled.Label, null, "Disabled")),
React.createElement(RadioButtonLabeled, { ...args, isSelected: true, style: style },
React.createElement(RadioButtonLabeled.Label, null, "Selected")),
React.createElement(RadioButtonLabeled, { ...args, isDisabled: true, isSelected: true, style: style },
React.createElement(RadioButtonLabeled.Label, null, "Disabled and Selected")))));
};
/* Label As Child */
export const LabelAsChild = (args) => {
const style = {
marginBottom: '3px',
};
return (React.createElement("section", null,
React.createElement(RadioButtonLabeled, { ...args, style: style },
React.createElement(RadioButtonLabeled.Label, null, "Just text")),
React.createElement(RadioButtonLabeled, { ...args, style: style },
React.createElement(RadioButtonLabeled.Label, null,
React.createElement("span", null, "HTML element")))));
};
/* Label As Prop */
export const LabelAsProp = (args) => {
const style = {
marginBottom: '3px',
};
return (React.createElement("section", null,
React.createElement(RadioButtonLabeled, { Label: 'Just text', style: style }),
React.createElement(RadioButtonLabeled, { Label: React.createElement("span", null, "HTML element"), style: style }),
React.createElement(RadioButtonLabeled, { Label: [
'Text in an array',
'Only the first value in the array is used',
'The rest of these should be ignored',
], style: style }),
React.createElement(RadioButtonLabeled, { Label: [
React.createElement("span", { key: '1' }, "HTML element in an array"),
React.createElement("span", { key: '2' }, "Again only the first value in the array is used"),
React.createElement("span", { key: '3' }, "The rest should not be rendered"),
], style: style })));
};
//# sourceMappingURL=RadioButtonLabeled.stories.js.map