@cnamts/synapse 1.0.5 → 1.0.7

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

@@ -0,0 +1,342 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproCarousel > render correctly 1`] = `
+<section
+  aria-label="exemple de carrousel"
+  aria-roledescription="carousel"
+  class="carousel"
+  id="carousel-unique-id"
+>
+  <button
+    aria-controls="carousel-unique-id-items"
+    class="
+      btn--icon
+      btn-previous
+      elevation-0
+      rounded-0
+      v-btn
+      v-btn--density-default
+      v-btn--disabled
+      v-btn--icon
+      v-btn--size-default
+      v-btn--variant-elevated
+      v-theme--light
+    "
+    disabled=""
+    id="carousel-unique-id-previous"
+    plain=""
+    style="
+      height: auto;
+      width: auto;
+    "
+    title="Slide précédente"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <!-- v-if -->
+      <span
+        class="
+          amelipro-icon
+          icon-custom
+        "
+        id="carousel-unique-id-previous-icon"
+      >
+        <span
+          aria-hidden="true"
+          class="
+            amelipro-custom-icon
+            custom-color
+            large
+          "
+          focusable="false"
+          role="img"
+          style="color: #00749C;"
+        >
+          <span>
+            <svg
+              aria-hidden="true"
+              style="enable-background:new 0 0 14.8 24;"
+              version="1.1"
+              viewBox="0 0 14.8 24"
+              x="0px"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              y="0px"
+            >
+              <path
+                class="shape-color"
+                d="M14.8,21.2L5.7,12l9.2-9.2L12,0L0,12l12,12L14.8,21.2z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <button
+    aria-controls="carousel-unique-id-items"
+    class="
+      btn--icon
+      btn-next
+      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="carousel-unique-id-next"
+    plain=""
+    style="
+      height: auto;
+      width: auto;
+    "
+    title="Slide suivante"
+    type="button"
+  >
+    <span class="v-btn__overlay"></span>
+    <span class="v-btn__underlay"></span>
+    <!---->
+    <span
+      class="v-btn__content"
+      data-no-activator=""
+    >
+      <!-- v-if -->
+      <span
+        class="
+          amelipro-icon
+          icon-custom
+        "
+        id="carousel-unique-id-next-icon"
+      >
+        <span
+          aria-hidden="true"
+          class="
+            amelipro-custom-icon
+            custom-color
+            large
+          "
+          focusable="false"
+          role="img"
+          style="color: #00749C;"
+        >
+          <span>
+            <svg
+              aria-hidden="true"
+              style="enable-background:new 0 0 14.8 24;"
+              version="1.1"
+              viewBox="0 0 14.8 24"
+              x="0px"
+              xml:space="preserve"
+              xmlns="http://www.w3.org/2000/svg"
+              xmlns:xlink="http://www.w3.org/1999/xlink"
+              y="0px"
+            >
+              <path
+                class="shape-color"
+                d="M0,2.8L9.2,12L0,21.2L2.8,24l12-12L2.8,0L0,2.8z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+    </span>
+    <!---->
+    <!---->
+  </button>
+  <div
+    aria-live="polite"
+    class="carousel-items"
+    id="carousel-unique-id-items"
+  >
+    <div
+      class="
+        align-center
+        carousel__track
+        d-flex
+      "
+      style="
+        max-width: calc(100% * 3);
+        transform: translateX(calc((-0 / 3) * 100%));
+        transition: all 0.3s ease-out;
+        width: calc(100% * 3);
+      "
+    >
+      <div
+        aria-label="1 sur 3"
+        aria-roledescription="slide"
+        class="carousel-item"
+        id="carousel-unique-id-item-0"
+        role="group"
+      >
+        <div class="carousel-image">
+          <a
+            class="
+              carousel-img-btn
+              elevation-0
+              v-btn
+              v-btn--density-default
+              v-btn--elevated
+              v-btn--size-default
+              v-btn--variant-elevated
+              v-theme--light
+            "
+            href="href item 1"
+            id="carousel-unique-id-item-0-btn"
+            tabindex="0"
+            title="imgAlt item 1"
+          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            
+          <!----><span
+            class="v-btn__content"
+            data-no-activator=""
+          ><img
+            alt="imgAlt item 1"
+            class="w-100"
+            src="imgSrc item 1"
+          /></span>
+            
+          <!---->
+            
+          <!---->
+          </a>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        aria-label="2 sur 3"
+        aria-roledescription="slide"
+        class="
+          carousel-item
+          hide
+        "
+        id="carousel-unique-id-item-1"
+        role="group"
+      >
+        <div class="carousel-image">
+          <a
+            class="
+              carousel-img-btn
+              elevation-0
+              v-btn
+              v-btn--density-default
+              v-btn--disabled
+              v-btn--size-default
+              v-btn--variant-elevated
+              v-theme--light
+            "
+            disabled="true"
+            href="href item 2"
+            id="carousel-unique-id-item-1-btn"
+            tabindex="-1"
+            title="imgAlt item 2"
+          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            
+          <!----><span
+            class="v-btn__content"
+            data-no-activator=""
+          ><img
+            alt="imgAlt item 2"
+            class="w-100"
+            src="imgSrc item 2"
+          /></span>
+            
+          <!---->
+            
+          <!---->
+          </a>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        aria-label="3 sur 3"
+        aria-roledescription="slide"
+        class="
+          carousel-item
+          hide
+        "
+        id="carousel-unique-id-item-2"
+        role="group"
+      >
+        <div class="carousel-image">
+          <a
+            class="
+              carousel-img-btn
+              elevation-0
+              v-btn
+              v-btn--density-default
+              v-btn--disabled
+              v-btn--size-default
+              v-btn--variant-elevated
+              v-theme--light
+            "
+            disabled="true"
+            href="href item 3"
+            id="carousel-unique-id-item-2-btn"
+            tabindex="-1"
+            title="imgAlt item 3"
+          ><span class="v-btn__overlay"></span><span class="v-btn__underlay"></span>
+            
+          <!----><span
+            class="v-btn__content"
+            data-no-activator=""
+          ><img
+            alt="imgAlt item 3"
+            class="w-100"
+            src="imgSrc item 3"
+          /></span>
+            
+          <!---->
+            
+          <!---->
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="
+      align-center
+      carousel-dots
+      d-flex
+      justify-center
+    "
+    id="carousel-unique-id-dots"
+  >
+    <span
+      aria-hidden="true"
+      class="
+        active-dot
+        carousel-dot
+        mx-2
+      "
+    ></span>
+    <span
+      aria-hidden="true"
+      class="
+        carousel-dot
+        mx-2
+      "
+    ></span>
+    <span
+      aria-hidden="true"
+      class="
+        carousel-dot
+        mx-2
+      "
+    ></span>
+  </div>
+</section>
+`;

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

@@ -0,0 +1,8 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface AmeliproCarouselListItem {
+	href?: string
+	imgAlt?: string
+	imgSrc?: string
+	to?: RouteLocationRaw
+}

package/src/components/Amelipro/AmeliproClickableTile/AmeliproClickableTile.mdx

@@ -0,0 +1,18 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproClickableTileStories from './AmeliproClickableTile.stories';
+
+<Meta of={AmeliproClickableTileStories} />
+
+# AmeliproClickableTile
+
+L’élément `AmeliproClickableTile` est utilisé pour afficher tous les boutons/liens de type tuile horizontale dans la charte Amelipro
+
+<Canvas of={AmeliproClickableTileStories.Default}  />
+
+## API
+
+<Controls of={AmeliproClickableTileStories.Default} />
+
+
+

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

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproClickableTile from './AmeliproClickableTile.vue'
+
+const meta = {
+	argTypes: {
+		borderedIcon: { description: 'change le style du pictogramme à gauche de la tuile' },
+		click: {
+			table: { category: 'events' },
+			description: 'Événement émis au click sur le bouton',
+		},
+		default: { description: 'slot permettant de remplacer la property `tileTitle`, ce slot ne doit contenir que des balises span' },
+		disabled: { description: 'désactive la tuile' },
+		href: { description: 'Url de destination du lien' },
+		icon: { description: 'Nom de l\'icone à afficher' },
+		imgMaxWidth: { description: 'Taille maximale de l’image du bouton' },
+		imgMinWidth: { description: 'Taille minimale de l’image du bouton' },
+		imgSrc: { description: 'Url de l’image du bouton' },
+		imgWidth: { description: 'Taille de l’image du bouton' },
+		tileTitle: { description: 'Texte à afficher sur la tuile' },
+		tileWidth: { description: 'La largeur du bouton/lien' },
+		to: { description: 'Route de destination du lien' },
+		uniqueId: { description: 'Ajoute un id au bouton' },
+	},
+	component: AmeliproClickableTile,
+	title: 'Composants/Amelipro/Tuiles/AmeliproClickableTile',
+} as Meta<typeof AmeliproClickableTile>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproClickableTile>
+
+export const Default: Story = {
+	args: {
+		icon: 'utilisateur',
+		tileTitle: 'Titre de la tuile',
+		uniqueId: 'amelipro-tile-btn-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+	<AmeliproClickableTile
+		icon="utilisateur"
+		tile-title="Titre de la tuile"
+		unique-id="amelipro-tile-btn-unique-id"
+	/>`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproClickableTile } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproClickableTile },
+		setup() {
+			return { args }
+		},
+		template: `
+	<AmeliproClickableTile
+		v-bind="args"
+	/>`,
+	}),
+}

package/src/components/Amelipro/AmeliproClickableTile/AmeliproClickableTile.vue

@@ -0,0 +1,233 @@
+<script setup lang="ts">
+	import { type PropType, computed, ref } from 'vue'
+	import AmeliproIcon from '../AmeliproIcon/AmeliproIcon.vue'
+	import type { IndexedObject } from '../types'
+	import type { RouteLocationRaw } from 'vue-router'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+
+	const props = defineProps({
+		borderedIcon: {
+			type: Boolean,
+			default: false,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		href: {
+			type: String,
+			default: undefined,
+		},
+		icon: {
+			type: String,
+			default: undefined,
+		},
+		imgMaxWidth: {
+			type: String,
+			default: undefined,
+		},
+		imgMinWidth: {
+			type: String,
+			default: undefined,
+		},
+		imgSrc: {
+			type: String,
+			default: undefined,
+		},
+		imgWidth: {
+			type: String,
+			default: '100px',
+		},
+		tileTitle: {
+			type: String,
+			default: undefined,
+		},
+		tileWidth: {
+			type: String,
+			default: '100%',
+		},
+		to: {
+			type: [Array, Object, String] as PropType<RouteLocationRaw>,
+			default: undefined,
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+	})
+
+	const hover = ref(false)
+	const focus = ref(false)
+
+	const tileStyles = computed<IndexedObject>(() => {
+		const btnStyles: IndexedObject = {
+			backgroundColor: convertToHex('ap-white'),
+			border: `1px solid ${convertToHex('ap-blue-darken-1')} !important`,
+			color: convertToHex('ap-grey-darken-1'),
+			padding: '1rem',
+		}
+		if ((hover.value || focus.value) && !props.disabled) {
+			btnStyles.border = `1px solid ${convertToHex('ap-blue-darken-2')} !important`
+		}
+		if (props.disabled) {
+			btnStyles.color = `${convertToHex('ap-grey-darken-1')} !important`
+			btnStyles.backgroundColor = `${convertToHex('ap-grey-lighten-2')} !important`
+			btnStyles.border = `1px solid ${convertToHex('ap-grey-lighten-2')} !important`
+		}
+
+		return btnStyles
+	})
+
+	const imgStyles = computed((): IndexedObject => {
+		const styles: IndexedObject = { width: props.imgWidth }
+		if (props.imgMaxWidth) {
+			styles.maxWidth = props.imgMaxWidth
+		}
+		if (props.imgMinWidth) {
+			styles.minWidth = props.imgMinWidth
+		}
+		return styles
+	})
+
+	const iconColorValue = computed<string>(() => {
+		if (!props.borderedIcon) {
+			return 'ap-white'
+		}
+		if (props.disabled) {
+			return 'ap-grey-darken-1'
+		}
+		if (hover.value || focus.value) {
+			return 'ap-blue-darken-2'
+		}
+		return 'ap-blue-darken-1'
+	})
+
+	const iconBgColorValue = computed<string>(() => {
+		if (props.borderedIcon) {
+			return 'transparent'
+		}
+		if (props.disabled) {
+			return 'ap-grey-darken-1'
+		}
+		if (hover.value || focus.value) {
+			return 'ap-blue-darken-2'
+		}
+		return 'ap-blue-darken-1'
+	})
+
+	const iconArrowColorValue = computed<string>(() => {
+		if (props.disabled) {
+			return 'ap-grey-darken-1'
+		}
+		if (hover.value || focus.value) {
+			return 'ap-blue-darken-2'
+		}
+		return 'ap-blue-darken-1'
+	})
+
+	const emit = defineEmits(['click'])
+	const emitClickEvent = () => emit('click', props.uniqueId)
+</script>
+
+<template>
+	<VBtn
+		:id="uniqueId"
+		class="amelipro-clickable-tile text-none"
+		:disabled="disabled"
+		:elevation="0"
+		height="auto"
+		:href="href"
+		:ripple="false"
+		:style="tileStyles"
+		:to="to"
+		:width="tileWidth"
+		@blur="focus = false"
+		@click="emitClickEvent"
+		@focus="focus = true"
+		@mouseenter="hover = true"
+		@mouseleave="hover = false"
+	>
+		<span class="d-flex align-center">
+			<img
+				v-if="imgSrc && !icon"
+				:id="uniqueId ? `${uniqueId}-img` : undefined"
+				alt=""
+				class="amelipro-clickable-tile__img"
+				:src="imgSrc"
+				:style="imgStyles"
+			>
+
+			<AmeliproIcon
+				v-if="icon && !imgSrc"
+				:id="uniqueId ? `${uniqueId}-icon` : undefined"
+				:bordered="borderedIcon"
+				class="amelipro-clickable-tile__icon"
+				:icon="icon"
+				:icon-bg-color="iconBgColorValue"
+				:icon-color="iconColorValue"
+				size="32px"
+			/>
+
+			<span
+				class="d-block ml-3 mr-6"
+			>
+				<slot name="default">
+					{{ tileTitle }}
+				</slot>
+			</span>
+		</span>
+
+		<AmeliproIcon
+			:id="uniqueId ? `${uniqueId}-icon-arrow` : undefined"
+			class="amelipro-clickable-tile__icon-arrow"
+			icon="chevronRight"
+			icon-bg-color="transparent"
+			:icon-color="iconArrowColorValue"
+			size="16px"
+		/>
+	</VBtn>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.amelipro-clickable-tile {
+	position: relative;
+	display: flex;
+	background-color: apTokens.$ap-white;
+	border-radius: 0.5rem;
+	white-space: normal;
+	font-size: 1rem;
+	font-weight: 600;
+	text-align: left;
+}
+
+.v-btn {
+	letter-spacing: unset;
+	text-indent: unset;
+
+	& :deep(.v-btn__overlay),
+	& :deep(.v-btn__underlay) {
+		display: none !important;
+	}
+
+	&.v-btn--active::before,
+	&:focus::before,
+	&:hover::before {
+		content: unset !important;
+		opacity: 0 !important;
+	}
+
+	&:focus {
+		outline: 1px dotted apTokens.$ap-grey-darken1;
+	}
+
+	& :deep(.v-btn__content) {
+		position: unset;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		width: 100%;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproClickableTile/tests/AmeliproClickableTile.spec.ts

@@ -0,0 +1,21 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproClickableTile from '../AmeliproClickableTile.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproClickableTile', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproClickableTile, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				icon: 'utilisateur',
+				tileTitle: 'titre de la tuile',
+				uniqueId: 'my-clickable-tile-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})