@cnamts/synapse 1.0.2 → 1.0.3

package/src/components/Amelipro/AmeliproBreadcrumb/AmeliproBreadcrumb.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as AmeliproBreadcrumbStories from './AmeliproBreadcrumb.stories';
+
+<Meta of={AmeliproBreadcrumbStories} />
+
+# AmeliproBreadcrumb
+
+L’élément `AmeliproBreadcrumb` est utilisé pour afficher un fil d'Ariane.
+
+<Canvas of={AmeliproBreadcrumbStories.Default} />
+
+## API
+
+<Controls of={AmeliproBreadcrumbStories.Default} />

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

@@ -0,0 +1,92 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproBreadcrumb from './AmeliproBreadcrumb.vue'
+import type { AmeliproBreadcrumbItem } from './types'
+
+const meta = {
+	argTypes: {
+		click: { description: 'Événement émis au clic sur un élément. Émet la valeur de l’`id` de l’élément cliqué.', type: 'string' },
+		items: { description: 'Liste des éléments du fil d’Ariane' },
+		uniqueId: { description: 'Identifiant unique du composant' },
+	},
+	component: AmeliproBreadcrumb,
+	title: 'Composants/Amelipro/Mise en page/AmeliproBreadcrumb',
+} as Meta<typeof AmeliproBreadcrumb>
+export default meta
+
+type Story = StoryObj<typeof AmeliproBreadcrumb>
+
+export const Default: Story = {
+	args: {
+		items: [
+			{
+				id: 'breadcrumb-item-id-1',
+				title: 'Breadcrumb item 1',
+			},
+			{
+				id: 'breadcrumb-item-id-2',
+				title: 'Breadcrumb item 2',
+			},
+			{
+				id: 'breadcrumb-item-id-3',
+				title: 'Breadcrumb item 3',
+			},
+			{
+				id: 'breadcrumb-item-id-4',
+				title: 'Breadcrumb item 4',
+			},
+		] as AmeliproBreadcrumbItem[],
+		uniqueId: 'amelipro-breadcrumb-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproBreadcrumb
+		:items="items"
+		unique-id="amelipro-breadcrumb-unique-id"
+
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproBreadcrumb } from '@cnamts/synapse'
+
+	const items = [
+		{
+			id: 'breadcrumb-item-id-1',
+			title: 'Breadcrumb item 1',
+		},
+		{
+			id: 'breadcrumb-item-id-2',
+			title: 'Breadcrumb item 2',
+		},
+		{
+			id: 'breadcrumb-item-id-3',
+			title: 'Breadcrumb item 3',
+		},
+		{
+			id: 'breadcrumb-item-id-4',
+			title: 'Breadcrumb item 4',
+		},
+	]
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBreadcrumb },
+		setup() {
+			return { args }
+		},
+		template: `
+			<AmeliproBreadcrumb
+				v-bind="args"
+			/>
+		`,
+	}),
+}

package/src/components/Amelipro/AmeliproBreadcrumb/AmeliproBreadcrumb.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+	import { type PropType, computed } from 'vue'
+	import type { AmeliproBreadcrumbItem } from './types'
+	import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		items: {
+			type: Array as PropType<AmeliproBreadcrumbItem[]>,
+			required: true,
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+	})
+	const { xs } = useDisplay()
+
+	const itemsToDisplay = computed<AmeliproBreadcrumbItem[]>(() => {
+		let itemsList = props.items.slice(0, (props.items.length - 1))
+
+		if (xs.value) {
+			itemsList = [props.items[props.items.length - 2]]
+		}
+
+		return itemsList
+	})
+
+	const emit = defineEmits(['click'])
+	const emitClickEvent = (id: string): void => emit('click', id)
+</script>
+
+<template>
+	<nav
+		:id="uniqueId ? `${uniqueId}-container` : undefined"
+		aria-label="Fil d'Ariane"
+		class="breadcrumb"
+	>
+		<ol
+			:id="uniqueId ? `${uniqueId}-list` : undefined"
+			class="list-style-none d-flex align-center breadcrumb__list"
+		>
+			<li
+				v-for="(item, index) in itemsToDisplay"
+				:key="index"
+				class="d-flex align-center breadcrumb__item"
+			>
+				<AmeliproBtn
+					class="text-none font-weight-semibold breadcrumb__btn"
+					hover-underline
+					:href="item.href"
+					text
+					:to="item.to"
+					:unique-id="uniqueId ? `${uniqueId}-btn-${index}` : undefined"
+					@click="emitClickEvent(item.id)"
+				>
+					{{ item.title }}
+				</AmeliproBtn>
+
+				<span
+					aria-hidden="true"
+					class="breadcrumb__separator"
+				/>
+			</li>
+
+			<li>
+				<p
+					:id="uniqueId ? `${uniqueId}-current-page` : undefined"
+					aria-current="page"
+					class="text-none mb-0 breadcrumb__active-page"
+				>
+					{{ items[items.length - 1].title }}
+				</p>
+			</li>
+		</ol>
+	</nav>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.breadcrumb__separator {
+	display: block;
+	width: 0;
+	height: 1.25rem;
+	margin: 0 0.5rem;
+	border-left: 1px solid apTokens.$ap-grey-darken1;
+}
+</style>

package/src/components/Amelipro/AmeliproBreadcrumb/__tests__/AmeliproBreadcrumb.spec.ts

@@ -0,0 +1,37 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import AmeliproBreadcrumb from '../AmeliproBreadcrumb.vue'
+
+describe('AmeliproBreadcrumb', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproBreadcrumb, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						id: 'breadcrumb-item-id-1',
+						title: 'Breadcrumb item 1',
+					},
+					{
+						id: 'breadcrumb-item-id-2',
+						title: 'Breadcrumb item 2',
+					},
+					{
+						id: 'breadcrumb-item-id-3',
+						title: 'Breadcrumb item 3',
+					},
+					{
+						id: 'breadcrumb-item-id-4',
+						title: 'Breadcrumb item 4',
+					},
+				],
+				uniqueId: 'amelipro-breadcrumb-unique-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproBreadcrumb/__tests__/__snapshots__/AmeliproBreadcrumb.spec.ts.snap

@@ -0,0 +1,192 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproBreadcrumb > render correctly 1`] = `
+<nav
+  aria-label="Fil d'Ariane"
+  class="breadcrumb"
+  id="amelipro-breadcrumb-unique-id-container"
+>
+  <ol
+    class="
+      align-center
+      breadcrumb__list
+      d-flex
+      list-style-none
+    "
+    id="amelipro-breadcrumb-unique-id-list"
+  >
+    <li class="
+      align-center
+      breadcrumb__item
+      d-flex
+    ">
+      <button
+        class="
+          amelipro-btn
+          breadcrumb__btn
+          breadcrumb__btn
+          elevation-0
+          font-weight-semibold
+          font-weight-semibold
+          text-ap-blue-darken-1
+          text-none
+          text-none
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        id="amelipro-breadcrumb-unique-id-btn-0"
+        style="height: auto; min-height: auto; padding: 0px;"
+        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
+          ">
+            Breadcrumb item 1
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+      <span
+        aria-hidden="true"
+        class="breadcrumb__separator"
+      ></span>
+    </li>
+    <li class="
+      align-center
+      breadcrumb__item
+      d-flex
+    ">
+      <button
+        class="
+          amelipro-btn
+          breadcrumb__btn
+          breadcrumb__btn
+          elevation-0
+          font-weight-semibold
+          font-weight-semibold
+          text-ap-blue-darken-1
+          text-none
+          text-none
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        id="amelipro-breadcrumb-unique-id-btn-1"
+        style="height: auto; min-height: auto; padding: 0px;"
+        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
+          ">
+            Breadcrumb item 2
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+      <span
+        aria-hidden="true"
+        class="breadcrumb__separator"
+      ></span>
+    </li>
+    <li class="
+      align-center
+      breadcrumb__item
+      d-flex
+    ">
+      <button
+        class="
+          amelipro-btn
+          breadcrumb__btn
+          breadcrumb__btn
+          elevation-0
+          font-weight-semibold
+          font-weight-semibold
+          text-ap-blue-darken-1
+          text-none
+          text-none
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-text
+          v-theme--light
+        "
+        id="amelipro-breadcrumb-unique-id-btn-2"
+        style="height: auto; min-height: auto; padding: 0px;"
+        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
+          ">
+            Breadcrumb item 3
+            <!-- v-if -->
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+      <span
+        aria-hidden="true"
+        class="breadcrumb__separator"
+      ></span>
+    </li>
+    <li>
+      <p
+        aria-current="page"
+        class="
+          breadcrumb__active-page
+          mb-0
+          text-none
+        "
+        id="amelipro-breadcrumb-unique-id-current-page"
+      >
+        Breadcrumb item 4
+      </p>
+    </li>
+  </ol>
+</nav>
+`;

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

@@ -0,0 +1,8 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface AmeliproBreadcrumbItem {
+	id: string
+	title: string
+	href?: string
+	to?: RouteLocationRaw
+}

package/src/components/Amelipro/AmeliproBtn/AmeliproBtn.mdx

@@ -0,0 +1,24 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproBtnStories from './AmeliproBtn.stories';
+
+<Meta of={AmeliproBtnStories} />
+
+# AmeliproBtn
+
+L’élément `AmeliproBtn` est utilisé pour afficher tous les types de boutons/liens existants dans la charte Amelipro (excepté les bouton icônes qui sont gérés par le composant AmeliproIconBtn)
+
+<Canvas of={AmeliproBtnStories.Default}  />
+
+## API
+
+<Controls of={AmeliproBtnStories.Default} />
+
+## Usages
+
+Les boutons jouent un rôle crucial dans le design d’interaction. Ils aident et guident l’utilisateur dans l’accomplissement des tâches dont il a besoin de réaliser lorsque qu’il accède à amelipro. L’aspect des bouton peut prendre plusieurs formes et être plus au moins appellatif en fonction du niveau d’importance de l’interaction.
+Les boutons peuvent être utilisés en groupe (primaire, secondaire et tertiaire) ou isolés et être plus au moins proches les uns des autres en fonction des objectifs des interactions.
+
+
+
+

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

@@ -0,0 +1,182 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproBtn from './AmeliproBtn.vue'
+
+const meta = {
+	argTypes: {
+		badge: { description: 'Ajoute un badge avec un nombre ou du texte à côté de l’icône.' },
+		badgeBgColor: { description: 'Gère la couleur de fond du badge.' },
+		badgeColor: { description: 'Gère la couleur de texte du badge.' },
+		bordered: { description: 'Applique une bordure de 1px autour du bouton de la même couleur que hoverColor' },
+		classes: { description: 'Classes personnalisées du bouton' },
+		click: {
+			table: { category: 'events' },
+			description: 'Événement émis au click sur le bouton',
+		},
+		color: { description: 'La couleur de fond du bouton/lien ou la couleur du texte si la propriété `text` est activée.' },
+		default: { description: 'Intitulé du bouton' },
+		disabled: { description: 'Désactive le bouton.' },
+		hoverColor: { description: 'Cette propriété est similaire à la propriété `color` mais pour le survol du bouton/lien.' },
+		hoverUnderline: { description: 'Souligne le texte du bouton/lien au survol.' },
+		href: {
+			table: { category: 'props' },
+			description: 'Ajoute une url au bouton',
+		},
+		icon: {
+			table: { category: 'props' },
+			description: 'Slot pour utiliser une icône MDI',
+		},
+		iconBgColor: { description: 'Applique une couleur de fond à l’icône' },
+		iconBordered: { description: 'Applique une bordure de 1px autour de l’icône' },
+		iconColor: { description: 'Applique une couleur à l’icône si la propriété infoBlock est activée' },
+		iconFocusColor: { description: 'Applique une couleur de focus à l’icône' },
+		iconHoverColor: { description: 'Applique une couleur de survol à l’icône si la propriété infoBlock est activée' },
+		iconLeft: { description: 'S’il y a un icône le place à gauche.' },
+		iconName: { description: 'Nom de l’icône à rajouter au bouton/lien à droite du texte.' },
+		infoBlock: { description: 'Change la forme du bouton/lien et le positionnement de l’icône pour correspondre à l’affichage `bloc d’information`.' },
+		minHeight: { description: 'La hauteur minimale du bouton/lien.' },
+		size: { description: 'Change la taille de l’icône pour l’affichage `bloc d’information`.' },
+		text: { description: 'Supprime la couleur de fond du bouton pour l’appliquer directement au texte.' },
+		textColor: { description: 'La couleur du texte si la propriété `text` est désactivée.' },
+		textFocusColor: { description: 'La couleur du texte au focus si la propriété `text` est désactivée.' },
+		textHoverColor: { description: 'La couleur du texte au survol si la propriété `text` est désactivée.' },
+		to: {
+			table: { category: 'props' },
+			description: 'Ajoute une route au bouton',
+		},
+		underline: { description: 'Souligne le texte du bouton/lien.' },
+	},
+	component: AmeliproBtn,
+	title: 'Composants/Amelipro/AmeliproBtn',
+} as Meta<typeof AmeliproBtn>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproBtn>
+
+export const Default: Story = {
+	args: {
+		default: 'My Button',
+		uniqueId: 'my-btn-id',
+	},
+	parameters: {
+		render: args => ({
+			components: { AmeliproBtn },
+			setup() {
+				return { args }
+			},
+			template: `
+				<AmeliproBtn
+					v-bind="args"
+				>
+					{{ args.default }}
+				</AmeliproBtn>
+			`,
+		}),
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproBtn unique-id="my-btn-id">
+		My Button
+	</AmeliproBtn>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproBtn } from '@cnamts/synapse';
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const Badge: Story = {
+	args: {
+		badge: 1,
+		badgeBgColor: 'ap-pink',
+		badgeColor: 'ap-white',
+		default: 'My Button',
+		iconBordered: true,
+		iconName: 'notifications',
+		textColor: 'ap-white',
+	},
+	parameters: {
+		render: args => ({
+			components: { AmeliproBtn },
+			setup() {
+				return { args }
+			},
+		}),
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproBtn
+		:badge="1"
+		badge-bg-color="ap-pink"
+		badge-text-color="ap-white"
+		icon-bordered
+		icon-name="notifications"
+		unique-id="my-btn-id-2"
+	>
+		My Button
+	</AmeliproBtn>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproBtn } from '@cnamts/synapse';
+</script>
+				`,
+			},
+		],
+	},
+}
+
+export const SecundaryBtn: Story = {
+	args: {
+		bordered: true,
+		color: 'ap-white',
+		default: 'My Button',
+		hoverColor: 'ap-blue-lighten-3',
+		textColor: 'ap-blue-darken-1',
+	},
+
+	parameters: {
+		render: () => ({
+			components: { AmeliproBtn },
+			setup() {
+				return {}
+			},
+		}),
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproBtn
+		bordered
+		color="ap-white"
+		hover-color="ap-blue-lighten-3"
+		text-color="ap-blue-darken-1"
+		unique-id="my-btn-id-3"
+	>
+		My Button
+	</AmeliproBtn>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproBtn } from '@cnamts/synapse';
+</script>
+				`,
+			},
+		],
+	},
+}