@cnamts/synapse 1.0.1 → 1.0.3

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

@@ -0,0 +1,312 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproStepper > render correctly 1`] = `
+<div
+  class="amelipro-stepper"
+  id="my-stepper-id-container"
+>
+  <!-- desktop version -->
+  <div
+    class="amelipro-stepper__headings--desktop"
+    id="my-stepper-id-container"
+  >
+    <ol
+      class="
+        align-end
+        amelipro-stepper__list
+        d-flex
+        flex-row
+        flex-wrap
+        list-style-none
+      "
+      id="my-stepper-id-step-list"
+      role="tablist"
+    >
+      <li
+        class="amelipro-stepper__item"
+        id="my-stepper-id-step-item-0"
+      >
+        <button
+          aria-current="step"
+          class="
+            amelipro-step-btn
+            pb-4
+            pt-3
+            px-4
+            text-subtitle-1
+          "
+          id="my-stepper-id-step-btn-0"
+          role="tab"
+          style="background-color: #00749C; border: 1px solid #00749C; color: #FFFFFF; position: relative; z-index: 1;"
+          type="button"
+        >
+          <span
+            class="
+              align-center
+              amelipro-step-btn__content
+              d-flex
+            "
+            id="my-stepper-id-step-btn-0-content"
+          >
+            <span class="d-sr-only">
+              étape 1
+            </span>
+            Mes Informations
+            <span
+              aria-hidden="true"
+              class="
+                step-number
+                step-number--active
+              "
+            >
+              <span>
+                1
+              </span>
+            </span>
+          </span>
+        </button>
+      </li>
+      <li
+        class="amelipro-stepper__item"
+        id="my-stepper-id-step-item-1"
+      >
+        <button
+          class="
+            amelipro-step-btn
+            pb-4
+            pt-3
+            px-4
+            text-subtitle-1
+          "
+          id="my-stepper-id-step-btn-1"
+          role="tab"
+          style="background-color: #E6F6FC; border: 1px solid #DDDEDE; color: #00749C; position: relative; z-index: 1;"
+          type="button"
+        >
+          <span
+            class="
+              align-center
+              amelipro-step-btn__content
+              d-flex
+            "
+            id="my-stepper-id-step-btn-1-content"
+          >
+            <span class="d-sr-only">
+              étape 2
+            </span>
+            Ma démarche
+            <span
+              aria-hidden="true"
+              class="step-number"
+            >
+              <span>
+                2
+              </span>
+            </span>
+          </span>
+        </button>
+      </li>
+      <li
+        class="amelipro-stepper__item"
+        id="my-stepper-id-step-item-2"
+      >
+        <button
+          class="
+            amelipro-step-btn
+            pb-4
+            pt-3
+            px-4
+            text-subtitle-1
+          "
+          disabled=""
+          id="my-stepper-id-step-btn-2"
+          role="tab"
+          style="background-color: #DDDEDE; border: 1px solid #DDDEDE; color: #1A1B1B; position: relative; z-index: 1; cursor: default;"
+          type="button"
+        >
+          <span
+            class="
+              align-center
+              amelipro-step-btn__content
+              d-flex
+            "
+            id="my-stepper-id-step-btn-2-content"
+          >
+            <span class="d-sr-only">
+              étape 3
+            </span>
+            Ma demande
+            <span
+              aria-hidden="true"
+              class="
+                step-number
+                step-number--disabled
+              "
+            >
+              <span>
+                3
+              </span>
+            </span>
+          </span>
+        </button>
+      </li>
+      <li
+        class="amelipro-stepper__item"
+        id="my-stepper-id-step-item-3"
+      >
+        <button
+          class="
+            amelipro-step-btn
+            pb-4
+            pt-3
+            px-4
+            text-subtitle-1
+          "
+          disabled=""
+          id="my-stepper-id-step-btn-3"
+          role="tab"
+          style="background-color: #DDDEDE; border: 1px solid #DDDEDE; color: #1A1B1B; position: relative; z-index: 1; cursor: default;"
+          type="button"
+        >
+          <span
+            class="
+              align-center
+              amelipro-step-btn__content
+              d-flex
+            "
+            id="my-stepper-id-step-btn-3-content"
+          >
+            <span class="d-sr-only">
+              étape 4
+            </span>
+            Récapitulatif
+            <span
+              aria-hidden="true"
+              class="
+                step-number
+                step-number--disabled
+              "
+            >
+              <span>
+                4
+              </span>
+            </span>
+          </span>
+        </button>
+      </li>
+    </ol>
+  </div>
+  <div
+    class="
+      amelipro-stepper__content
+      amelipro-stepper__content--default
+      ap-white
+    "
+    id="my-stepper-id-current-step-content"
+  >
+    <p>
+      Contenu principal
+    </p>
+  </div>
+  <div
+    class="
+      align-center
+      amelipro-stepper__actions
+      d-flex
+      flex-column
+      flex-sm-row
+      justify-sm-end
+      mt-4
+    "
+    id="my-stepper-id-footer"
+  >
+    <div class="
+      d-flex
+      d-sm-inline-flex
+      flex-column
+      flex-sm-row
+      next-step-btn__wrapper
+      order-sm-1
+    ">
+      <!-- v-if -->
+      <button
+        class="
+          amelipro-btn
+          amelipro-btn--style
+          amelipro-stepper__btn--next
+          amelipro-stepper__btn--next
+          bg-ap-blue-darken-1
+          elevation-0
+          order-sm-1
+          order-sm-1
+          v-btn
+          v-btn--density-default
+          v-btn--flat
+          v-btn--size-default
+          v-btn--variant-flat
+          v-theme--light
+        "
+        id="my-stepper-id-footer-next-btn"
+        style="height: auto; min-height: 2.5rem; color: #FFFFFF !important;"
+        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
+            amelipro-custom-btn
+            d-flex
+            flex-row
+          ">
+            Suivant
+            <span
+              class="
+                amelipro-btn__icon--right
+                amelipro-icon
+                d-block
+              "
+              id="my-stepper-id-footer-next-btn-icon"
+            >
+              <span
+                class="amelipro-external-icon"
+                style="background-color: transparent; border-radius: 50%; color: #FFFFFF; padding: 0px; height: 1.5rem; width: 1.5rem;"
+              >
+                <i
+                  aria-hidden="true"
+                  class="
+                    M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z
+                    mdi
+                    notranslate
+                    text-ap-white
+                    v-icon
+                    v-theme--light
+                  "
+                  style="font-size: 100%; height: 100%; width: 100%; display: block;"
+                ></i>
+              </span>
+            </span>
+            <!-- v-if -->
+          </span>
+        </span>
+        <!---->
+        <!---->
+      </button>
+      <!-- v-if -->
+    </div>
+    <div class="
+      d-flex
+      flex-column
+      flex-sm-row
+      justify-start
+      w-100
+    ">
+      <div></div>
+    </div>
+  </div>
+</div>
+`;

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

@@ -0,0 +1,5 @@
+export interface AmeliproStep {
+	label: string
+	disabled: boolean
+	titleDisabled?: boolean
+}

package/src/components/Amelipro/AmeliproTabs/AmeliproTabBtn/AmeliproTabBtn.vue

@@ -0,0 +1,196 @@
+<script setup lang="ts">
+	import { computed, ref } from 'vue'
+	import type { IndexedObject } from '../../types'
+	import { convertToHex } from '@/utils/functions/convertToHex'
+
+	const props = defineProps({
+		controls: {
+			type: String,
+			required: true,
+		},
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		notification: {
+			type: Number,
+			default: undefined,
+		},
+		pills: {
+			type: Boolean,
+			default: false,
+		},
+		selected: {
+			type: Boolean,
+			default: false,
+		},
+		tabindex: {
+			type: Number,
+			required: true,
+		},
+		uniqueId: {
+			type: String,
+			required: true,
+		},
+	})
+
+	const emit = defineEmits(['click'])
+	const focused = ref(false)
+	const emitClickEvent = () => emit('click')
+
+	const selectedValue = computed<'true' | 'false' | undefined >(() => {
+		if (props.selected) {
+			return 'true'
+		}
+		else if (!props.selected) {
+			return 'false'
+		}
+		return undefined
+	})
+
+	const style = computed<IndexedObject>(() => {
+		const btnStyles: IndexedObject = {
+			backgroundColor: convertToHex('ap-blue-lighten-3'),
+			border: `1px solid ${convertToHex('ap-grey-lighten-2')}`,
+			color: convertToHex('ap-blue-darken-1'),
+		}
+
+		if (props.disabled && !props.selected) {
+			btnStyles.backgroundColor = convertToHex('ap-grey-lighten-2')
+			btnStyles.color = convertToHex('ap-grey-darken-1')
+			btnStyles.cursor = 'default'
+		}
+
+		if (props.selected && !props.disabled) {
+			btnStyles.color = convertToHex('ap-white')
+			btnStyles.backgroundColor = convertToHex('ap-blue-darken-1')
+			btnStyles.border = `1px solid ${convertToHex('ap-blue-darken-1')}`
+		}
+
+		return btnStyles
+	})
+
+	const pillStyle = computed<IndexedObject>(() => {
+		const btnStyles: IndexedObject = {
+			backgroundColor: convertToHex('ap-white'),
+			border: `1px solid ${convertToHex('ap-blue-darken-1')}`,
+			color: convertToHex('ap-blue-darken-1'),
+			marginBottom: '8px',
+			position: 'relative',
+		}
+
+		if (props.disabled && !props.selected) {
+			btnStyles.color = convertToHex('ap-grey-darken-1')
+			btnStyles.backgroundColor = convertToHex('ap-grey-lighten-2')
+			btnStyles.border = `1px solid ${convertToHex('ap-grey-darken-1')}`
+		}
+
+		if (props.selected && !props.disabled) {
+			btnStyles.color = convertToHex('ap-blue-darken-1')
+			btnStyles.backgroundColor = convertToHex('ap-blue-lighten-3')
+		}
+
+		return btnStyles
+	})
+
+	const notificationValue = computed<string | undefined>(() => {
+		if (props.notification && props.notification > 0 && props.notification < 10) {
+			return props.notification.toString()
+		}
+		else if (props.notification && props.notification >= 10) {
+			return '9+'
+		}
+		return undefined
+	})
+</script>
+
+<template>
+	<button
+		:id="uniqueId"
+		:aria-controls="controls"
+		:aria-selected="selectedValue"
+		class="amelipro-tab__btn"
+		:class="{
+			'mr-2 amelipro-tab__btn--pills': pills,
+			'selected': selected,
+			'px-4 py-2 text-uppercase': !pills,
+			'disabled': disabled
+		}"
+		:disabled="disabled"
+		role="tab"
+		:style="pills ? pillStyle : style"
+		:tabindex="tabindex"
+		type="button"
+		@blur="focused = false"
+		@click="emitClickEvent"
+		@focus="focused = true"
+	>
+		<span
+			:id="`${uniqueId}-notification-content`"
+			class="d-flex align-center amelipro-tab__btn__content"
+		>
+			<slot />
+
+			<span
+				v-if="notification"
+				:id="`${uniqueId}-notification-text`"
+				class="d-block ml-4 ap-white--text amelipro-tab__btn-notification"
+			>
+				{{ notificationValue }}
+			</span>
+		</span>
+	</button>
+</template>
+
+<style lang="scss" scoped>
+@use '@/assets/amelipro/apTokens';
+
+.check-icon {
+	position: absolute;
+	top: calc(50% - 18px);
+	left: 0;
+}
+
+.amelipro-tab__btn--pills {
+	position: relative;
+	border-radius: apTokens.$tabs-pill-radius;
+	cursor: pointer;
+	padding: apTokens.$tabs-pill-padding-y apTokens.$tabs-pill-padding-x;
+	font-weight: apTokens.$tabs-pill-font-weight;
+
+	&.selected {
+		&::after {
+			position: absolute;
+			top: 0.8rem;
+			left: 0.75rem;
+			width: 1rem;
+			height: 0.5rem;
+			border-bottom: 2px solid apTokens.$ap-blue-darken1;
+			border-left: 2px solid apTokens.$ap-blue-darken1;
+			transform: rotate(-50deg);
+			content: '';
+		}
+	}
+
+	&.disabled {
+		cursor: default;
+	}
+}
+
+.amelipro-tab__btn-notification {
+	position: relative;
+	z-index: 1;
+
+	&::before {
+		content: '';
+		position: absolute;
+		top: calc(50% - 0.8rem);
+		left: calc(50% - 0.8rem);
+		width: 1.6rem;
+		height: 1.6rem;
+		border-radius: 50%;
+		background-color: apTokens.$ap-pink;
+		z-index: -1;
+	}
+}
+</style>

package/src/components/Amelipro/AmeliproTabs/AmeliproTabBtn/tests/AmeliproTabBtn.spec.ts

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import { expect, describe, it } from 'vitest'
+import AmeliproTabBtn from '../AmeliproTabBtn.vue'
+import { vuetify } from '@tests/unit/setup'
+
+describe('AmeliproTabBtn', () => {
+	it('render correctly', async () => {
+		const wrapper = mount(AmeliproTabBtn, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				controls: 'content-id',
+				tabindex: 0,
+				uniqueId: 'my-tab-btn-id',
+			},
+			slot: {
+				default: 'Label du bouton',
+			},
+		})
+
+		expect(wrapper.html()).toMatchSnapshot()
+	})
+})

package/src/components/Amelipro/AmeliproTabs/AmeliproTabBtn/tests/__snapshots__/AmeliproTabBtn.spec.ts.snap

@@ -0,0 +1,30 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`AmeliproTabBtn > render correctly 1`] = `
+<button
+  aria-controls="content-id"
+  aria-selected="false"
+  class="
+    amelipro-tab__btn
+    px-4
+    py-2
+    text-uppercase
+  "
+  id="my-tab-btn-id"
+  role="tab"
+  style="background-color: #E6F6FC; border: 1px solid #DDDEDE; color: #00749C;"
+  tabindex="0"
+  type="button"
+>
+  <span
+    class="
+      align-center
+      amelipro-tab__btn__content
+      d-flex
+    "
+    id="my-tab-btn-id-notification-content"
+  >
+    <!-- v-if -->
+  </span>
+</button>
+`;

package/src/components/Amelipro/AmeliproTabs/AmeliproTabs.mdx

@@ -0,0 +1,23 @@
+import { Controls, Canvas, Meta, Source } from '@storybook/blocks';
+
+import * as AmeliproTabsStories from './AmeliproTabs.stories';
+
+<Meta of={AmeliproTabsStories} />
+
+# AmeliproTabs
+
+L’élément `AmeliproTabs` est utilisé pour afficher tous les éléments de type Onglets dans la charte Amelipro
+
+<Canvas of={AmeliproTabsStories.Default}  />
+
+## API
+
+<Controls of={AmeliproTabsStories.Default} />
+
+## Usages
+
+Utiliser un système d'onglets plutôt que de simples boutons affichants des contenus est important car ce système intègre plusieurs choses utiles pour l'accessibilité,
+notament des éléments permetant une bonne lecture par les assistants vocaux et tout un système de fonctionnement au clavier.
+
+
+