feat(choice-cards): radio and checkbox focus

components/Molecules/ChoiceCards/Checkbox/CheckboxChoiceCard.stories.js

@@ -11,7 +11,8 @@ export const base = {
     size: 'sm',
     disabled: false,
     description: 'ici une courte description',
-    active: false
+    name: 'checkbox',
+    checked: false
   },
   argTypes: {
     size: {
@@ -26,9 +27,6 @@ export const base = {
     },
     description: {
       control: { type: 'text' }
-    },
-    active: {
-      control: { type: 'boolean' }
     }
   }
 };

components/Molecules/ChoiceCards/Checkbox/CheckboxChoiceCard.twig

@@ -1,13 +1,13 @@
 {% set choiceCardClasses = 'ChoiceCard ChoiceCard--' ~ size %}
-{% if active %}
+{% if checked %}
 	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--active' %}
 {% endif %}
 {% if disabled %}
 	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--disabled' %}
 {% endif %}
 
 <div class="{{ choiceCardClasses }}">
-	{% include '../../Form/Checkbox.twig' with { label: text } %}
+	{% include '../../Form/Checkbox.twig' with { label: text, name: name, disabled: disabled, checked: checked, classes: "inChoiceCard" } %}
 
 	{% if description and size == "lg" %}
 		<p class="ChoiceCard-description paragraph-4">{{ description }}</p>

components/Molecules/ChoiceCards/Radio/RadioChoiceCard.stories.js

@@ -11,7 +11,8 @@ export const base = {
     size: 'sm',
     disabled: false,
     description: 'ici une courte description',
-    active: false
+    name: 'radio',
+    checked: false
   },
   argTypes: {
     size: {
@@ -26,9 +27,6 @@ export const base = {
     },
     description: {
       control: { type: 'text' }
-    },
-    active: {
-      control: { type: 'boolean' }
     }
   }
 };

components/Molecules/ChoiceCards/Radio/RadioChoiceCard.twig

@@ -1,13 +1,13 @@
 {% set choiceCardClasses = 'ChoiceCard ChoiceCard--' ~ size %}
-{% if active %}
+{% if checked %}
 	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--active' %}
 {% endif %}
 {% if disabled %}
 	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--disabled' %}
 {% endif %}
 
 <div class="{{ choiceCardClasses }}">
-	{% include '../../Form/Radio.twig' with { label: text } %}
+	{% include '../../Form/Radio.twig' with { label: text, name: name, disabled: disabled, checked: checked, classes: "inChoiceCard" } %}
 
 	{% if description and size == "lg" %}
 		<p class="ChoiceCard-description paragraph-4">{{ description }}</p>

components/Molecules/Form/Checkbox.twig

@@ -1,5 +1,5 @@
 <label class="Checkbox {{ classes|default('') }} {{ error ? 'error'  : ''}}" for='{{ name }}'>
-	<input type="checkbox" name='{{ name }}' value='{{ value }}' {% if disabled %} disabled {% endif %} {% if checked %} checked {% endif %}>
+	<input type="checkbox" name='{{ name }}' {% if disabled %} disabled {% endif %} {% if checked %} checked {% endif %}>
 	<div class="flex items-center justify-center checkmark">
 		<span class="w-[16px] h-[16px] text-white">{{ source("/icons/check.svg") }}</span>
 	</div>

components/Molecules/Form/checkbox.css

@@ -1,124 +1,126 @@
-.Checkbox, .Radio {
-    display: flex;
-    align-items: center;
-    position: relative;
+.Checkbox,
+.Radio {
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 0.5rem;
+  --current-checkbox-color: var(--black);
+  --current-checkbox-hover: var(--grey-dark);
+  --current-checkbox-disabled: var(--grey-lighter);
+  --checkbox-focus: var(--vermillon);
+  &.error {
+    --current-checkbox-color: var(--error-dark);
+    --current-checkbox-hover: var(--error-darkest);
+    --checkbox-focus: var(--error);
+  }
+
+  &:not(.inChoiceCard) {
+    input:focus-visible ~ .checkmark {
+      outline: var(--checkbox-focus) solid 1px;
+      outline-offset: 1px;
+    }
+  }
+
+  input {
+    position: absolute;
+    opacity: 0;
     cursor: pointer;
-    gap: 0.5rem;
-    --current-checkbox-color: var(--black);
-    --current-checkbox-hover: var(--grey-dark);
-    --current-checkbox-disabled: var(--grey-lighter);
-    --checkbox-focus: var(--vermillon);
-    &.error {
-      --current-checkbox-color: var(--error-dark);
-      --current-checkbox-hover: var(--error-darkest);
-      --checkbox-focus: var(--error);
+    height: 0;
+    width: 0;
+  }
+  .checkmark {
+    width: 16px;
+    height: 16px;
+    background: var(--white);
+    border: 1px solid var(--current-checkbox-color);
+    border-radius: 2px;
+    position: relative;
+    span {
+      display: none;
     }
-    input {
-      position: absolute;
-      opacity: 0;
-      cursor: pointer;
-      height: 0;
-      width: 0;
-
-      &:focus-visible{
-        & ~ .checkmark {
-          outline: var(--checkbox-focus) solid 1px;
-          outline-offset: 1px;
-        }
-      }
+  }
+  input:disabled ~ .checkmark {
+    border: 1px solid var(--current-checkbox-disabled);
+  }
+
+  &:hover input:not(:disabled) {
+    & ~ .checkmark {
+      border: 1px solid var(--current-checkbox-hover);
     }
-    .checkmark {
-      width: 16px;
-      height: 16px;
-      background: var(--white);
-      border: 1px solid var(--current-checkbox-color);
-      border-radius: 2px;
-      position: relative;
-      span {
-        display: none;
+    &:indeterminate ~ .checkmark {
+      background-color: var(--grey-lightest);
+      &:after {
+        background: var(--current-checkbox-hover);
       }
     }
-    input:disabled  ~ .checkmark {
-      border: 1px solid var(--current-checkbox-disabled);
-    }
-
-    &:hover input:not(:disabled) {
-      & ~ .checkmark {
-        border: 1px solid var(--current-checkbox-hover);
-      }
-      &:indeterminate ~ .checkmark {
-        background-color: var(--grey-lightest);
+  }
+}
+
+.Checkbox {
+  input {
+    &:indeterminate {
+      ~ .checkmark {
         &:after {
-          background: var(--current-checkbox-hover);
+          content: '';
+          position: absolute;
+          width: 8px;
+          height: 2px;
+          left: 3px;
+          top: 6px;
+          background: var(--current-checkbox-color);
         }
       }
-    }
-  }
-
-  .Checkbox {
-    input {
-      &:indeterminate {
-        ~ .checkmark {
-          &:after {
-            content: "";
-            position: absolute;
-            width: 8px;
-            height: 2px;
-            left: 3px;
-            top: 6px;
-            background: var(--current-checkbox-color);
-          }
+      &:disabled {
+        & ~ .checkmark:after {
+          background: var(--current-checkbox-disabled);
         }
-        &:disabled {
-          & ~ .checkmark:after {
-            background: var(--current-checkbox-disabled);
-          }
+      }
+    }
+    &:checked {
+      & ~ .checkmark {
+        background-color: var(--current-checkbox-color);
+        span {
+          display: block;
         }
       }
-      &:checked {
+      &:disabled {
         & ~ .checkmark {
-          background-color: var(--current-checkbox-color);
-          span {
-            display: block;
-          }
+          background-color: var(--current-checkbox-disabled);
         }
-        &:disabled {
-          & ~ .checkmark {
-            background-color: var(--current-checkbox-disabled);
-          }
-        }
-      }
-    }
-    &:hover input:not(:disabled) {
-      &:checked ~ .checkmark {
-        background-color: var(--current-checkbox-hover);
       }
     }
   }
-
-  .Radio {
-    .checkmark {
-      border-radius: 555rem;
-      width: 14px;
-      height: 14px;
+  &:hover input:not(:disabled) {
+    &:checked ~ .checkmark {
+      background-color: var(--current-checkbox-hover);
     }
-    input {
-      &:checked {
-        & ~ .checkmark:after {
-          content: "";
-          position: absolute;
-          border-radius: 555rem;
-          top:2px;
-          bottom:2px;
-          left:2px;
-          right:2px;
-          background-color: var(--current-checkbox-color);
-        }
+  }
+}
+
+.Radio {
+  .checkmark {
+    border-radius: 555rem;
+    width: 14px;
+    height: 14px;
+  }
+  input {
+    &:checked {
+      & ~ .checkmark:after {
+        content: '';
+        position: absolute;
+        border-radius: 555rem;
+        top: 2px;
+        bottom: 2px;
+        left: 2px;
+        right: 2px;
+        background-color: var(--current-checkbox-color);
       }
-      &:disabled {
-        & ~ .checkmark:after {
-          background: var(--current-checkbox-disabled);
-        }
+    }
+    &:disabled {
+      & ~ .checkmark:after {
+        background: var(--current-checkbox-disabled);
       }
     }
-  }
+  }
+}