lucid-ui
Version:
A UI component library from Xandr.
80 lines • 2.62 kB
JavaScript
import React, { useState } from 'react';
import CheckboxLabeled from './CheckboxLabeled';
export default {
title: 'Controls/CheckboxLabeled',
component: CheckboxLabeled,
subcomponents: { 'CheckboxLabeled.Label': CheckboxLabeled.Label },
parameters: {
docs: {
description: {
component: CheckboxLabeled.peek.description,
},
},
},
};
const Template = (args) => {
const [selected, setSelected] = useState(args.isSelected || false);
return (React.createElement(CheckboxLabeled, { ...args, isSelected: selected, onSelect: () => setSelected(!selected) }));
};
export const Basic = Template.bind({});
Basic.args = {
title: 'Default',
Label: 'Default',
};
export const Disabled = Template.bind({});
Disabled.args = {
title: 'Disabled',
Label: 'Disabled',
isDisabled: true,
};
export const Selected = Template.bind({});
Selected.args = {
title: 'Selected',
Label: 'Selected',
isSelected: true,
};
export const DisabledSelected = Template.bind({});
DisabledSelected.args = {
title: 'Disabled Selected',
Label: 'Disabled Selected',
isDisabled: true,
isSelected: true,
};
export const LabelAsProp = Template.bind({});
LabelAsProp.args = {
Label: 'Label as prop',
title: 'Label as prop',
};
export const HTMLElement = Template.bind({});
HTMLElement.args = {
Label: React.createElement("span", null, "HTML element"),
title: 'HTML element',
};
export const TextInAnArray = Template.bind({});
TextInAnArray.args = {
Label: [
'Text in an array',
'Only the first value in the array is used',
'The rest of these should be ignored',
],
title: 'Text in an array',
};
export const HTMLElementInAnArray = Template.bind({});
HTMLElementInAnArray.args = {
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"),
],
title: 'HTML element in an array',
};
export const LabelAsChild = (args) => {
const [selected, setSelected] = useState(args.isSelected || false);
return (React.createElement(CheckboxLabeled, { ...args, isSelected: selected, onSelect: () => setSelected(!selected) },
React.createElement(CheckboxLabeled.Label, null,
React.createElement("span", null, "HTML element as Child"))));
};
LabelAsChild.args = {
title: 'Label as Child',
};
//# sourceMappingURL=CheckboxLabeled.stories.js.map