feat(checkbox): add support for state in variant tile

1024pix · Jun 10, 2024 · 352ddaa · 352ddaa
1 parent feab1fd
commit 352ddaa
Show file tree

Hide file tree

Showing 6 changed files with 62 additions and 1 deletion.
diff --git a/addon/components/pix-checkbox.hbs b/addon/components/pix-checkbox.hbs
@@ -8,6 +8,7 @@
     @screenReaderOnly={{@screenReaderOnly}}
     @isDisabled={{this.isDisabled}}
     @variant={{@variant}}
+    @state={{@state}}
   >
     <:inputElement>
       <input

diff --git a/addon/components/pix-checkbox.js b/addon/components/pix-checkbox.js
@@ -19,6 +19,14 @@ export default class PixCheckbox extends Component {
       classes.push(`${classes[0]}--indeterminate`);
     }
 
+    if (this.args.state === 'success') {
+      classes.push(`${classes[0]}--state-success`);
+    }
+
+    if (this.args.state === 'error') {
+      classes.push(`${classes[0]}--state-error`);
+    }
+
     return classes.join(' ');
   }
 

diff --git a/addon/styles/_pix-checkbox.scss b/addon/styles/_pix-checkbox.scss
@@ -114,6 +114,18 @@
       &::before {
         display: none;
       }
+
+      &.pix-checkbox__input--state-success {
+        background: var(--pix-success-700);
+        border-color: var(--pix-success-700);
+        border-radius: 50%;
+      }
+
+      &.pix-checkbox__input--state-error {
+        background: var(--pix-error-700);
+        border-color: var(--pix-error-700);
+        border-radius: 50%;
+      }
     }
   }
 }
diff --git a/app/stories/pix-checkbox-variant-tile.mdx b/app/stories/pix-checkbox-variant-tile.mdx
@@ -23,6 +23,13 @@ Un cursor `not-allowed` est défini sur la checkbox et son label lorsqu'elle est
 <Story of={ComponentStories.checkedIsDisabledVariantTile} height={120} />
 <Story of={ComponentStories.isIndeterminateIsDisabledVariantTile} height={120} />
 
+#### Succès/Erreur
+
+Un champ de statut permet de préciser une coloration particulière en cas de "succès" ou d'"erreur".
+
+<Story of={ComponentStories.isDisabledIsSuccessVariantTile} height={120} />
+<Story of={ComponentStories.isDisabledIsErrorVariantTile} height={120} />
+
 ## Usage
 
 ```html

diff --git a/app/stories/pix-checkbox-variant-tile.stories.js b/app/stories/pix-checkbox-variant-tile.stories.js
@@ -11,6 +11,16 @@ export default {
       control: { type: 'select' },
       type: { required: true },
     },
+    state: {
+      name: 'state',
+      description: 'Si `isDisabled` permet de marquer la checkbox comme correcte ou incorrecte',
+      options: ['neutral', 'success', 'error'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'neutral' },
+      },
+    },
     ...pixCheckboxStories.argTypes,
   },
 };
@@ -26,6 +36,7 @@ const VariantTileTemplate = (args) => {
     @checked={{this.checked}}
     @isDisabled={{this.isDisabled}}
     @variant={{this.variant}}
+    @state={{this.state}}
   >
     <:label>{{this.label}}</:label>
   </PixCheckbox></div>`,
@@ -45,6 +56,7 @@ isDisabledVariantTile.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   variant: 'tile',
+  state: 'neutral',
   isDisabled: true,
 };
 
@@ -53,6 +65,7 @@ checkedIsDisabledVariantTile.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   variant: 'tile',
+  state: 'neutral',
   isDisabled: true,
   checked: true,
 };
@@ -62,7 +75,28 @@ isIndeterminateIsDisabledVariantTile.args = {
   id: 'accept-newsletter-2',
   label: 'Recevoir la newsletter',
   variant: 'tile',
+  state: 'neutral',
   isDisabled: true,
   checked: true,
   isIndeterminate: true,
 };
+
+export const isDisabledIsSuccessVariantTile = VariantTileTemplate.bind({});
+isDisabledIsSuccessVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+  state: 'success',
+};
+
+export const isDisabledIsErrorVariantTile = VariantTileTemplate.bind({});
+isDisabledIsErrorVariantTile.args = {
+  id: 'accept-newsletter-2',
+  label: 'Recevoir la newsletter',
+  variant: 'tile',
+  isDisabled: true,
+  checked: true,
+  state: 'error',
+};
diff --git a/app/stories/pix-checkbox.stories.js b/app/stories/pix-checkbox.stories.js
@@ -42,7 +42,6 @@ export default {
         defaultValue: { summary: false },
       },
     },
-
     label: {
       name: 'label',
       description: 'Le label du champ',