@cnamts/synapse 1.0.1 → 1.0.3

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/AmeliproDropdownMenuBtn/tests/AmeliproDropdownMenuBtn.spec.ts

@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproDropdownMenuBtn from '../AmeliproDropdownMenuBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproDropdownMenuBtn', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproDropdownMenuBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				label: 'label du bouton',
+				uniqueId: 'my-btn-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/AmeliproDropdownMenuBtn/tests/__snapshots__/AmeliproDropdownMenuBtn.spec.ts.snap

@@ -0,0 +1,52 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproDropdownMenuBtn > render correctly 1`] = `
+<button
+  class="
+    amelipro-btn
+    amelipro-btn--style
+    bg-ap-white
+    dropdown-menu__btn
+    dropdown-menu__btn
+    elevation-0
+    text-left
+    text-left
+    text-none
+    text-none
+    v-btn
+    v-btn--density-default
+    v-btn--flat
+    v-btn--size-default
+    v-btn--variant-flat
+    v-theme--light
+    w-100
+    w-100
+  "
+  id="my-btn-id"
+  role="menuitem"
+  style="height: auto; min-height: 2.5rem; color: #1A1B1B !important;"
+  tabindex="-1"
+  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
+    ">
+      label du bouton
+      <!-- v-if -->
+      <!-- v-if -->
+    </span>
+  </span>
+  <!---->
+  <!---->
+</button>
+`;

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/tests/AmeliproDropdownMenu.spec.ts

@@ -0,0 +1,32 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproDropdownMenu from '../AmeliproDropdownMenu.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproDropdownMenu', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproDropdownMenu, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						label: 'item 1',
+					},
+					{
+						label: 'item 2',
+						active: true,
+					},
+					{
+						label: 'item 3',
+					},
+				],
+				label: 'menu déroulant',
+				uniqueId: 'my-dropdown-menu-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/tests/__snapshots__/AmeliproDropdownMenu.spec.ts.snap

@@ -0,0 +1,280 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproDropdownMenu > render correctly 1`] = `
+<div
+  class="dropdown-menu"
+  id="my-dropdown-menu-id"
+  style="width: 100%;"
+>
+  <button
+    aria-controls="my-dropdown-menu-id-menu"
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="
+      amelipro-btn
+      amelipro-btn--style
+      bg-ap-white
+      dropdown-menu__open-btn
+      dropdown-menu__open-btn
+      elevation-0
+      font-weight-bold
+      font-weight-bold
+      text-h6
+      text-h6
+      text-none
+      text-none
+      v-btn
+      v-btn--density-default
+      v-btn--flat
+      v-btn--size-default
+      v-btn--variant-flat
+      v-theme--light
+      w-100
+      w-100
+    "
+    id="my-dropdown-menu-id-btn"
+    style="height: auto; min-height: 2.5rem; color: #1A1B1B !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
+      ">
+        <span
+          class="
+            font-weight-bold
+            text-h6
+            text-left
+            w-100
+          "
+          id="my-dropdown-menu-id-btn-text"
+        >
+          <span class="d-sr-only">
+            Page active :&nbsp;
+          </span>
+          item 2
+        </span>
+        <span
+          class="amelipro-icon"
+          id="my-dropdown-menu-id-icon"
+          style="margin-top: -18px;"
+        >
+          <span
+            aria-hidden="true"
+            class="
+              amelipro-custom-icon
+              custom-color
+            "
+            focusable="false"
+            role="img"
+            style="color: #1A1B1B; height: 8px; width: 8px;"
+          >
+            <span>
+              <svg
+                aria-hidden="true"
+                style="enable-background:new 0 0 42 42;"
+                version="1.1"
+                viewBox="0 0 42 42"
+                x="0px"
+                xml:space="preserve"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                y="0px"
+              >
+                <polygon
+                  class="shape-color"
+                  points="21,39.2 42,2.8 0,2.8 "
+                />
+              </svg>
+            </span>
+          </span>
+        </span>
+        <!-- v-if -->
+        <!-- v-if -->
+      </span>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <ul
+    aria-label="menu déroulant"
+    class="
+      ap-white
+      dropdown-menu__list
+      list-style-none
+    "
+    id="my-dropdown-menu-id-menu"
+    role="menu"
+    style="display: none;"
+  >
+    <li
+      class="dropdown-menu__item"
+      role="none"
+    >
+      <button
+        class="
+          amelipro-btn
+          amelipro-btn--style
+          bg-ap-white
+          dropdown-menu__btn
+          dropdown-menu__btn
+          elevation-0
+          text-left
+          text-left
+          text-none
+          text-none
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-flat
+          v-theme--light
+          w-100
+          w-100
+        "
+        id="my-dropdown-menu-id-btn-0"
+        role="menuitem"
+        style="height: auto; min-height: 2.5rem; color: #1A1B1B !important;"
+        tabindex="-1"
+        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
+          ">
+            item 1
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </li>
+    <li
+      class="dropdown-menu__item"
+      role="none"
+    >
+      <button
+        class="
+          amelipro-btn
+          amelipro-btn--style
+          bg-ap-white
+          dropdown-menu__btn
+          dropdown-menu__btn
+          elevation-0
+          text-left
+          text-left
+          text-none
+          text-none
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-flat
+          v-theme--light
+          w-100
+          w-100
+        "
+        id="my-dropdown-menu-id-btn-1"
+        role="menuitem"
+        style="height: auto; min-height: 2.5rem; color: #1A1B1B !important;"
+        tabindex="-1"
+        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
+          ">
+            item 2
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </li>
+    <li
+      class="dropdown-menu__item"
+      role="none"
+    >
+      <button
+        class="
+          amelipro-btn
+          amelipro-btn--style
+          bg-ap-white
+          dropdown-menu__btn
+          dropdown-menu__btn
+          elevation-0
+          text-left
+          text-left
+          text-none
+          text-none
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-flat
+          v-theme--light
+          w-100
+          w-100
+        "
+        id="my-dropdown-menu-id-btn-2"
+        role="menuitem"
+        style="height: auto; min-height: 2.5rem; color: #1A1B1B !important;"
+        tabindex="-1"
+        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
+          ">
+            item 3
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+    </li>
+  </ul>
+</div>
+`;

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproDropdownMenu/types.d.ts

@@ -0,0 +1,8 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface DropdownItem {
+	label: string
+	href?: string
+	to?: RouteLocationRaw
+	active?: boolean
+}

package/src/components/Amelipro/AmeliproMessagingLayout/AmeliproMessagingLayout.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproMessagingLayoutStories from './AmeliproMessagingLayout.stories';
+
+<Meta of={AmeliproMessagingLayoutStories} />
+
+# AmeliproMessagingLayout
+
+L’élément `AmeliproMessagingLayout` est utilisé pour afficher des mises en page de messagerie
+
+<Canvas of={AmeliproMessagingLayoutStories.Default} />
+
+## API
+
+<Controls of={AmeliproMessagingLayoutStories.Default} />

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

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproCard from '../AmeliproCard/AmeliproCard.vue'
+import AmeliproMessagingLayout from './AmeliproMessagingLayout.vue'
+import type { MessagingMenuTypes } from './types'
+
+const meta = {
+	argTypes: {
+		'click-new-message': { description: 'Pour gérer un affichage spécifique à une carte' },
+		'items': {
+			description: 'Liste des lien composants le menu de la messagerie, la propriété active symbolisant la page active',
+			table: {
+				type: {
+					detail: `Array<{
+	active?: boolean;
+	href?: string;
+	icon: string;
+	label: string;
+	to?: RouteLocationRaw;
+	unreadNumber?: number;
+}>`,
+					summary: 'MessagingMenuTypes[]',
+				},
+			},
+		},
+		'mainContentBg': { description: 'Background du conteneur principal de la messagerie' },
+		'menuWidth': { description: 'Largeur du menu de la messagerie' },
+		'newMessageDisable': { description: 'Désactive le bouton nouveau message' },
+		'uniqueId': { description: 'Identifiant unique du composant' },
+	},
+	component: AmeliproMessagingLayout,
+	title: 'Composants/Amelipro/Mise en page/AmeliproMessagingLayout',
+} as Meta<typeof AmeliproMessagingLayout>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+const items: MessagingMenuTypes[] = [
+	{
+		href: '#',
+		icon: 'discussion',
+		label: 'À traiter',
+		unreadNumber: 1,
+	},
+	{
+		active: true,
+		href: '#',
+		icon: 'horlogeFlecheDroiteNoCircle',
+		label: 'En cours',
+	},
+	{
+		href: '#',
+		icon: 'ecrire',
+		label: 'Brouillons',
+		unreadNumber: 1,
+	},
+	{
+		href: '#',
+		icon: 'boite',
+		label: 'Clos',
+		unreadNumber: 1,
+	},
+]
+
+export const Default: Story = {
+	args: {
+		items,
+		uniqueId: 'amelipro-messaging-layout-unique-id',
+	},
+	parameters: {
+		args: {},
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproMessagingLayout
+		:items="items"
+		unique-id="amelipro-messaging-layout-unique-id"
+	>
+		<div class="pa-4">
+			<AmeliproCard
+				card-title="Titre de la carte"
+				unique-id="card-id-exemple"
+			>
+				<p class="mb-0">
+					Exemple de contenu principal
+				</p>
+			</AmeliproCard>
+		</div>
+	</AmeliproMessagingLayout>
+</template>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproCard, AmeliproMessagingLayout } from '@cnamts/synapse'
+
+	const items = [
+		{
+			href: '#',
+			icon: 'discussion',
+			label: 'À traiter',
+			unreadNumber: 1,
+		},
+		{
+			active: true,
+			href: '#',
+			icon: 'horlogeFlecheDroiteNoCircle',
+			label: 'En cours',
+		},
+		{
+			href: '#',
+			icon: 'ecrire',
+			label: 'Brouillons',
+			unreadNumber: 1,
+		},
+		{
+			href: '#',
+			icon: 'boite',
+			label: 'Clos',
+			unreadNumber: 1,
+		},
+	]
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproMessagingLayout, AmeliproCard },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproMessagingLayout
+	v-bind="args"
+>
+	<div class="pa-4">
+		<AmeliproCard
+			card-title="Titre de la carte"
+			unique-id="card-id-exemple"
+		>
+			<p class="mb-0">
+				Exemple de contenu principal
+			</p>
+		</AmeliproCard>
+	</div>
+</AmeliproMessagingLayout>`,
+	}),
+}