@cnamts/synapse 1.0.1 → 1.0.3

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

@@ -0,0 +1,62 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import AmeliproAutoCompleteField from '../AmeliproAutoCompleteField.vue'
+
+describe('AmeliproAutoCompleteField', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproAutoCompleteField, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				items: [
+					{
+						title: 'Bordeaux',
+						value: 'Bordeaux',
+					},
+					{
+						title: 'Bagnolet',
+						value: 'Bagnolet',
+					},
+					{
+						title: 'Bagneux',
+						value: 'Bagneux',
+					},
+					{
+						title: 'Arcachon',
+						value: 'Arcachon',
+					},
+					{
+						title: 'Paris',
+						value: 'Paris',
+					},
+					{
+						title: 'Lille',
+						value: 'Lille',
+					},
+					{
+						title: 'Lyon',
+						value: 'Lyon',
+					},
+					{
+						title: 'Brest',
+						value: 'Brest',
+					},
+					{
+						title: 'Marseille',
+						value: 'Marseille',
+					},
+					{
+						title: 'Toulouse',
+						value: 'Toulouse',
+					},
+				],
+				label: 'Mon label',
+				uniqueId: 'my-AutoCompleteField-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

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

@@ -0,0 +1,245 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproAutoCompleteField > render correctly 1`] = `
+<div
+  class="
+    amelipro-autocomplete
+    d-flex
+    flex-column
+  "
+  id="my-AutoCompleteField-id-container"
+>
+  <div class="
+    align-start
+    amelipro-autocomplete__label-wrapper
+    d-inline-flex
+  ">
+    <label
+      class="amelipro-autocomplete__label"
+      for="my-AutoCompleteField-id"
+      id="my-AutoCompleteField-id-label"
+    >
+      Mon label
+      <!-- v-if -->
+    </label>
+  </div>
+  <div class="
+    amelipro-text-field
+    pt-0
+    v-autocomplete
+    v-autocomplete--single
+    v-input
+    v-input--center-affix
+    v-input--density-compact
+    v-input--horizontal
+    v-locale--is-ltr
+    v-text-field
+    v-theme--light
+  ">
+    <!---->
+    <div class="v-input__control">
+      <div
+        class="
+          bg-ap-white
+          v-field
+          v-field--appended
+          v-field--center-affix
+          v-field--has-background
+          v-field--no-label
+          v-field--variant-outlined
+          v-locale--is-ltr
+          v-theme--light
+        "
+        role="combobox"
+      >
+        <div class="v-field__overlay"></div>
+        <div class="v-field__loader">
+          <div
+            aria-hidden="true"
+            aria-valuemax="100"
+            aria-valuemin="0"
+            class="
+              v-locale--is-ltr
+              v-progress-linear
+              v-theme--light
+            "
+            role="progressbar"
+            style="top: 0px; height: 0px; --v-progress-linear-height: 2px;"
+          >
+            <!---->
+            <div
+              class="
+                bg-ap-blue-darken-1
+                v-progress-linear__background
+              "
+              style="opacity: NaN;"
+            ></div>
+            <div
+              class="
+                bg-ap-blue-darken-1
+                v-progress-linear__buffer
+              "
+              style="opacity: NaN; width: 0%;"
+            ></div>
+            <transition-stub
+              appear="false"
+              css="true"
+              name="fade-transition"
+              persisted="false"
+            >
+              <div class="v-progress-linear__indeterminate">
+                <div class="
+                  bg-ap-blue-darken-1
+                  long
+                  v-progress-linear__indeterminate
+                "></div>
+                <div class="
+                  bg-ap-blue-darken-1
+                  short
+                  v-progress-linear__indeterminate
+                "></div>
+              </div>
+            </transition-stub>
+            <!---->
+          </div>
+        </div>
+        <!---->
+        <div
+          class="v-field__field"
+          data-no-activator=""
+        >
+          <!---->
+          <!---->
+          <!---->
+          <div
+            class="v-field__input"
+            data-no-activator=""
+          >
+            <!---->
+            <!-- teleport start -->
+            <!-- teleport end -->
+            <input
+              aria-expanded="false"
+              aria-required="false"
+              autocomplete="list"
+              id="my-AutoCompleteField-id"
+              size="1"
+              type="text"
+              value=""
+            />
+          </div>
+          <!---->
+        </div>
+        <!---->
+        <div class="v-field__append-inner">
+          <button
+            aria-expanded="false"
+            class="
+              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="my-AutoCompleteField-id-btn"
+            plain=""
+            style="height: auto; width: auto;"
+            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="d-sr-only"
+                id="my-AutoCompleteField-id-btn-btn-label"
+              >
+                Mon label ouvrir la liste
+              </span>
+              <span
+                class="
+                  amelipro-icon
+                  icon-custom
+                "
+                id="my-AutoCompleteField-id-btn-icon"
+              >
+                <span
+                  class="amelipro-external-icon"
+                  style="background-color: transparent; border-radius: 50%; color: #00749C; padding: 0px;"
+                >
+                  <i
+                    aria-hidden="true"
+                    class="
+                      M7,10L12,15L17,10H7Z
+                      mdi
+                      notranslate
+                      text-ap-blue-darken-1
+                      v-icon
+                      v-theme--light
+                    "
+                    style="font-size: 100%; height: 100%; width: 100%; display: block;"
+                  ></i>
+                </span>
+              </span>
+            </span>
+            <!---->
+            <!---->
+          </button>
+          <i
+            aria-hidden="false"
+            aria-label="Open"
+            class="
+              mdi
+              mdi-menu-down
+              notranslate
+              v-autocomplete__menu-icon
+              v-icon
+              v-icon--clickable
+              v-icon--size-default
+              v-theme--light
+            "
+            role="button"
+            tabindex="-1"
+            title="Open"
+          ></i>
+          <!---->
+        </div>
+        <div class="v-field__outline">
+          <div class="v-field__outline__start"></div>
+          <!---->
+          <div class="v-field__outline__end"></div>
+          <!---->
+        </div>
+      </div>
+    </div>
+    <!---->
+    <div
+      aria-live="polite"
+      class="v-input__details"
+      id="my-AutoCompleteField-id-messages"
+      role="alert"
+    >
+      <transition-group-stub
+        appear="false"
+        class="v-messages"
+        css="true"
+        name="slide-y-transition"
+        persisted="false"
+        tag="div"
+      >
+        <!---->
+      </transition-group-stub>
+      <!---->
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,12 @@
+export interface InputAutoCompleteField {
+	displayError: boolean
+	errorMessages: string[]
+	isValid: boolean
+	menu: boolean
+}
+
+export interface AutoCompleteItem {
+	disabled?: boolean
+	title: string
+	value: string | object
+}

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()
+	})
+})