@cnamts/synapse 0.0.9-alpha → 0.0.11-alpha

package/src/stories/Demarrer/Introduction.stories.ts

@@ -0,0 +1,151 @@
+import type { StoryObj } from '@storybook/vue3'
+
+import { mdiGithub, mdiMenuRight } from '@mdi/js'
+
+import { version } from '../../../package.json'
+import { VBtn, VIcon, VRow, VCol, VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText } from 'vuetify/components'
+
+export default {
+	title: 'Démarrer/Introduction',
+}
+
+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 mb-5">Démarrer</h1>
+              </div>
+            `,
+		}
+	},
+	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'],
+}
+
+export const Intro: StoryObj = {
+	render: () => {
+		return {
+			components: { },
+			setup() {
+				return {
+					githubIcon: mdiGithub,
+					version,
+				}
+			},
+			template: `
+              <div>
+				  <p style="margin-bottom:5px;">Concevoir une plateforme digitale à la CNAM</p>
+				  <p style="margin-bottom:5px;">Bienvenue dans notre guide d’aide à la conception, pensé par et pour les équipes de la CNAM</p>
+				  <p>Ce guide a été conçu pour accompagner chaque membre de l’équipe dans la création de plateformes web de qualité, alignées avec nos standards et nos valeurs. Vous y trouverez toutes les ressources essentielles pour vous guider tout au long du processus de conception, notamment :</p>
+				  <ul style="margin-left: 16px;">
+				  <li style="line-height: 37px;"><span style="font-weight: bold;">Le Design System CNAM </span>: pour assurer une expérience utilisateur cohérente et harmonieuse.</li>
+				  <li style="line-height: 37px;"><span style="font-weight: bold;">Le Guide de l’Accessibilité Numérique </span> : afin de rendre nos plateformes accessibles à toutes et tous, sans exception.</li>
+				  <li style="line-height: 37px;"><span style="font-weight: bold;">Le Guide de l’Éco-conception </span>: pour concevoir de manière responsable et limiter notre empreinte numérique.</li>
+				  </ul>
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Panels: StoryObj = {
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VIcon },
+			setup() {
+				return {
+					arrowIcon: mdiMenuRight,
+					version,
+				}
+			},
+			template: `
+              <div>
+               <v-expansion-panels>
+                    <v-expansion-panel>     
+                      <v-expansion-panel-title style="display: inline-grid;">
+                      <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Le design system CNAM</p> 
+                      <p>Un référentiel centralisé de nos styles et composants pour garantir une expérience utilisateur cohérente et harmonieuse sur toutes nos plateformes.</p>
+                      </v-expansion-panel-title>
+                      <v-expansion-panel-text>
+						 <p style="margin-bottom:5px; font-weight:bold;">Pourquoi utiliser le Design System de la CNAM ?</p>
+						 <p style="margin-bottom:5px;font-weight:bold;">→ Gagner en productivité</p>
+						<p style="margin-bottom:10px; ">En utilisant le design system pour la conception et le développement de votre plateforme, vous disposez d’un ensemble de règles éprouvées et d’une bibliothèque de composants prête à l’emploi (pour les développeurs et pour les designers) vous permettant de gagner du temps et de vous concentrer sur les tâches avec le plus de valeur ajoutée.</p>
+						<p style="margin-bottom:5px;font-weight:bold;">→ S’assurer de la cohérence au sein de la plateforme et avec les autres plateformes de l’Assurance Maladie</p>
+						<p style="margin-bottom:10px;">Le design system garantit que tous les produits et fonctionnalités respectent les mêmes règles de conception, offrant une expérience utilisateur fluide et cohérente. Cela réduit les risques d'incohérences visuelles ou fonctionnelles entre les différentes parties du produit.</p>
+						<p style="margin-bottom:10px;">Il garantit également que tous les éléments du produit respectent les lignes directrices de l’identité visuelle et des valeurs de l’entreprise, assurant ainsi une expérience de marque cohérente sur tous les points de contact.</p>
+						<p style="margin-bottom:5px;font-weight:bold;">→ S’assurer d’une maintenabilité et d’une mise à l’échelle simplifiée</p>
+						<p style="margin-bottom:10px;">Lorsqu'une nouvelle fonctionnalité ou un nouveau produit est ajouté, l'équipe produit peut facilement l'intégrer au système existant, en utilisant les composants et règles déjà en place. Cela garantit une croissance rapide sans sacrifier la qualité ou la cohérence.</p>
+						<p style="margin-bottom:5px;font-weight:bold;">→ Profiter de standards de qualité et d’accessibilité.</p>
+						<p style="margin-bottom:10px;">Standards de qualité : Avec ses composants validés et testés, le design system vous assure que la qualité soit maintenue à travers toutes les interfaces, qu'il s'agisse d'éléments visuels, d'interactions ou de fonctionnalités.</p>
+						<p style="margin-bottom:20px;">Standards d’accessibilité : </p>
+        				 </v-expansion-panel-text>
+                    </v-expansion-panel>
+			   </v-expansion-panels>
+				<v-expansion-panels style="margin-top:20px;">
+                    <v-expansion-panel>     
+                      <v-expansion-panel-title>
+                      <p style="font-weight:bold;"><VIcon :icon="arrowIcon"/>Pour aller plus loin sur le fonctionnement et l’utilisation du design system</p>
+                      </v-expansion-panel-title>
+                      <v-expansion-panel-text>
+						 <p style="margin-bottom:10px;">Le design system de la CNAM est basé sur la librairie open source Vuetify offrant une grande variétée de composants paramétrables pour répondre aux besoins de nos produits tout en garantissant des mises à jours régulière pour la maintenabilité.</p>
+						<p style="margin-bottom:10px;font-weight:bold;font-style: italic;">Mais pourquoi alors utiliser le design system et non directement la librairie vuetify ?</p>
+						<p style="margin-bottom:5px;">Le design system vous offre une surcouche de cette librairie afin de :</p>
+						<ul style="margin-left: 16px;">
+						<li>Personnaliser les composants proposés à la charte graphique de l’Assurance Maladie</li>
+						<li>Améliorer certains composants pour s’assurer du respect des critères d’accessibilité (+ développer cette partie)</li>
+						<li style="margin-bottom:10px;">Améliorer certains composants pour mieux répondre à nos besoins</li>
+						</ul>
+						<p style="margin-bottom:10px;font-weight:bold;font-style: italic;">Certains composants sont disponibles dans vuetify mais pas dans le DS ?</p>
+						Il peut s’agir de composants qui ne justifient aujourd’hui pas de leur attribuer de surcouche car ils sont pertinents en tant que tels ou encore de composants dont la surcouche n’est pas encore disponible. Il est dans ce cas complètement possible dans une plateforme d’utiliser à la fois des composants du DS et de vuetify, ces deux derniers sont compatibles.
+					  </v-expansion-panel-text>
+                    </v-expansion-panel>
+				</v-expansion-panels>
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/{GuideDuDev → Demarrer}/components.stories.ts

@@ -1,7 +1,7 @@
-import SyAlert from '@/components/SyAlert/SyAlert.vue'
+import SyAlert from '../../components/SyAlert/SyAlert.vue'
 
 export default {
-	title: 'Guide Du Dev/Créer une issue',
+	title: 'Démarrer/Créer une issue',
 	component: SyAlert,
 }
 export const Info = {

package/src/stories/{Fondamentaux → DesignTokens}/Arrondis.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Fondamentaux/Arrondis" />
+<Meta title="Design Tokens/Arrondis" />
 
 # Arrondis
 

package/src/stories/{Fondamentaux → DesignTokens}/Colors.mdx

@@ -2,7 +2,7 @@ import { Meta, ColorPalette, ColorItem } from '@storybook/addon-docs';
 import { cnamLightTheme } from "@/designTokens/tokens/cnam/cnamLightTheme.ts";
 import { cnamColorsTokens } from '@/designTokens/tokens/cnam/cnamColors.ts'
 
-<Meta title="Fondamentaux/Couleurs" />
+<Meta title="Design Tokens/Couleurs" />
 
 # Couleurs
 
@@ -140,10 +140,10 @@ Les couleurs contribuent à l’identification de nos applications ou services e
 <ColorPalette className="vertical-palette">
     <ColorItem
         colors={{
-            backgroungMainAlt: cnamLightTheme.backgroungMainAlt,
-            backgroungRaised: cnamLightTheme.backgroungRaised,
+            backgroundMainAlt: cnamLightTheme.backgroundMainAlt,
+            backgroundRaised: cnamLightTheme.backgroundRaised,
             backgroundAccent: cnamLightTheme.backgroundAccent,
-            backgroungAccentContrasted: cnamLightTheme.backgroungAccentContrasted,
+            backgroundAccentContrasted: cnamLightTheme.backgroundAccentContrasted,
             backgroundAccentAlt: cnamLightTheme.backgroundAccentAlt
         }}
     />

package/src/stories/DesignTokens/Conteneurs.mdx

@@ -0,0 +1,18 @@
+import { Meta, Story } from "@storybook/blocks";
+import * as ConteneursStories from './Conteneurs.stories';
+
+<Meta title="Design Tokens/Conteneurs de page" />
+
+# Conteneurs de page
+
+## Desktop
+
+<Story of={ConteneursStories.Desktop} />
+
+## Tablet
+
+<Story of={ConteneursStories.Tablet} />
+
+## Mobile
+
+<Story of={ConteneursStories.Mobile} />

package/src/stories/DesignTokens/Conteneurs.stories.ts

@@ -0,0 +1,103 @@
+import { VRow, VCol } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+
+export default {
+	title: 'Design Tokens/Conteneurs de page',
+}
+
+export const Desktop: StoryObj = {
+	render: () => {
+		return {
+			components: { VCol, VRow },
+			template: `
+              <div style="font-size: 14px">
+				  <VRow cols="12" style="z-index: 1; position: relative">
+					  <VCol md="6" sm="12">
+						  <b>Page container</b><br/>
+						  Comportement : Responsive + max width<br/>
+						  Paddings : Vertical 40px; Horizontal 56px<br/>
+						  Vertical spacing : 32px
+						  <br/><br/>
+						  <b>Grille</b><br/>
+						  Columns : 12<br/>
+						  Margin : /<br/>
+						  Gutter : 24px
+					  </VCol>
+					  <VCol md="6" sm="12">
+						  <b>Narrow</b><br/>
+						  Pour les plateformes n’ayant que très peu d’information à présenter et où la faible largeur du contenu rendra sa lecture plus simple<br/>
+						  ex. formulaires<br/>
+						  max width = 960px
+						  <br/><br/>
+						  <b>Wide</b><br/>
+						  Pour les plateformes nécessitant l’affichage d’une grande quantité d’information (tableaux complexes, pages d’accueil,  ... )<br/>
+						  max width = 1600 px
+					  </VCol>
+				  </VRow>
+				  <img src="/.storybook/public/conteneur-desktop.svg" alt="Tablet" class="w-100 mt-4" />
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Tablet: StoryObj = {
+	render: () => {
+		return {
+			components: { VCol, VRow },
+			template: `
+              <div style="font-size: 14px">
+				  <VRow cols="12" style="z-index: 1; position: relative">
+					  <VCol md="6" sm="12">
+						  <b>Page container</b><br/>
+						  Comportement : Responsive<br/>
+						  Paddings : Top 40px; Horizontal 24px; Bottom 80px<br/>
+						  Vertical spacing : 24px<br/>
+						  Format de travail conseillé : 960px.
+						  <br/><br/>
+						  <b>Grille</b><br/>
+						  Columns : 6<br/>
+						  Margin : /<br/>
+						  Gutter : 24px
+					  </VCol>
+					  <VCol md="6" sm="12">
+						  <img src="/.storybook/public/conteneur-tablet.svg" alt="Tablet" class="w-100" />
+					  </VCol>
+				  </VRow>
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Mobile: StoryObj = {
+	render: () => {
+		return {
+			components: { VCol, VRow },
+			template: `
+              <div style="font-size: 14px">
+				  <VRow cols="12" style="z-index: 1; position: relative">
+					  <VCol md="6" sm="12">
+						  <b>Page container</b><br/>
+						  Comportement : Responsive<br/>
+						  Paddings : Top 40px; Horizontal 24px; Bottom 80px<br/>
+						  Vertical spacing : 24px<br/>
+						  Format de travail conseillé : 360px.
+						  <br/><br/>
+						  <b>Grille</b><br/>
+						  Columns : 6<br/>
+						  Margin : /<br/>
+						  Gutter : 24px
+					  </VCol>
+					  <VCol md="6" sm="12">
+						  <img src="/.storybook/public/conteneur-mobile.svg" alt="Mobile" class="w-50" />
+					  </VCol>
+				  </VRow>
+              </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}

package/src/stories/{Fondamentaux → DesignTokens}/Elevations.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Fondamentaux/Elévations" />
+<Meta title="Design Tokens/Elévations" />
 
 # Elévations
 

package/src/stories/{Fondamentaux → DesignTokens}/Espacements.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Fondamentaux/Espacements" />
+<Meta title="Design Tokens/Espacements" />
 
 # Espacements
 

package/src/stories/{Fondamentaux → DesignTokens}/Introduction.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Fondamentaux/Introduction" />
+<Meta title="Design Tokens/Introduction" />
 
 Principes de design
 ===================

package/src/stories/{Fondamentaux → DesignTokens}/StylesTypographiques.mdx

@@ -1,6 +1,6 @@
 import { Meta } from "@storybook/blocks";
 
-<Meta title="Fondamentaux/Styles typographiques" />
+<Meta title="Design Tokens/Styles typographiques" />
 
 # Styles typographiques
 

package/src/stories/{Fondamentaux/CustomisationEtThemes.mdx → DesignTokens/ThemePA.mdx}

@@ -1,8 +1,12 @@
 import {Meta, Source} from '@storybook/addon-docs/blocks';
 
-<Meta title="Fondamentaux/Customisation et thèmes" />
+<Meta title="Design Tokens/Thème Portail Agent" />
 
-# Customisation et thèmes
+# Thème Portail Agent
+
+Pour des raisons techniques, la documentation ne permet pas encore l'affichage des composants aux couleurs du Portail Agent.<br/>
+Cependant, il est possible de changer le thème du Design System pour qu'il corresponde aux couleurs du PA.
+#
 
 ## Étapes pour changer le thème du Design System aux couleurs Portail Agent
 

package/src/stories/{Fondamentaux → DesignTokens}/Typographie.mdx

@@ -1,6 +1,6 @@
 import { Meta, Typeset } from '@storybook/addon-docs';
 
-<Meta title="Fondamentaux/Typographie" />
+<Meta title="Design Tokens/Typographie" />
 
 export const typography = {
     type: {
@@ -30,6 +30,19 @@ export const SampleText = 'Lorem ipsum dolor sit amet, consectetur adipiscing el
 
 # Typographie
 
+Impulsé par les travaux réalisés sur [Ameli.fr](https://www.ameli.fr/), le Design System fournit un ensemble limité et ciblé de styles typographiques que nous utilisons pour présenter l'interface utilisateur et le contenu de la manière la plus claire et la plus efficace possible tout en assurant la cohérence de la marque sur l’ensemble des plateformes.
+
+Les grands principes typographiques du Design System sont les suivants :
+
+- **Une unique typographie.**
+
+L’usage de la typographie système Arial nous permet de ne pas charger de polices sur nos plateforme et de s’assurer que les contenus textuels seront affichés comme souhaité sur tous les appareils.
+
+- **Un nombre limité de tailles de polices.**
+
+Le design system utilise 10 tailles de police différente allant de 12 (la taille minimum permettant une lecture confortable) à 40px (la taille maximum permettant la mutualisation entre desktop et mobile) (0,75 à 2,5rem). Cette échelle limitée nous permet de mutualiser les utilisations quelle que soit la taille de l’écran.
+<br />
+
 <img alt="Arial" src={'/font-arial.jpg'} style={{ border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
 
 **Weights:** 400(regular), 700(bold), 900(black)

package/src/stories/{Guidelines/EcoConception/EcoConception.mdx → EcoConception/Introduction.mdx}

@@ -1,9 +1,9 @@
 import { Meta, Story } from '@storybook/addon-docs';
-import * as EcoStories from './Econception.stories.ts';
+import * as EcoStories from './econception.stories.ts';
 
 <Meta of={EcoStories} />
 
- # Éco-conception
+# Éco-conception
 
 <br></br>
 

package/src/stories/{Guidelines/EcoConception/Econception.stories.ts → EcoConception/econception.stories.ts}

@@ -1,9 +1,9 @@
 import { VExpansionPanels, VExpansionPanel } from 'vuetify/components'
 import type { StoryObj } from '@storybook/vue3'
-import { ecoDesignItems } from '@/stories/Guidelines/EcoConception/ecoDesignItems'
+import { ecoDesignItems } from '@/stories/EcoConception/ecoDesignItems'
 
 export default {
-	title: 'Guidelines/Éco-conception',
+	title: 'Éco-conception/Introduction',
 }
 
 export const EcoPanel: StoryObj = {