@cnamts/synapse 1.0.2 → 1.0.4

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

@@ -0,0 +1,537 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproMenu > render correctly 1`] = `
+<div
+  class="
+    amelipro-menu
+    d-flex
+    justify-center
+  "
+  id="amelipro-menu-id-container"
+>
+  <button
+    class="
+      amelipro-menu__btn--open
+      btn--icon
+      elevation-0
+      rounded-0
+      v-btn
+      v-btn--density-default
+      v-btn--elevated
+      v-btn--icon
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    id="amelipro-menu-id-open-btn"
+    plain=""
+    style="
+      height: auto;
+      width: auto;
+    "
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <span
+        class="d-sr-only"
+        id="amelipro-menu-id-open-btn-btn-label"
+      >
+        Menu du service
+      </span>
+      <span
+        class="
+          amelipro-icon
+          icon-custom
+        "
+        id="amelipro-menu-id-open-btn-icon"
+      >
+        <span
+          aria-hidden="true"
+          class="
+            amelipro-custom-icon
+            custom-color
+            large
+          "
+          focusable="false"
+          role="img"
+          style="color: #FFFFFF;"
+        >
+          <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"
+            >
+              <path
+                class="circle-color"
+                d="M32,34H2c-1.1,0-2-0.9-2-2V2c0-1.1,0.9-2,2-2h30c1.1,0,2,0.9,2,2v30C34,33.1,33.1,34,32,34z"
+              />
+              <g class="shape-color">
+                <rect
+                  height="3.4"
+                  width="24.6"
+                  x="4.6"
+                  y="4.4"
+                />
+                <rect
+                  height="3.4"
+                  width="24.6"
+                  x="4.6"
+                  y="9.9"
+                />
+                <rect
+                  height="3.4"
+                  width="24.6"
+                  x="4.6"
+                  y="15.2"
+                />
+                <path d="M4.6,29.4v-6.3h1.9l1.2,4.3l1.2-4.3h2v6.3H9.6v-4.9l-1.3,4.9H7l-1.3-4.9v4.9H4.6z M12.1,29.4v-6.3h4.6v1h-3.4v1.5h3.1v1h-3.1v1.7h3.6v1H12.1z M17.9,29.4v-6.3h1.3l2.6,4.2v-4.2h1.3v6.3h-1.3l-2.5-4.1v4.1H17.9z M24.3,23.1h1.3v3.5c0,0.5,0,0.8,0,1c0.1,0.2,0.2,0.5,0.4,0.6c0.2,0.2,0.4,0.2,0.7,0.2c0.4,0,0.7-0.1,0.8-0.2c0.2-0.1,0.2-0.2,0.3-0.5c0-0.2,0-0.6,0-1v-3.6h1.3v3.4c0,0.7,0,1.3-0.1,1.6c-0.1,0.3-0.2,0.6-0.4,0.8c-0.2,0.2-0.4,0.3-0.7,0.5c-0.3,0.1-0.7,0.2-1.3,0.2c-0.6,0-1-0.1-1.4-0.2c-0.3-0.1-0.6-0.2-0.7-0.5c-0.2-0.2-0.2-0.4-0.3-0.7c0.1-0.3,0.1-0.9,0.1-1.7V23.1z" />
+              </g>
+            </svg>
+          </span>
+        </span>
+      </span>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <div
+    aria-label="Menu du service"
+    aria-modal="true"
+    color="ap-blue-darken-2"
+    hide-overlay=""
+    id="amelipro-menu-id-drawer"
+    model-value="false"
+    role="dialog"
+    temporary=""
+    width="300"
+  >
+    <div
+      class="
+        align-center
+        amelipro-menu__container
+        d-flex
+        justify-space-between
+      "
+      id="amelipro-menu-id-drawer-content"
+    >
+      <h2
+        class="
+          amelipro-menu__title
+          mb-0
+          pa-1
+          text-ap-white
+          text-uppercase
+        "
+        id="amelipro-menu-id-drawer-title"
+      >
+        Titre du service
+      </h2>
+      <button
+        class="
+          btn--icon
+          elevation-0
+          menu-btn-close
+          rounded-0
+          v-btn
+          v-btn--density-default
+          v-btn--elevated
+          v-btn--icon
+          v-btn--size-default
+          v-btn--variant-elevated
+          v-theme--light
+        "
+        id="amelipro-menu-id-close-menu-btn"
+        plain=""
+        style="
+          height: auto;
+          width: auto;
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <span
+            class="d-sr-only"
+            id="amelipro-menu-id-close-menu-btn-btn-label"
+          >
+            Fermer le menu
+          </span>
+          <span
+            class="
+              amelipro-icon
+              icon-custom
+            "
+            id="amelipro-menu-id-close-menu-btn-icon"
+          >
+            <span
+              class="amelipro-external-icon"
+              style="
+                background-color: transparent;
+                border-radius: 50%;
+                color: #FFFFFF;
+                padding: 0px;
+              "
+            >
+              <i
+                aria-hidden="true"
+                class="
+                  M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z
+                  mdi
+                  notranslate
+                  text-ap-white
+                  v-icon
+                  v-theme--light
+                "
+                style="
+                  font-size: 100%;
+                  height: 100%;
+                  width: 100%;
+                  display: block;
+                "
+              ></i>
+            </span>
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+    <hr
+      aria-orientation="horizontal"
+      class="
+        my-2
+        text-ap-white
+        v-divider
+        v-theme--light
+      "
+      role="separator"
+      style="
+        border-top-width: 1px;
+        opacity: 1 !important;
+      "
+    />
+    <ul
+      class="
+        amelipro-menu__list
+        list-style-none
+      "
+      id="amelipro-menu-id-list"
+    >
+      <li class="amelipro-menu__item">
+        <div>
+          <button
+            aria-controls="amelipro-menu-id-niveau-2-0"
+            aria-expanded="false"
+            class="
+              amelipro-btn
+              amelipro-btn--style
+              bg-ap-blue-darken-2
+              d-flex
+              elevation-0
+              justify-space-between
+              menu-btn
+              rounded-0
+              v-btn
+              v-btn--density-default
+              v-btn--flat
+              v-btn--size-default
+              v-btn--variant-flat
+              v-theme--light
+              w-100
+            "
+            id="menu-btn__1"
+            style="
+              height: auto;
+              min-height: 2.5rem;
+              color: #FFFFFF !important;
+            "
+            type="button"
+          >
+            <span class="v-btn__overlay"></span>
+            <span class="v-btn__underlay"></span>
+            <!---->
+            <span
+              class="v-btn__content"
+              data-no-activator=""
+            >
+              <span class="
+                align-center
+                amelipro-custom-btn
+                d-flex
+                flex-row
+              ">
+                Menu 1
+                <span
+                  class="
+                    amelipro-btn__icon--right
+                    amelipro-icon
+                    d-block
+                  "
+                  id="menu-btn__1-icon"
+                >
+                  <span
+                    class="amelipro-external-icon"
+                    style="
+                      background-color: transparent;
+                      border-radius: 50%;
+                      color: #FFFFFF;
+                      padding: 0px;
+                      height: 1.5rem;
+                      width: 1.5rem;
+                    "
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="
+                        M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z
+                        mdi
+                        notranslate
+                        text-ap-white
+                        v-icon
+                        v-theme--light
+                      "
+                      style="
+                        font-size: 100%;
+                        height: 100%;
+                        width: 100%;
+                        display: block;
+                      "
+                    ></i>
+                  </span>
+                </span>
+                <!-- v-if -->
+              </span>
+            </span>
+            <!---->
+            <!---->
+          </button>
+          <!-- v-if -->
+        </div>
+      </li>
+      <li class="amelipro-menu__item">
+        <div>
+          <button
+            aria-controls="amelipro-menu-id-niveau-2-1"
+            aria-expanded="false"
+            class="
+              amelipro-btn
+              amelipro-btn--style
+              bg-ap-blue-darken-2
+              d-flex
+              elevation-0
+              justify-space-between
+              menu-btn
+              rounded-0
+              v-btn
+              v-btn--density-default
+              v-btn--flat
+              v-btn--size-default
+              v-btn--variant-flat
+              v-theme--light
+              w-100
+            "
+            id="menu-btn__2"
+            style="
+              height: auto;
+              min-height: 2.5rem;
+              color: #FFFFFF !important;
+            "
+            type="button"
+          >
+            <span class="v-btn__overlay"></span>
+            <span class="v-btn__underlay"></span>
+            <!---->
+            <span
+              class="v-btn__content"
+              data-no-activator=""
+            >
+              <span class="
+                align-center
+                amelipro-custom-btn
+                d-flex
+                flex-row
+              ">
+                Menu 2
+                <span
+                  class="
+                    amelipro-btn__icon--right
+                    amelipro-icon
+                    d-block
+                  "
+                  id="menu-btn__2-icon"
+                >
+                  <span
+                    class="amelipro-external-icon"
+                    style="
+                      background-color: transparent;
+                      border-radius: 50%;
+                      color: #FFFFFF;
+                      padding: 0px;
+                      height: 1.5rem;
+                      width: 1.5rem;
+                    "
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="
+                        M7.41,15.41L12,10.83L16.59,15.41L18,14L12,8L6,14L7.41,15.41Z
+                        mdi
+                        notranslate
+                        text-ap-white
+                        v-icon
+                        v-theme--light
+                      "
+                      style="
+                        font-size: 100%;
+                        height: 100%;
+                        width: 100%;
+                        display: block;
+                      "
+                    ></i>
+                  </span>
+                </span>
+                <!-- v-if -->
+              </span>
+            </span>
+            <!---->
+            <!---->
+          </button>
+          <!-- v-if -->
+        </div>
+      </li>
+      <li class="amelipro-menu__item">
+        <div>
+          <button
+            class="
+              amelipro-btn
+              amelipro-btn--style
+              bg-ap-blue-darken-2
+              elevation-0
+              menu-btn
+              rounded-0
+              v-btn
+              v-btn--density-default
+              v-btn--flat
+              v-btn--size-default
+              v-btn--variant-flat
+              v-theme--light
+              w-100
+            "
+            id="menu-btn__3"
+            style="
+              height: auto;
+              min-height: 2.5rem;
+              color: #FFFFFF !important;
+            "
+            type="button"
+          >
+            <span class="v-btn__overlay"></span>
+            <span class="v-btn__underlay"></span>
+            <!---->
+            <span
+              class="v-btn__content"
+              data-no-activator=""
+            >
+              <span class="
+                align-center
+                amelipro-custom-btn
+                d-flex
+                flex-row
+              ">
+                Menu 3
+                <!-- v-if -->
+                <!-- v-if -->
+              </span>
+            </span>
+            <!---->
+            <!---->
+          </button>
+        </div>
+      </li>
+    </ul>
+    <hr
+      aria-orientation="horizontal"
+      class="
+        my-2
+        text-ap-white
+        v-divider
+        v-theme--light
+      "
+      role="separator"
+      style="
+        border-top-width: 1px;
+        opacity: 1 !important;
+      "
+    />
+    <div>
+      <button
+        class="
+          amelipro-btn
+          amelipro-btn--style
+          bg-ap-blue-darken-2
+          elevation-0
+          home-menu-btn
+          pa-0
+          rounded-0
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-flat
+          v-theme--light
+          w-100
+        "
+        id="amelipro-menu-id-return-home-menu-btn"
+        style="
+          height: auto;
+          min-height: 2.5rem;
+          color: #FFFFFF !important;
+        "
+        type="button"
+      >
+        <span class="v-btn__overlay"></span>
+        <span class="v-btn__underlay"></span>
+        <!---->
+        <span
+          class="v-btn__content"
+          data-no-activator=""
+        >
+          <span class="
+            align-center
+            amelipro-custom-btn
+            d-flex
+            flex-row
+          ">
+            <img
+              alt="Accueil Amelipro"
+              class="home-menu-btn__img"
+              src="data:image/svg+xml,%3c?xml%20version='1.0'%20encoding='utf-8'?%3e%3c!--%20Generator:%20Adobe%20Illustrator%2028.1.0,%20SVG%20Export%20Plug-In%20.%20SVG%20Version:%206.00%20Build%200)%20--%3e%3csvg%20version='1.1'%20id='accueil_amelipro'%20xmlns='http://www.w3.org/2000/svg'%20xmlns:xlink='http://www.w3.org/1999/xlink'%20x='0px'%20y='0px'%20viewBox='0%200%20118.6%2040'%20style='enable-background:new%200%200%20118.6%2040;'%20xml:space='preserve'%3e%3cstyle%20type='text/css'%3e%20.st0{fill-rule:evenodd;clip-rule:evenodd;fill:%2300749C;}%20.st1{opacity:0.997;}%20.st2{fill-rule:evenodd;clip-rule:evenodd;fill:%23FFFFFF;}%20.st3{fill:%23FFFFFF;}%20%3c/style%3e%3cg%20id='btn_home'%3e%3cpath%20id='Path_393'%20class='st0'%20d='M0,40h40V0H0V40z'/%3e%3cg%20id='picto'%20transform='translate(10%209)'%20class='st1'%3e%3cpath%20id='Path_403'%20class='st2'%20d='M2,13.1v8.5C2,21.8,2.1,22,2.5,22h9v-7.7h4.3V22h2.6c0.3,0,0.5-0.2,0.5-0.3v-8.5l-8.4-8.4%20L2,13.1z%20M8.8,17.9H5v-3.6h3.8V17.9z'/%3e%3cpath%20id='Path_404'%20class='st2'%20d='M20.6,10.1L10.5,0L5.7,4.8V2.6c0-0.5-0.5-0.9-1-0.9c-0.5,0-0.8,0.4-0.9,0.9v3.9l-3.6,3.6%20c-0.3,0.5-0.3,1.1,0,1.5c0.3,0.2,0.5,0.3,0.9,0.3s0.5-0.2,0.9-0.3l8.5-8.5l8.4,8.5c0.4,0.5,1.1,0.5,1.6,0.1c0,0,0.1-0.1,0.1-0.1%20C20.9,11.1,20.9,10.5,20.6,10.1L20.6,10.1z'/%3e%3c/g%3e%3c/g%3e%3cg%20id='logo_amelipro_blanc'%20transform='translate(50.369%209)'%3e%3cg%20id='Group_60'%20transform='translate(38.852)'%3e%3cpath%20id='Path_394'%20class='st2'%20d='M1.6,0C0.7,0,0,0.7,0,1.6s0.7,1.6,1.6,1.6c0.9,0,1.6-0.7,1.6-1.6c0,0,0,0,0,0%20C3.2,0.7,2.5,0,1.6,0C1.6,0,1.6,0,1.6,0z'/%3e%3c/g%3e%3cpath%20id='Path_395'%20class='st2'%20d='M39,17.5h2.8V4.4H39V17.5z'/%3e%3cg%20id='Group_61'%20transform='translate(33.639%200.197)'%3e%3cpath%20id='Path_396'%20class='st2'%20d='M2.7,13.8V0H0v13.7c-0.2,1.9,1.3,3.6,3.2,3.7c0.2,0,0.4,0,0.6,0c0.5,0,0.6-0.1,0.6-0.1v-2.2%20l-0.6,0.1C3.1,15.2,2.7,14.7,2.7,13.8L2.7,13.8z'/%3e%3c/g%3e%3cpath%20id='Path_397'%20class='st3'%20d='M60.2,13.8V8.4c0-2.2,1.8-4,4-4c1.1,0,2.1,0.4,2.8,1.2c0.8,0.7,1.2,1.7,1.2,2.8v5.4%20c0,1-0.4,2.1-1.2,2.8c-0.8,0.8-1.8,1.2-2.9,1.2c-1.1,0-2.1-0.3-2.9-1.1C60.6,15.8,60.2,14.8,60.2,13.8z%20M62.9,13.7%20c0,0.3,0.2,0.6,0.4,0.9c0.6,0.5,1.4,0.5,2,0c0.2-0.2,0.4-0.5,0.4-0.9V8.4c0-0.4-0.2-0.7-0.4-1c-0.6-0.4-1.4-0.4-2,0%20c-0.2,0.3-0.4,0.6-0.4,1V13.7L62.9,13.7z'/%3e%3cpath%20id='Path_398'%20class='st3'%20d='M51.2,13.1c0,0.7,0.3,4.5-4.3,4.5h-1.1v5.3h-2.7V4.4H47c4.5,0,4.2,3.8,4.2,4.5L51.2,13.1z%20M45.8,15h1.4c0.2,0,0.5,0,0.7-0.1c0.2-0.1,0.4-0.2,0.5-0.4c0-0.2,0.1-0.3,0.2-0.4V8.3c0-0.3-0.1-0.5-0.3-0.8%20c-0.1-0.1-0.2-0.2-0.4-0.3c-0.2-0.1-0.5-0.1-0.7-0.1h-1.4L45.8,15L45.8,15z'/%3e%3cpath%20id='Path_399'%20class='st3'%20d='M54.6,5.5V4.4h-2.5v13.2h2.5V8.5C54.6,7.7,55,7,55.9,7c0.7,0,1.2,0.5,1.3,1.2c0,0,0,0,0,0v0.2%20h2.6C59.7,4.4,56,3.3,54.6,5.5z'/%3e%3cpath%20id='Path_400'%20class='st2'%20d='M28.5,4.1c-3.7,0-3.9,3-3.9,4.8v4.2c0,1.5,0.7,4.3,4,4.3c3.4,0,4-3,4-4.4h-2.6v0.5%20c0,0.4-0.2,0.9-0.5,1.2c-0.6,0.5-1.4,0.5-2,0c-0.3-0.3-0.5-0.7-0.5-1.2v-0.5l0,0v-1.8h5.5V9C32.7,7.2,32.4,4.1,28.5,4.1z%20M27.1,7.9%20c0-0.4,0.2-0.9,0.5-1.2c0.3-0.2,0.6-0.4,1-0.4c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.5,0.7,0.5,1.2V9h-3L27.1,7.9L27.1,7.9z'/%3e%3cpath%20id='Path_401'%20class='st2'%20d='M19.2,4.4c-1,0-1.9,0.3-2.7,0.9c-0.9-0.7-2-1-3-0.9c-2.2,0-3.9,1.3-3.9,4.5v8.5h2.7V8.3%20c-0.1-0.4,0.1-0.9,0.4-1.2c0.3-0.3,0.7-0.4,1.1-0.4c0.4,0,0.7,0.1,1,0.4C15,7.4,15.1,7.8,15,8.3v9.1h2.8V8.3c0-0.4,0.2-0.9,0.5-1.2%20c0.3-0.3,0.6-0.4,1-0.4c0.4,0,0.8,0.1,1.1,0.4c0.3,0.3,0.4,0.7,0.4,1.2v9.1h2.8V8.4C23.5,5.4,21.4,4.4,19.2,4.4L19.2,4.4z'/%3e%3cpath%20id='Path_402'%20class='st2'%20d='M8.4,8.2c0-1.2-0.3-3.7-3.9-3.7c-2.1-0.2-3.9,1.4-4,3.5c0,0.2,0,0.4,0,0.5h2.5V8.2%20C2.8,7.7,2.9,7.3,3.2,7c0.3-0.3,0.7-0.4,1.1-0.4c0.4,0,0.7,0.1,1,0.4c0.3,0.3,0.5,0.7,0.4,1.1v1.1c-1.2,0.3-2.4,0.7-3.4,1.3%20c-1.5,0.8-2.4,2.4-2.3,4.1c-0.1,1.7,1.3,3.1,3,3.2c1.1,0,2.2-0.4,2.8-1.3c0,0.8,0.2,0.9,0.2,0.9h2.6c-0.2-0.6-0.2-1.2-0.2-1.9%20L8.4,8.2L8.4,8.2z%20M5.6,14.4c0,0-0.8,1.2-1.6,1.2c-0.8,0-1.4-0.6-1.5-1.4c0-0.1,0-0.1,0-0.2c0-1,0.5-1.8,1.9-2.3%20c0.4-0.2,0.8-0.3,1.2-0.4L5.6,14.4L5.6,14.4z'/%3e%3c/g%3e%3c/svg%3e"
+            />
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,10 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface AmeliproMenuItem {
+	actif?: boolean
+	children?: AmeliproMenuItem[]
+	href?: string
+	id: string
+	name: string
+	to?: RouteLocationRaw
+}

package/src/components/Amelipro/AmeliproMessage/AmeliproMessage.mdx

@@ -0,0 +1,17 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproMessageStories from './AmeliproMessage.stories';
+
+<Meta of={AmeliproMessageStories} />
+
+# AmeliproMessage
+
+L’élément `AmeliproMessage` est utilisé pour afficher les différents messages d’alertes ou d’information.
+
+Communiquer sur l’état d’une action est essentiel afin de guider l’utilisateur durant l’utilisation du portail et services. Pour cela différents types de messages sont à utiliser en fonction du type d’interaction. Ne jamais oublier que plus important que guider l’utilisateur lorsque une erreur se produit, c’est de faire en sorte de l’éviter.
+
+<Canvas of={AmeliproMessageStories.Default} />
+
+## API
+
+<Controls of={AmeliproMessageStories.Default} />

package/src/components/Amelipro/AmeliproMessage/AmeliproMessage.stories.ts

@@ -0,0 +1,127 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproMessage from './AmeliproMessage.vue'
+
+const meta = {
+	argTypes: {
+		'alignStart': { description: 'Aligne le texte et l’icône en haut' },
+		'borderLeftMessage': { description: 'Applique un nouveau style au message avec un fond gris et une bordure à gauche du bloc lorsque cette property est active il ne faut pas utiliser le slot par défaut mais un slot dédié pour le contenu du message' },
+		'borderLeftMessageContent': { description: 'Slot pour le contenu du message si la property `BorderLeftMessage` est active.' },
+		'borderLeftMessageTitle': { description: 'Titre du Message pour le cas où la property BorderLeftMessage est active' },
+		'click:close': { description: 'Événement émis lorsque l’utilisateur clique sur le bouton fermer.', type: 'void' },
+		'color': { description: 'Couleur personnalisée du message' },
+		'dark': { description: 'Change le style tu texte et de l’icône du blanc vers le noir' },
+		'default': { description: 'Slot pour le contenu du message.' },
+		'dismissible': { description: 'Possibilité de fermer le message' },
+		'icon': { description: 'Icône personnalisée' },
+		'iconBgColor': { description: 'Couleur personnalisée pour le fond de l’icône du message' },
+		'iconColor': { description: 'Couleur personnalisée pour l’icône du message' },
+		'maxWidth': { description: 'Largeur maximale du message' },
+		'noIcon': { description: 'Retirer l’icône du message' },
+		'text': { description: 'change le type d’affichage du message qui n’aura plus de fond coloré' },
+		'textColor': { description: 'Couleur personnalisée du texte du message lorsque la property `text` est à true' },
+		'type': {
+			control: 'select',
+			description: 'type de message parmi ces choix : `error`, `warning`, `info` et `advice`',
+			options: ['info', 'error', 'warning', 'success'],
+		},
+		'uniqueId': { description: 'Identifiant unique du message' },
+		'value': { description: 'Valeur d’affichage ou non du message' },
+		'width': { description: 'Largeur du message' },
+	},
+	component: AmeliproMessage,
+	title: 'Composants/Amelipro/AmeliproMessage',
+} as Meta<typeof AmeliproMessage>
+export default meta
+
+type Story = StoryObj<typeof AmeliproMessage>
+
+export const Default: Story = {
+	args: { uniqueId: 'amelipro-message-unique-id' },
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproMessage
+		unique-id="amelipro-message-unique-id"
+		>
+		<p class="mb-0">
+			Exemple de Message
+		</p>
+	</AmeliproMessage>
+</template>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproMessage } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproMessage },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproMessage
+	v-bind="args"
+	>
+	<p class="mb-0">
+		Exemple de Message
+	</p>
+</AmeliproMessage>`,
+	}),
+}
+
+export const BorderLeft: Story = {
+	args: {
+		borderLeftMessage: true,
+		borderLeftMessageTitle: 'Le titre du message',
+		uniqueId: 'amelipro-message-unique-id-2',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproMessage
+		border-left-message
+		border-left-message-title="Le titre du message"
+		unique-id="amelipro-message-unique-id-2"
+	>
+		<template #borderLeftMessageContent>
+			<p class="ap-grey--text text--darken-1 mb-0">
+				Le contenu de mon message
+			</p>
+		</template>
+	</AmeliproMessage>
+</template>
+				`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproMessage } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproMessage },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproMessage
+	v-bind="args"
+>
+	<template #borderLeftMessageContent>
+		<p class="text-ap-grey-darken-1 mb-0">
+			Le contenu de mon message
+		</p>
+	</template>
+</AmeliproMessage>`,
+	}),
+}