@cnamts/synapse 0.0.3-alpha → 0.0.4-alpha

package/src/components/SubHeader/SubHeader.vue

@@ -0,0 +1,185 @@
+<script lang="ts" setup>
+	import { ref } from 'vue'
+	import { mdiKeyboardBackspace } from '@mdi/js'
+
+	import { config } from './config'
+	import { locales } from './locales'
+
+	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
+	import { useWidthable, type Widthable } from '@/composables/widthable'
+
+	import DataListGroup from '../DataListGroup/DataListGroup.vue'
+	import HeaderLoading from '../HeaderLoading/HeaderLoading.vue'
+	import type { DataListActionEvent, DataListGroupItems } from '../DataListGroup/types'
+
+	const props = withDefaults(defineProps<CustomizableOptions & Widthable & {
+		hideBackBtn: boolean
+		backBtnText?: string
+		titleText?: string
+		subTitleText?: string
+		dataListGroupItems?: DataListGroupItems | undefined
+		loading?: boolean
+		renderHtmlValue?: boolean
+	}>(), {
+		hideBackBtn: false,
+		backBtnText: locales.backBtnText,
+		titleText: undefined,
+		subTitleText: undefined,
+		dataListGroupItems: undefined,
+		loading: false,
+		renderHtmlValue: false,
+	})
+
+	const options = useCustomizableOptions(config, props)
+	const { widthStyles } = useWidthable(props)
+
+	const backArrowIcon = ref(mdiKeyboardBackspace)
+
+	const emit = defineEmits(['click:list-item', 'back'])
+
+	function emitItemAction(eventValue: DataListActionEvent) {
+		emit('click:list-item', eventValue)
+	}
+</script>
+
+<template>
+	<VSheet
+		v-bind="options.sheet"
+		:style="widthStyles"
+		class="vd-sub-header white--text py-6 px-8"
+	>
+		<slot name="back-btn">
+			<VFadeTransition
+				v-if="!hideBackBtn"
+				mode="out-in"
+			>
+				<VSkeletonLoader
+					v-if="loading"
+					max-height="28"
+					type="button"
+					color="secondary"
+					class="vd-subheader-loading mb-4"
+				/>
+				<VBtn
+					v-else
+					v-bind="options.backBtn"
+					class="vd-sub-header-back-btn mb-1"
+					@click="$emit('back')"
+				>
+					<slot name="back-btn-icon">
+						<VIcon class="mr-2">
+							{{ backArrowIcon }}
+						</VIcon>
+					</slot>
+					{{ backBtnText }}
+				</VBtn>
+			</VFadeTransition>
+		</slot>
+
+		<div class="vd-sub-header-content d-flex justify-space-between">
+			<div class="vd-sub-header-informations d-flex flex-column flex-shrink-0 mr-10">
+				<slot name="title">
+					<VFadeTransition mode="out-in">
+						<HeaderLoading
+							v-if="loading"
+							width="300"
+							height="2rem"
+							color="secondary"
+						/>
+						<h2
+							v-else-if="titleText"
+							class="text-h5 font-weight-bold"
+						>
+							{{ titleText }}
+						</h2>
+					</VFadeTransition>
+				</slot>
+
+				<slot name="sub-title">
+					<VFadeTransition
+						v-if="subTitleText"
+						mode="out-in"
+					>
+						<HeaderLoading
+							v-if="loading"
+							class="mt-1"
+							width="250"
+							height="2rem"
+							color="secondary"
+						/>
+						<p
+							v-else
+							class="text-h6 font-weight-bold mt-1 mb-0"
+							:style="{ color: 'rgba(255, 255, 255, .7)' }"
+						>
+							{{ subTitleText }}
+						</p>
+					</VFadeTransition>
+				</slot>
+
+				<slot name="additional-informations" />
+			</div>
+
+			<slot name="right-content">
+				<DataListGroup
+					v-if="dataListGroupItems"
+					:items="dataListGroupItems"
+					:loading="loading"
+					:render-html-value="renderHtmlValue"
+					item-width="auto"
+					class="flex-nowrap flex-shrink-0"
+					@click:list-item="emitItemAction"
+				/>
+			</slot>
+		</div>
+	</VSheet>
+</template>
+
+<style lang="scss" scoped>
+.vd-sub-header {
+  overflow-x: auto;
+}
+
+.vd-sub-header-back-btn {
+  margin: 0 -6px;
+}
+
+.vd-data-list-group,
+.vd-sub-header-informations {
+  // Don't take all available space
+  max-width: none;
+}
+
+.vd-data-list-group :deep(.vd-data-list) {
+  max-width: 200px;
+
+  // Apply margin right to avoid empty
+  // space on smaller screens
+  &:not(:last-child) {
+    margin-right: 80px !important;
+  }
+
+  .vd-key {
+    display: inline-block;
+    font-size: 0.75rem !important;
+  }
+
+  .vd-data-list-item-label {
+    color: rgba(255, 255, 255, 0.7) !important;
+  }
+
+  .vd-data-list-item-action-btn {
+    color: #fff !important;
+  }
+}
+
+.vd-subheader-loading :deep() {
+  background: transparent;
+  .v-skeleton-loader__button {
+    margin: 0;
+    min-height: 28px;
+    height: auto;
+    background: rgba(white, var(--v-border-opacity));
+  }
+}
+</style>

package/src/components/SubHeader/config.ts

@@ -0,0 +1,12 @@
+import type { VariantType } from '@/types/vuetifyTypes'
+
+export const config = {
+	sheet: {
+		color: 'secondary',
+	},
+	backBtn: {
+		size: 'small',
+		variant: 'text' as VariantType,
+		class: 'font-weight-regular white--text px-1',
+	},
+}

package/src/components/SubHeader/locales.ts

@@ -0,0 +1,3 @@
+export const locales = {
+	backBtnText: 'Retour',
+}

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

@@ -0,0 +1,144 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { vuetify } from '@tests/unit/setup'
+
+import SubHeader from '../SubHeader.vue'
+
+import type { DataList } from '@/components/DataList/types'
+import type { DataListGroupItems } from '@/components/DataListGroup/types'
+
+const dataListItems: DataList = [
+	{
+		key: 'Libellé',
+		value: 'Texte saisi',
+	},
+	{
+		key: 'Libellé',
+		value: 'Texte saisi',
+	},
+]
+
+const dataListItemsActions: DataList = [
+	{
+		key: 'Libellé',
+		value: 'Texte à modifier',
+		action: 'Modifier',
+	},
+	{
+		key: 'Libellé',
+		value: 'Texte à modifier',
+		action: 'Modifier',
+	},
+]
+
+const dataListGroupItems: DataListGroupItems = [
+	{
+		title: 'Catégorie 1',
+		items: dataListItems,
+		itemsNumberLoading: 2,
+		headingLoading: true,
+	},
+	{
+		title: 'Catégorie 2',
+		items: dataListItemsActions,
+		itemsNumberLoading: 2,
+		headingLoading: true,
+	},
+]
+
+describe('SubHeader', () => {
+	it('renders correctly', () => {
+		const wrapper = mount(SubHeader, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				hideBackBtn: false,
+				backBtnText: 'Retour',
+				loading: false,
+				renderHtmlValue: false,
+				dataListGroupItems,
+			},
+		})
+
+		const elExists = wrapper.find('.vd-sub-header').exists()
+		expect(elExists).toBe(true)
+	})
+
+	it('renders loading state correctly', async () => {
+		const wrapper = mount(SubHeader, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				hideBackBtn: false,
+				titleText: 'Test',
+				loading: true,
+				dataListGroupItems,
+			},
+		})
+
+		const elExists = wrapper.find('.vd-subheader-loading').exists()
+		expect(elExists).toBe(true)
+	})
+
+	it('get subTitleText is defined', async () => {
+		const wrapper = mount(SubHeader, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				hideBackBtn: false,
+				titleText: 'Test',
+				subTitleText: 'SubTitle',
+				dataListGroupItems,
+			},
+		})
+
+		const subTitleText = wrapper.vm.subTitleText
+		expect(subTitleText).toBe('SubTitle')
+	})
+
+	it('emits itemAction event when called', async () => {
+		const wrapper = mount(SubHeader, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				hideBackBtn: false,
+				titleText: 'Test',
+				dataListGroupItems,
+			},
+		})
+
+		const btn = wrapper.find('.vd-data-list-item-action-btn')
+		await btn.trigger('click')
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('click:list-item')).toBeTruthy()
+	})
+
+	it('emits back event when called in slot', async () => {
+		const wrapper = mount(SubHeader, {
+			global: {
+				plugins: [vuetify],
+			},
+			props: {
+				hideBackBtn: false,
+				titleText: 'Test',
+				dataListGroupItems,
+			},
+			slots: {
+				backBtn: '<div class="vd-back-btn">Back</div>',
+			},
+		})
+
+		const btn = wrapper.find('.vd-sub-header-back-btn')
+		await btn.trigger('click')
+
+		await wrapper.vm.$nextTick()
+
+		expect(wrapper.emitted('back')).toBeTruthy()
+	})
+})

package/src/components/index.ts

@@ -1,14 +1,31 @@
-export { default as PageContainer } from './PageContainer/PageContainer.vue'
 export { default as Alert } from './Alert/Alert.vue'
-export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
-export { default as SkipLink } from './SkipLink/SkipLink.vue'
-export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
 export { default as BackBtn } from './BackBtn/BackBtn.vue'
+export { default as BackToTopBtn } from './BackToTopBtn/BackToTopBtn.vue'
+export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
+export { default as CopyBtn } from './CopyBtn/CopyBtn.vue'
+export { default as CustomInputSelect } from './Customs/CustomInputSelect/CustomInputSelect.vue'
+export { default as CustomSelect } from './Customs/CustomSelect/CustomSelect.vue'
+export { default as CustomTextField } from './Customs/CustomTextField/CustomTextField.vue'
+export { default as DataList } from './DataList/DataList.vue'
+export { default as DataListGroup } from './DataListGroup/DataListGroup.vue'
 export { default as DownloadBtn } from './DownloadBtn/DownloadBtn.vue'
+export { default as FooterBar } from './FooterBar/FooterBar.vue'
 export { default as FranceConnectBtn } from './FranceConnectBtn/FranceConnectBtn.vue'
-export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
+export { default as HeaderBar } from './HeaderBar/HeaderBar.vue'
+export { default as HeaderBurgerMenu } from './HeaderBar/HeaderBurgerMenu/HeaderBurgerMenu.vue'
+export { default as HeaderMenuItem } from './HeaderBar/HeaderBurgerMenu/HeaderMenuItem/HeaderMenuItem.vue'
+export { default as HeaderMenuSection } from './HeaderBar/HeaderBurgerMenu/HeaderMenuSection/HeaderMenuSection.vue'
+export { default as HeaderSubMenu } from './HeaderBar/HeaderBurgerMenu/HeaderSubMenu/HeaderSubMenu.vue'
+export { default as HeaderLogo } from './HeaderBar/HeaderLogo/HeaderLogo.vue'
+export { default as HeaderMenuBtn } from './HeaderBar/HeaderMenuBtn/HeaderMenuBtn.vue'
+export { default as HeaderLoading } from './HeaderLoading/HeaderLoading.vue'
+export { default as HeaderNavigationBar } from './HeaderNavigationBar/HeaderNavigationBar.vue'
 export { default as LangBtn } from './LangBtn/LangBtn.vue'
 export { default as Logo } from './Logo/Logo.vue'
-export { default as CollapsibleList } from './CollapsibleList/CollapsibleList.vue'
+export { default as LogoBrandSection } from './LogoBrandSection/LogoBrandSection.vue'
+export { default as NotificationBar } from './NotificationBar/NotificationBar.vue'
+export * from './NotificationBar/types'
+export { default as PageContainer } from './PageContainer/PageContainer.vue'
+export { default as SkipLink } from './SkipLink/SkipLink.vue'
 export { default as SocialMediaLinks } from './SocialMediaLinks/SocialMediaLinks.vue'
-export { default as FooterBar } from './FooterBar/FooterBar.vue'
+export { default as SubHeader } from './SubHeader/SubHeader.vue'

package/src/composables/widthable/index.ts

@@ -0,0 +1,29 @@
+import { computed } from 'vue'
+import { convertToUnit } from '@/utils/convertToUnit'
+
+export type NumberOrNumberString = string | number | undefined
+
+export function useWidthable(props: {
+	maxWidth?: NumberOrNumberString
+	minWidth?: NumberOrNumberString
+	width?: NumberOrNumberString
+}) {
+	// Computed style properties
+	const widthStyles = computed<Record<string, string | undefined>>(() => {
+		return {
+			maxWidth: convertToUnit(props.maxWidth),
+			minWidth: convertToUnit(props.minWidth),
+			width: convertToUnit(props.width ?? '100%'),
+		}
+	})
+
+	return {
+		widthStyles,
+	}
+}
+
+export interface Widthable {
+	maxWidth?: NumberOrNumberString
+	minWidth?: NumberOrNumberString
+	width?: NumberOrNumberString
+}

package/src/composables/widthable/tests/widthable.spec.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from 'vitest'
+import { useWidthable } from '../'
+
+describe('useWidthable', () => {
+	it('returns correct styles for default props', () => {
+		const props = {
+			maxWidth: undefined,
+			minWidth: undefined,
+			width: undefined,
+		}
+
+		const { widthStyles } = useWidthable(props)
+
+		expect(widthStyles.value).toEqual({
+			maxWidth: undefined,
+			minWidth: undefined,
+			width: '100%',
+		})
+	})
+
+	it('returns correct styles for specific width values', () => {
+		const props = {
+			maxWidth: '500px',
+			minWidth: '200px',
+			width: 300,
+		}
+
+		const { widthStyles } = useWidthable(props)
+
+		expect(widthStyles.value).toEqual({
+			maxWidth: '500px',
+			minWidth: '200px',
+			width: '300px',
+		})
+	})
+
+	it('handles numeric and string values correctly', () => {
+		const props = {
+			maxWidth: 600,
+			minWidth: '50%',
+			width: '75%',
+		}
+
+		const { widthStyles } = useWidthable(props)
+
+		expect(widthStyles.value).toEqual({
+			maxWidth: '600px',
+			minWidth: '50%',
+			width: '75%',
+		})
+	})
+})

package/src/designTokens/tokens/cnam/cnamLightTheme.ts

@@ -7,8 +7,8 @@ export const cnamLightTheme = {
 	accent: cnamColorsTokens.cyan.base,
 	error: cnamColorsTokens.orange.darken20,
 	info: cnamColorsTokens.blue.base,
-	success: cnamColorsTokens.green.base,
-	warning: cnamColorsTokens.yellow.base,
+	success: cnamColorsTokens.turquoise.darken60,
+	warning: cnamColorsTokens.yellow.darken60,
 	risquePro: cnamColorsTokens.brick.base,
 	onBackground: cnamSemanticTokens.colors.background.surface,
 	onSurfaceAlt: cnamSemanticTokens.colors.background.surfaceAlt,

package/src/main.ts

@@ -1,2 +1,3 @@
 import '../src/assets/tokens.scss'
 export * from './components'
+export * from './services'

package/src/modules.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+	const content: string
+	export default content
+}

package/src/services/index.ts

@@ -0,0 +1 @@
+export * as NotificationService from './NotificationService'

package/src/stories/Demarrer/Accueil.mdx

@@ -0,0 +1,10 @@
+import {Story, Meta} from '@storybook/blocks';
+import * as AccueilStories from './Accueil.stories';
+
+<Meta of={AccueilStories} />
+
+<Story of={AccueilStories.Header}  />
+
+<p>Au service des équipes-produits de la Caisse Nationale de l’Assurance Maladie, cette boîte à outil met à disposition un ensemble de principes et de composants d’interfaces pour harmoniser et accélérer la fabrication des produits.</p>
+
+<Story of={AccueilStories.List}  />

package/src/stories/Demarrer/Accueil.stories.ts

@@ -0,0 +1,76 @@
+import { VBtn, VIcon, VRow, VCol } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+
+import { mdiGithub } from '@mdi/js'
+
+import { version } from '../../../package.json'
+
+export default {
+	title: 'Démarrer/Accueil',
+}
+
+export const Header: StoryObj = {
+	render: () => {
+		return {
+			components: { VBtn, VIcon },
+			setup() {
+				return {
+					githubIcon: mdiGithub,
+					version,
+				}
+			},
+			template: `
+              <div class="d-flex justify-space-between align-center">
+                  <h1 class="title font-weight-medium">Un Design System<br/>pour l’Assurance Maladie</h1>
+                  <VBtn
+                      :icon="githubIcon"
+                      aria-label="GitHub"
+                      href="https://github.com/assurance-maladie-digital/design-system-v3"
+                      target="_blank"
+                      rel="noopener noreferrer"
+                      class="d-xs-none d-sm-flex"
+                  />
+              </div>
+              <p class="mt-4 mb-8">
+                <b>v{{ version }}</b>
+              </p>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const List: StoryObj = {
+	render: () => {
+		return {
+			components: { VRow, VCol },
+			setup() {
+				return {
+					githubIcon: mdiGithub,
+					version,
+				}
+			},
+			template: `
+              <VRow class="mt-8">
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Qui sont nos principaux utilisateurs ?</p>
+                  <p>Respectant les règles graphiques de la charte graphique de la CNAM, ce design system couvre prioritairement les produits à destination des assurés, des entreprises et des agents.</p>
+                </VCol>
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Comment accéder au design system ?</p>
+                  <p>Afin d’améliorer la collaboration, il est disponible pour les développeurs depuis GitHub (accès open source) et pour les designers depuis Figma (accès sur demande).</p>
+                </VCol>
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Est-ce que le design system est complet ?</p>
+                  <p>Face à l’ampleur des composants et des fonctionnalités nécessaires au bon fonctionnement d’un produit, le design system ne suffit pas seul. Vous devez composer avec la librairie vuetify et le framework vue.js.</p>
+                </VCol>
+                <VCol cols="12" sm="6" class="m-2 p-2 v-col-auto background-list">
+                  <p class="font-weight-bold mb-2">Quels sont les bénéfices du design system ?</p>
+                  <p>Utiliser un design system permet d’accélérer la fabrication, la collaboration et la prise de décision puisqu’il suffit à l’équipe-produit de piocher directement dans une collection de composants déjà adaptés aux besoins de CNAM.</p>
+                </VCol>
+              </VRow>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/Demarrer/PolitiqueDeConfidentialite.mdx

@@ -0,0 +1,9 @@
+import {Story, Meta} from '@storybook/blocks';
+import * as PolitiqueDeConfidentialiteStories from './PolitiqueDeConfidentialite.stories';
+
+<Meta of={PolitiqueDeConfidentialiteStories} />
+
+# Politique de confidentialité
+
+<Story of={PolitiqueDeConfidentialiteStories.Default}  />
+

package/src/stories/Demarrer/PolitiqueDeConfidentialite.stories.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from '@storybook/vue3'
+import { VCard } from 'vuetify/components'
+
+export default {
+	title: 'Démarrer/Politique de confidentialité',
+}
+
+export const Default: StoryObj = {
+	render: () => {
+		return {
+			components: { VCard },
+			template: `
+               <VCard class="mt-4 pa-2">
+                <iframe src="https://assurancemaladiesec.github.io/abuse/reporting/" width="100%" height="800px" frameBorder="0"></iframe>
+               </VCard>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/Fondamentaux/Accessibilite/Accessibilite.mdx

@@ -13,8 +13,7 @@ En tant que personne morale de droit public nous concevons les composants de not
 
 Le RGAA est un outil méthodologique de certification permettant d'assurer par le respect de ses critères une manipulation des produits numériques dans le domaine du Web de manière égale entre chaque citoyen, qu'il soit ou non en situation de handicap (visuel, auditif, moteur, trouble dys...). Basé sur les travaux du W3C Web Accessibility Initiative (WAI) il vise à garantir quatre indices de performance:**la bonne perceptibilité de l'information**, une **manipulation efficiente dans la navigation**, une **bonne compréhension** et une **robustesse efficace** dans l'usage des produits numériques.
 
-[En savoir plus sur le RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu)
-
+[En savoir plus sur le RGAA](https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu)<br/>
 [En savoir plus sur le W3C WAI](https://www.w3.org/WAI/fundamentals/)
 
 [](https://digital-design-system.netlify.app/fondamentaux/accessibilite#quels-sont-les-criteres-du-rgaa)Quels sont les critères du RGAA?

package/src/stories/Fondamentaux/Accessibilite/Accessibilite.stories.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/vue3'
 import { AccessibiliteItems } from './AccessibiliteItems'
 
 export default {
-	title: 'Fondamentaux/Accessibilite',
+	title: 'Fondamentaux/Accessibilité',
 }
 
 export const AccessibilitePanel: StoryObj = {

package/src/stories/Fondamentaux/EcoConception/Econception.stories.ts

@@ -3,7 +3,7 @@ import type { StoryObj } from '@storybook/vue3'
 import { ecoDesignItems } from '@/stories/Fondamentaux/EcoConception/ecoDesignItems'
 
 export default {
-	title: 'Fondamentaux/EcoConception',
+	title: 'Fondamentaux/Éco-conception',
 }
 
 export const EcoPanel: StoryObj = {