Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 | 1x 8x 8x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x | import React, { useState } from 'react'; import { Meta, Story } from '@storybook/react'; import CheckboxLabeled, { ICheckboxLabeledProps } from './CheckboxLabeled'; export default { title: 'Controls/CheckboxLabeled', component: CheckboxLabeled, subcomponents: { 'CheckboxLabeled.Label': CheckboxLabeled.Label }, parameters: { docs: { description: { component: CheckboxLabeled.peek.description, }, }, }, } as Meta; const Template: Story<ICheckboxLabeledProps> = (args) => { const [selected, setSelected] = useState(args.isSelected || false); return ( <CheckboxLabeled {...args} isSelected={selected} onSelect={() => setSelected(!selected)} /> ); }; export const Basic: Story<ICheckboxLabeledProps> = Template.bind({}); Basic.args = { title: 'Default', Label: 'Default', }; export const Disabled: Story<ICheckboxLabeledProps> = Template.bind({}); Disabled.args = { title: 'Disabled', Label: 'Disabled', isDisabled: true, }; export const Selected: Story<ICheckboxLabeledProps> = Template.bind({}); Selected.args = { title: 'Selected', Label: 'Selected', isSelected: true, }; export const DisabledSelected: Story<ICheckboxLabeledProps> = Template.bind({}); DisabledSelected.args = { title: 'Disabled Selected', Label: 'Disabled Selected', isDisabled: true, isSelected: true, }; export const LabelAsProp: Story<ICheckboxLabeledProps> = Template.bind({}); LabelAsProp.args = { Label: 'Label as prop', title: 'Label as prop', }; export const HTMLElement: Story<ICheckboxLabeledProps> = Template.bind({}); HTMLElement.args = { Label: <span>HTML element</span>, title: 'HTML element', }; export const TextInAnArray: Story<ICheckboxLabeledProps> = 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: Story<ICheckboxLabeledProps> = Template.bind( {} ); HTMLElementInAnArray.args = { Label: [ <span key='1'>HTML element in an array</span>, <span key='2'>Again only the first value in the array is used</span>, <span key='3'>The rest should not be rendered</span>, ] as any, title: 'HTML element in an array', }; export const LabelAsChild: Story<ICheckboxLabeledProps> = (args) => { const [selected, setSelected] = useState(args.isSelected || false); return ( <CheckboxLabeled {...args} isSelected={selected} onSelect={() => setSelected(!selected)} > <CheckboxLabeled.Label> <span>HTML element as Child</span> </CheckboxLabeled.Label> </CheckboxLabeled> ); }; LabelAsChild.args = { title: 'Label as Child', }; |