@cnamts/synapse 1.0.6 → 1.0.8

package/src/components/Amelipro/AmeliproBadge/AmeliproBadge.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as AmeliproBadgeStories from './AmeliproBadge.stories';
+
+<Meta of={AmeliproBadgeStories} />
+
+# AmeliproBadge
+
+L’élément `AmeliproBadge` est utilisé pour afficher des indicateurs numériques associés à des liens ou boutons. 
+
+<Canvas of={AmeliproBadgeStories.Default} />
+
+## API
+
+<Controls of={AmeliproBadgeStories.Default} />

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

@@ -0,0 +1,54 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproBadge from './AmeliproBadge.vue'
+
+const meta = {
+	argTypes: {
+		badgeColor: { description: 'Défini la couleur du badge' },
+		badgeContent: { description: 'Texte à l’intérieur du badge' },
+		badgeTextColor: { description: 'Défini la couleur du text du badge' },
+		isSpan: { description: 'Gère le type de balise HTML du composant, `p` ou `span`' },
+		roundedRight: { description: 'Active l’apparence label avec un border radius a droite' },
+		uniqueId: { description: 'Identifiant unique du badge' },
+	},
+	component: AmeliproBadge,
+	title: 'Composants/Amelipro/AmeliproBadge',
+} as Meta<typeof AmeliproBadge>
+export default meta
+
+type Story = StoryObj<typeof AmeliproBadge>
+
+export const Default: Story = {
+	args: { badgeContent: 'Contenu du badge' },
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproBadge
+		badge-content="Contenu du badge"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproBadge } from '@cnamts/synapse'
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBadge },
+		setup() {
+			return { args }
+		},
+		template: `
+			<AmeliproBadge
+				v-bind="args"
+			/>
+		`,
+	}),
+
+}

package/src/components/Amelipro/AmeliproBadge/AmeliproBadge.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+	import type { IndexedObject } from '../types'
+	import { computed } from 'vue'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+
+	const props = defineProps({
+		badgeColor: {
+			type: String,
+			default: 'ap-blue-darken-1',
+		},
+		badgeContent: {
+			type: String,
+			default: undefined,
+		},
+		badgeTextColor: {
+			type: String,
+			default: 'ap-white',
+		},
+		isSpan: {
+			type: Boolean,
+			default: false,
+		},
+		roundedRight: {
+			type: Boolean,
+			default: false,
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+	})
+
+	const style = computed <IndexedObject>(() => ({ backgroundColor: convertToHex(props.badgeColor) }))
+	const styleText = computed <IndexedObject>(() => ({ color: convertToHex(props.badgeTextColor) }))
+</script>
+
+<template>
+	<Component
+		:is="isSpan ? 'span' : 'p'"
+		:id="uniqueId"
+		class="amelipro-badge"
+		:class="roundedRight ? 'round-custom' : 'round-classic'"
+		:style="style"
+	>
+		<span
+			class="amelipro-badge__content"
+			:style="styleText"
+		>
+			{{ badgeContent }}
+		</span>
+	</Component>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.amelipro-badge {
+	display: inline-block;
+	margin-left: 0.5rem;
+	padding: 0.5rem 1rem !important;
+
+	&.round-custom {
+		border-radius: 0.5rem 1rem 1rem 0.5rem;
+	}
+
+	&.round-classic {
+		border-radius: 1rem;
+	}
+}
+
+.amelipro-badge__content {
+	display: inline-block;
+	font-size: apTokens.$font-size-sm !important;
+	font-weight: apTokens.$ap-font-weight-bold !important;
+}
+</style>

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

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

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

@@ -0,0 +1,19 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproBadge > render correctly 1`] = `
+<p
+  class="
+    amelipro-badge
+    round-classic
+  "
+  id="my-badge-id"
+  style="background-color: #00749C;"
+>
+  <span
+    class="amelipro-badge__content"
+    style="color: #FFFFFF;"
+  >
+    contenu du badge
+  </span>
+</p>
+`;

package/src/components/Amelipro/AmeliproCarousel/AmeliproCarousel.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as AmeliproCarouselStories from './AmeliproCarousel.stories';
+
+<Meta of={AmeliproCarouselStories} />
+
+# AmeliproCarousel
+
+L’élément `AmeliproCarousel` est utilisé pour afficher tous les éléments de type Carrousel dans la charte Amelipro
+
+<Canvas of={AmeliproCarouselStories.Default} />
+
+## API
+
+<Controls of={AmeliproCarouselStories.Default} />

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

@@ -0,0 +1,191 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproBtn from '../AmeliproBtn/AmeliproBtn.vue'
+import AmeliproCard from '../AmeliproCard/AmeliproCard.vue'
+import AmeliproCarousel from './AmeliproCarousel.vue'
+
+const meta = {
+	argTypes: {
+		'`${uniqueId}-slot-item-${index}`': { description: 'Slots générés automatiquement pour chaque slide, l’id est celui du carrousel et index est la position de la slide' },
+		'duration': { description: 'Durée de transition entre les slides du carrousel en secondes' },
+		'infiniteRotation': { description: 'Booléen permettant de faire boucler les slides du carrousel' },
+		'item': { description: 'Slots générés automatiquement pour chaque slide, afin de donner le même aspect à tous les items' },
+		'items': {
+			description: 'Tableau comprenant la liste des slides (si vous voulez utiliser les slots, créez un objet vide `{}` dans ce tableau pour chaque slide)',
+			table: {
+				type: {
+					detail: `Array <{
+	href?: string;
+	imgSrc?: string;
+	imgAlt?: string;
+	to?: RouteLocationRaw;
+}>`,
+					summary: 'AmeliproCarouselListItem[]',
+				},
+			},
+		},
+		'labelNextBtn': { description: 'Libellé du bouton suivant, il est affiché au survol du bouton' },
+		'labelPreviousBtn': { description: 'Libellé du bouton précédent, il est affiché au survol du bouton' },
+		'title': { description: 'Titre du carrousel doit être pertinent par rapport au contenu' },
+		'uniqueId': { description: 'Identifiant unique du carrousel' },
+	},
+	component: AmeliproCarousel,
+	title: 'Composants/Amelipro/Mise en page/AmeliproCarousel',
+} as Meta<typeof AmeliproCarousel>
+export default meta
+
+type Story = StoryObj<typeof AmeliproCarousel>
+
+export const Default: Story = {
+	args: {
+		items: [{}, {}, {}],
+		title: 'Titre du carrousel',
+		uniqueId: 'amelipro-carousel-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproCarousel
+		:items="items"
+		title="Titre du carrousel"
+		unique-id="amelipro-carousel-id"
+	>
+		<template #amelipro-carousel-id-slot-item-0>
+			<div class="d-flex">
+				<AmeliproCard card-title="Slide 1">
+					<template #default>
+						<p class="mb-0">
+							Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+							à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+							faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+							un texte en faux latin, le Lorem ipsum ou Lipsum.
+						</p>
+						<AmeliproBtn class="mt-2">
+							bouton slide 1
+						</AmeliproBtn>
+					</template>
+				</AmeliproCard>
+			</div>
+		</template>
+
+		<template #amelipro-carousel-id-slot-item-1>
+			<div class="d-flex">
+				<AmeliproCard card-title="Slide 2">
+					<template #default>
+						<p class="mb-0">
+							Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+							à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+							faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+							un texte en faux latin, le Lorem ipsum ou Lipsum.
+						</p>
+						<AmeliproBtn class="mt-2">
+							bouton slide 2
+						</AmeliproBtn>
+					</template>
+				</AmeliproCard>
+			</div>
+		</template>
+
+		<template #amelipro-carousel-id-slot-item-2>
+			<div class="d-flex">
+				<AmeliproCard card-title="Slide 3">
+					<template #default>
+						<p class="mb-0">
+							Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+							à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+							faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+							un texte en faux latin, le Lorem ipsum ou Lipsum.
+						</p>
+						<AmeliproBtn class="mt-2">
+							bouton slide 3
+						</AmeliproBtn>
+					</template>
+				</AmeliproCard>
+			</div>
+		</template>
+	</AmeliproCarousel>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproBtn, AmeliproCard, AmeliproCarousel } from '@cnamts/synapse'
+
+	const items = [
+		{},
+		{},
+		{},
+	]
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproBtn, AmeliproCard, AmeliproCarousel },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproCarousel
+	v-bind="args"
+>
+	<template #amelipro-carousel-id-slot-item-0>
+		<div class="d-flex">
+			<AmeliproCard card-title="Slide 1">
+				<template #default>
+					<p class="mb-0">
+						Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+						à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+						faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+						un texte en faux latin, le Lorem ipsum ou Lipsum.
+					</p>
+					<AmeliproBtn class="mt-2">
+						bouton slide 1
+					</AmeliproBtn>
+				</template>
+			</AmeliproCard>
+		</div>
+	</template>
+
+	<template #amelipro-carousel-id-slot-item-1>
+		<div class="d-flex">
+			<AmeliproCard card-title="Slide 2">
+				<template #default>
+					<p class="mb-0">
+						Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+						à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+						faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+						un texte en faux latin, le Lorem ipsum ou Lipsum.
+					</p>
+					<AmeliproBtn class="mt-2">
+						bouton slide 2
+					</AmeliproBtn>
+				</template>
+			</AmeliproCard>
+		</div>
+	</template>
+
+	<template #amelipro-carousel-id-slot-item-2>
+		<div class="d-flex">
+			<AmeliproCard card-title="Slide 3">
+				<template #default>
+					<p class="mb-0">
+						Le lorem ipsum est, en imprimerie, une suite de mots sans signification utilisée
+						à titre provisoire pour calibrer une mise en page, le texte définitif venant remplacer le
+						faux-texte dès qu'il est prêt ou que la mise en page est achevée. Généralement, on utilise
+						un texte en faux latin, le Lorem ipsum ou Lipsum.
+					</p>
+					<AmeliproBtn class="mt-2">
+						bouton slide 3
+					</AmeliproBtn>
+				</template>
+			</AmeliproCard>
+		</div>
+	</template>
+</AmeliproCarousel>
+		`,
+	}),
+}

package/src/components/Amelipro/AmeliproCarousel/AmeliproCarousel.vue

@@ -0,0 +1,263 @@
+<script setup lang="ts">
+	import { type PropType, computed, onMounted, onUpdated, ref } from 'vue'
+	import AmeliproCarouselItem from './AmeliproCarouselItem/AmeliproCarouselItem.vue'
+	import type { AmeliproCarouselListItem } from './types'
+	import AmeliproIconBtn from '../AmeliproIconBtn/AmeliproIconBtn.vue'
+	import type { IndexedObject } from '../types'
+
+	const props = defineProps({
+		duration: {
+			type: Number,
+			default: 0.3,
+		},
+		infiniteRotation: {
+			type: Boolean,
+			default: false,
+		},
+		items: {
+			type: Array as PropType<AmeliproCarouselListItem[]>,
+			default: () => [],
+		},
+		labelNextBtn: {
+			type: String,
+			default: 'Slide suivante',
+		},
+		labelPreviousBtn: {
+			type: String,
+			default: 'Slide précédente',
+		},
+		title: {
+			type: String,
+			required: true,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const ameliproCarouselItems = ref<AmeliproCarouselListItem[]>()
+	const currentElement = ref(0)
+
+	const carouselTrackStyles = computed<IndexedObject>(() => {
+		const styles: IndexedObject = {
+			maxWidth: `calc(100% * ${props.items.length})`,
+			transform: `translateX(calc((-${currentElement.value} / ${props.items.length}) * 100%))`,
+			transition: `all ${props.duration}s ease-out`,
+			width: `calc(100% * ${props.items.length})`,
+		}
+
+		return styles
+	})
+
+	const emit = defineEmits(['click-event', 'click-next', 'click-previous'])
+
+	const emitClickEvent = (id: string): void => {
+		emit('click-event', id)
+	}
+
+	const nextSlide = (): void => {
+		if (currentElement.value < props.items.length - 1) {
+			currentElement.value += 1
+		}
+		else if (currentElement.value === props.items.length - 1 && props.infiniteRotation) {
+			currentElement.value = 0
+		}
+		emit('click-next')
+	}
+
+	const previousSlide = (): void => {
+		if (currentElement.value > 0) {
+			currentElement.value -= 1
+		}
+		else if (currentElement.value === 0 && props.infiniteRotation) {
+			currentElement.value = props.items.length - 1
+		}
+		emit('click-previous')
+	}
+
+	const setFocusableElement = (): void => {
+		const carousel = document.querySelector(`#${props.uniqueId}`)
+		if (carousel !== null) {
+			const selection = carousel.querySelectorAll('.hide')
+			if (selection !== null) {
+				selection.forEach((element) => {
+					const elementSelections = element.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)')
+					if (elementSelections !== null) {
+						elementSelections.forEach((elementSelection) => {
+							elementSelection.setAttribute('tabindex', '-1')
+						})
+					}
+				})
+			}
+			const current = carousel.querySelector(`#${props.uniqueId}-item-${currentElement.value}`)
+			if (current !== null) {
+				const elementSelection = current.querySelectorAll('button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled]), details:not([disabled]), summary:not(:disabled)')
+
+				if (elementSelection !== null) {
+					elementSelection.forEach((element) => {
+						element.setAttribute('tabindex', '0')
+					})
+				}
+			}
+		}
+	}
+
+	onMounted(() => {
+		setFocusableElement()
+	})
+
+	onUpdated(() => {
+		setFocusableElement()
+	})
+</script>
+
+<template>
+	<section
+		:id="uniqueId"
+		:aria-label="title"
+		aria-roledescription="carousel"
+		class="carousel"
+	>
+		<AmeliproIconBtn
+			:aria-controls="`${uniqueId}-items`"
+			:btn-title="labelPreviousBtn"
+			class="btn-previous"
+			:disabled="currentElement === 0 && !infiniteRotation ? true : undefined"
+			icon="chevronLeft"
+			icon-bg-color="transparent"
+			icon-color="ap-blue-darken-1"
+			icon-hover-bg-color="transparent"
+			icon-hover-color="ap-blue-darken-2"
+			large
+			type="button"
+			:unique-id="`${uniqueId}-previous`"
+			@click="previousSlide()"
+		/>
+
+		<AmeliproIconBtn
+			:aria-controls="`${uniqueId}-items`"
+			:btn-title="labelNextBtn"
+			class="btn-next"
+			:disabled="currentElement === items.length - 1 && !infiniteRotation ? true : undefined"
+			icon="chevronRight"
+			icon-bg-color="transparent"
+			icon-color="ap-blue-darken-1"
+			icon-hover-bg-color="transparent"
+			icon-hover-color="ap-blue-darken-2"
+			large
+			type="button"
+			:unique-id="`${uniqueId}-next`"
+			@click="nextSlide()"
+		/>
+
+		<div
+			:id="`${uniqueId}-items`"
+			aria-live="polite"
+			class="carousel-items"
+		>
+			<div
+				class="d-flex align-center carousel__track"
+				:style="carouselTrackStyles"
+			>
+				<AmeliproCarouselItem
+					v-for="(item, index) in items"
+					:key="index"
+					ref="ameliproCarouselItems"
+					:aria-label="`${index + 1} sur ${items.length}`"
+					:href="item.href"
+					:img-alt="item.imgAlt"
+					:img-src="item.imgSrc"
+					:is-active="currentElement === index"
+					:style="`width: calc((1 / ${items.length}) * 100%);`"
+					:to="item.to"
+					:unique-id="`${uniqueId}-item-${index}`"
+					@click-event="emitClickEvent(`${uniqueId}-item-${index}`)"
+				>
+					<!-- :style="currentElement === index ? undefined : 'visibility: hidden;'" -->
+					<slot :name="`${uniqueId}-slot-item-${index}`">
+						<slot
+							name="item"
+							v-bind="item"
+						/>
+					</slot>
+				</AmeliproCarouselItem>
+			</div>
+		</div>
+
+		<div
+			:id="`${uniqueId}-dots`"
+			class="d-flex justify-center align-center carousel-dots"
+		>
+			<span
+				v-for="(item, index) in items"
+				:key="index"
+				:aria-hidden="true"
+				class="mx-2 carousel-dot"
+				:class="index === currentElement ? 'active-dot' : undefined"
+			/>
+		</div>
+	</section>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.v-btn {
+	&.btn-previous,
+	&.btn-next {
+		&:disabled {
+			color: apTokens.$ap-blue-darken1 !important;
+			background-color: transparent !important;
+			opacity: 0.7;
+			cursor: default;
+
+			& .v-icon {
+				color: apTokens.$ap-blue-darken1 !important;
+			}
+		}
+	}
+}
+
+.carousel {
+	position: relative;
+	width: 100%;
+}
+
+.carousel-items {
+	position: relative;
+	width: calc(100% - 80px);
+	margin: 0 40px;
+	overflow: hidden;
+}
+
+.btn-previous,
+.btn-next {
+	position: absolute;
+	top: calc(50% - 20px);
+}
+
+.btn-previous {
+	left: 0;
+}
+
+.btn-next {
+	right: 0;
+}
+
+.carousel-dots {
+	margin-top: 1.5rem;
+}
+
+.carousel-dot {
+	width: 1rem;
+	height: 1rem;
+	border-radius: 50%;
+	border: 1px solid apTokens.$ap-blue-darken1;
+	background-color: apTokens.$ap-white;
+
+	&.active-dot {
+		background-color: apTokens.$ap-blue-darken1;
+	}
+}
+</style>