@cnamts/synapse 1.0.20 → 1.0.22

package/src/components/FooterBar/FooterBar.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 	import { computed, useSlots } from 'vue'
 	import { type RouteLocationRaw } from 'vue-router'
+	import { useTheme } from 'vuetify'
 
 	import Logo from '@/components/Logo/Logo.vue'
 	import { LogoSize } from '@/components/Logo/LogoSize'
@@ -23,11 +24,13 @@
 		linkItems?: LinkItem[] | null
 		items?: LinkItem[] | null
 		sitemapRoute?: RouteLocationRaw
+		helpRoute?: RouteLocationRaw
 		cguRoute?: RouteLocationRaw
 		cookiesRoute?: RouteLocationRaw
 		legalNoticeRoute?: RouteLocationRaw
 		a11yStatementRoute?: RouteLocationRaw
 		hideSitemapLink?: boolean
+		hideHelpLink?: boolean
 		hideCguLink?: boolean
 		hideCookiesLink?: boolean
 		hideLegalNoticeLink?: boolean
@@ -37,16 +40,20 @@
 		hideSocialMediaLinks?: boolean
 		socialMediaLinks?: SocialMediaLink[]
 		light?: boolean
+		backOffice?: boolean
+		backOfficeText?: string
 	}>(), {
 		a11yCompliance: 'non-compliant',
 		linkItems: null,
 		items: null,
 		sitemapRoute: () => ({ name: 'sitemap' }),
+		helpRoute: () => ({ name: 'help' }),
 		cguRoute: () => ({ name: 'cgu' }),
 		cookiesRoute: () => ({ name: 'cookies' }),
 		legalNoticeRoute: () => ({ name: 'legalNotice' }),
 		a11yStatementRoute: () => ({ name: 'a11yStatement' }),
 		hideSitemapLink: false,
+		hideHelpLink: false,
 		hideCguLink: false,
 		hideCookiesLink: false,
 		hideLegalNoticeLink: false,
@@ -56,6 +63,8 @@
 		hideSocialMediaLinks: false,
 		socialMediaLinks: () => defaultSocialMediaLinks as SocialMediaLink[],
 		light: false,
+		backOffice: false,
+		backOfficeText: undefined,
 	})
 
 	const arrowTopIcon = mdiArrowUp
@@ -63,6 +72,11 @@
 	const slots = useSlots()
 	const display = useDisplay()
 	const options = useCustomizableOptions(config, props)
+	const vuetifyTheme = useTheme()
+
+	const emit = defineEmits<{
+		(e: 'event', item: string): void
+	}>()
 
 	const getLinkComponent = (item: LinkItem): string => {
 		return item.href ? 'a' : 'RouterLink'
@@ -96,7 +110,7 @@
 
 	const footerLinksMapping = computed(() => {
 		if (props.linkItems) {
-			return props.linkItems as LinkItem[]
+			return filterByTheme(props.linkItems as LinkItem[])
 		}
 
 		const linksMapping: LinkItem[] = [
@@ -104,6 +118,13 @@
 				text: locales.sitemapLabel,
 				to: props.sitemapRoute,
 				hidden: props.hideSitemapLink,
+				theme: 'cnam',
+			},
+			{
+				text: locales.HelpLabel,
+				to: props.helpRoute,
+				hidden: props.hideHelpLink,
+				theme: 'ap',
 			},
 			{
 				text: locales.cguLabel,
@@ -114,6 +135,7 @@
 				text: locales.cookiesLabel,
 				to: props.cookiesRoute,
 				hidden: props.hideCookiesLink,
+				theme: 'cnam',
 			},
 			{
 				text: locales.legalNoticeLabel,
@@ -127,9 +149,25 @@
 			},
 		] as LinkItem[]
 
-		return linksMapping.filter(item => !item.hidden)
+		return filterByTheme(linksMapping)
 	})
 
+	function filterByTheme(items: LinkItem[]): LinkItem[] {
+		return items
+			.filter(item => !item.hidden)
+			.filter(item =>
+				!vuetifyTheme.name.value || !item.theme || item.theme === vuetifyTheme.name.value,
+			)
+	}
+
+	const fontStyle = computed(() => ({
+		fontSize: vuetifyTheme.name.value === 'ap' ? '14px' : '',
+	}))
+
+	function emitEvent(item: LinkItem) {
+		emit('event', item.text)
+	}
+
 	defineExpose({
 		logoSize,
 	})
@@ -176,6 +214,7 @@
 
 				<VBtn
 					id="scroll-btn"
+					class="back-to-top"
 					v-bind="options.goTopBtn"
 					:aria-label="locales.goTopBtnLabel"
 					@click="scrollToTop"
@@ -205,7 +244,7 @@
 
 			<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"
+				class="vd-footer-bar-links text-sm-center d-flex flex-column flex-sm-row flex-wrap align-center justify-center max-width-none mx-n3 my-n3"
 			>
 				<slot name="prepend" />
 
@@ -215,20 +254,31 @@
 				>
 					<component
 						:is="getLinkComponent(item)"
+						v-if="!backOffice"
 						:href="item.href"
 						:to="item.to"
 						:aria-label="item.ariaLabel"
 						:target="item.openInNewTab ? '_blank' : undefined"
 						:rel="item.openInNewTab ? 'noopener noreferrer' : undefined"
 						class="my-3 mx-4"
+						:style="fontStyle"
+						@click="emitEvent(item)"
 					>
 						{{ item.text }}
 					</component>
 				</li>
+				<li
+					v-if="props.backOffice"
+					class="my-3 mx-4"
+					:style="fontStyle"
+				>
+					CNAM - {{ props.backOfficeText }}
+				</li>
 
 				<li
 					v-if="props.version"
-					class="my-3 mx-4"
+					class="my-3 mx-4 version"
+					:style="fontStyle"
 				>
 					{{ locales.versionLabel }} {{ props.version }}
 				</li>
@@ -283,11 +333,19 @@ a {
 			color: rgb(var(--v-theme-primary));
 		}
 
+		a.v-btn {
+			border-radius: var(tokens.$radius-rounded) !important;
+		}
+
 		a.v-btn:hover {
 			background: rgb(0 0 0 / 5%);
 		}
 	}
 
+	.back-to-top {
+		border-radius: var(tokens.$radius-rounded) !important;
+	}
+
 	button.v-btn:hover {
 		background: rgb(0 0 0 / 5%);
 	}
@@ -297,11 +355,7 @@ a {
 	}
 
 	.v-divider {
-		border-color: rgba(tokens.$parma-darken-60, 1);
-	}
-
-	svg.logo {
-		fill: rgb(var(--v-theme-primary));
+		border-color: var(--footer-background);
 	}
 
 	.scroll {
@@ -314,6 +368,10 @@ a {
 	.vd-footer-bar-links li,
 	.vd-footer-bar-links a {
 		color: $white;
+
+		&.version {
+			color: tokens.$neutral-white-alpha;
+		}
 	}
 
 	p,

package/src/components/FooterBar/config.ts

@@ -3,7 +3,7 @@ import type { VariantType, DensityType } from '@/types/vuetifyTypes'
 export const config = {
 	footer: {
 		elevation: 3,
-		color: 'parma-darken60',
+		color: 'var(--footer-background)',
 		height: 'auto',
 	},
 	goTopBtn: {
@@ -11,7 +11,7 @@ export const config = {
 		density: 'compact' as DensityType,
 		icon: 'true',
 		variant: 'text' as VariantType,
-		color: 'parma-darken60',
+		color: 'var(--footer-background)',
 	},
 	goTopBtnIcon: {
 		color: 'white',

package/src/components/FooterBar/defaultSocialMediaLinks.ts

@@ -1,7 +1,9 @@
-import { mdiTwitter, mdiLinkedin, mdiFacebook } from '@mdi/js'
+import { mdiLinkedin, mdiFacebook } from '@mdi/js'
 
 import type { SocialMediaLink } from '@/components/SocialMediaLinks/types'
 
+const xIcon = 'M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'
+
 export const defaultSocialMediaLinks: SocialMediaLink[] = [
 	{
 		icon: mdiLinkedin,
@@ -14,8 +16,8 @@ export const defaultSocialMediaLinks: SocialMediaLink[] = [
 		href: 'https://www.facebook.com/AssurMaladie/',
 	},
 	{
-		icon: mdiTwitter,
-		name: 'Twitter',
-		href: 'https://twitter.com/Assur_Maladie',
+		icon: xIcon,
+		name: 'X',
+		href: 'https://x.com/Assur_Maladie',
 	},
 ]

package/src/components/FooterBar/locales.ts

@@ -3,6 +3,7 @@ import { A11yComplianceEnum } from './A11yCompliance'
 export const locales = {
 	goTopBtnLabel: 'Retour en haut de la page',
 	sitemapLabel: 'Plan du site',
+	HelpLabel: 'Aide et configuration',
 	cguLabel: 'Conditions générales d’utilisation',
 	cookiesLabel: 'Gestion des cookies',
 	legalNoticeLabel: 'Mentions légales',

package/src/components/FooterBar/tests/FooterBarConfig.spec.ts

@@ -7,7 +7,7 @@ describe('FooterBar config', () => {
 	})
 
 	it('should have correct footer color', () => {
-		expect(config.footer.color).toBe('parma-darken60')
+		expect(config.footer.color).toBe('var(--footer-background)')
 	})
 
 	it('should have correct footer minHeight', () => {

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

@@ -4,7 +4,6 @@ exports[`FooterBar > renders correctly 1`] = `
 <footer
   class="
     align-stretch
-    bg-parma-darken60
     elevation-3
     flex-column
     pa-3
@@ -15,14 +14,17 @@ exports[`FooterBar > renders correctly 1`] = `
     w-100
   "
   role="contentinfo"
-  style="height: auto;"
+  style="
+    background-color: var(--footer-background);
+    height: auto;
+  "
 >
   <div class="container">
     <!-- v-if -->
     <!-- v-if -->
     <!-- v-if -->
     <ul class="
-      align-start
+      align-center
       d-flex
       flex-column
       flex-sm-row
@@ -36,17 +38,6 @@ exports[`FooterBar > renders correctly 1`] = `
       text-sm-center
       vd-footer-bar-links
     ">
-      <li>
-        <routerlink
-          class="
-            mx-4
-            my-3
-          "
-          to="[object Object]"
-        >
-          Plan du site
-        </routerlink>
-      </li>
       <li>
         <routerlink
           class="
@@ -58,17 +49,6 @@ exports[`FooterBar > renders correctly 1`] = `
           Conditions générales d’utilisation
         </routerlink>
       </li>
-      <li>
-        <routerlink
-          class="
-            mx-4
-            my-3
-          "
-          to="[object Object]"
-        >
-          Gestion des cookies
-        </routerlink>
-      </li>
       <li>
         <routerlink
           class="
@@ -92,6 +72,7 @@ exports[`FooterBar > renders correctly 1`] = `
         </routerlink>
       </li>
       <!-- v-if -->
+      <!-- v-if -->
     </ul>
   </div>
 </footer>

package/src/components/FooterBar/types.d.ts

@@ -7,4 +7,5 @@ export interface LinkItem {
 	href?: string
 	ariaLabel?: string
 	openInNewTab?: boolean
+	theme?: string
 }

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

@@ -158,6 +158,18 @@ const meta = {
 				},
 			},
 		},
+		'headingLevelTitle': {
+			control: { type: 'select', options: [1, 2, 3, 4, 5, 6] },
+			description: 'Le niveau de titre pour le titre du service.',
+			table: {
+				type: {
+					summary: '1 | 2 | 3 | 4 | 5 | 6',
+				},
+				defaultValue: {
+					summary: '1',
+				},
+			},
+		},
 	},
 } satisfies Meta<typeof HeaderBar>
 
@@ -167,6 +179,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -184,6 +197,7 @@ export const Default: Story = {
 					<HeaderBar
 						service-title="Synapse"
 						service-subtitle="Design System"
+						:heading-level-title="1"
 					/>
 				</template>
 				`,
@@ -202,6 +216,7 @@ export const Default: Story = {
 
 export const WithRightMenu: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -309,6 +324,7 @@ export const WithRightMenu: Story = {
 
 export const CustomLogo: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 		sticky: false,
@@ -446,7 +462,7 @@ export const CustomLogo: Story = {
 }
 
 export const CustomBrand: Story = {
-	args: {},
+	args: { headingLevelTitle: 1 },
 	render: (args) => {
 		return {
 			components: { HeaderBar },
@@ -500,6 +516,7 @@ export const CustomBrand: Story = {
 
 export const Sticky: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -543,6 +560,7 @@ export const Sticky: Story = {
 
 export const WithHeaderToolbar: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -598,6 +616,7 @@ export const WithHeaderToolbar: Story = {
 
 export const WithSubHeader: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -657,6 +676,7 @@ export const WithSubHeader: Story = {
 
 export const DefaultSlot: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -722,6 +742,7 @@ export const DefaultSlot: Story = {
 
 export const PrependSlot: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},
@@ -776,6 +797,7 @@ export const PrependSlot: Story = {
 
 export const AppendSlot: Story = {
 	args: {
+		headingLevelTitle: 1,
 		serviceTitle: 'Synapse',
 		serviceSubtitle: 'Design System',
 	},

package/src/components/HeaderBar/HeaderBar.vue

@@ -23,6 +23,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
+		headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
 	}
 
 	defineSlots<{
@@ -188,11 +189,13 @@
 							:home-aria-label
 							:service-title
 							:service-subtitle
+							:heading-level-title="headingLevelTitle"
 						>
 							<HeaderLogo
 								:aria-label="homeAriaLabel"
 								:service-title="serviceTitle"
 								:service-subtitle="serviceSubtitle"
+								:heading-level-title="headingLevelTitle"
 								:home-link
 							>
 								<template
@@ -205,6 +208,7 @@
 										:service-title
 										:service-subtitle
 										:home-link
+										:heading-level-title="headingLevelTitle"
 									/>
 								</template>
 							</HeaderLogo>

package/src/components/HeaderBar/HeaderLogo/HeaderLogo.vue

@@ -6,6 +6,7 @@
 	import { locales } from './locales'
 	import LogoMobile from './logos/Logo-mobile.vue'
 	import Logo from './logos/Logo.vue'
+	import SyHeading from '@/components/SyHeading/SyHeading.vue'
 
 	const props = withDefaults(defineProps<{
 		ariaLabel?: string
@@ -16,6 +17,7 @@
 			to?: RouteLocationRaw
 			href?: string
 		}
+		headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
 	}>(), {
 		ariaLabel: locales.ariaLabel,
 		serviceTitle: undefined,
@@ -87,9 +89,12 @@
 			</svg>
 
 			<div v-if="serviceTitle">
-				<h1 class="service-title">
+				<SyHeading
+					class="service-title"
+					:level="headingLevelTitle"
+				>
 					{{ serviceTitle }}
-				</h1>
+				</SyHeading>
 				<div
 					v-if="serviceSubtitle"
 					class="service-subtitle"

package/src/components/HeaderBar/HeaderLogo/tests/HeaderLogo.spec.ts

@@ -52,6 +52,7 @@ describe('HeaderLogo', () => {
 	it('sould display the service and the logo aria-label', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				ariaLabel: 'Test aria label',
 				serviceTitle: 'Test service title',
 				serviceSubtitle: 'Test service subtitle',
@@ -68,6 +69,7 @@ describe('HeaderLogo', () => {
 	it('should render only the serviceTitle slot when set', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				serviceTitle: 'Test service title',
 			},
 			slots: {
@@ -86,6 +88,7 @@ describe('HeaderLogo', () => {
 			global: {
 				stubs: ['RouterLink'] },
 			props: {
+				headingLevelTitle: 2,
 				homeLink: {
 					to: '/',
 				},
@@ -99,6 +102,7 @@ describe('HeaderLogo', () => {
 	it('render a div when there there is no `RouterLink` component registered', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				homeLink: {
 					to: '/',
 				},
@@ -111,6 +115,7 @@ describe('HeaderLogo', () => {
 	it('render a div when the homeLink properties `to` and `href` are both set to `undefined`', async () => {
 		const wrapper = mount(HeaderLogo, {
 			props: {
+				headingLevelTitle: 2,
 				homeLink: {
 					to: undefined,
 					href: undefined,

package/src/components/HeaderBar/accessibilite/Accessibility.mdx

@@ -1,15 +1,34 @@
 import { Meta, Story } from '@storybook/blocks'
 import * as HeaderBarStories from '../HeaderBar.stories';
 import '@/stories/styles/shared.css';
+import AccessibilityIcon from '@/common/imgs/accessibility-svgrepo-com.svg';
+import {
+	AccessibilityGuideLayout,
+	CriteriaSection,
+	CriteriaCard,
+	DemoSection,
+	BestPracticesSection,
+	ResourcesSection,
+} from '@/stories/accessibility/AccessibilityGuideLayout.mdx';
 
 <Meta of={HeaderBarStories}/>
 
-<div className="header">
-  <h1>Accessibilité</h1>
-</div>
-
 
-<div class="mt-2">
+<AccessibilityGuideLayout
+	componentName="HeaderBar"
+	iconSrc={AccessibilityIcon}
+>
+		<div class="mt-6">
 <p>Rapport d’audit manuel : <a href="/audits/HeaderBar.xlsx" style={{ color:'#0C41BD' }}>Voir le rapport</a></p>
 		<p style={{ color: 'grey', fontSize: '14px', marginTop: '0px' }}>Correctifs associés (<a href="https://github.com/assurance-maladie-digital/design-system-v3/issues/643" target="_blank" style={{color:'#0C41BD'}}>issue #643</a>)</p>
 </div>
+<CriteriaCard icon="🧩" title="Niveau de titre configurable via la prop headingLevel">
+  <ul>
+    <li>Le niveau du titre (h1 à h6) est défini grâce à la propriété <strong>headingLevel</strong> déclarée dans le composant. Si aucune valeur n’est fournie, le composant applique par défaut un titre de niveau h2, défini dans l’implémentation du composant.</li>
+      <code>&lt;HeaderBar
+          :heading-level="2" /&gt; </code>
+    
+    <li><strong>Accessibilité</strong> : Permet que la hiérarchie entre les titres soit pertinente (critère 9.1.1 RGAA) </li>
+  </ul>
+</CriteriaCard>
+</AccessibilityGuideLayout>

package/src/components/HeaderBar/tests/HeaderBar.a11y.spec.ts

@@ -16,6 +16,7 @@ describe('HeaderBar – accessibility (axe)', () => {
 	it('has no obvious axe violations with sticky header and logo', async () => {
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				sticky: true,
 				serviceTitle: 'Synapse',
 				serviceSubtitle: 'Design System',

package/src/components/HeaderBar/tests/HeaderBar.spec.ts

@@ -17,6 +17,7 @@ describe('HeaderBar', () => {
 	it('should render the component', async () => {
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				sticky: false,
 			},
 			attachTo: document.body,
@@ -121,6 +122,7 @@ describe('HeaderBar', () => {
 	it('should render in sticky mode', async () => {
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				sticky: true,
 			},
 			attachTo: document.body,
@@ -150,6 +152,7 @@ describe('HeaderBar', () => {
 		window.happyDOM.setInnerWidth(600)
 		const wrapper = mount(HeaderBar, {
 			props: {
+				headingLevelTitle: 1,
 				hideWhenDown: true,
 			},
 			attachTo: document.body,

package/src/components/HeaderNavigationBar/HeaderNavigationBar.stories.ts

@@ -278,6 +278,7 @@ type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{
 				label: 'Home',
@@ -319,6 +320,7 @@ export const Default: Story = {
 
 export const WithScroll: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{
 				label: 'Home',
@@ -375,6 +377,7 @@ export const WithScroll: Story = {
 
 export const WithManyItems: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{
 				label: 'Home',
@@ -906,6 +909,7 @@ export const WithVuetifyOptions: Story = {
 
 export const WithTabConfirmation: Story = {
 	args: {
+		headingLevelTitle: 1,
 		items: [
 			{ label: 'Home', href: '/home' },
 			{ label: 'Test avec href', href: '/test-avec-href' },

package/src/components/HeaderNavigationBar/HeaderNavigationBar.vue

@@ -41,6 +41,7 @@
 			confirmationMessage?: boolean
 			/** Largeur interne */
 			width?: string
+			headingLevelTitle: 1 | 2 | 3 | 4 | 5 | 6
 		}>(),
 		{
 			// Confirmation related defaults
@@ -125,6 +126,7 @@
 <template>
 	<HeaderBar
 		:sticky="sticky"
+		:heading-level-title="headingLevelTitle"
 		:hide-when-down="hideWhenDown"
 		:home-aria-label="homeAriaLabel"
 		:service-title="serviceTitle"