@cnamts/synapse 1.0.2 → 1.0.4

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

@@ -0,0 +1,135 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproTileBtn from './AmeliproTileBtn.vue'
+
+const meta = {
+	argTypes: {
+		alignTopStyle: { description: 'Change l’alignement des éléments de la tuile pour les mettre en haut (les differents éléments ne seront plus forcément alignés cela dépendra du contenu au-dessus)' },
+		borderDash: { description: 'Change la bordure appliquée à la tuile pour une bordure en tirets' },
+		click: {
+			table: { category: 'events' },
+			description: 'Événement émis au click sur le bouton',
+		},
+		complementaryInfoLine1: { description: 'Ligne dédiée à ajouter des informations supplémentaires (les differents éléments ne seront plus forcément alignés cela dépendra du contenu au-dessus)' },
+		complementaryInfoLine2: { description: 'Ligne dédiée à ajouter des informations supplémentaires (les differents éléments ne seront plus forcément alignés cela dépendra du contenu au-dessus)' },
+		disabled: { description: 'Url de destination du lien' },
+		href: { description: 'Désactive le bouton' },
+		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' },
+		invalid: { description: 'Ajoute une icône croix en bas du bouton ainsi qu’une bordure rouge' },
+		label: { description: 'Texte à afficher sur le bouton' },
+		message: { description: 'Message informatif à intégrer au bouton' },
+		messageType: {
+			control: 'select',
+			description: 'Type du message informatif à intégrer au bouton, accepte les valeur "info", "warning" ou "error"',
+			options: ['info', 'error', 'warning'],
+		},
+		tileMinHeight: { description: 'La hauteur minimale du bouton/lien' },
+		tilePadding: { description: 'Padding du bouton' },
+		tileWidth: { description: 'La largeur du bouton/lien' },
+		to: { description: 'Route de destination du lien' },
+		uniqueId: { description: 'Ajoute un id au bouton' },
+		valid: { description: 'Ajoute une icône check en bas du bouton' },
+	},
+	component: AmeliproTileBtn,
+	title: 'Composants/Amelipro/Tuiles/AmeliproTileBtn',
+} as Meta<typeof AmeliproTileBtn>
+
+export default meta
+
+type Story = StoryObj<typeof AmeliproTileBtn>
+
+export const Default: Story = {
+	args: { uniqueId: 'amelipro-tile-btn-unique-id' },
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<ul class="list-style-none d-flex flex-wrap">
+	<li>
+		<AmeliproTileBtn
+			img-src="/tile-example.svg"
+			label="Appareil de mesure Tensiomètre"
+			tile-min-height="100%"
+			unique-id="tile-btn-example-1"
+		/>
+	</li>
+	<li>
+		<AmeliproTileBtn
+			img-src="/tile-example.svg"
+			label="Appareil de mesure Tensiomètre"
+			tile-min-height="100%"
+			unique-id="tile-btn-example-2"
+			valid
+		/>
+	</li>
+	<li>
+		<AmeliproTileBtn
+			img-src="/tile-example.svg"
+			invalid
+			label="Appareil de mesure Tensiomètre"
+			tile-min-height="100%"
+			unique-id="tile-btn-example-3"
+		/>
+	</li>
+</ul>
+				`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproTileBtn } from '@cnamts/synapse'
+</script>`,
+			},
+			{
+				name: 'Style',
+				code: `<style lang="scss" scoped>
+	li {
+		margin: 10px;
+		width: calc((100% / 3) - 20px);
+	}
+</style>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTileBtn },
+		setup() {
+			return { args }
+		},
+		template: `
+			<ul class="list-style-none d-flex flex-wrap">
+				<li style="margin: 10px; width: calc((100% / 3) - 20px);">
+					<AmeliproTileBtn
+						img-src="/tile-example.svg"
+						label="Appareil de mesure Tensiomètre"
+						tile-min-height="100%"
+						unique-id="tile-btn-example-1"
+						v-bind="args"
+					/>
+				</li>
+				<li style="margin: 10px; width: calc((100% / 3) - 20px);">
+					<AmeliproTileBtn
+						img-src="/tile-example.svg"
+						label="Appareil de mesure Tensiomètre"
+						tile-min-height="100%"
+						unique-id="tile-btn-example-2"
+						valid
+						v-bind="args"
+					/>
+				</li>
+				<li style="margin: 10px; width: calc((100% / 3) - 20px);">
+					<AmeliproTileBtn
+						img-src="/tile-example.svg"
+						invalid
+						label="Appareil de mesure Tensiomètre"
+						tile-min-height="100%"
+						unique-id="tile-btn-example-3"
+						v-bind="args"
+					/>
+				</li>
+			</ul>
+		`,
+	}),
+}

package/src/components/Amelipro/AmeliproTileBtn/AmeliproTileBtn.vue

@@ -0,0 +1,360 @@
+<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({
+		alignTopStyle: {
+			type: Boolean,
+			default: false,
+		},
+		borderDash: {
+			type: Boolean,
+			default: false,
+		},
+		complementaryInfoLine1: {
+			type: String,
+			default: undefined,
+		},
+		complementaryInfoLine2: {
+			type: String,
+			default: undefined,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		href: {
+			type: String,
+			default: undefined,
+		},
+		imgMaxWidth: {
+			type: String,
+			default: undefined,
+		},
+		imgMinWidth: {
+			type: String,
+			default: undefined,
+		},
+		imgSrc: {
+			type: String,
+			required: true,
+		},
+		imgWidth: {
+			type: String,
+			default: '100px',
+		},
+		invalid: {
+			type: Boolean,
+			default: false,
+		},
+		label: {
+			type: String,
+			required: true,
+		},
+		labelBottom: {
+			type: String,
+			default: undefined,
+		},
+		message: {
+			type: String,
+			default: undefined,
+		},
+		messageType: {
+			default: 'info',
+			type: String,
+			validator(value: string): boolean {
+				return ['info', 'error', 'warning'].includes(value.toLowerCase())
+			},
+		},
+		tileMinHeight: {
+			type: String,
+			default: undefined,
+		},
+		tilePadding: {
+			type: String,
+			default: '2rem 1.5rem',
+		},
+		tileWidth: {
+			type: String,
+			default: '100%',
+		},
+		to: {
+			type: [Array, Object, String] as PropType<RouteLocationRaw>,
+			default: undefined,
+		},
+		uniqueId: {
+			type: String,
+			default: undefined,
+		},
+		valid: {
+			type: Boolean,
+			default: false,
+		},
+	})
+
+	const hover = ref(false)
+	const focus = ref(false)
+
+	const tileStyles = computed<IndexedObject>(() => {
+		const btnStyles: IndexedObject = {
+			backgroundColor: convertToHex('ap-white'),
+			border: `2px solid ${convertToHex('ap-white')} !important`,
+			color: convertToHex('ap-grey-darken-1'),
+			padding: props.tilePadding,
+		}
+		if (props.borderDash) {
+			btnStyles.border = `2px dashed ${convertToHex('ap-blue-lighten-1')} !important`
+		}
+		if (hover.value && !props.disabled) {
+			btnStyles.border = `2px solid ${convertToHex('ap-blue-darken-1')} !important`
+
+			if (props.borderDash) {
+				btnStyles.border = `2px dashed ${convertToHex('ap-blue-darken-1')} !important`
+			}
+		}
+		if (props.invalid) {
+			btnStyles.border = `2px solid ${convertToHex('ap-red-darken-1')} !important`
+		}
+		if (props.disabled) {
+			btnStyles.color = `${convertToHex('ap-grey-darken-1')} !important`
+			btnStyles.backgroundColor = `${convertToHex('ap-grey-lighten-2')} !important`
+			btnStyles.border = `2px 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 iconName = computed<string>(() => {
+		if (props.messageType === 'error') {
+			return 'sensInterdit'
+		}
+		if (props.messageType === 'warning') {
+			return 'exclamation'
+		}
+
+		return 'information'
+	})
+
+	const iconBgColorValue = computed<string>(() => {
+		if (props.messageType === 'error') {
+			return 'ap-red'
+		}
+		if (props.messageType === 'warning') {
+			return 'ap-yellow'
+		}
+
+		return 'ap-parme-darken-1'
+	})
+
+	const emit = defineEmits(['click'])
+	const emitClickEvent = () => emit('click', props.uniqueId)
+</script>
+
+<template>
+	<VBtn
+		:id="uniqueId"
+		class="amelipro-tile-btn text-none"
+		:disabled="disabled"
+		:elevation="1"
+		height="auto"
+		:href="href"
+		:min-height="tileMinHeight"
+		:ripple="false"
+		:style="tileStyles"
+		:to="to"
+		:width="tileWidth"
+		@blur="focus = false"
+		@click="emitClickEvent()"
+		@focus="focus = true"
+		@mouseenter="hover = true"
+		@mouseleave="hover = false"
+	>
+		<span v-if="alignTopStyle || complementaryInfoLine1 || complementaryInfoLine2 || message">
+			<span
+				:id="uniqueId ? `${uniqueId}-text` : undefined"
+				class="d-block text-h5 text-center font-weight-bold amelipro-tile-btn__content"
+			>
+				{{ label }}
+
+				<span
+					v-if="labelBottom"
+					:id="uniqueId ? `${uniqueId}-text-bottom` : undefined"
+					class="d-block mt-4 text-h5 text-center font-weight-bold amelipro-tile-btn__content--bottom"
+				>
+					{{ labelBottom }}
+				</span>
+			</span>
+			<img
+				:id="uniqueId ? `${uniqueId}-img` : undefined"
+				alt=""
+				class="mt-4 amelipro-tile-btn__img"
+				:src="imgSrc"
+				:style="imgStyles"
+			>
+
+			<span
+				v-if="complementaryInfoLine1"
+				class="d-block mt-4"
+			>
+				{{ complementaryInfoLine1 }}
+			</span>
+			<span
+				v-if="complementaryInfoLine2"
+				class="d-block mt-4 text-h5"
+				:class="{ 'text-ap-blue-darken-1': !disabled }"
+			>
+				{{ complementaryInfoLine2 }}
+			</span>
+
+			<span
+				v-if="message"
+				class="d-flex justify-center mt-4 text-center font-weight-bold"
+				:class="{
+					'text-ap-parme-darken-1': messageType === 'info',
+					'text-ap-red': messageType === 'error',
+					'text-ap-yellow-darken-4': messageType === 'warning',
+				}"
+			>
+				<AmeliproIcon
+					key="icon"
+					bordered
+					class="mr-2 message__icon"
+					:icon="iconName"
+					:icon-bg-color="iconBgColorValue"
+					:icon-color="messageType === 'warning' ? 'ap-grey-darken-1' : 'ap-white'"
+					large
+					:unique-id="uniqueId ? `${uniqueId}-icon` : undefined"
+				/>
+
+				{{ message }}
+			</span>
+
+			<span
+				v-if="valid && !invalid"
+				:id="uniqueId ? `${uniqueId}-valid-status-text` : undefined"
+				class="d-sr-only"
+			>
+				&nbsp;validé
+			</span>
+			<span
+				v-if="invalid && !valid"
+				:id="uniqueId ? `${uniqueId}-valid-status-text` : undefined"
+				class="d-sr-only"
+			>
+				&nbsp;contient des erreur
+			</span>
+		</span>
+
+		<span
+			v-if="!complementaryInfoLine1 && !complementaryInfoLine2 && !alignTopStyle && !message"
+			:id="uniqueId ? `${uniqueId}-text` : undefined"
+			class="d-block text-h5 text-center font-weight-bold amelipro-tile-btn__content"
+		>
+			{{ label }}
+
+			<span
+				v-if="labelBottom"
+				:id="uniqueId ? `${uniqueId}-text-bottom` : undefined"
+				class="d-block mt-4 text-h5 text-center font-weight-bold amelipro-tile-btn__content--bottom"
+			>
+				{{ labelBottom }}
+			</span>
+
+			<span
+				v-if="valid && !invalid"
+				:id="uniqueId ? `${uniqueId}-valid-status-text` : undefined"
+				class="d-sr-only"
+			>
+				&nbsp;validé
+			</span>
+
+			<span
+				v-if="invalid && !valid"
+				:id="uniqueId ? `${uniqueId}-valid-status-text` : undefined"
+				class="d-sr-only"
+			>
+				&nbsp;contient des erreur
+			</span>
+		</span>
+		<img
+			v-if="!complementaryInfoLine1 && !complementaryInfoLine2 && !alignTopStyle && !message"
+			:id="uniqueId ? `${uniqueId}-img` : undefined"
+			alt=""
+			class="mt-4 amelipro-tile-btn__img"
+			:src="imgSrc"
+			:style="imgStyles"
+		>
+
+		<AmeliproIcon
+			v-if="valid || invalid"
+			class="amelipro-tile-btn__icon"
+			:icon="valid ? 'check' : 'croix'"
+			:icon-color="valid ? 'ap-turquoise-darken-1' : 'ap-red-darken-1'"
+			size="45px"
+			:unique-id="uniqueId ? `${uniqueId}-valid-status-icon` : undefined"
+		/>
+	</VBtn>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.amelipro-tile-btn {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	background-color: apTokens.$ap-white;
+	border-radius: 0.5rem;
+	white-space: normal;
+}
+
+.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;
+		flex-direction: column;
+		justify-content: space-between;
+		align-items: center;
+		max-width: 100%;
+	}
+}
+
+.amelipro-tile-btn__icon {
+	position: absolute;
+	bottom: 0;
+	right: 10px;
+}
+</style>

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

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

package/src/components/Amelipro/AmeliproTileBtn/tests/__snapshots__/AmeliproTileBtn.spec.ts.snap

@@ -0,0 +1,65 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTileBtn > render correctly 1`] = `
+<button
+  class="
+    amelipro-tile-btn
+    elevation-1
+    text-none
+    v-btn
+    v-btn--density-default
+    v-btn--elevated
+    v-btn--size-default
+    v-btn--variant-elevated
+    v-theme--light
+  "
+  id="my-tile-btn-id"
+  style="
+    height: auto;
+    width: 100%;
+    background-color: #FFFFFF;
+    border: 2px solid #FFFFFF !important;
+    color: #1A1B1B;
+    padding: 2rem 1.5rem;
+  "
+  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-tile-btn__content
+        d-block
+        font-weight-bold
+        text-center
+        text-h5
+      "
+      id="my-tile-btn-id-text"
+    >
+      texte du bouton
+      <!-- v-if -->
+      <!-- v-if -->
+      <!-- v-if -->
+    </span>
+    <img
+      alt=""
+      class="
+        amelipro-tile-btn__img
+        mt-4
+      "
+      id="my-tile-btn-id-img"
+      src="img-src"
+      style="width: 100px;"
+    />
+    <!-- v-if -->
+  </span>
+  <!---->
+  <!---->
+</button>
+`;

package/src/components/Amelipro/AmeliproTooltips/AmeliproTooltips.mdx

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

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

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import AmeliproTooltips from './AmeliproTooltips.vue'
+
+const meta = {
+	argTypes: {
+		btnLabel: { description: 'Libellé du bouton d’ouverture de la bulle d’information' },
+		iconBgColor: { description: 'Couleur de fond pour l’icône du bouton d’ouverture de la bulle d’information' },
+		iconColor: { description: 'Couleur de l’icône du bouton d’ouverture de la bulle d’information' },
+		iconHoverBgColor: { description: 'Couleur de fond pour l’icône au survol du bouton d’ouverture de la bulle d’information' },
+		iconHoverColor: { description: 'Couleur de l’icône au survol du bouton d’ouverture de la bulle d’information' },
+		iconName: { description: 'Nom de l’icône personnalisée' },
+		tooltipBg: { description: 'Couleur de fond du Tooltips' },
+		tooltipText: { description: 'Texte du Tooltips' },
+		tooltipTextColor: { description: 'Couleur du text du Tooltips' },
+		uniqueId: { description: 'Défini l’id du tooltip dans le DOM' },
+	},
+	component: AmeliproTooltips,
+	title: 'Composants/Amelipro/AmeliproTooltips',
+} as Meta<typeof AmeliproTooltips>
+export default meta
+
+type Story = StoryObj<typeof AmeliproTooltips>
+
+export const Default: Story = {
+	args: {
+		tooltipText: 'Contenu de mon infobulle',
+		uniqueId: 'amelipro-tooltip-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproTooltips
+		tooltip-text="Contenu de mon infobulle"
+		unique-id="amelipro-tooltip-id"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Scripts',
+				code: `<script setup lang="ts">
+	import { AmeliproTooltips } from '@cnamts/synapse'
+</script>`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproTooltips },
+		setup() {
+			return { args }
+		},
+		template: `
+<AmeliproTooltips
+	v-bind="args"
+/>
+		`,
+	}),
+}