add an enable option story

scality · Apr 3, 2024 · 136c3e9 · 136c3e9
1 parent b02fcd3
commit 136c3e9
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 7 deletions.
diff --git a/src/lib/components/checkbox/Checkbox.component.tsx b/src/lib/components/checkbox/Checkbox.component.tsx
@@ -5,7 +5,7 @@ import { spacing, Stack } from '../../spacing';
 import { Text } from '../text/Text.component';
 import { FocusVisibleStyle } from '../buttonv2/Buttonv2.component';
 
-type Props = {
+export type Props = {
   label?: string;
   value?: string;
   checked?: boolean;
@@ -53,6 +53,8 @@ const StyledCheckbox = styled.label<{
     color: ${(props) => props.theme.textPrimary};
     vertical-align: middle;
     -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
     background: none;
     border: 0;
     outline: 0;

diff --git a/stories/Checkbox/checkbox.guideline.mdx b/stories/Checkbox/checkbox.guideline.mdx
@@ -19,11 +19,15 @@ Checkboxes are used to select one or more options in a list.
 
 ## Usage
 
+Unlike the radio element it is possible to select more than one option. \
 A tick/check indicates that the element is selected. \
-Unlike the radio element it is possible to select more than one option.
 
 <Canvas of={CheckboxStories.ChoiceCheckbox} layout="fullscreen" />
 
+It is possible to use the checkbox to enable or disable an option:
+
+<Canvas of={CheckboxStories.OptionCheckbox} layout="fullscreen" />
+
 ## State Variations
 
 ### Indeterminate State

diff --git a/stories/Checkbox/checkbox.stories.tsx b/stories/Checkbox/checkbox.stories.tsx
@@ -1,20 +1,39 @@
 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 {
+  Checkbox,
+  Props,
+} 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 { Box, Input, Table } from '../../src/lib/next';
+import { Form, FormGroup, FormSection } from '../../src/lib';
 
-type CheckboxStory = StoryObj<typeof Checkbox>;
+type CheckboxStory = StoryObj<Props>;
 
-const meta: Meta<typeof Checkbox> = {
+const meta: Meta<Props> = {
   title: 'Components/Inputs/Checkbox',
   component: Checkbox,
   args: {
     label: 'interested ?',
     onChange: action('Checkbox clicked'),
   },
+  argTypes: {
+    onChange: {
+      description:
+        'Function to be called when the checkbox is clicked, optional',
+    },
+    label: { control: 'text', description: 'Label of the checkbox, optional' },
+    checked: {
+      control: 'boolean',
+      description: 'Control if the checkbox is checked, optional',
+    },
+    disabled: {
+      control: 'boolean',
+      description: 'Control if the checkbox is disabled, optional',
+    },
+    value: { control: 'text' },
+  },
 };
 
 export default meta;
@@ -34,6 +53,22 @@ export const ChoiceCheckbox: CheckboxStory = {
   },
 };
 
+export const OptionCheckbox: CheckboxStory = {
+  render: () => {
+    return (
+      <Form layout={{ kind: 'tab' }}>
+        <FormSection>
+          <FormGroup
+            id="check"
+            label="Enable this option ?"
+            content={<Checkbox />}
+          ></FormGroup>
+        </FormSection>
+      </Form>
+    );
+  },
+};
+
 export const IndeterminateCheckbox: StoryObj<
   ComponentProps<typeof Checkbox> & { 'data-cy': string }
 > = {