@cnamts/synapse 0.0.7-alpha → 0.0.8-alpha

package/src/components/HeaderToolbar/HeaderToolbar.vue

@@ -298,213 +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;
-      }
-    }
-
-    :deep(.sy-input-select) {
-      width: 100%;
-      display: flex;
-      justify-content: space-between;
-      @media (max-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 (max-width: 768px) {
-        max-height: 38px;
-        min-width: 152px;
-      }
-      a {
-        max-height: 44px;
-        @media (max-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 (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.stories.ts

@@ -154,7 +154,7 @@ 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('')
@@ -191,7 +191,7 @@ 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('')
@@ -228,7 +228,7 @@ 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('')
@@ -265,7 +265,7 @@ export const WithSuccessMessages: 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('')
@@ -324,7 +324,7 @@ 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('')
@@ -362,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('')
@@ -400,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('')