From 136c3e91332ab33fc07bc46cb37cc92e797ccaf5 Mon Sep 17 00:00:00 2001
From: Jean-Marc Millet <jean-marc.millet@scality.com>
Date: Wed, 3 Apr 2024 15:17:07 +0200
Subject: [PATCH] add an enable option story

---
 .../checkbox/Checkbox.component.tsx           |  4 +-
 stories/Checkbox/checkbox.guideline.mdx       |  6 ++-
 stories/Checkbox/checkbox.stories.tsx         | 45 ++++++++++++++++---
 3 files changed, 48 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/checkbox/Checkbox.component.tsx b/src/lib/components/checkbox/Checkbox.component.tsx
index af6ead5572..1e1df4e30f 100644
--- 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
index 2ef30922b3..73fd989554 100644
--- 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
index 02fda0517b..4d54dd4130 100644
--- 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 }
 > = {