diff options
Diffstat (limited to 'stories/react/Checklist.stories.js')
-rw-r--r-- | stories/react/Checklist.stories.js | 65 |
1 files changed, 65 insertions, 0 deletions
diff --git a/stories/react/Checklist.stories.js b/stories/react/Checklist.stories.js new file mode 100644 index 0000000..0fd089b --- /dev/null +++ b/stories/react/Checklist.stories.js @@ -0,0 +1,65 @@ +import React from 'react'; +import Examples from './utils/Examples.js'; +import Checklist from '../../src/react/Checklist.js'; +import HTMLListChecked from '../../components/checklist/checklist-with-checked-items.html'; +import HTMLListDisabled from '../../components/checklist/checklist-with-disabled-items.html'; +const items = [ + { + label: 'apple', + value: 'apple', + dataTestId: 'apple', + checked: true + }, + { + label: 'banana', + value: 'banana', + dataTestId: 'banana', + checked: false + }, + { + label: 'orange', + value: 'orange', + dataTestId: 'orange', + checked: true + } +]; + +const itemsDisabled = [ + { + label: 'apple', + value: 'apple', + dataTestId: 'apple', + checked: true, + disabled: true + }, + { + label: 'banana', + value: 'banana', + dataTestId: 'banana', + checked: false, + disabled: true + }, + { + label: 'orange', + value: 'orange', + dataTestId: 'orange', + checked: false + } +]; + +let examples = { + Basic: { + jsx: <Checklist items={items} onChange={() => { }} />, + html: HTMLListChecked + }, + Disabled: { + jsx: <Checklist items={itemsDisabled} onChange={() => { }} />, + html: HTMLListDisabled + } +}; + +const ChecklistStory = () => ( + <Examples examples={examples} /> +); + +export default ChecklistStory;
\ No newline at end of file |