feat: mixed button

italia · Dec 4, 2023 · 622aef9 · 622aef9
1 parent 53278bd
commit 622aef9
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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>
 );
+