CONTROLS panel ⇒ dynamically change component ⇒ stress test & find edge cases
Designers to visualize changes of props
args & argTypes
// Component.stories.tsx
/* META LEVEL */
export default {
title: 'Component/Chips',
component: Chips,
args: {
label: 'Hello world'
user: { // storybook will merge meta with single args
name: 'Alice',
age: 30
}
},
argTypes: {
backgroundColor: { control: 'color' }, // if have backgroundColor arg => use a control type 'color'
},
} as ComponentMeta<typeof Chips>; // Meta component level => applied to each stories
/* SINGLE STORY */
export const Small = Template.bind({});
Small.args = {
size: 'small',
label: 'Button',
};
Small.argTypes = {
backgroundColor: {
control: 'inline-radio', // radio selection in CONTROL panel with 3 options
options: ['red', 'green', 'blue']
}
}
ACTIONS panel ⇒ Interactions to the component get logged in this panel
INTERACTIONS panel ⇒ Jest test-runner