aboutsummaryrefslogtreecommitdiffstats
path: root/stories/react/Checklist.stories.js
diff options
context:
space:
mode:
Diffstat (limited to 'stories/react/Checklist.stories.js')
-rw-r--r--stories/react/Checklist.stories.js65
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