@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/LogoBrandSection/LogoBrandSection.vue

@@ -0,0 +1,312 @@
+<script setup lang="ts">
+	import { LogoSize } from '@/components/Logo/LogoSize'
+	import { cnamLightTheme } from '@/designTokens/tokens/cnam/cnamLightTheme'
+	import { computed, getCurrentInstance } from 'vue'
+	import type { RouteLocationRaw } from 'vue-router'
+	import Logo from '../Logo/Logo.vue'
+	import { dividerDimensionsMapping } from './dividerDimensionsMapping'
+	import { locales } from './locales'
+	import { secondaryLogoMapping } from './secondaryLogoMapping'
+	import type { Theme } from './types'
+
+	const props = withDefaults(
+		defineProps<{
+			theme?: Theme
+			serviceTitle?: string
+			serviceSubTitle?: string
+			mobileVersion?: boolean
+			reduceLogo?: boolean
+			homeLink?: {
+				ariaLabel?: string
+				to?: RouteLocationRaw
+				href?: string
+			}
+		}>(), {
+			theme: 'default',
+			serviceTitle: undefined,
+			serviceSubTitle: undefined,
+			mobileVersion: false,
+			reduceLogo: false,
+			homeLink: () => ({
+				href: '/',
+			}),
+
+		})
+
+	const slots = defineSlots<{
+		'default'(): unknown
+		'brand-content'(): unknown
+	}>()
+
+	const service = computed(() => {
+		if (props.theme === 'compte-entreprise') {
+			const { title, subTitle } = locales.compteEntreprise
+
+			return {
+				title,
+				subTitle,
+			}
+		}
+
+		return {
+			title: props.serviceTitle || '',
+			subTitle: props.serviceSubTitle || '',
+		}
+	})
+
+	const mobileWithSecondaryLogo = computed(() => {
+		return props.mobileVersion && hasSecondaryLogo.value
+	})
+
+	const height = computed(() => {
+		if (mobileWithSecondaryLogo.value) {
+			return '32px'
+		}
+
+		return props.mobileVersion ? '40px' : '64px'
+	})
+
+	const isRisquePro = computed(() => {
+		return !props.reduceLogo && props.theme === 'risque-pro'
+	})
+
+	const isCompteEntreprise = computed(() => {
+		return props.theme === 'compte-entreprise'
+	})
+
+	const isCompteAmeliMobile = computed(() => {
+		return props.theme === 'compte-ameli' && props.mobileVersion
+	})
+
+	const hideSignature = computed(() => {
+		return (
+			props.reduceLogo
+			|| isCompteEntreprise.value
+			|| isCompteAmeliMobile.value
+		)
+	})
+
+	const secondaryLogo = computed(() => {
+		if (props.theme in secondaryLogoMapping) {
+			return secondaryLogoMapping[props.theme as keyof typeof secondaryLogoMapping]
+		}
+		return null
+	})
+
+	const hasSecondaryLogo = computed(() => {
+		return Boolean(secondaryLogo.value)
+	})
+
+	const hasSecondaryLogoLink = computed(() => {
+		return (
+			props.theme === 'ameli-pro'
+			|| props.theme === 'ameli'
+		)
+	})
+
+	const logoContainerComponent = computed(() => {
+		if (props.homeLink?.to) {
+			const componentsRegistered = getCurrentInstance()?.appContext?.components
+			const hasRouterLink = componentsRegistered && 'RouterLink' in componentsRegistered
+			if (hasRouterLink) {
+				return 'router-link'
+			}
+			return 'div'
+		}
+		if (props.homeLink?.href) {
+			return 'a'
+		}
+		return 'div'
+	})
+
+	const secondaryLogoCtnComponent = computed(() => {
+		return hasSecondaryLogoLink.value
+			? logoContainerComponent.value
+			: 'div'
+	})
+
+	const secondaryLogoLabel = computed(() => {
+		return hasSecondaryLogoLink.value && secondaryLogo.value
+			? `${locales.homeLinkPrefix} ${secondaryLogo.value.alt}`
+			: null
+	})
+
+	const avatar = computed(() => {
+		return props.reduceLogo ? hasSecondaryLogo.value : false
+	})
+
+	const hasBrandSlot = computed(() => {
+		return Boolean(slots['brand-content'])
+	})
+
+	const showBrandContent = computed(() => {
+		return Boolean(
+			service.value.title || service.value.subTitle || hasBrandSlot.value || hasSecondaryLogo.value,
+		)
+	})
+
+	const showDivider = computed(() => {
+		if (props.reduceLogo) {
+			return false
+		}
+
+		return showBrandContent.value
+	})
+
+	const showServiceSubTitle = computed(() => {
+		return Boolean(
+			service.value.title && service.value.subTitle && !props.mobileVersion,
+		)
+	})
+
+	const dividerColor = computed(() => {
+		switch (props.theme) {
+		case 'cnam':
+		case 'ameli-pro':
+			return cnamLightTheme.secondary
+		case 'compte-entreprise':
+			return '#cd545b'
+		default:
+			return cnamLightTheme.primary
+		}
+	})
+
+	const dividerDimensions = computed(() => {
+		if (props.mobileVersion) {
+			return hasSecondaryLogo.value
+				? dividerDimensionsMapping.xSmall
+				: dividerDimensionsMapping.small
+		}
+		return dividerDimensionsMapping.normal
+	})
+
+	const logoSize = computed(() => {
+		if (props.mobileVersion) {
+			return hasSecondaryLogo.value
+				? LogoSize.X_SMALL
+				: LogoSize.SMALL
+		}
+		return LogoSize.NORMAL
+	})
+</script>
+
+<template>
+	<div
+		:height="height"
+		class="vd-logo-brand-section d-flex"
+	>
+		<component
+			:is="logoContainerComponent"
+			:to="logoContainerComponent === 'router-link' ? homeLink?.to : undefined"
+			:href="logoContainerComponent === 'a' ? homeLink?.href : undefined"
+			class="vd-home-link"
+		>
+			<Logo
+				:hide-signature="hideSignature"
+				:hide-organism="isCompteAmeliMobile"
+				:risque-pro="isRisquePro"
+				:aria-label="homeLink?.ariaLabel"
+				:avatar="avatar"
+				:size="logoSize"
+				:class="{ 'mr-2': avatar }"
+			/>
+		</component>
+
+		<slot>
+			<svg
+				v-if="showDivider"
+				:width="dividerDimensions.width"
+				:height="dividerDimensions.height"
+				:fill="dividerColor"
+				role="img"
+				focusable="false"
+				aria-hidden="true"
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="0 0 22 64"
+				class="vd-divider"
+			>
+				<path d="M14.3 49.3c-.2 0-.4-.2-.4-.4V14.2c0-.2.2-.4.4-.4.3 0 .5.2.5.4v34.7c0 .2-.2.4-.5.4Z" />
+			</svg>
+
+			<component
+				:is="secondaryLogoCtnComponent"
+				v-if="secondaryLogo"
+				:aria-label="secondaryLogoLabel"
+				:to="secondaryLogoCtnComponent === 'router-link' ? homeLink?.to : undefined"
+				:href="secondaryLogoCtnComponent === 'a' ? homeLink?.href : undefined"
+				class="vd-home-link"
+			>
+				<img
+					:src="secondaryLogo.src"
+					:alt="secondaryLogo.alt"
+				>
+			</component>
+
+			<div
+				v-else-if="showBrandContent"
+				class="vd-title-container d-flex justify-center flex-column text-primary"
+			>
+				<slot name="brand-content">
+					<h1
+						v-if="service.title"
+						:class="{
+							'vd-compte-entreprise-title': isCompteEntreprise,
+						}"
+						class="vd-title text-caption text-md-subtitle-1 font-weight-medium"
+					>
+						<template v-if="typeof service.title === 'string'">
+							{{ service.title }}
+						</template>
+
+						<template v-else>
+							{{ service.title.text }}
+							<span>{{ service.title.highlight }}</span>
+						</template>
+					</h1>
+
+					<h2
+						v-if="showServiceSubTitle"
+						class="vd-title text-caption"
+					>
+						{{ service.subTitle }}
+					</h2>
+				</slot>
+			</div>
+		</slot>
+	</div>
+</template>
+
+<style lang="scss" scoped>
+.vd-logo-brand-section {
+	.vd-title-container {
+		overflow: hidden;
+	}
+
+	:deep(.vd-title) {
+		line-height: 1.45 !important;
+	}
+
+	.vd-compte-entreprise-title {
+		font-weight: 700 !important;
+
+		span {
+			color: #cd545b;
+		}
+	}
+
+	:deep(img) {
+		width: auto;
+		height: 100%;
+		flex: none;
+	}
+
+	svg,
+	.vd-home-link {
+		flex: none;
+	}
+
+	.vd-home-link {
+		cursor: pointer;
+	}
+}
+</style>

package/src/components/LogoBrandSection/assets/ameli-pro.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="99" height="64" viewBox="0 0 99 64" fill="none"><path fill="#00a5df" d="M68.38 38.78c.54.32 1.45.63 2.31.63 2.76 0 5.38-1.87 5.38-5.72v-2.86c0-3.59-2.62-5.7-5.7-5.7-3.09 0-5.71 2.11-5.71 5.7v13.73h3.72v-5.78Zm0-2.99v-4.83c0-1.8.85-2.68 2-2.68 1.12 0 1.97.88 1.97 2.68v2.6c0 1.97-.88 2.7-2 2.7-.67 0-1.32-.2-1.97-.47ZM77.97 39.07h3.7v-8.68c0-1.23.67-2.11 1.84-2.11.63 0 1.28.13 1.85.29l.7-3.02a8.47 8.47 0 0 0-2.57-.42c-3.1 0-5.52 2.11-5.52 5.26v8.68ZM86.43 33.45c0 3.72 2.44 5.96 5.8 5.96 3.35 0 5.8-2.24 5.8-5.96V31.1c0-3.72-2.45-5.96-5.8-5.96-3.36 0-5.8 2.24-5.8 5.96v2.36Zm3.69-.13v-2.1c0-1.8.52-2.94 2.1-2.94 1.56 0 2.11 1.14 2.11 2.94v2.1c0 1.8-.55 2.94-2.1 2.94-1.57 0-2.11-1.14-2.11-2.94Z"/><path fill="#0c419a" d="M.47 35.64c0-2.82 2.38-4.42 7.64-4.97-.08-1.2-.82-1.9-2.27-1.9-1.12 0-2.24.48-3.5 1.23L.94 27.36a10.75 10.75 0 0 1 5.67-1.78c3.39 0 5.25 1.97 5.25 6.09v7.72H8.15v-1.3s-1.53 1.64-3.7 1.64C2 39.69.48 37.9.48 35.64Zm7.64-.22v-2.34c-2.8.37-3.88 1.26-3.88 2.27 0 .85.6 1.3 1.53 1.3.86-.04 1.64-.52 2.35-1.23ZM57.84 21.75c0-1.22.97-2.08 2.28-2.08 1.3 0 2.27.86 2.27 2.08 0 1.23-.97 2.08-2.27 2.08-1.35 0-2.28-.89-2.28-2.08Zm.3 4.05h3.91v13.48h-3.9V25.8ZM36.24 32.7c0-4.37 2.76-7.05 6.07-7.05 3.77 0 5.85 2.79 5.85 6.46 0 .7-.07 1.45-.14 1.79h-7.94c.33 1.97 1.67 2.86 3.43 2.86 1 0 1.86-.41 2.83-.97l1.34 2.49a8.4 8.4 0 0 1-4.7 1.52c-3.87-.04-6.74-2.64-6.74-7.1Zm8.6-1.48c0-1.48-.85-2.56-2.41-2.56-1.23 0-2.1.85-2.35 2.56h4.77ZM18.18 27.66c1.08-1.08 2.28-2 4.03-2 1.86 0 3.02.77 3.69 2.18 1.15-1.19 2.38-2.19 4.17-2.19 2.9 0 4.21 2.08 4.21 5.39v8.28h-4.14v-7.73c0-1.85-.52-2.41-1.56-2.41-.63 0-1.34.4-2.16 1.23v8.95h-4.18v-7.77c0-1.85-.48-2.41-1.56-2.41-.63 0-1.34.4-2.16 1.23v8.95h-4.14V26.02h3.8v1.64ZM50.52 35.2V20.34h3.92v15c0 .86.37 1.12.7 1.12.15 0 .26 0 .49-.04l.48 2.94c-.44.18-1.08.33-1.97.33-2.72.04-3.62-1.75-3.62-4.5Z"/></svg>

package/src/components/LogoBrandSection/assets/ameli.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="80" height="64" viewBox="0 0 80 64" fill="#0c419a"><path d="M.47 37.75c0-2.75 2.31-4.3 7.41-4.85-.07-1.15-.8-1.84-2.2-1.84-1.09 0-2.17.47-3.4 1.2L.94 29.68a10.4 10.4 0 0 1 5.5-1.74c3.29 0 5.1 1.92 5.1 5.93v7.52H7.91v-1.26s-1.48 1.59-3.58 1.59C1.95 41.69.47 39.95.47 37.75Zm7.41-.22v-2.28c-2.71.37-3.76 1.23-3.76 2.21 0 .83.58 1.27 1.48 1.27.84-.04 1.6-.51 2.28-1.2ZM56.98 24.23c0-1.2.94-2.03 2.21-2.03s2.2.83 2.2 2.03c0 1.19-.93 2.02-2.2 2.02-1.3 0-2.2-.87-2.2-2.02Zm.3 3.94h3.79v13.12h-3.8V28.17ZM35.76 34.9c0-4.27 2.68-6.88 5.9-6.88 3.65 0 5.67 2.71 5.67 6.3a9.7 9.7 0 0 1-.14 1.73h-7.7c.32 1.92 1.62 2.78 3.32 2.78.98 0 1.8-.4 2.75-.94l1.3 2.43a8.14 8.14 0 0 1-4.56 1.48c-3.76-.04-6.54-2.57-6.54-6.9Zm8.35-1.45c0-1.45-.83-2.5-2.35-2.5-1.2 0-2.02.83-2.28 2.5h4.63ZM17.93 29.98c1.05-1.05 2.2-1.96 3.9-1.96 1.82 0 2.94.76 3.59 2.14 1.12-1.16 2.31-2.14 4.05-2.14 2.82 0 4.08 2.03 4.08 5.25v8.06h-4V33.8c0-1.81-.52-2.35-1.53-2.35-.61 0-1.3.4-2.1 1.2v8.7h-4.05v-7.55c0-1.81-.47-2.35-1.51-2.35-.62 0-1.3.4-2.1 1.2v8.7h-4.01V28.39h3.68v1.6ZM64.98 40.42c0-.68.5-1.22 1.19-1.22s1.2.54 1.2 1.22c0 .7-.51 1.23-1.2 1.23s-1.2-.54-1.2-1.23ZM72.9 27.99c-1.45 0-2.25.97-2.25 2.7v1.92l-1.2.08v.8h1.2v8.1h.94v-8.14h2.06v-.87H71.6v-1.85c0-1.26.44-1.91 1.3-1.91.33 0 .65.07 1.02.22l.07.03.29-.76-.07-.03a3.8 3.8 0 0 0-1.3-.3ZM79.55 32.58c-.33-.18-.65-.18-.9-.18-.95 0-1.78.61-2.47 1.7l-.07-1.49h-.83v8.94h.94v-6.08c.58-1.37 1.41-2.2 2.31-2.2.33 0 .51.03.73.1l.07.04.25-.83h-.03ZM49.75 37.32V22.85h3.8v14.61c0 .83.36 1.08.69 1.08.14 0 .25 0 .47-.03l.47 2.86c-.44.18-1.05.32-1.92.32-2.64.04-3.5-1.7-3.5-4.37Z"/></svg>

package/src/components/LogoBrandSection/assets/cnam.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="110" height="64" viewBox="0 0 110 64" fill="#007Fad"><path d="m7.3 36.1-1.4.2a4 4 0 0 1-2-.5 3 3 0 0 1-1.3-1.4c-.3-.7-.4-1.4-.4-2.2 0-.8.1-1.5.4-2.1a3 3 0 0 1 1.3-1.4c.6-.4 1.2-.5 2-.5a6 6 0 0 1 2.8.7l.2-1.8-1.4-.5-1.6-.2a5.4 5.4 0 0 0-5 2.8 6 6 0 0 0-.7 3c0 1.2.2 2.2.7 3.1.5.9 1.2 1.6 2 2a6 6 0 0 0 3 .7 6 6 0 0 0 3-.7l-.2-1.7a4 4 0 0 1-1.4.5zm9.6.4-.5-.1-.2-.4v-2.9c0-1.2-.2-2.1-.7-2.6-.5-.5-1.2-.8-2.1-.8-1 0-1.9.2-2.8.7l.2 1.5c.2-.2.6-.3.9-.4l1-.2c.5 0 .9.1 1.2.3.2.2.4.6.4 1.1l-2.1.3a7 7 0 0 0-1.7 1 2 2 0 0 0-.8 1.6c0 .7.2 1.3.7 1.7.4.4 1 .6 1.7.6.5 0 .9-.1 1.4-.3l1.1-.7.7.8c.3.2.7.2 1.2.2h.5l.2-1.5h-.3zm-2.6-.7-.8.6-.8.2c-.8 0-1.1-.3-1.1-1 0-.5.2-.9.7-1.1a4 4 0 0 1 2-.4zm3.9-9.2H20v1.8h-1.8zm0 3.3H20v7.9h-1.8zm8.5 4.3c-.4-.3-.9-.7-1.6-.9l-1-.4-.5-.3a.8.8 0 0 1-.2-.5c0-.3.1-.5.3-.7.2-.2.5-.2.9-.2l1.1.2c.3.1.7.3 1 .6l.2-1.5c-.7-.4-1.5-.6-2.3-.6-.9 0-1.7.2-2.2.7-.5.4-.8 1-.8 1.7 0 .6.2 1.1.6 1.5l1.8.9 1.2.5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-1 .2c-.8 0-1.6-.3-2.5-.8l-.2 1.6a6 6 0 0 0 2.7.6c1 0 1.8-.2 2.3-.6.5-.4.8-1 .8-1.7-.1-.9-.3-1.4-.6-1.7zm6.7 0c-.4-.3-.9-.7-1.6-.9l-1-.4-.5-.3-.3-.6c0-.3.1-.5.3-.7.2-.2.5-.2.9-.2l1.1.2c.3.1.7.3 1 .6l.2-1.5c-.7-.4-1.5-.6-2.4-.6-.9 0-1.7.2-2.2.7-.5.4-.8 1-.8 1.7 0 .6.2 1.1.6 1.5l1.8.9 1.2.5c.2.2.3.4.3.7 0 .3-.1.5-.3.7l-1 .2c-.8 0-1.6-.3-2.5-.8l-.2 1.6a6 6 0 0 0 2.7.6c1 0 1.8-.2 2.3-.6.5-.4.8-1 .8-1.7.1-.8 0-1.3-.4-1.6zm8.8-1c0-.7-.1-1.2-.4-1.8a3.4 3.4 0 0 0-3-1.7c-.8 0-1.5.2-2.1.5-.6.4-1 .8-1.3 1.5-.3.6-.4 1.3-.4 2 0 .8.2 1.5.5 2.1.3.6.8 1.1 1.5 1.5.7.4 1.4.6 2.4.6s1.8-.2 2.7-.6l-.1-1.5c-.7.4-1.5.6-2.3.6-.7 0-1.3-.2-1.8-.6-.5-.4-.8-1-.8-1.8H42Zm-5.4-.3c.3-1.1.9-1.7 2-1.7.5 0 .9.2 1.2.5.3.3.4.7.4 1.2zm16.6-2.2a3 3 0 0 0-2.3-1c-.9 0-1.6.3-2.3.8l-.1-.7h-1.6v7.9h1.8V32c.4-.5 1-.8 1.7-.8.6 0 1.1.2 1.3.5.3.4.4.9.4 1.7v4.3h1.8v-4.3a4 4 0 0 0-.7-2.7zm9.1 5.8-.5-.1-.2-.4v-2.9c0-1.2-.2-2.1-.7-2.6a3 3 0 0 0-2.2-.8c-1 0-1.9.2-2.8.7l.2 1.5 1.1-.5 1-.2c.5 0 .9.1 1.2.3.2.3.4.7.4 1.3l-2.1.3a5 5 0 0 0-1.8.9c-.5.4-.7 1-.7 1.7s.2 1.3.7 1.7c.5.4 1 .6 1.7.6.5 0 1-.1 1.4-.3l1.1-.7.7.8c.3.2.7.2 1.2.2h.5l.2-1.5zm-2.5-.7-.8.6-.8.2c-.8 0-1.1-.3-1.1-1 0-.5.2-.9.7-1.1a4 4 0 0 1 2-.4zm7.9-4.5v-1.4H66v-2l-1.8.2v1.8h-1l-.2 1.4h1.2v4.6c0 .5.2 1 .5 1.4.4.4.9.6 1.6.6h1.4l.2-1.5h-.5l-1-.1-.3-.3-.1-1v-3.7zm1.3-4.7H71v1.8h-1.8zm0 3.3H71v7.9h-1.8zM80 31.8a4 4 0 0 0-3.6-2.1c-.8 0-1.5.2-2.1.6-.6.4-1.1.8-1.4 1.5a4.6 4.6 0 0 0 0 4.2 3.6 3.6 0 0 0 3.5 2 5 5 0 0 0 2.2-.5A4 4 0 0 0 80 36a4.6 4.6 0 0 0 0-4.2zm-2 4c-.4.5-.9.7-1.6.7-.7 0-1.2-.2-1.6-.7-.4-.5-.6-1.1-.6-1.9 0-.8.2-1.4.6-1.9.4-.5.9-.7 1.6-.7.7 0 1.2.2 1.6.7.4.5.6 1.1.6 1.9 0 .8-.2 1.4-.6 1.9zm10.2-5.1a3 3 0 0 0-2.3-1c-.9 0-1.6.3-2.3.8l-.1-.7h-1.6v7.9h1.8V32c.4-.5 1-.8 1.7-.8.6 0 1.1.2 1.3.5.3.4.4.9.4 1.7v4.3h1.8v-4.3c0-1.1-.2-2-.7-2.7zm9.1 5.8-.5-.1-.2-.4v-2.9c0-1.2-.2-2.1-.7-2.6a3 3 0 0 0-2.2-.8c-1 0-1.9.2-2.8.7l.1 1.5 1.1-.5 1-.2c.5 0 .9.1 1.2.3.2.2.4.6.4 1.1l-2.1.3-1.7 1.1c-.5.4-.7 1-.7 1.7s.2 1.3.7 1.7c.5.4 1 .6 1.7.6.5 0 1-.1 1.4-.3l1.1-.7.7.8c.3.2.7.2 1.2.2h.5l.2-1.5zm-2.6-.7-.8.6a3 3 0 0 1-.8.2c-.8 0-1.1-.3-1.1-1 0-.5.2-.9.7-1.1a4 4 0 0 1 2-.4zm6.1.7-.3-.4-.1-1v-9.3h-1.8v10.1c0 .6.2 1.1.5 1.5.3.4.9.6 1.5.6h.6l.2-1.5zm8.6-3.3c0-.7-.1-1.2-.4-1.8a3.4 3.4 0 0 0-3-1.7c-.8 0-1.5.2-2.1.5-.6.4-1 .8-1.3 1.5-.3.6-.5 1.3-.5 2 0 .8.2 1.5.5 2.1.3.6.8 1.1 1.5 1.5.7.4 1.4.6 2.4.6s1.8-.2 2.7-.6l-.1-1.5c-.7.4-1.5.6-2.3.6-.7 0-1.3-.2-1.8-.6-.5-.4-.8-1-.8-1.8h5.3zm-5.4-.3c.3-1.1.9-1.7 1.9-1.7.6 0 1 .2 1.2.5.2.3.4.7.4 1.2z"/></svg>

package/src/components/LogoBrandSection/assets/compte-ameli.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" x="0" y="0" style="enable-background:new 0 0 146 64" version="1.1"  width="146" height="64"  viewBox="0 0 146 64"><path d="M10.5 37.1c-1.3.4-2.7.6-4 .6-1.9 0-3.1-1-3.1-4v-2.8c0-2.9 1.2-3.8 3.1-3.8 1.3 0 2.7.1 4 .6l.6-2.8c-1.5-.4-3.1-.7-4.6-.7-3.7 0-6.5 2.2-6.5 6.5V34c0 4.4 2.8 6.5 6.5 6.5 1.6 0 3.1-.3 4.6-.7l-.6-2.7zM13.4 35.3c0 3.4 2.2 5.5 5.3 5.5s5.3-2.1 5.3-5.5v-2.2c0-3.4-2.2-5.5-5.3-5.5s-5.3 2.1-5.3 5.5v2.2zm3.3-.1v-1.9c0-1.6.4-2.7 1.9-2.7s1.9 1 1.9 2.7v1.9c0 1.6-.4 2.7-1.9 2.7-1.5-.1-1.9-1.1-1.9-2.7zM26.4 40.3h3.4V33c0-1.6.4-2.5 1.5-2.5 1 0 1.5 1 1.5 2.8v6.9h3.4v-6.9c0-1.9.4-2.8 1.5-2.8 1 0 1.5.9 1.5 2.5v7.4h3.4v-7.5c0-3.4-2.2-5-4.9-5-1.3 0-2.4.6-3.1 1.6-.7-1-1.8-1.6-3.1-1.6-2.7 0-4.9 1.6-4.9 5l-.2 7.4zM48.2 40c.4.3 1.3.6 2.1.6 2.5 0 4.9-1.8 4.9-5.2v-2.7c0-3.2-2.4-5.2-5.2-5.2s-5.2 1.9-5.2 5.2v12.4h3.4V40zm0-2.6V33c0-1.6.7-2.4 1.8-2.4s1.8.7 1.8 2.4v2.4c0 1.8-.7 2.5-1.8 2.5-.6-.1-1.2-.2-1.8-.5zM58.7 40.3h3.4v-10H64v-2.2h-1.9v-3.8l-3.4.4v3.4h-2.1l.4 2.2h1.5v10h.2zM65.6 35.3c0 3.5 2.2 5.3 5.5 5.3 1.6 0 2.7-.3 4-.7l-.6-2.7c-1 .3-2.2.6-3.4.6-1.5 0-2.2-.7-2.2-2.5v-.1h6.8v-2.7c0-2.8-2.2-4.7-5-4.7s-5 1.8-5 5.2c-.1 0-.1 2.3-.1 2.3zm3.4-2.5v-.3c0-1 .7-1.9 1.6-1.9 1 0 1.6.9 1.6 1.9v.3H69z" fill="#0084b2"/><path d="M85.1 36.9c0-2.7 2.1-4 7.1-4.4 0-1-.6-1.5-1.9-1.5s-2.1.3-3.4 1l-1.5-2.5c1.6-.9 3.5-1.5 5.5-1.5 3.2 0 5.2 1.6 5.2 5.5v6.9h-3.2l-.3-1.2c-.9.9-2.2 1.5-3.7 1.5-2.5.1-3.8-1.7-3.8-3.8zm7.1-.1v-1.9c-2.5.3-3.4.9-3.4 1.8s.4 1 1.3 1c.7 0 1.5-.3 2.1-.9zM99.3 28.2h3.2l.3 1.5c1-.9 2.1-1.8 3.8-1.8s2.8.7 3.5 1.9c1.2-1 2.2-1.9 4-1.9 2.7 0 4 1.8 4 4.9v7.5h-3.8v-7.1c0-1.6-.4-2.1-1.5-2.1s-1.3.3-2.1 1v8.1h-4v-7.1c0-1.6-.4-2.1-1.5-2.1s-1.3.3-2.1 1v8.1h-3.8V28.2c.1 0 0 0 0 0zM120.5 34.3c0-4 2.8-6.2 5.9-6.2 3.1 0 5.5 2.7 5.5 5.8v1.6h-7.5c.3 1.6 1.6 2.4 3.2 2.4s1.8-.3 2.7-.7l1.3 2.4c-1.3.9-3.1 1.3-4.6 1.3-3.9-.3-6.5-2.5-6.5-6.6zm8-1.5c0-1.2-.4-2.1-1.9-2.1s-2.1.7-2.4 2.1h4.3zM134.5 36.4V23.2h3.8v13.3c0 .7.4 1 .7 1h.4l.4 2.8c-.4.1-1.2.3-1.9.3-2.5 0-3.4-1.6-3.4-4.2zM141.6 24.6c0-1.2 1-1.9 2.2-1.9 1.3 0 2.2.7 2.2 1.9s-1 1.9-2.2 1.9c-1.3.1-2.2-.6-2.2-1.9zm.3 3.6h3.8v12.1h-3.8V28.2z" fill="#0c419a"/></svg>

package/src/components/LogoBrandSection/dividerDimensionsMapping.ts

@@ -0,0 +1,14 @@
+export const dividerDimensionsMapping = {
+	xSmall: {
+		width: '11',
+		height: '32',
+	},
+	small: {
+		width: '14',
+		height: '40',
+	},
+	normal: {
+		width: '22',
+		height: '64',
+	},
+} as const

package/src/components/LogoBrandSection/locales.ts

@@ -0,0 +1,14 @@
+export const locales = {
+	homeLinkPrefix: 'Accueil,',
+	logoCnam: 'Caisse nationale',
+	logoAmeli: 'ameli.fr',
+	logoAmeliPro: 'AmeliPro',
+	logoCompteAmeli: 'Compte ameli',
+	compteEntreprise: {
+		title: {
+			text: 'Compte',
+			highlight: 'entreprise',
+		},
+		subTitle: 'Vos démarches maladie et risques professionnels',
+	},
+}

package/src/components/LogoBrandSection/secondaryLogoMapping.ts

@@ -0,0 +1,24 @@
+import { locales } from './locales'
+import logoCnam from './assets/cnam.svg'
+import logoAmeli from './assets/ameli.svg'
+import logoAmeliPro from './assets/ameli-pro.svg'
+import logoCompteAmeli from './assets/compte-ameli.svg'
+
+export const secondaryLogoMapping = {
+	'cnam': {
+		src: logoCnam,
+		alt: locales.logoCnam,
+	},
+	'ameli': {
+		src: logoAmeli,
+		alt: locales.logoAmeli,
+	},
+	'ameli-pro': {
+		src: logoAmeliPro,
+		alt: locales.logoAmeliPro,
+	},
+	'compte-ameli': {
+		src: logoCompteAmeli,
+		alt: locales.logoCompteAmeli,
+	},
+} as const