@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/tests/AmeliproIllustratedRadioGroup.spec.ts

@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproIllustratedRadioGroup from '../AmeliproIllustratedRadioGroup.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproIllustratedRadioGroup', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproIllustratedRadioGroup, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				groupLabel: 'Mon Label',
+				modelValue: [
+					{
+						icon: 'vaccination',
+						iconDefaultColor: 'ap-yellow',
+						isChecked: false,
+						label: '1',
+						value: 'Valeur 1',
+					},
+					{
+						icon: 'vaccination',
+						iconDefaultColor: 'ap-green',
+						isChecked: false,
+						label: '2',
+						value: 'Valeur 2',
+					},
+					{
+						icon: 'vaccination',
+						iconDefaultColor: 'ap-red',
+						isChecked: false,
+						label: '3',
+						value: 'Valeur 3',
+					},
+					{
+						icon: 'vaccination',
+						iconDefaultColor: 'ap-yellow',
+						isChecked: false,
+						label: '4',
+						value: 'Valeur 4',
+					},
+					{
+						icon: 'vaccination',
+						iconDefaultColor: 'ap-yellow',
+						isChecked: false,
+						label: '5',
+						value: 'Valeur 5',
+					},
+				],
+				uniqueId: 'illustrated-radio-group-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/tests/__snapshots__/AmeliproIllustratedRadioGroup.spec.ts.snap

@@ -0,0 +1,524 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproIllustratedRadioGroup > render correctly 1`] = `
+<div
+  class="amelipro-illustrated-radio-group"
+  id="illustrated-radio-group-id-container"
+>
+  <div>
+    <div
+      class="
+        align-center
+        amelipro-illustrated-radio-group__label-wrapper
+        d-flex
+        mr-2
+      "
+      id="illustrated-radio-group-id-label-group"
+    >
+      <p
+        class="
+          amelipro-illustrated-radio-group__label
+          d-inline-flex
+          mb-0
+        "
+        id="illustrated-radio-group-id"
+      >
+        Mon Label
+        <!-- v-if -->
+        <!-- v-if -->
+      </p>
+    </div>
+    <div
+      aria-labelledby="illustrated-radio-group-id"
+      aria-required="false"
+      class="
+        amelipro-illustrated-radio-group__group
+        mt-2
+      "
+      role="radiogroup"
+    >
+      <ul
+        class="
+          amelipro-illustrated-radio-group__list
+          d-flex
+          flex-wrap
+          list-style-none
+        "
+        id="illustrated-radio-group-id-list"
+      >
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="illustrated-radio-group-id-item-0"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="illustrated-radio-group-id-input-0"
+            id="illustrated-radio-group-id-label-0"
+          >
+            <input
+              aria-checked="false"
+              id="illustrated-radio-group-id-input-0"
+              name="illustrated-radio-group-id-name"
+              type="radio"
+              value="Valeur 1"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <span
+                  class="amelipro-icon"
+                  id="illustrated-radio-group-id-icon-0"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #F0B323; height: 40px; width: 40px;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 34 34;"
+                        viewBox="0 0 34 34"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <circle
+                          class="circle-color"
+                          cx="17"
+                          cy="17"
+                          r="17"
+                        />
+                        <g
+                          class="shape-color"
+                          transform="translate(0.262 0.371)"
+                        >
+                          <path d="M12.8,15.7H9.1C9,15,8.8,14.4,8.6,13.8c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l-4.2,0v1.5	c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-0.7h1.3v0.7c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0l0,0c0.2,0,0.4-0.2,0.4-0.4l0,0v-0.7 h1c0.5,1.1,0.5,2.3,0,3.4l-3.9,0v0.8l4.2,0l0,0c0.2,0,0.3-0.1,0.4-0.2c0.3-0.6,0.4-1.2,0.5-1.9h3.7c0.2,0,0.4-0.2,0.4-0.4 C13.2,15.8,13,15.7,12.8,15.7L12.8,15.7z" />
+                          <path d="M17.2,13c-1.9,0.8-2.8,2.5-2.8,5.5l0,11h3.4l0.2-7.9h0.9v7.9c1.6-0.4,3.1-1,4.5-1.9 c1.2-0.7,2.2-1.6,3.1-2.6v-1.5c-0.4,0.2-0.8,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.4-0.4l-6-4.2c-1.1-0.7-1.5-2.1-0.8-3.2 c0.7-1.1,2.1-1.5,3.2-0.8c0,0,0.1,0,0.1,0.1l3.4,2l0.5-1.3l0.8,0.4l-0.8,2.3L20,16c-0.6-0.5-1.5-0.3-2,0.3c0,0-0.1,0.1-0.1,0.1 c-0.4,0.6-0.3,1.5,0.4,1.9c0,0,0.1,0.1,0.1,0.1l5.8,4.1c0.8,0.6,1.9,0.5,2.5-0.3c0.1-0.1,0.1-0.2,0.2-0.3c0,0,1.6-3.7,1.9-4.8 c0.6-2.2-0.8-4.5-3.9-4.5h-2.1c-0.9,0.7-2,1.1-3.1,1.1C18.7,13.6,17.9,13.4,17.2,13z" />
+                          <path d="M19.5,12.8c2.4,0,4.4-2,4.4-4.4S22,4,19.5,4s-4.4,2-4.4,4.4v0 C15.1,10.8,17.1,12.8,19.5,12.8z" />
+                        </g>
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="illustrated-radio-group-id-label-text-0"
+                >
+                  1
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="illustrated-radio-group-id-item-1"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="illustrated-radio-group-id-input-1"
+            id="illustrated-radio-group-id-label-1"
+          >
+            <input
+              aria-checked="false"
+              id="illustrated-radio-group-id-input-1"
+              name="illustrated-radio-group-id-name"
+              type="radio"
+              value="Valeur 2"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <span
+                  class="amelipro-icon"
+                  id="illustrated-radio-group-id-icon-1"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #56C271; height: 40px; width: 40px;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 34 34;"
+                        viewBox="0 0 34 34"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <circle
+                          class="circle-color"
+                          cx="17"
+                          cy="17"
+                          r="17"
+                        />
+                        <g
+                          class="shape-color"
+                          transform="translate(0.262 0.371)"
+                        >
+                          <path d="M12.8,15.7H9.1C9,15,8.8,14.4,8.6,13.8c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l-4.2,0v1.5	c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-0.7h1.3v0.7c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0l0,0c0.2,0,0.4-0.2,0.4-0.4l0,0v-0.7 h1c0.5,1.1,0.5,2.3,0,3.4l-3.9,0v0.8l4.2,0l0,0c0.2,0,0.3-0.1,0.4-0.2c0.3-0.6,0.4-1.2,0.5-1.9h3.7c0.2,0,0.4-0.2,0.4-0.4 C13.2,15.8,13,15.7,12.8,15.7L12.8,15.7z" />
+                          <path d="M17.2,13c-1.9,0.8-2.8,2.5-2.8,5.5l0,11h3.4l0.2-7.9h0.9v7.9c1.6-0.4,3.1-1,4.5-1.9 c1.2-0.7,2.2-1.6,3.1-2.6v-1.5c-0.4,0.2-0.8,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.4-0.4l-6-4.2c-1.1-0.7-1.5-2.1-0.8-3.2 c0.7-1.1,2.1-1.5,3.2-0.8c0,0,0.1,0,0.1,0.1l3.4,2l0.5-1.3l0.8,0.4l-0.8,2.3L20,16c-0.6-0.5-1.5-0.3-2,0.3c0,0-0.1,0.1-0.1,0.1 c-0.4,0.6-0.3,1.5,0.4,1.9c0,0,0.1,0.1,0.1,0.1l5.8,4.1c0.8,0.6,1.9,0.5,2.5-0.3c0.1-0.1,0.1-0.2,0.2-0.3c0,0,1.6-3.7,1.9-4.8 c0.6-2.2-0.8-4.5-3.9-4.5h-2.1c-0.9,0.7-2,1.1-3.1,1.1C18.7,13.6,17.9,13.4,17.2,13z" />
+                          <path d="M19.5,12.8c2.4,0,4.4-2,4.4-4.4S22,4,19.5,4s-4.4,2-4.4,4.4v0 C15.1,10.8,17.1,12.8,19.5,12.8z" />
+                        </g>
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="illustrated-radio-group-id-label-text-1"
+                >
+                  2
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="illustrated-radio-group-id-item-2"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="illustrated-radio-group-id-input-2"
+            id="illustrated-radio-group-id-label-2"
+          >
+            <input
+              aria-checked="false"
+              id="illustrated-radio-group-id-input-2"
+              name="illustrated-radio-group-id-name"
+              type="radio"
+              value="Valeur 3"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <span
+                  class="amelipro-icon"
+                  id="illustrated-radio-group-id-icon-2"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #B33F2E; height: 40px; width: 40px;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 34 34;"
+                        viewBox="0 0 34 34"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <circle
+                          class="circle-color"
+                          cx="17"
+                          cy="17"
+                          r="17"
+                        />
+                        <g
+                          class="shape-color"
+                          transform="translate(0.262 0.371)"
+                        >
+                          <path d="M12.8,15.7H9.1C9,15,8.8,14.4,8.6,13.8c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l-4.2,0v1.5	c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-0.7h1.3v0.7c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0l0,0c0.2,0,0.4-0.2,0.4-0.4l0,0v-0.7 h1c0.5,1.1,0.5,2.3,0,3.4l-3.9,0v0.8l4.2,0l0,0c0.2,0,0.3-0.1,0.4-0.2c0.3-0.6,0.4-1.2,0.5-1.9h3.7c0.2,0,0.4-0.2,0.4-0.4 C13.2,15.8,13,15.7,12.8,15.7L12.8,15.7z" />
+                          <path d="M17.2,13c-1.9,0.8-2.8,2.5-2.8,5.5l0,11h3.4l0.2-7.9h0.9v7.9c1.6-0.4,3.1-1,4.5-1.9 c1.2-0.7,2.2-1.6,3.1-2.6v-1.5c-0.4,0.2-0.8,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.4-0.4l-6-4.2c-1.1-0.7-1.5-2.1-0.8-3.2 c0.7-1.1,2.1-1.5,3.2-0.8c0,0,0.1,0,0.1,0.1l3.4,2l0.5-1.3l0.8,0.4l-0.8,2.3L20,16c-0.6-0.5-1.5-0.3-2,0.3c0,0-0.1,0.1-0.1,0.1 c-0.4,0.6-0.3,1.5,0.4,1.9c0,0,0.1,0.1,0.1,0.1l5.8,4.1c0.8,0.6,1.9,0.5,2.5-0.3c0.1-0.1,0.1-0.2,0.2-0.3c0,0,1.6-3.7,1.9-4.8 c0.6-2.2-0.8-4.5-3.9-4.5h-2.1c-0.9,0.7-2,1.1-3.1,1.1C18.7,13.6,17.9,13.4,17.2,13z" />
+                          <path d="M19.5,12.8c2.4,0,4.4-2,4.4-4.4S22,4,19.5,4s-4.4,2-4.4,4.4v0 C15.1,10.8,17.1,12.8,19.5,12.8z" />
+                        </g>
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="illustrated-radio-group-id-label-text-2"
+                >
+                  3
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="illustrated-radio-group-id-item-3"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="illustrated-radio-group-id-input-3"
+            id="illustrated-radio-group-id-label-3"
+          >
+            <input
+              aria-checked="false"
+              id="illustrated-radio-group-id-input-3"
+              name="illustrated-radio-group-id-name"
+              type="radio"
+              value="Valeur 4"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <span
+                  class="amelipro-icon"
+                  id="illustrated-radio-group-id-icon-3"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #F0B323; height: 40px; width: 40px;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 34 34;"
+                        viewBox="0 0 34 34"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <circle
+                          class="circle-color"
+                          cx="17"
+                          cy="17"
+                          r="17"
+                        />
+                        <g
+                          class="shape-color"
+                          transform="translate(0.262 0.371)"
+                        >
+                          <path d="M12.8,15.7H9.1C9,15,8.8,14.4,8.6,13.8c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l-4.2,0v1.5	c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-0.7h1.3v0.7c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0l0,0c0.2,0,0.4-0.2,0.4-0.4l0,0v-0.7 h1c0.5,1.1,0.5,2.3,0,3.4l-3.9,0v0.8l4.2,0l0,0c0.2,0,0.3-0.1,0.4-0.2c0.3-0.6,0.4-1.2,0.5-1.9h3.7c0.2,0,0.4-0.2,0.4-0.4 C13.2,15.8,13,15.7,12.8,15.7L12.8,15.7z" />
+                          <path d="M17.2,13c-1.9,0.8-2.8,2.5-2.8,5.5l0,11h3.4l0.2-7.9h0.9v7.9c1.6-0.4,3.1-1,4.5-1.9 c1.2-0.7,2.2-1.6,3.1-2.6v-1.5c-0.4,0.2-0.8,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.4-0.4l-6-4.2c-1.1-0.7-1.5-2.1-0.8-3.2 c0.7-1.1,2.1-1.5,3.2-0.8c0,0,0.1,0,0.1,0.1l3.4,2l0.5-1.3l0.8,0.4l-0.8,2.3L20,16c-0.6-0.5-1.5-0.3-2,0.3c0,0-0.1,0.1-0.1,0.1 c-0.4,0.6-0.3,1.5,0.4,1.9c0,0,0.1,0.1,0.1,0.1l5.8,4.1c0.8,0.6,1.9,0.5,2.5-0.3c0.1-0.1,0.1-0.2,0.2-0.3c0,0,1.6-3.7,1.9-4.8 c0.6-2.2-0.8-4.5-3.9-4.5h-2.1c-0.9,0.7-2,1.1-3.1,1.1C18.7,13.6,17.9,13.4,17.2,13z" />
+                          <path d="M19.5,12.8c2.4,0,4.4-2,4.4-4.4S22,4,19.5,4s-4.4,2-4.4,4.4v0 C15.1,10.8,17.1,12.8,19.5,12.8z" />
+                        </g>
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="illustrated-radio-group-id-label-text-3"
+                >
+                  4
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+        <li
+          class="amelipro-illustrated-radio-group__item"
+          id="illustrated-radio-group-id-item-4"
+        >
+          <label
+            class="
+              align-center
+              amelipro-illustrated-radio-group__item__label
+              d-inline-flex
+              flex-row
+              mb-2
+              mr-2
+            "
+            for="illustrated-radio-group-id-input-4"
+            id="illustrated-radio-group-id-label-4"
+          >
+            <input
+              aria-checked="false"
+              id="illustrated-radio-group-id-input-4"
+              name="illustrated-radio-group-id-name"
+              type="radio"
+              value="Valeur 5"
+            />
+            <span class="
+              align-center
+              amelipro-illustrated-radio-group__item__label__content
+              d-flex
+              flex-column
+            ">
+              <span class="
+                align-center
+                bg-ap-blue-lighten-3
+                d-flex
+                flex-column
+                icon-radio__wrapper
+                pa-4
+              ">
+                <span
+                  class="amelipro-icon"
+                  id="illustrated-radio-group-id-icon-4"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="
+                      amelipro-custom-icon
+                      custom-color
+                    "
+                    focusable="false"
+                    role="img"
+                    style="color: #F0B323; height: 40px; width: 40px;"
+                  >
+                    <span>
+                      <svg
+                        aria-hidden="true"
+                        style="enable-background:new 0 0 34 34;"
+                        viewBox="0 0 34 34"
+                        x="0px"
+                        xml:space="preserve"
+                        xmlns="http://www.w3.org/2000/svg"
+                        xmlns:xlink="http://www.w3.org/1999/xlink"
+                        y="0px"
+                      >
+                        <circle
+                          class="circle-color"
+                          cx="17"
+                          cy="17"
+                          r="17"
+                        />
+                        <g
+                          class="shape-color"
+                          transform="translate(0.262 0.371)"
+                        >
+                          <path d="M12.8,15.7H9.1C9,15,8.8,14.4,8.6,13.8c-0.1-0.1-0.2-0.2-0.4-0.2l0,0l-4.2,0v1.5	c0,0.2,0.2,0.4,0.4,0.4c0.2,0,0.4-0.2,0.4-0.4v-0.7h1.3v0.7c0,0.2,0.2,0.4,0.4,0.4c0,0,0,0,0,0l0,0c0.2,0,0.4-0.2,0.4-0.4l0,0v-0.7 h1c0.5,1.1,0.5,2.3,0,3.4l-3.9,0v0.8l4.2,0l0,0c0.2,0,0.3-0.1,0.4-0.2c0.3-0.6,0.4-1.2,0.5-1.9h3.7c0.2,0,0.4-0.2,0.4-0.4 C13.2,15.8,13,15.7,12.8,15.7L12.8,15.7z" />
+                          <path d="M17.2,13c-1.9,0.8-2.8,2.5-2.8,5.5l0,11h3.4l0.2-7.9h0.9v7.9c1.6-0.4,3.1-1,4.5-1.9 c1.2-0.7,2.2-1.6,3.1-2.6v-1.5c-0.4,0.2-0.8,0.3-1.2,0.3c-0.5,0-0.9-0.1-1.4-0.4l-6-4.2c-1.1-0.7-1.5-2.1-0.8-3.2 c0.7-1.1,2.1-1.5,3.2-0.8c0,0,0.1,0,0.1,0.1l3.4,2l0.5-1.3l0.8,0.4l-0.8,2.3L20,16c-0.6-0.5-1.5-0.3-2,0.3c0,0-0.1,0.1-0.1,0.1 c-0.4,0.6-0.3,1.5,0.4,1.9c0,0,0.1,0.1,0.1,0.1l5.8,4.1c0.8,0.6,1.9,0.5,2.5-0.3c0.1-0.1,0.1-0.2,0.2-0.3c0,0,1.6-3.7,1.9-4.8 c0.6-2.2-0.8-4.5-3.9-4.5h-2.1c-0.9,0.7-2,1.1-3.1,1.1C18.7,13.6,17.9,13.4,17.2,13z" />
+                          <path d="M19.5,12.8c2.4,0,4.4-2,4.4-4.4S22,4,19.5,4s-4.4,2-4.4,4.4v0 C15.1,10.8,17.1,12.8,19.5,12.8z" />
+                        </g>
+                      </svg>
+                    </span>
+                  </span>
+                </span>
+                <span
+                  class="
+                    amelipro-illustrated-radio-group__item-label-text
+                    mt-4
+                    text-ap-blue-darken-1
+                  "
+                  id="illustrated-radio-group-id-label-text-4"
+                >
+                  5
+                </span>
+              </span>
+            </span>
+          </label>
+        </li>
+      </ul>
+    </div>
+  </div>
+  <!-- v-if -->
+</div>
+`;

package/src/components/Amelipro/AmeliproIllustratedRadioGroup/types.d.ts

@@ -0,0 +1,8 @@
+export interface AmeliproIllustratedRadioGroupItem {
+	disabled?: boolean
+	icon: string
+	iconDefaultColor: string
+	isChecked: boolean
+	label: string
+	value: string
+}

package/src/components/Amelipro/AmeliproMailTile/AmeliproMailTile.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproMailTileStories from './AmeliproMailTile.stories';
+
+<Meta of={AmeliproMailTileStories} />
+
+# AmeliproMailTile
+
+L’élément `AmeliproMailTile` est utilisé pour afficher tous les boutons/liens de type tuile résumé de mail existants dans la charte Amelipro
+
+<Canvas of={AmeliproMailTileStories.Default} />
+
+## API
+
+<Controls of={AmeliproMailTileStories.Default} />