All files / CheckboxLabeled CheckboxLabeled.stories.tsx

92% Statements 23/25
100% Branches 4/4
50% Functions 2/4
92% Lines 23/25

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',
};