@cnamts/synapse 1.0.0 → 1.0.2

package/src/stories/Accessibilite/Vuetify/VuetifyItems.ts

@@ -59,11 +59,9 @@ export const VuetifyItems = [
 				value: 2,
 				name: 'Select',
 				errorImportants: [
-
 					'8.2 Pour chaque page web, le code source généré est-il valide selon le type de document spécifié',
 					'11.1.1 Un bouton adjacent au champ de formulaire lui fournit une étiquette visible et un élément <label> visuellement caché ou un attribut WAI-ARIA aria-label, aria-labelledby ou title lui fournit un nom accessible.',
 					'12.11 Dans chaque page web, les contenus additionnels apparaissant au survol, à la prise de focus ou à l’activation d’un composant d’interface sont-ils si nécessaire atteignables au clavier',
-
 				],
 				errorSolutionImportant: [
 					'Voir méthodologie du test 8.2.1, 11.1.1 et 12.11.1 du référenciel RGAA.',
@@ -78,7 +76,6 @@ export const VuetifyItems = [
 					'11.2.2 Chaque attribut title permet-il de connaître la fonction exacte du champ de formulaire auquel il est associé',
 					'11.2.3 Chaque étiquette implémentée via l’attribut WAI-ARIA aria-label permet-elle de connaître la fonction exacte du champ de formulaire auquel elle est associée',
 					'12.9 Dans chaque page web, la navigation ne doit pas contenir de piège au clavier.',
-
 				],
 				solution: [
 					{
@@ -99,12 +96,8 @@ export const VuetifyItems = [
 				name: 'Divider',
 				value: 3,
 
-				errorImportants: [
-
-				],
-				errorIndeterminated: [
-
-				],
+				errorImportants: [],
+				errorIndeterminated: [],
 				solution: [{
 					name: 'En étude',
 				}],
@@ -127,12 +120,8 @@ export const VuetifyItems = [
 				name: 'Chips',
 				value: 5,
 
-				errorImportants: [
-
-				],
-				errorIndeterminated: [
-
-				],
+				errorImportants: [],
+				errorIndeterminated: [],
 				solution: [{
 					name: 'En étude',
 				}],
@@ -141,12 +130,8 @@ export const VuetifyItems = [
 				name: 'Tooltip',
 				value: 6,
 
-				errorImportants: [
-
-				],
-				errorIndeterminated: [
-
-				],
+				errorImportants: [],
+				errorIndeterminated: [],
 				solution: [{
 					name: 'En étude',
 				}],
@@ -160,9 +145,7 @@ export const VuetifyItems = [
 				errorSolutionImportant: [
 					'Voir méthodologie du test 3.2.1 du référenciel RGAA.',
 				],
-				errorIndeterminated: [
-
-				],
+				errorIndeterminated: [],
 				solution: [{
 					name: 'En étude',
 				}],
@@ -204,7 +187,8 @@ export const VuetifyItems = [
 
 				],
 				solution: [{
-					name: 'En étude',
+					name: 'SyTextArea',
+					href: '/?path=/docs/composants-formulaires-sytextarea--docs',
 				}],
 			},
 			{
@@ -234,13 +218,18 @@ export const VuetifyItems = [
 					'Voir méthodologie du test 5.4.1 du référenciel RGAA.',
 
 				],
-				errorIndeterminated: [
+				errorIndeterminated: [],
 
+				solution: [
+					{
+						name: 'SyTable',
+						href: '/?path=/docs/composants-tableaux-sytable--docs',
+					},
+					{
+						name: 'SyServerTable',
+						href: '/?path=/docs/composants-tableaux-syservertable--docs',
+					},
 				],
-
-				solution: [{
-					name: 'En étude',
-				}],
 			},
 			{
 				name: 'Expansion panels',
@@ -257,7 +246,8 @@ export const VuetifyItems = [
 				],
 
 				solution: [{
-					name: 'En étude',
+					name: 'Accordion',
+					href: '/?path=/docs/composants-données-accordion--docs',
 				}],
 			},
 			{
@@ -272,11 +262,8 @@ export const VuetifyItems = [
 
 				],
 
-				errorIndeterminated: [
-
-				],
-				errorSolutionIndeterminated: [
-				],
+				errorIndeterminated: [],
+				errorSolutionIndeterminated: [],
 
 				solution: [{
 					name: 'En étude',
@@ -294,12 +281,8 @@ export const VuetifyItems = [
 
 				],
 
-				errorIndeterminated: [
-
-				],
-				errorSolutionIndeterminated: [
-				],
-
+				errorIndeterminated: [],
+				errorSolutionIndeterminated: [],
 				solution: [{
 					name: 'En étude',
 				}],
@@ -317,12 +300,8 @@ export const VuetifyItems = [
 					'Utilisez alt="" pour signaler que l\'image est décorative et qu`\'elle ne nécessite pas de description. Ajoutez role="presentation" pour renforcer l`\'intention décorative de l\'image.',
 				],
 
-				errorIndeterminated: [
-
-				],
-				errorSolutionIndeterminated: [
-				],
-
+				errorIndeterminated: [],
+				errorSolutionIndeterminated: [],
 				solution: [{
 					name: 'En étude',
 				}],
@@ -339,12 +318,8 @@ export const VuetifyItems = [
 					'Voir méthodologie du test 3.2.1, 8.2.1 et 11.1.1 du référenciel RGAA.',
 				],
 
-				errorIndeterminated: [
-
-				],
-				errorSolutionIndeterminated: [
-				],
-
+				errorIndeterminated: [],
+				errorSolutionIndeterminated: [],
 				solution: [{
 					name: 'En étude',
 				}],
@@ -471,7 +446,8 @@ export const VuetifyItems = [
 				],
 
 				solution: [{
-					name: 'En étude',
+					name: 'SyCheckbox',
+					href: '/?path=/docs/composants-formulaires-sycheckbox--docs',
 				}],
 			},
 			{
@@ -543,7 +519,8 @@ export const VuetifyItems = [
 				],
 
 				solution: [{
-					name: 'En étude',
+					name: 'RangeField',
+					href: '/?path=/docs/composants-formulaires-rangefield--docs',
 				}],
 			},
 			{
@@ -568,7 +545,8 @@ export const VuetifyItems = [
 				],
 
 				solution: [{
-					name: 'En étude',
+					name: 'DatePicker',
+					href: '/?path=/docs/composants-formulaires-datepicker-introduction--docs',
 				}],
 			},
 		],

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

@@ -14,22 +14,31 @@ export const Header: StoryObj = {
 		return {
 			components: { VBtn, VIcon, VCol, VRow },
 			setup() {
+				const theme = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam'
 				return {
 					arrowRight: mdiArrowRight,
 					githubIcon: mdiGithub,
 					version,
+					theme,
 				}
 			},
 			template: `
               <div>
-				  <span style="position: absolute; top:0; left:-1000px; background-color: rgba(12, 65, 154, 0.2); width: 1000%; height: 100%; z-index: 0" />
+				  <span v-if="theme === 'pa'"
+						style="position: absolute; top:0; left:-1000px; background-color: rgba(183,203,214, 0.7); width: 1000%; height: 100%; z-index: 0"
+				  />
+				  <span v-if="theme === 'cnam'"
+						style="position: absolute; top:0; left:-1000px; background-color: rgba(12, 65, 154, 0.2); width: 1000%; height: 100%; z-index: 0"
+				  />
 				  <VRow cols="12" style="z-index: 1; position: relative">
 					  <VCol md="6" sm="12">
 						  <h1 class="font-weight-bold text-h4 mb-2">Synapse</h1>
 						  <img alt="line" src="/home-line.svg" width="120" height="5" class="mb-5" />
-						  <h2 class="text-h4 mb-5">Documentation d'aide<br/> à la fabrication des IHM<br/>de la CNAM</h2>
-						  <VBtn color="primary" href="/?path=/docs/d%C3%A9marrer-introduction--docs">
-							  Démarrer
+						  <h2 class="text-h4 mb-5">Documentation d'aide<br/> à la fabrication des IHM<br/>
+							  <span v-if="theme === 'pa'">de Portail Agent</span>
+							  <span v-if="theme === 'cnam'">de la CNAM</span></h2>
+						  <VBtn color="primary" href="/?path=/docs/guide-du-dev-gestion-du-th%C3%A8me--docs">
+							  Configurer le thème
 							  <VIcon size="small" class="ml-2" right>{{arrowRight}}</VIcon>
 						  </VBtn>
 					  </VCol>
@@ -37,16 +46,25 @@ export const Header: StoryObj = {
 						  <img alt="line" src="/home-illustration.svg" width="auto" height="300" class="img-animate" />
 					  </VCol>
 				  </VRow>
-				  <div class="position-absolute" style="right: 60px; bottom: -10px">
+				  <div class="position-absolute d-inline-flex" style="right: 60px; bottom: -10px">
+					  <VBtn
+						  aria-label="Figma"
+						  href="https://www.figma.com/design/m2tWjSODYdgi5POFx0cmJr/Synapse?m=auto&node-id=1109-4028&t=xjggswqIQwBbmkTk-1"
+						  target="_blank"
+						  rel="noopener noreferrer"
+						  class="d-flex align-center justify-center text-lowercase"
+					  >
+						  <img src="/figma.svg" alt="Figma" width="auto" height="17" />
+					  </VBtn>
 					  <VBtn
 						  aria-label="GitHub"
 						  href="https://github.com/assurance-maladie-digital/design-system-v3"
 						  target="_blank"
 						  rel="noopener noreferrer"
-						  class="d-flex align-center justify-center text-lowercase"
+						  class="d-flex align-center justify-center text-lowercase ml-2"
 					  >
+						  <VIcon size="large" class="mr-2">{{ githubIcon }}</VIcon>
 						  <b>v{{ version }}</b>
-						  <VIcon size="large" class="ml-2">{{ githubIcon }}</VIcon>
 					  </VBtn>
 				  </div>
               </div>
@@ -59,9 +77,15 @@ export const Header: StoryObj = {
 export const Welcome: StoryObj = {
 	render: () => {
 		return {
+			setup() {
+				const theme = typeof window !== 'undefined' ? localStorage.getItem('storybook-theme') : 'cnam'
+				return {
+					theme,
+				}
+			},
 			template: `
               <div class="mt-12 mb-12">
-                  <p>Bienvenue dans notre guide d'aide à la conception, pensé par et pour les équipes de la CNAM.</p>
+                  <p>Bienvenue dans notre guide d'aide à la conception, pensé par et pour les équipes <span v-if="theme === 'pa'">de Portail Agent</span><span v-if="theme === 'cnam'">de la CNAM</span>.</p>
                   <p class="mt-4">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.</p>
                   <p class="mt-4">Vous y trouverez toutes les ressources essentielles pour vous guider tout au long du processus de conception :</p>
               </div>

package/src/stories/DesignTokens/StylesTypographiques.mdx

@@ -1,33 +1,34 @@
-import { Meta } from "@storybook/blocks";
+import { Story, Meta } from '@storybook/blocks';
+import * as TypographyStories from './StylesTypographiques.stories';
 
-<Meta title="Design Tokens/Styles typographiques" />
+<Meta title="Design Tokens/Styles typographiques" of={TypographyStories} />
 
 # Styles typographiques
+<Story of={TypographyStories.Introduction} />
 
 ## Styles de titres
 
 Les titres sont utilisés pour créer une hiérarchie visuelle dans la page, et permettent de trouver facilement une information.
 
-<img alt="Styles de titres" src={'/font-titres.jpg'} style={{ padding: '10px',  border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
-
+<Story of={TypographyStories.HeadingStyles} />
 
 ## Styles de titres alternatifs
 
 Pour donner une plus grande liberté éditoriale et graphique, sans nuire à la hiérarchie de l’information et au référencement nous vous proposons plusieurs niveaux de titres alternatifs (display). Vous pourrez les utiliser pour les mise en avant, les bannières, etc..
 Les titres alternatifs peuvent être associés selon votre besoin à un h1, un h2, un h3 ou un h4.
 
-<img alt="Styles de titres alternatifs" src={'/font-titres-alt.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
-
+<Story of={TypographyStories.DisplayHeadingStyles} />
 
 ## Corps de texte
 
 Les styles de texte sont là pour vous aider à concevoir vos interfaces efficacement et assurer l’homogénéité entre les différents sites.
 
-<img alt="Corps de texte" src={'/font-corps.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
-
+<Story of={TypographyStories.BodyTextStyles} />
 
 ## Liens et libellés
 
 <br />
 
-<img alt="Liens et libellés" src={'/font-liens.jpg'} style={{ padding: '10px', border: '1px solid rgba(0, 0, 0, 0.05)', boxShadow: 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' }} />
+Les liens et libellés permettent de guider l'utilisateur et d'identifier clairement les éléments interactifs.
+
+<Story of={TypographyStories.LinksAndLabels} />