Checkbox story : add story and guideline for indeterminate state

scality · Apr 3, 2024 · 987235f · 987235f
1 parent e968159
commit 987235f
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 12 deletions.
diff --git a/stories/Checkbox/checkbox.guideline.mdx b/stories/Checkbox/checkbox.guideline.mdx
@@ -23,8 +23,6 @@ Checkboxes are used to select one or multiple options in a list.
 
 ### Padding
 
-### Checkbox spacing
-
 ## Usage
 
 <Canvas of={CheckboxStories.DefaultCheckbox} layout="fullscreen" />
@@ -45,11 +43,12 @@ layout="fullscreen"
 
 ### Indeterminate State
 
-Usecase ?
+Apart from checked and unchecked, checkboxes can have a third state : indeterminate.
+When a checkbox has children checkboxes, this state indicates that some of the children boxes are checked.
 
-<Canvas of={CheckboxStories.IndeterminateCheckbox} layout="fullscreen" />
+<Canvas of={CheckboxStories.IndeterminateUseCase} layout="fullscreen" />
 
 ### Playground
 
-<Canvas of={CheckboxStories.Playground} layout="fullscreen" />
-<Controls of={CheckboxStories.Playground} />
+<Canvas of={CheckboxStories.DefaultCheckbox} layout="fullscreen" />
+<Controls of={CheckboxStories.DefaultCheckbox} />
diff --git a/stories/Checkbox/checkbox.stories.tsx b/stories/Checkbox/checkbox.stories.tsx
@@ -1,8 +1,10 @@
-import React, { ComponentProps, useEffect, useRef } from 'react';
 import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import React, { ComponentProps, useEffect, useRef } from 'react';
 import { Checkbox } from '../../src/lib/components/checkbox/Checkbox.component';
+import { Column } from '../../src/lib/components/tablev2/Tablev2.component';
+import { Box, Table } from '../../src/lib/next';
 import { Wrapper } from '../common';
-import { Meta, StoryObj } from '@storybook/react';
 
 type CheckboxStory = StoryObj<typeof Checkbox>;
 
@@ -11,9 +13,7 @@ const meta: Meta<typeof Checkbox> = {
   component: Checkbox,
   decorators: [
     (story) => (
-      <Wrapper style={{ minHeight: '10vh', padding: '3rem' }}>
-        {story()}
-      </Wrapper>
+      <Wrapper style={{ minHeight: '5vh', padding: '2rem' }}>{story()}</Wrapper>
     ),
   ],
   args: {
@@ -82,4 +82,53 @@ export const DisabledUncheckedCheckbox: CheckboxStory = {
   },
 };
 
-export const Playground: CheckboxStory = {};
+export const IndeterminateUseCase = {
+  render: ({}) => {
+    const data = [
+      {
+        name: 'test 1',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test 2',
+        volume: 1,
+        capacity: '1Gi',
+      },
+      {
+        name: 'test 2',
+        volume: 1,
+        capacity: '1Gi',
+      },
+    ];
+
+    const columns: Column<(typeof data)[number]>[] = [
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+      {
+        Header: 'Volume',
+        accessor: 'volume',
+      },
+      {
+        Header: 'Capacity',
+        accessor: 'capacity',
+      },
+    ];
+
+    return (
+      <Wrapper>
+        <Box width="500px" height="200px">
+          <Table columns={columns} data={data} defaultSortingKey={'health'}>
+            <Table.MultiSelectableContent
+              onMultiSelectionChanged={(rows) => {
+                console.log('Table.MultiSelectableContent selected row', rows);
+              }}
+            />
+          </Table>
+        </Box>
+      </Wrapper>
+    );
+  },
+};