@cnamts/synapse 0.0.6-alpha → 0.0.8-alpha

package/src/components/HeaderToolbar/HeaderToolbar.vue

@@ -298,191 +298,226 @@
 </template>
 
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 @use '../HeaderBar/consts' as *;
 
 .toolbar {
-  background: tokens.$blue-lighten-90;
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-
-  .container {
-    width: 100%;
-    max-height: 45px;
-    max-width: $header-max-width;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    @media (max-width: 768px) {
-      max-height: 41px;
-    }
-
-    :deep(ul) {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      list-style: none;
-      text-decoration: none;
-
-      li {
-        text-align: center;
-      }
-    }
-
-    :deep(ul > li > a) {
-      display: block;
-      color: tokens.$blue-darken-40;
-      text-decoration: none;
-      padding: 10px 16px;
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: underline;
-      }
-
-      @media (max-width: 768px) {
-        font-size: 12px;
-      }
-    }
-  }
-
-  #left-menu {
-    ul > li > a {
-      font-weight: 700;
-      color: tokens.$blue-darken-40;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    li:first-child {
-      min-width: 95px;
-      background: transparent;
-      @media (max-width: $header-breakpoint) {
-        min-width: 82px;
-      }
-    }
-
-    li:nth-child(2) {
-      min-width: 260px;
-      z-index: 2;
-      @media (max-width: 768px) {
-        min-width: 152px;
-      }
-    }
-
-    li:nth-child(3) {
-      background: transparent;
-    }
-
-    li:first-child a:hover, li:first-child.active {
-      background: tokens.$user-assure;
-    }
-
-    li:nth-child(2) a:hover, .highlight {
-      background: tokens.$user-professionnel;
-    }
-
-    li:nth-child(3) a:hover, li:nth-child(3).active {
-      background: tokens.$user-entreprise;
-    }
-  }
-
-  #right-menu {
-    @media (max-width: 1000px) {
-      display: none;
-    }
-  }
-
-  #right-menu ul {
-    white-space: nowrap;
-    overflow: hidden;
-  }
-
-  #right-menu ul li {
-    display: inline-block;
-  }
-
-  :deep(.v-input) {
-    .v-input__details {
-      display: none;
-    }
-
-    .v-input__control {
-      font-weight: 700;
-
-      .text-color {
-        color: tokens.$blue-darken-60 !important;
-      }
-
-      .v-icon {
-        margin-left: 10px;
-      }
-
-      .custom-select {
-        display: flex;
-        justify-content: space-between;
-        width: 100%;
-
-        span {
-          max-width: 260px;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          @media (max-width: 768px) {
-            max-width: 182px;
-          }
-        }
-      }
-
-      @media (max-width: 768px) {
-        font-size: 12px;
-      }
-    }
-
-    .v-list {
-      top: 34px !important;
-      left: -16px !important;
-      text-align: left;
-      min-width: 260px;
-      max-width: fit-content !important;
-      border-radius: 0;
-      @media (max-width: 768px) {
-        position: fixed;
-        top: 38px !important;
-        left: 0 !important;
-        min-width: 100% !important;
-        box-shadow: none !important;
-      }
-
-      .v-list-item--density-default.v-list-item--one-line {
-        min-height: 40px;
-      }
-    }
-  }
-
-  .overlay {
-    position: fixed;
-    display: block;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: rgba(3, 16, 37, .5);
-    cursor: default;
-    backdrop-filter: blur(2px);
-    z-index: 1;
-    @media (max-width: 768px) {
-      display: none;
-    }
-  }
+	background: tokens.$blue-lighten-90;
+	position: relative;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	z-index: 100;
+
+	.container {
+		width: 100%;
+		max-height: 45px;
+		max-width: $header-max-width;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+
+		@media (width <= 768px) {
+			max-height: 41px;
+		}
+
+		:deep(ul) {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			list-style: none;
+			text-decoration: none;
+
+			li {
+				text-align: center;
+			}
+		}
+
+		:deep(ul > li > a) {
+			display: block;
+			color: tokens.$blue-darken-40;
+			text-decoration: none;
+			padding: 10px 16px;
+			cursor: pointer;
+
+			&:hover {
+				text-decoration: underline;
+			}
+
+			@media (width <= 768px) {
+				font-size: 12px;
+			}
+		}
+
+		:deep(.sy-input-select) {
+			width: 100%;
+			display: flex;
+			justify-content: space-between;
+
+			@media (width <= 768px) {
+				font-size: 12px;
+
+				span {
+					overflow: hidden;
+					white-space: nowrap;
+					text-overflow: ellipsis;
+				}
+			}
+		}
+	}
+
+	#left-menu {
+		ul > li > a {
+			font-weight: 700;
+			color: tokens.$blue-darken-40;
+
+			&:hover {
+				text-decoration: none;
+			}
+		}
+
+		li:first-child {
+			min-width: 95px;
+			background: transparent;
+
+			@media (max-width: $header-breakpoint) {
+				min-width: 82px;
+			}
+		}
+
+		li:nth-child(2) {
+			z-index: 2;
+			max-height: 44px;
+			min-width: 260px;
+
+			@media (width <= 768px) {
+				max-height: 38px;
+				min-width: 152px;
+			}
+
+			a {
+				max-height: 44px;
+
+				@media (width <= 768px) {
+					max-height: 38px;
+				}
+			}
+		}
+
+		li:nth-child(3) {
+			background: transparent;
+		}
+
+		li:first-child a:hover,
+		li:first-child.active {
+			background: tokens.$user-assure;
+		}
+
+		li:nth-child(2) a:hover,
+		.highlight {
+			background: tokens.$user-professionnel;
+		}
+
+		li:nth-child(3) a:hover,
+		li:nth-child(3).active {
+			background: tokens.$user-entreprise;
+		}
+	}
+
+	#right-menu {
+		@media (width <= 1000px) {
+			display: none;
+		}
+	}
+
+	#right-menu ul {
+		white-space: nowrap;
+		overflow: hidden;
+	}
+
+	#right-menu ul li {
+		display: inline-block;
+	}
+
+	:deep(.v-input) {
+		.v-input__details {
+			display: none;
+		}
+
+		.v-input__control {
+			font-weight: 700;
+
+			.text-color {
+				color: tokens.$blue-darken-60 !important;
+			}
+
+			.v-icon {
+				margin-left: 10px;
+			}
+
+			.custom-select {
+				display: flex;
+				justify-content: space-between;
+				width: 100%;
+
+				span {
+					max-width: 260px;
+					white-space: nowrap;
+					overflow: hidden;
+					text-overflow: ellipsis;
+
+					@media (width <= 768px) {
+						max-width: 182px;
+					}
+				}
+			}
+
+			@media (width <= 768px) {
+				font-size: 12px;
+			}
+		}
+
+		.v-list {
+			top: 34px !important;
+			left: -16px !important;
+			text-align: left;
+			min-width: 260px;
+			max-width: fit-content !important;
+			border-radius: 0;
+
+			@media (width <= 768px) {
+				position: fixed;
+				top: 38px !important;
+				left: 0 !important;
+				min-width: 100% !important;
+				box-shadow: none !important;
+			}
+
+			.v-list-item--density-default.v-list-item--one-line {
+				min-height: 40px;
+			}
+		}
+	}
+
+	.overlay {
+		position: fixed;
+		display: block;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background-color: rgb(3 16 37 / 50%);
+		cursor: default;
+		backdrop-filter: blur(2px);
+		z-index: 1;
+
+		@media (width <= 768px) {
+			display: none;
+		}
+	}
 }
 
 .right-menu-item {
-  color: tokens.$blue-darken-60;
+	color: tokens.$blue-darken-60;
 }
 </style>

package/src/components/LangBtn/LangBtn.vue

@@ -153,16 +153,18 @@
 	</div>
 </template>
 <style lang="scss" scoped>
-@use '@/assets/tokens.scss';
+@use '@/assets/tokens';
 
 .v-list-item:hover {
-  background-color: rgba(tokens.$colors-overlay, 0.005)
+	background-color: rgba(tokens.$colors-overlay, 0.005);
 }
 
 .vd-lang-btn {
-  font-size: 16px;
-  --hoverColor: rgba(tokens.$colors-overlay, 0.5);
-  text-transform: none;
-  letter-spacing: inherit;
+	font-size: 16px;
+
+	--hover-color: rgba(tokens.$colors-overlay, 0.5);
+
+	text-transform: none;
+	letter-spacing: inherit;
 }
 </style>

package/src/components/LogoBrandSection/LogoBrandSection.stories.ts

@@ -91,8 +91,8 @@ export const Default: Story = {
 				code: `
 				<template>
 					<LogoBrandSection
-						:service-title="Synapse"
-						:service-sub-title="Documentation du Design System"
+						service-title="Synapse"
+						service-sub-title="Documentation du Design System"
 					/>
 				</template>
 				`,

package/src/components/NirField/NirField.mdx

@@ -45,13 +45,10 @@ Le composant `NirField` est utilisé pour afficher un champ de saisie de numéro
                     class="mx-16 my-6"
                     @submit.prevent="handleSubmit"
                 >
-                    <Nirfield
+                    <NirField
                         ref="nirFieldRef"
                         v-model="model"
                         :display-key="true"
-                        key-tooltip="message d'aide pour la clef"
-                        nir-tooltip="message d'aide pour le NIR"
-                        outlined
                         required
                     />
                     <button type="submit">

package/src/components/NirField/NirField.stories.ts

@@ -90,6 +90,16 @@ const meta = {
 				},
 			},
 		},
+		showSuccessMessages: {
+			description: 'Indique si les messages de succès sont affichés.',
+			control: 'boolean',
+			default: false,
+			table: {
+				type: {
+					summary: 'boolean',
+				},
+			},
+		},
 		customNumberRules: {
 			description: 'Règles de validation personnalisées pour le champ numéro.',
 			control: 'object',
@@ -131,8 +141,7 @@ export const Default: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -145,7 +154,10 @@ export const Default: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -166,8 +178,7 @@ export const Required: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="true"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -180,7 +191,10 @@ export const Required: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -201,8 +215,7 @@ export const WithoutKey: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -215,7 +228,47 @@ export const WithoutKey: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
+     import { ref } from 'vue'
+     
+     const value = ref('')
+    </script>
+    `,
+			},
+		],
+	},
+}
+
+export const WithSuccessMessages: Story = {
+	args: {
+		...Default.args,
+		showSuccessMessages: true,
+	},
+	parameters: {
+		...Default.parameters,
+		sourceCode: [
+			{
+				name: 'Template',
+				code: `
+    <template>
+     <NirField
+      v-model="value"
+      :required="false"
+      numberLabel="Numéro de sécurité sociale"
+      keyLabel="Clé"
+      :showSuccessMessages="true"
+     />
+    </template>
+    `,
+			},
+			{
+				name: 'Script',
+				code: `
+    <script setup lang="ts">
+     import NirField  from '@cnamts/synapse'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -256,8 +309,7 @@ export const CustomRules: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -272,7 +324,10 @@ export const CustomRules: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
+     import { ref } from 'vue'
+     
+     const value = ref('')
     </script>
     `,
 			},
@@ -293,8 +348,7 @@ export const WithNumberTooltip: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -308,7 +362,7 @@ export const WithNumberTooltip: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField  from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')
@@ -332,8 +386,7 @@ export const WithKeyTooltip: Story = {
 				code: `
     <template>
      <NirField
-      modelValue=""
-      :outlined="true"
+      v-model="value"
       :required="false"
       numberLabel="Numéro de sécurité sociale"
       keyLabel="Clé"
@@ -347,7 +400,7 @@ export const WithKeyTooltip: Story = {
 				name: 'Script',
 				code: `
     <script setup lang="ts">
-     import NirField from './NirField.vue'
+     import NirField from '@cnamts/synapse'
      import { ref } from 'vue'
      
      const value = ref('')