@cnamts/synapse 1.0.1 → 1.0.3

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

@@ -0,0 +1,475 @@
+// 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="/src/assets/amelipro/img/logo-menu.svg"
+            />
+            <!-- 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>`,
+	}),
+}