feat(choice-cards): radio and checkbox variants

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

@@ -0,0 +1,34 @@
+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',
+    active: false
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg']
+    },
+    text: {
+      control: { type: 'text' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    },
+    description: {
+      control: { type: 'text' }
+    },
+    active: {
+      control: { type: 'boolean' }
+    }
+  }
+};

components/Molecules/ChoiceCards/Checkbox/CheckboxChoiceCard.twig

@@ -0,0 +1,15 @@
+{% set choiceCardClasses = 'ChoiceCard ChoiceCard--' ~ size %}
+{% if active %}
+	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--active' %}
+{% endif %}
+{% if disabled %}
+	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--disabled' %}
+{% endif %}
+
+<div class="{{ choiceCardClasses }}">
+	{% include '../../Form/Checkbox.twig' with { label: text } %}
+
+	{% 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,34 @@
+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',
+    active: false
+  },
+  argTypes: {
+    size: {
+      control: { type: 'select' },
+      options: ['sm', 'lg']
+    },
+    text: {
+      control: { type: 'text' }
+    },
+    disabled: {
+      control: { type: 'boolean' }
+    },
+    description: {
+      control: { type: 'text' }
+    },
+    active: {
+      control: { type: 'boolean' }
+    }
+  }
+};

components/Molecules/ChoiceCards/Radio/RadioChoiceCard.twig

@@ -0,0 +1,15 @@
+{% set choiceCardClasses = 'ChoiceCard ChoiceCard--' ~ size %}
+{% if active %}
+	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--active' %}
+{% endif %}
+{% if disabled %}
+	{% set choiceCardClasses = choiceCardClasses ~ ' ChoiceCard--disabled' %}
+{% endif %}
+
+<div class="{{ choiceCardClasses }}">
+	{% include '../../Form/Radio.twig' with { label: text } %}
+
+	{% 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);
+    }
+  }
+}