@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

package/src/components/FooterBar/FooterBar.vue

@@ -79,8 +79,12 @@
 		return typeof complianceLabel === 'string' ? locales.a11yLabel(complianceLabel) : ''
 	})
 
-	const extendedMode = computed(() => {
-		return Boolean(slots.default)
+	const extendedMode = computed<boolean>(() => {
+		if (slots.default) {
+			return true
+		}
+
+		return false
 	})
 
 	const logoSize = computed(() => {
@@ -145,91 +149,93 @@
 		}"
 		role="contentinfo"
 	>
-		<div
-			v-if="extendedMode"
-			class="d-flex align-start align-sm-center mb-6"
-		>
-			<div class="d-flex flex-grow-1 flex-column flex-sm-row">
-				<slot name="logo">
-					<Logo
-						v-if="!props.hideLogo"
-						:size="logoSize"
-						:class="{ 'mb-2 mb-sm-0': !props.hideSocialMediaLinks }"
-						class="logo"
-					/>
-				</slot>
+		<div class="container">
+			<div
+				v-if="extendedMode"
+				class="d-flex align-start align-sm-center mb-6"
+			>
+				<div class="d-flex flex-grow-1 flex-column flex-sm-row">
+					<slot name="logo">
+						<Logo
+							v-if="!props.hideLogo"
+							:size="logoSize"
+							:class="{ 'mb-2 mb-sm-0': !props.hideSocialMediaLinks }"
+							class="logo"
+						/>
+					</slot>
 
-				<VSpacer v-bind="options.spacer" />
+					<VSpacer v-bind="options.spacer" />
 
-				<SocialMediaLinks
-					v-if="!props.hideSocialMediaLinks"
-					:links="props.socialMediaLinks"
-					class="mr-8 social"
-				/>
-			</div>
+					<SocialMediaLinks
+						v-if="!props.hideSocialMediaLinks"
+						:links="props.socialMediaLinks"
+						class="mr-8 social"
+					/>
+				</div>
 
-			<VBtn
-				id="scroll-btn"
-				v-bind="options.goTopBtn"
-				:aria-label="locales.goTopBtnLabel"
-				@click="scrollToTop"
-			>
-				<VIcon
-					v-bind="options.goTopBtnIcon"
-					class="scroll"
+				<VBtn
+					id="scroll-btn"
+					v-bind="options.goTopBtn"
+					:aria-label="locales.goTopBtnLabel"
+					@click="scrollToTop"
 				>
-					{{ arrowTopIcon }}
-				</VIcon>
-			</VBtn>
-		</div>
-
-		<VDivider
-			v-if="extendedMode"
-			v-bind="options.divider"
-			class="mb-3"
-		/>
+					<VIcon
+						v-bind="options.goTopBtnIcon"
+						class="scroll"
+					>
+						{{ arrowTopIcon }}
+					</VIcon>
+				</VBtn>
+			</div>
 
-		<slot />
+			<VDivider
+				v-if="extendedMode"
+				v-bind="options.divider"
+				class="mb-3"
+			/>
 
-		<VDivider
-			v-if="extendedMode"
-			v-bind="options.divider"
-			class="mt-3 mb-6"
-		/>
+			<slot />
 
-		<ul
-			:class="{ 'py-2 py-sm-0': !extendedMode }"
-			class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3"
-		>
-			<slot name="prepend" />
+			<VDivider
+				v-if="extendedMode"
+				v-bind="options.divider"
+				class="mt-3 mb-6"
+			/>
 
-			<li
-				v-for="(item, index) in footerLinksMapping"
-				:key="index"
+			<ul
+				:class="{ 'py-2 py-sm-0': !extendedMode }"
+				class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3"
 			>
-				<component
-					:is="getLinkComponent(item)"
-					:href="item.href"
-					:to="item.to"
-					:aria-label="item.ariaLabel"
-					:target="item.openInNewTab ? '_blank' : undefined"
-					:tabindex="index"
-					:rel="item.openInNewTab ? 'noopener noreferrer' : undefined"
-					class="my-3 mx-4"
+				<slot name="prepend" />
+
+				<li
+					v-for="(item, index) in footerLinksMapping"
+					:key="index"
 				>
-					{{ item.text }}
-				</component>
-			</li>
+					<component
+						:is="getLinkComponent(item)"
+						:href="item.href"
+						:to="item.to"
+						:aria-label="item.ariaLabel"
+						:target="item.openInNewTab ? '_blank' : undefined"
+						:tabindex="index"
+						:rel="item.openInNewTab ? 'noopener noreferrer' : undefined"
+						class="my-3 mx-4"
+					>
+						{{ item.text }}
+					</component>
+				</li>
 
-			<li
-				v-if="props.version"
-				class="text-primary my-3 mx-4"
-			>
-				{{ locales.versionLabel }} {{ props.version }}
-			</li>
+				<li
+					v-if="props.version"
+					class="text-primary my-3 mx-4"
+				>
+					{{ locales.versionLabel }} {{ props.version }}
+				</li>
 
-			<slot name="append" />
-		</ul>
+				<slot name="append" />
+			</ul>
+		</div>
 	</VFooter>
 </template>
 
@@ -247,6 +253,11 @@ a {
 .v-footer {
   flex-grow: 0 !important;
   justify-content: center;
+  .container {
+    width: 100%;
+    max-width: 1712px;
+    margin: 0 auto;
+  }
 }
 .vd-footer-bar :deep() {
   .vd-footer-bar-links a {

package/src/components/FooterBar/constants/ExpertiseLevelEnum.ts

@@ -0,0 +1,4 @@
+export enum ExpertiseLevelEnum {
+	DEV = 'dev',
+	DESIGN = 'design',
+}

package/src/components/FooterBar/tests/__snapshots__/FooterBar.spec.ts.snap

@@ -2,26 +2,28 @@
 
 exports[`FooterBar > renders correctly 1`] = `
 "<footer data-v-a13c4e60="" class="v-footer v-theme--light bg-backgroundSurface elevation-3 vd-footer-bar flex-column align-stretch pa-3 w-100 v-theme--dark" style="height: auto;" role="contentinfo">
-  <!--v-if-->
-  <!--v-if-->
-  <!--v-if-->
-  <ul data-v-a13c4e60="" class="py-2 py-sm-0 vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3">
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="0" class="my-3 mx-4">Plan du site</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="1" class="my-3 mx-4">Conditions générales d’utilisation</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="2" class="my-3 mx-4">Gestion des cookies</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="3" class="my-3 mx-4">Mentions légales</routerlink>
-    </li>
-    <li data-v-a13c4e60="">
-      <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="4" class="my-3 mx-4">Accessibilité&nbsp;: non conforme</routerlink>
-    </li>
+  <div data-v-a13c4e60="" class="container">
     <!--v-if-->
-  </ul>
+    <!--v-if-->
+    <!--v-if-->
+    <ul data-v-a13c4e60="" class="py-2 py-sm-0 vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-start justify-center max-width-none mx-n3 my-n3">
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="0" class="my-3 mx-4">Plan du site</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="1" class="my-3 mx-4">Conditions générales d’utilisation</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="2" class="my-3 mx-4">Gestion des cookies</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="3" class="my-3 mx-4">Mentions légales</routerlink>
+      </li>
+      <li data-v-a13c4e60="">
+        <routerlink data-v-a13c4e60="" to="[object Object]" tabindex="4" class="my-3 mx-4">Accessibilité&nbsp;: non conforme</routerlink>
+      </li>
+      <!--v-if-->
+    </ul>
+  </div>
 </footer>"
 `;

package/src/components/FranceConnectBtn/AccessibiliteItems.ts

@@ -1,37 +1,7 @@
 import { ExpertiseLevelEnum } from './constants/ExpertiseLevelEnum'
 
 export const AccessibiliteItemsIndeterminate = [
-	{
-		title: 'Catégorie 1 : Images',
-		subtitle: '1.4 Pour chaque image utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative permet-elle d’identifier la nature et la fonction de l’image ?',
-		items: [
-			{
-
-				precision: '1.4.1 Pour chaque image (balise <img>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
-				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.1',
-				solution: [{
-					info1: '1. Retrouver dans le document les images structurées au moyen d’un élément <img> pourvues d’une alternative textuelle et utilisées comme CAPTCHA ou comme image-test',
-					info2: '2. Pour chaque image, vérifier que l’alternative textuelle est pertinente',
-					info3: '3. Si c’est le cas pour chaque image, le test est validé',
-				}],
-				expertise: ExpertiseLevelEnum.DEV,
 
-			},
-			{
-
-				precision: ' 1.4.6 Pour chaque image vectorielle (balise <svg>) utilisée comme CAPTCHA ou comme image-test, ayant une alternative textuelle, cette alternative est-elle pertinente ?',
-				link: 'https://accessibilite.numerique.gouv.fr/methode/criteres-et-tests/#1.4.6',
-				solution: [{
-					info1: '1. Retrouver dans le document les éléments <svg> pourvus d’une alternative textuelle et utilisés comme CAPTCHA ou comme image-test;',
-					info2: '2. Pour chaque élément <svg>, vérifier que l’alternative textuelle est pertinente',
-					info3: '3. Si c’est le cas pour chaque image, le test est validé',
-				}],
-				expertise: ExpertiseLevelEnum.DEV,
-
-			},
-
-		],
-	},
 	{
 		title: 'Catégorie 3 : Couleurs',
 		items: [

package/src/components/FranceConnectBtn/FranceConnectBtn.mdx

@@ -18,7 +18,7 @@ Le composant `FranceConnectBtn` est utilisé pour afficher un bouton permettant
 
 <Source dark code={`
 <script setup lang="ts">
-	import FranceConnectBtn from '@cnamts/synapse'
+	import { FranceConnectBtn } from '@cnamts/synapse'
 </script>
 
 <template>

package/src/components/FranceConnectBtn/FranceConnectBtn.stories.ts

@@ -26,7 +26,7 @@ export const Default: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FranceConnectBtn from '@cnamts/synapse'
+	import { FranceConnectBtn } from '@cnamts/synapse'
 </script>
 				`,
 			},
@@ -69,7 +69,7 @@ export const FranceConnectPlus: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FranceConnectBtn from '@cnamts/synapse'
+	import { FranceConnectBtn } from '@cnamts/synapse'
 </script>
 				`,
 			},
@@ -105,7 +105,8 @@ export const DarkTheme: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<FranceConnectBtn 
+	<FranceConnectBtn
+		href="https://app.franceconnect.gouv.fr/"
 		is-connect-plus 
 		dark
 	/>
@@ -115,7 +116,7 @@ export const DarkTheme: Story = {
 			{
 				name: 'Script',
 				code: `<script setup lang="ts">
-	import FranceConnectBtn from '@cnamts/synapse'
+	import { FranceConnectBtn } from '@cnamts/synapse'
 </script>
 				`,
 			},

package/src/components/HeaderBar/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

package/src/components/HeaderBar/Accessibilite.stories.ts

@@ -0,0 +1,223 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Structure/HeaderBar/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										<v-expansion-panel >
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+									
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									
+										<v-expansion-panel >
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}