From 622aef9346ed2ca6f5ed27ae2e04ff33566a6f29 Mon Sep 17 00:00:00 2001
From: sabato-galasso <sabatogalasso90@gmail.com>
Date: Mon, 4 Dec 2023 16:26:39 +0100
Subject: [PATCH] feat: mixed button

---
 src/Input/Input.tsx               | 17 ++++++++++++++++
 stories/Form/Checkbox.stories.mdx |  2 +-
 stories/Form/Checkbox.stories.tsx | 34 ++++++++++++++++++++-----------
 3 files changed, 40 insertions(+), 13 deletions(-)

diff --git a/src/Input/Input.tsx b/src/Input/Input.tsx
index 16b80a65..d7acfb85 100644
--- a/src/Input/Input.tsx
+++ b/src/Input/Input.tsx
@@ -204,6 +204,8 @@ export const Input = ({
 
   const inputPassword = extraAttributes.type === 'password';
 
+  const indeterminateCheckboxInput = type === 'checkbox' && className?.includes('semi-checked')
+
   // Styling
   const { activeClass, infoTextClass, inputClasses, wrapperClass } = getClasses(
     className,
@@ -273,6 +275,21 @@ export const Input = ({
     );
   }
 
+  if (indeterminateCheckboxInput) {
+    return (
+      <InputContainer {...containerProps}>
+        <Tag
+          {...rest}
+          {...extraAttributes}
+          {...sharedAttributes}
+          className={inputClasses}
+          data-testid={testId}
+          indeterminate={'true'}
+        />
+      </InputContainer>
+    );
+  }
+
   if (inputPassword) {
     return (
       <InputContainer {...containerProps}>
diff --git a/stories/Form/Checkbox.stories.mdx b/stories/Form/Checkbox.stories.mdx
index b42f7531..44d790b8 100644
--- a/stories/Form/Checkbox.stories.mdx
+++ b/stories/Form/Checkbox.stories.mdx
@@ -40,5 +40,5 @@ Per poter raggruppare gli elementi checkbox occorrerà aggiungere al componente
 Per ottenere uno stato di tipo Mixed basterà aggiungere la classe `.semi-checked` al componente Input.
 
 <Canvas>
-  <Story id='componenti-form-checkbox--checkbox-mixed' />
+  <Story id='componenti-form-checkbox--checkbox-mixed-button' />
 </Canvas>
diff --git a/stories/Form/Checkbox.stories.tsx b/stories/Form/Checkbox.stories.tsx
index 862fd685..5eac95da 100644
--- a/stories/Form/Checkbox.stories.tsx
+++ b/stories/Form/Checkbox.stories.tsx
@@ -139,16 +139,26 @@ export const CheckboxGruppi = () => (
   </section>
 );
 
-export const CheckboxMixed = () => (
-  <Form className='m-3'>
-    <fieldset>
-      <legend>Checkbox</legend>
-      <FormGroup check>
-        <Input id='mixed-checkbox1' type='checkbox' className='semi-checked' />
-        <Label for='mixed-checkbox1' check>
-          Checkbox di esempio
-        </Label>
-      </FormGroup>
-    </fieldset>
-  </Form>
+export const CheckboxMixedButton = () => (
+  <section>
+    <Row className='m-5'>
+          <Col sm="12">
+            <fieldset>
+              <legend>Checkbox</legend>
+              <Form className='m-3'>
+              <FormGroup check inline>
+              <Input
+                id='checkbox3'
+                type='checkbox'
+                defaultChecked
+                className="semi-checked"
+                label="Mixed button attivo"
+              />
+            </FormGroup>
+              </Form>
+            </fieldset>
+          </Col>
+    </Row>
+  </section>
 );
+