58 lines
1.4 KiB
TypeScript
58 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
|
|
import { ComponentMeta, ComponentStory } from '@storybook/react';
|
|
|
|
import Checkbox from './Checkbox';
|
|
|
|
export default {
|
|
// Title inside navigation bar
|
|
title: 'Checkbox',
|
|
// Component to test
|
|
component: Checkbox,
|
|
// Clarifying the way how to process specific
|
|
// properties of your component and which values
|
|
// it can accept.
|
|
argTypes: {
|
|
checked: {
|
|
options: [true, false],
|
|
control: { type: 'radio' },
|
|
},
|
|
},
|
|
} as ComponentMeta<typeof Checkbox>;
|
|
|
|
/**
|
|
* This is a way to define a tempalte for your component.
|
|
*
|
|
* This template should cover all the states.
|
|
*
|
|
* In most cases you should just distruct args attribute
|
|
* on a returning component.
|
|
*/
|
|
const Template: ComponentStory<typeof Checkbox> = (args) => (
|
|
<Checkbox {...args} />
|
|
);
|
|
|
|
/* -------------------------------------------------------------------------- */
|
|
/* States of your component */
|
|
/* -------------------------------------------------------------------------- */
|
|
|
|
export const Unchecked = Template.bind({});
|
|
Unchecked.args = {
|
|
label: "On/off lights",
|
|
checked: false,
|
|
children: undefined,
|
|
}
|
|
export const Checked = Template.bind({});
|
|
Checked.args = {
|
|
children: "On/off lights",
|
|
checked: true,
|
|
label: undefined,
|
|
}
|
|
|
|
export const EitherLabelChildren = Template.bind({});
|
|
EitherLabelChildren.args = {
|
|
children: "On/off lights",
|
|
checked: true,
|
|
label: "Label!",
|
|
}
|
|
// GO Further
|