feat(choice-cards): radio and checkbox variants

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

@@ -0,0 +1,32 @@
+import CheckBoxChoiceCard from './CheckboxChoiceCard.twig';
+
+export default {
+  title: 'Design System/Molecules/ChoiceCards/CheckboxChoiceCard'
+};
+
+export const base = {
+  render: (args) => CheckBoxChoiceCard(args),
+  args: {
+    text: 'Label',
+    size: 'sm',
+    disabled: false,
+    description: 'ici une courte description',
+    name: 'checkbox',
+    checked: false
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg']
+    },
+    text: {
+      control: { type: 'text' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    },
+    description: {
+      control: { type: 'text' }
+    }
+  }
+};

components/Molecules/ChoiceCards/Checkbox/CheckboxChoiceCard.twig

@@ -0,0 +1,15 @@
+{% set choiceCardClasses = 'ChoiceCard ChoiceCard--' ~ size %}
+{% 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, name: name, disabled: disabled, checked: checked, classes: "inChoiceCard" } %}
+
+	{% if description and size == "lg" %}
+		<p class="ChoiceCard-description paragraph-4">{{ description }}</p>
+	{% endif %}
+</div>

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

@@ -0,0 +1,32 @@
+import RadioChoiceCard from './RadioChoiceCard.twig';
+
+export default {
+  title: 'Design System/Molecules/ChoiceCards/RadioChoiceCard'
+};
+
+export const base = {
+  render: (args) => RadioChoiceCard(args),
+  args: {
+    text: 'Label',
+    size: 'sm',
+    disabled: false,
+    description: 'ici une courte description',
+    name: 'radio',
+    checked: false
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg']
+    },
+    text: {
+      control: { type: 'text' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    },
+    description: {
+      control: { type: 'text' }
+    }
+  }
+};

components/Molecules/ChoiceCards/Radio/RadioChoiceCard.twig

@@ -0,0 +1,15 @@
+{% set choiceCardClasses = 'ChoiceCard ChoiceCard--' ~ size %}
+{% 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, name: name, disabled: disabled, checked: checked, classes: "inChoiceCard" } %}
+
+	{% if description and size == "lg" %}
+		<p class="ChoiceCard-description paragraph-4">{{ description }}</p>
+	{% endif %}
+</div>

components/Molecules/ChoiceCards/choiceCard.css

@@ -36,3 +36,49 @@
     height: 22px;
   }
 }
+
+.ChoiceCard {
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px 16px 16px;
+  gap: 8px;
+  border-radius: 8px;
+  outline: 1px solid var(--grey);
+  width: max-content;
+
+  &-description {
+    margin-left: 25px;
+  }
+
+  &:hover {
+    background: var(--vermillon-lightest);
+    outline-color: var(--vermillon-medium);
+  }
+
+  &:focus-within {
+    outline: 2px solid var(--vermillon-medium);
+  }
+
+  &--active {
+    background: var(--vermillon-lighter);
+    outline-color: var(--vermillon-medium);
+
+    &:focus-within {
+      outline: 2px solid var(--vermillon);
+    }
+  }
+
+  &:disabled,
+  &[disabled],
+  &--disabled {
+    color: var(--grey-lighter);
+    outline-color: var(--grey-lighter);
+    background-color: var(--white);
+    cursor: not-allowed;
+
+    &:hover {
+      background-color: var(--white);
+      outline-color: var(--grey-lighter);
+    }
+  }
+}

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);
       }
     }
-  }
+  }
+}