@cnamts/synapse 1.0.4 → 1.0.6

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordionTemplate/AmeliproAccordionTemplate.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+	import { computed, ref, useSlots } from 'vue'
+	import AmeliproIcon from '../../AmeliproIcon/AmeliproIcon.vue'
+	import type { IndexedObject } from '../../types'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+	import { useDisplay } from 'vuetify'
+
+	const props = defineProps({
+		accordionTitle: {
+			type: String,
+			required: true,
+		},
+		borderColor: {
+			type: String,
+			default: 'ap-grey-lighten-2',
+		},
+		bordered: {
+			type: Boolean,
+			default: true,
+		},
+		cardColor: {
+			type: String,
+			default: 'ap-white',
+		},
+		headerRightWidth: {
+			type: String,
+			default: '50%',
+		},
+		hideSeparator: {
+			type: Boolean,
+			default: false,
+		},
+		isOpen: {
+			type: Boolean,
+			default: false,
+		},
+		titleLevel: {
+			type: Number,
+			default: 2,
+		},
+		titleUppercase: {
+			type: Boolean,
+			default: false,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const { smAndUp } = useDisplay()
+	const focus = ref(false)
+	const hover = ref(false)
+	const borderHexColor = computed<string>(() => convertToHex(props.borderColor))
+	const generalAccordionStyles = computed<IndexedObject>(() => {
+		const cardStyle: IndexedObject = { backgroundColor: `${convertToHex(props.cardColor)}` }
+
+		if (props.bordered) {
+			cardStyle.border = `1px solid ${borderHexColor.value}`
+		}
+
+		return cardStyle
+	})
+
+	const slots = useSlots()
+	const hasRightSlot = computed((): boolean => Boolean(slots.headerRight))
+
+	const headerLeftStyles = computed<IndexedObject>((): IndexedObject => {
+		if (hasRightSlot.value && smAndUp.value) {
+			return {
+				width: `calc(100% - (${props.headerRightWidth} + 10px))`,
+				marginRight: '10px',
+			}
+		}
+		return { width: '100%' }
+	})
+
+	const headerRightStyles = computed<IndexedObject>((): IndexedObject => {
+		if (hasRightSlot.value && smAndUp.value) {
+			return {
+				width: `calc(${props.headerRightWidth} - 10px)`,
+				marginLeft: '10px',
+			}
+		}
+		return { width: '100%' }
+	})
+
+	const emit = defineEmits(['open-close'])
+	const emitOpenCloseEvent = (): void => {
+		emit('open-close', props.uniqueId, !props.isOpen)
+	}
+</script>
+
+<template>
+	<div
+		:id="`${uniqueId}-container`"
+		class="amelipro-accordion w-100 mb-4"
+		:class="{
+			'amelipro-accordion--opened': isOpen
+		}"
+		:style="generalAccordionStyles"
+	>
+		<div
+			:id="`${uniqueId}-header`"
+			class="amelipro-accordion__header w-100 d-flex flex-column flex-sm-row align-center"
+		>
+			<div
+				class="btn-wrapper"
+				:style="headerLeftStyles"
+			>
+				<p
+					:id="uniqueId + 'title'"
+					:aria-level="titleLevel"
+					class="font-weight-semibold text-h3 mb-0"
+					role="heading"
+				>
+					<button
+						:id="`${uniqueId}-header-btn-open-close`"
+						:aria-controls="uniqueId"
+						:aria-expanded="isOpen === true ? 'true' : 'false'"
+						class="text-ap-grey-darken-1 text-left d-inline-flex align-center accordion-btn font-weight-semibold"
+						:class="titleUppercase ? 'text-uppercase' : undefined"
+						type="button"
+						@blur="focus = false"
+						@click="emitOpenCloseEvent()"
+						@focus="focus = false"
+						@mouseenter="hover = true"
+						@mouseleave="hover = false"
+					>
+						<AmeliproIcon
+							class="mr-2 accordion-icon"
+							:icon="isOpen ? 'triangleUp' : 'triangleDown'"
+							icon-bg-color="transparent"
+							:icon-color="hover ? 'ap-blue darken-2' : 'ap-blue darken-1'"
+							size="11px"
+							:unique-id="`${uniqueId}-icon`"
+						/>
+
+						{{ accordionTitle }}
+					</button>
+				</p>
+			</div>
+
+			<div
+				v-if="hasRightSlot"
+				class="right-slot"
+				:style="headerRightStyles"
+			>
+				<slot name="headerRight" />
+			</div>
+		</div>
+		<div
+			v-show="isOpen === true"
+			:id="uniqueId"
+			:aria-labelledby="uniqueId + 'title'"
+			class="amelipro-accordion__wrapper"
+			role="region"
+		>
+			<div
+				class="w-100 amelipro-accordion__content text-ap-grey-darken-1"
+				:style="!hideSeparator ? `border-top: 1px solid ${borderHexColor}` : undefined"
+			>
+				<slot />
+			</div>
+		</div>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.accordion-btn {
+	padding: 0;
+	background-color: transparent;
+	border: 0;
+
+	&:focus {
+		outline: 1px dotted apTokens.$ap-grey-darken1;
+	}
+}
+
+.amelipro-accordion {
+	display: block;
+	position: relative;
+	max-width: 100%;
+	border-radius: apTokens.$card-radius;
+	text-decoration: none;
+	overflow-wrap: break-word;
+	white-space: normal;
+}
+
+.amelipro-accordion__header {
+	padding: apTokens.$card-padding-desktop;
+	word-break: break-all;
+
+	@media #{apTokens.$media-down-md} {
+		padding: apTokens.$card-padding-tablet;
+	}
+
+	@media #{apTokens.$media-down-sm} {
+		padding: apTokens.$card-padding-mobile;
+	}
+
+	.btn-wrapper {
+		display: inline-block;
+	}
+
+	.amelipro-accordion--opened & {
+		padding-bottom: apTokens.$card-padding-mobile;
+	}
+}
+
+.amelipro-accordion__wrapper {
+	width: 100%;
+	padding: 0 apTokens.$card-padding-desktop;
+	font-size: apTokens.$font-size-xs;
+	font-weight: apTokens.$ap-font-weight-regular;
+
+	@media #{apTokens.$media-down-md} {
+		padding: 0 apTokens.$card-padding-tablet;
+	}
+
+	@media #{apTokens.$media-down-sm} {
+		padding: 0 apTokens.$card-padding-mobile;
+	}
+}
+
+.amelipro-accordion__content {
+	padding-top: apTokens.$card-padding-desktop;
+	padding-bottom: apTokens.$card-padding-tablet;
+
+	@media #{apTokens.$media-down-sm} {
+		padding-bottom: apTokens.$card-padding-mobile;
+	}
+}
+
+.accordion-icon {
+	& :deep(.amelipro-custom-icon) {
+		height: auto !important;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordionTemplate/__tests__/AmeliproAccordionTemplate.spec.ts

@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import AmeliproAccordionTemplate from '../AmeliproAccordionTemplate.vue'
+
+describe('AmeliproAccordionTemplate', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproAccordionTemplate, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				accordionTitle: 'titre accordion',
+				uniqueId: 'amelipro-accordion-template-unique-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproAccordion/AmeliproAccordionTemplate/__tests__/__snapshots__/AmeliproAccordionTemplate.spec.ts.snap

@@ -0,0 +1,124 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproAccordionTemplate > render correctly 1`] = `
+<div
+  class="
+    amelipro-accordion
+    mb-4
+    w-100
+  "
+  id="amelipro-accordion-template-unique-id-container"
+  style="
+    background-color: #FFFFFF;
+    border: 1px solid #DDDEDE;
+  "
+>
+  <div
+    class="
+      align-center
+      amelipro-accordion__header
+      d-flex
+      flex-column
+      flex-sm-row
+      w-100
+    "
+    id="amelipro-accordion-template-unique-id-header"
+  >
+    <div
+      class="btn-wrapper"
+      style="width: 100%;"
+    >
+      <p
+        aria-level="2"
+        class="
+          font-weight-semibold
+          mb-0
+          text-h3
+        "
+        id="amelipro-accordion-template-unique-idtitle"
+        role="heading"
+      >
+        <button
+          aria-controls="amelipro-accordion-template-unique-id"
+          aria-expanded="false"
+          class="
+            accordion-btn
+            align-center
+            d-inline-flex
+            font-weight-semibold
+            text-ap-grey-darken-1
+            text-left
+          "
+          id="amelipro-accordion-template-unique-id-header-btn-open-close"
+          type="button"
+        >
+          <span
+            class="
+              accordion-icon
+              amelipro-icon
+              mr-2
+            "
+            id="amelipro-accordion-template-unique-id-icon"
+          >
+            <span
+              aria-hidden="true"
+              class="
+                amelipro-custom-icon
+                custom-color
+              "
+              focusable="false"
+              role="img"
+              style="
+                color: #0C419A;
+                height: 11px;
+                width: 11px;
+              "
+            >
+              <span>
+                <svg
+                  aria-hidden="true"
+                  style="enable-background:new 0 0 42 42;"
+                  version="1.1"
+                  viewBox="0 0 42 42"
+                  x="0px"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  y="0px"
+                >
+                  <polygon
+                    class="shape-color"
+                    points="21,39.2 42,2.8 0,2.8 "
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+          titre accordion
+        </button>
+      </p>
+    </div>
+    <!-- v-if -->
+  </div>
+  <div
+    aria-labelledby="amelipro-accordion-template-unique-idtitle"
+    class="amelipro-accordion__wrapper"
+    id="amelipro-accordion-template-unique-id"
+    role="region"
+    style="display: none;"
+  >
+    <div
+      class="
+        amelipro-accordion__content
+        text-ap-grey-darken-1
+        w-100
+      "
+      style="
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: #DDDEDE;
+      "
+    ></div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,20 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import { vuetify } from '@tests/unit/setup'
+import AmeliproAccordion from '../AmeliproAccordion.vue'
+
+describe('AmeliproAccordion', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproAccordion, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				accordionTitle: 'titre accordion',
+				uniqueId: 'amelipro-accordion-unique-id',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

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

@@ -0,0 +1,124 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproAccordion > render correctly 1`] = `
+<div
+  class="
+    amelipro-accordion
+    mb-4
+    w-100
+  "
+  id="amelipro-accordion-unique-id-container"
+  style="
+    background-color: #FFFFFF;
+    border: 1px solid #DDDEDE;
+  "
+>
+  <div
+    class="
+      align-center
+      amelipro-accordion__header
+      d-flex
+      flex-column
+      flex-sm-row
+      w-100
+    "
+    id="amelipro-accordion-unique-id-header"
+  >
+    <div
+      class="btn-wrapper"
+      style="width: 100%;"
+    >
+      <p
+        aria-level="2"
+        class="
+          font-weight-semibold
+          mb-0
+          text-h3
+        "
+        id="amelipro-accordion-unique-idtitle"
+        role="heading"
+      >
+        <button
+          aria-controls="amelipro-accordion-unique-id"
+          aria-expanded="false"
+          class="
+            accordion-btn
+            align-center
+            d-inline-flex
+            font-weight-semibold
+            text-ap-grey-darken-1
+            text-left
+          "
+          id="amelipro-accordion-unique-id-header-btn-open-close"
+          type="button"
+        >
+          <span
+            class="
+              accordion-icon
+              amelipro-icon
+              mr-2
+            "
+            id="amelipro-accordion-unique-id-icon"
+          >
+            <span
+              aria-hidden="true"
+              class="
+                amelipro-custom-icon
+                custom-color
+              "
+              focusable="false"
+              role="img"
+              style="
+                color: #0C419A;
+                height: 11px;
+                width: 11px;
+              "
+            >
+              <span>
+                <svg
+                  aria-hidden="true"
+                  style="enable-background:new 0 0 42 42;"
+                  version="1.1"
+                  viewBox="0 0 42 42"
+                  x="0px"
+                  xml:space="preserve"
+                  xmlns="http://www.w3.org/2000/svg"
+                  xmlns:xlink="http://www.w3.org/1999/xlink"
+                  y="0px"
+                >
+                  <polygon
+                    class="shape-color"
+                    points="21,39.2 42,2.8 0,2.8 "
+                  />
+                </svg>
+              </span>
+            </span>
+          </span>
+          titre accordion
+        </button>
+      </p>
+    </div>
+    <!-- v-if -->
+  </div>
+  <div
+    aria-labelledby="amelipro-accordion-unique-idtitle"
+    class="amelipro-accordion__wrapper"
+    id="amelipro-accordion-unique-id"
+    role="region"
+    style="display: none;"
+  >
+    <div
+      class="
+        amelipro-accordion__content
+        text-ap-grey-darken-1
+        w-100
+      "
+      style="
+        border-top-width: 1px;
+        border-top-style: solid;
+        border-top-color: #DDDEDE;
+      "
+    ></div>
+  </div>
+</div>
+`;

package/src/components/Amelipro/AmeliproCaptcha/AmeliproCaptcha.mdx

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

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

@@ -0,0 +1,87 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+import AmeliproCaptcha from './AmeliproCaptcha.vue'
+
+const meta = {
+	argTypes: {
+		'captchaInputLabelAudio': { description: 'Libellé du champ texte pour le captcha audio' },
+		'captchaInputLabelImg': { description: 'Libellé du champ texte pour le captcha image' },
+		'captchaTitle': { description: 'Titre du bloc captcha' },
+		'click-play': { description: 'Événement émis au clic sur le bouton lecture', type: 'void' },
+		'click-switch': { description: 'Événement émis au clic sur le bouton permettant de passer du captcha image au captcha audio (et inversement). Retourne `true` si l’on bascule vers le captcha audio, `false` dans le cas inverse.', type: 'boolean' },
+		'click-update': { description: 'Événement émis au clic sur le bouton permettant de changer d’image ou d’audio', type: 'void' },
+		'defaultAudio': { description: 'Charge le composant avec le captcha audio par défaut' },
+		'imgAlt': { description: 'Défini une alternative textuelle pour le captcha image' },
+		'imgMaxWidth': { description: 'Défini la largeur maximale du captcha image' },
+		'imgWidth': { description: 'Défini la largeur du captcha image' },
+		'modelValue': { description: 'Défini la valeur du champ de saisie' },
+		'switchCaptchaTypeLabelAudio': { description: 'Libellé du bouton permettant de passer du captcha audio au captcha image' },
+		'switchCaptchaTypeLabelImg': { description: 'Libellé du bouton permettant de passer du captcha image au captcha audio' },
+		'uniqueId': { description: 'Identifiant unique du bloc captcha' },
+		'update:model-value': { description: 'Événement émis au changement de valeur du champ de saisie. Retourne un object ICaptcha.', type: 'ICaptcha' },
+		'updateCaptchaLabelAudio': { description: 'Libellé du bouton permettant de changer d’audio' },
+		'updateCaptchaLabelImg': { description: 'Libellé du bouton permettant de changer d’image' },
+	},
+	component: AmeliproCaptcha,
+	title: 'Composants/Amelipro/Formulaires/AmeliproCaptcha',
+} as Meta<typeof AmeliproCaptcha>
+export default meta
+
+type Story = StoryObj<typeof AmeliproCaptcha>
+
+export const Default: Story = {
+	args: {
+		modelValue: {
+			audioSrc: '/amelipro/sound/captcha.wav',
+			imgSrc: '/amelipro/img/captcha.png',
+			inputValue: '',
+		},
+		uniqueId: 'amelipro-captcha-unique-id',
+	},
+	parameters: {
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `<template>
+	<AmeliproCaptcha
+		v-model="model"
+		unique-id="amelipro-captcha-unique-id"
+	/>
+</template>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `<script setup lang="ts">
+	import { AmeliproCaptcha } from '@cnamts/synapse'
+	import { ref } from 'vue'
+
+	const model = ref({
+		audioSrc: '/amelipro/sound/captcha.wav',
+		imgSrc: '/amelipro/img/captcha.png',
+		inputValue: '',
+	})
+</script>
+				`,
+			},
+		],
+	},
+	render: args => ({
+		components: { AmeliproCaptcha },
+		setup() {
+			const model = ref(args.modelValue)
+
+			// Optional: Keeps v-model in sync with storybook args
+			watch(() => args.modelValue, (newValue) => {
+				model.value = newValue
+			})
+			return { args, model }
+		},
+		template: `
+			<AmeliproCaptcha
+				v-bind="args"
+				v-model="model"
+			/>
+		`,
+	}),
+}