@cnamts/synapse 1.0.6 → 1.0.8

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

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

@@ -0,0 +1,140 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproClickableTile > render correctly 1`] = `
+<button
+  class="
+    amelipro-clickable-tile
+    elevation-0
+    text-none
+    v-btn
+    v-btn--density-default
+    v-btn--elevated
+    v-btn--size-default
+    v-btn--variant-elevated
+    v-theme--light
+  "
+  id="my-clickable-tile-id"
+  style="
+    height: auto;
+    width: 100%;
+    background-color: #FFFFFF;
+    border: 1px solid #00749C !important;
+    color: #1A1B1B;
+    padding: 1rem;
+  "
+  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
+      d-flex
+    ">
+      <!-- v-if -->
+      <span
+        class="
+          amelipro-clickable-tile__icon
+          amelipro-icon
+        "
+        id="my-clickable-tile-id-icon"
+      >
+        <span
+          aria-hidden="true"
+          class="
+            amelipro-custom-icon
+            custom-color
+          "
+          focusable="false"
+          role="img"
+          style="
+            color: #FFFFFF;
+            height: 32px;
+            width: 32px;
+          "
+        >
+          <span>
+            <svg
+              aria-hidden="true"
+              clip-rule="evenodd"
+              fill-rule="evenodd"
+              height="34"
+              image-rendering="optimizeQuality"
+              shape-rendering="geometricPrecision"
+              text-rendering="geometricPrecision"
+              viewBox="0 0 1823 1823"
+              width="34"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle
+                class="circle-color"
+                cx="912"
+                cy="912"
+                r="912"
+              />
+              <path
+                class="shape-color"
+                d="M962 454c117 0 125 154 125 154v145s1 111-73 152c-2 10-3 20-1 30 4-2-21 146 106 165 92 15 178 57 247 120 23 23 40 186 40 186H418s-2-132 40-186c73-62 162-104 257-120 128-19 85-160 89-158 2-10 1-21-1-31 0 0-69-89-68-169 1-81 0-134 0-134s-4-190 126-190l101 36z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span class="
+        d-block
+        ml-3
+        mr-6
+      ">
+        titre de la tuile
+      </span>
+    </span>
+    <span
+      class="
+        amelipro-clickable-tile__icon-arrow
+        amelipro-icon
+      "
+      id="my-clickable-tile-id-icon-arrow"
+    >
+      <span
+        aria-hidden="true"
+        class="
+          amelipro-custom-icon
+          custom-color
+        "
+        focusable="false"
+        role="img"
+        style="
+          color: #00749C;
+          height: 16px;
+          width: 16px;
+        "
+      >
+        <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>
+`;

package/src/components/Amelipro/AmeliproHeader/AmeliproHeader.vue

@@ -165,6 +165,12 @@
 			structureValue.value.dialog = false
 		}
 	}
+
+	const clickSignature = (event: Event): void => {
+		if (props.ameliproHeaderInfos?.signatureInfos?.clickFn) {
+			props.ameliproHeaderInfos?.signatureInfos?.clickFn(event)
+		}
+	}
 </script>
 
 <template>
@@ -358,7 +364,7 @@
 										size="2rem"
 										:to="signatureInfos.to ? signatureInfos.to : undefined"
 										:unique-id="`${uniqueId}-signature-btn`"
-										@click="signatureInfos.clickFn ? signatureInfos.clickFn : undefined"
+										@click="clickSignature"
 									/>
 								</slot>
 							</li>

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

@@ -649,6 +649,7 @@ exports[`AmeliproHeader > render correctly 1`] = `
                   "
                 ><span>
 	<svg
+                  aria-hidden="true"
                   version="1.1"
                   viewBox="0 0 32 32"
                   xmlns="http://www.w3.org/2000/svg"
@@ -657,10 +658,10 @@ exports[`AmeliproHeader > render correctly 1`] = `
                   class="circle-color"
                   d="M16,32c8.8,0,16-7.2,16-16S24.8,0,16,0,0,7.2,0,16s7.2,16,16,16Z"
                 />
-		<path
-                  class="shape-color"
-                  d="M18.3,19.7c1.1,0,1.5.5,1.8,1.6v.2c.2.5.3.7.5.8.2,0,.4,0,.6,0h.1c0,0,0-.1.1-.2l.6-.4c.5-.3,1-.6,1.5-.7,0,0,.2,0,.2,0,0,0,.2,0,.2,0,0,0,.1,0,.2.2,0,0,0,.1.1.2,0,0,0,.2,0,.2,0,0,0,.2,0,.2s0,.1-.2.2c0,0-.1,0-.2.1-.3,0-.7.2-1,.4l-.2.2-.4.3c-.2.1-.3.2-.5.3-.5.3-1.1.3-1.6,0-.6-.3-.9-.6-1.1-1.4v-.5c-.3-.5-.4-.6-.7-.6s-.5.1-.9.4h-.2c0,.1-.8.9-.8.9-1.2,1.1-2.2,1.6-3.6,1.6-1.4,0-2.6-.2-3.6-.6l2.5-.7c.4,0,.8,0,1.2,0,1,0,1.7-.3,2.6-1.1l.2-.2.4-.4c.2-.2.3-.3.5-.5.6-.5,1.1-.7,1.7-.7M21.9,8.5c.6.6.9,1.3.9,2.1s-.3,1.5-.9,2.1l-.2.2c1,1.2.9,2.4,0,3.3l-1.7,1.7c-.1.1-.3.2-.4.2-.2,0-.3,0-.4-.2-.1-.1-.2-.3-.2-.4,0-.2,0-.3.2-.4l1.7-1.7c.4-.4.4-.9,0-1.5l-7.2,7.2c-.2.2-.5.4-.8.5l-4.3,1.2c-.1,0-.2,0-.3,0-.1,0-.2,0-.3-.2s-.1-.2-.2-.3,0-.2,0-.3l1.2-4.3c0-.3.3-.6.5-.8l8.3-8.3c.6-.6,1.3-.9,2.1-.9s1.6.3,2.1.9Z"
-                />
+		<g class="shape-color">
+			<path d="M14.5,22.1h10.7v1.9h-10.7v-1.9Z" />
+			<path d="M17.6,14.6l-6,8.7-3,.6-.6-2.9,6-8.7,3.5,2.4ZM21.2,12.7c0,.4.4.8.1,1.3l-2.6,3.8-1.4-.9,2.7-4-.9-.6-.7,1.1-3.5-2.4,2.3-3.2c.2-.3.7-.4,1.2-.2l2.1,1.5c.3.2.4.7.2,1.2-.2.3-.4.6-.4.9,0,.3.4.5.7.7.5.3.3.6.2,1Z" />
+		</g>
 	</svg></span></span></span></span>
                   
                 <!---->

package/src/components/Amelipro/AmeliproIcon/iconList.ts

@@ -107,6 +107,8 @@ export const iconList: IconItem[] = [
 	{ name: 'notePencil' },
 	{ name: 'signature' },
 	{ name: 'signature2' },
+	{ name: 'shieldPlus' },
+	{ name: 'delegation' },
 	{
 		name: 'chevronLeft',
 		noBackground: true,
@@ -227,4 +229,8 @@ export const iconList: IconItem[] = [
 		name: 'arrowRight',
 		noBackground: true,
 	},
+	{
+		name: 'diamondNoCircle',
+		noBackground: true,
+	},
 ]

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

@@ -697,6 +697,7 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                         "
                       ><span>
 	<svg
+                        aria-hidden="true"
                         version="1.1"
                         viewBox="0 0 32 32"
                         xmlns="http://www.w3.org/2000/svg"
@@ -705,10 +706,10 @@ exports[`AmeliproPageLayout > render correctly 1`] = `
                         class="circle-color"
                         d="M16,32c8.8,0,16-7.2,16-16S24.8,0,16,0,0,7.2,0,16s7.2,16,16,16Z"
                       />
-		<path
-                        class="shape-color"
-                        d="M18.3,19.7c1.1,0,1.5.5,1.8,1.6v.2c.2.5.3.7.5.8.2,0,.4,0,.6,0h.1c0,0,0-.1.1-.2l.6-.4c.5-.3,1-.6,1.5-.7,0,0,.2,0,.2,0,0,0,.2,0,.2,0,0,0,.1,0,.2.2,0,0,0,.1.1.2,0,0,0,.2,0,.2,0,0,0,.2,0,.2s0,.1-.2.2c0,0-.1,0-.2.1-.3,0-.7.2-1,.4l-.2.2-.4.3c-.2.1-.3.2-.5.3-.5.3-1.1.3-1.6,0-.6-.3-.9-.6-1.1-1.4v-.5c-.3-.5-.4-.6-.7-.6s-.5.1-.9.4h-.2c0,.1-.8.9-.8.9-1.2,1.1-2.2,1.6-3.6,1.6-1.4,0-2.6-.2-3.6-.6l2.5-.7c.4,0,.8,0,1.2,0,1,0,1.7-.3,2.6-1.1l.2-.2.4-.4c.2-.2.3-.3.5-.5.6-.5,1.1-.7,1.7-.7M21.9,8.5c.6.6.9,1.3.9,2.1s-.3,1.5-.9,2.1l-.2.2c1,1.2.9,2.4,0,3.3l-1.7,1.7c-.1.1-.3.2-.4.2-.2,0-.3,0-.4-.2-.1-.1-.2-.3-.2-.4,0-.2,0-.3.2-.4l1.7-1.7c.4-.4.4-.9,0-1.5l-7.2,7.2c-.2.2-.5.4-.8.5l-4.3,1.2c-.1,0-.2,0-.3,0-.1,0-.2,0-.3-.2s-.1-.2-.2-.3,0-.2,0-.3l1.2-4.3c0-.3.3-.6.5-.8l8.3-8.3c.6-.6,1.3-.9,2.1-.9s1.6.3,2.1.9Z"
-                      />
+		<g class="shape-color">
+			<path d="M14.5,22.1h10.7v1.9h-10.7v-1.9Z" />
+			<path d="M17.6,14.6l-6,8.7-3,.6-.6-2.9,6-8.7,3.5,2.4ZM21.2,12.7c0,.4.4.8.1,1.3l-2.6,3.8-1.4-.9,2.7-4-.9-.6-.7,1.1-3.5-2.4,2.3-3.2c.2-.3.7-.4,1.2-.2l2.1,1.5c.3.2.4.7.2,1.2-.2.3-.4.6-.4.9,0,.3.4.5.7.7.5.3.3.6.2,1Z" />
+		</g>
 	</svg></span></span></span></span>
                         
                       <!---->

package/src/components/Amelipro/AmeliproResultList/AmeliproResultList.mdx

@@ -0,0 +1,15 @@
+import { Controls, Canvas, Meta } from '@storybook/blocks';
+
+import * as AmeliproResultListStories from './AmeliproResultList.stories';
+
+<Meta of={AmeliproResultListStories} />
+
+# AmeliproResultList
+
+L’élément `AmeliproResultList` est utilisé pour afficher des listes de résultats dans l’application Amelipro 
+
+<Canvas of={AmeliproResultListStories.Default} />
+
+## API
+
+<Controls of={AmeliproResultListStories.Default} />