@cnamts/synapse 0.0.5-alpha → 0.0.7-alpha

package/src/components/HeaderNavigationBar/HeaderNavigationBar.stories.ts

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/vue3'
 
-import HeaderNavbar from './HeaderNavigationBar.vue'
+import HeaderNavigationBar from './HeaderNavigationBar.vue'
 import { VBtn } from 'vuetify/components'
 import BackBtn from '../BackBtn/BackBtn.vue'
 import { fn } from '@storybook/test'
 
 const meta = {
 	title: 'Composants/Structure/HeaderBar/HeaderNavigationBar',
-	component: HeaderNavbar,
+	component: HeaderNavigationBar,
 	parameters: {
 		layout: 'fullscreen',
 	},
@@ -248,7 +248,7 @@ const meta = {
 			},
 		},
 	},
-} satisfies Meta<typeof HeaderNavbar>
+} satisfies Meta<typeof HeaderNavigationBar>
 
 export default meta
 
@@ -272,7 +272,7 @@ export const Default: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{ label: 'Home', href: '' },
 		{ label: 'About', href: '' },
@@ -280,6 +280,14 @@ export const Default: Story = {
 />
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -313,7 +321,7 @@ export const WithScroll: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{ label: 'Home', href: '' },
 		{ label: 'About', href: '' },
@@ -325,6 +333,14 @@ export const WithScroll: Story = {
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -371,7 +387,7 @@ export const WithManyItems: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{
 				label: 'Home',
@@ -409,6 +425,14 @@ export const WithManyItems: Story = {
 />
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -419,12 +443,12 @@ export const WithSlots: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args">
+				<HeaderNavigationBar v-bind="args">
 					<template #logo-brand-content>
 						<svg
 							width="22"
@@ -468,7 +492,7 @@ export const WithSlots: Story = {
 							Besoin d’aide ?
 						</VBtn>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -477,7 +501,7 @@ export const WithSlots: Story = {
 			{
 				name: 'Template',
 				code: `<template>
-	<HeaderNavbar>
+	<HeaderNavigationBar>
 		<template #logo-brand-content>
 			<svg
 				width="22"
@@ -521,10 +545,18 @@ export const WithSlots: Story = {
 				Besoin d’aide ?
 			</VBtn>
 		</template>
-	</HeaderNavbar>
+	</HeaderNavigationBar>
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -535,12 +567,12 @@ export const WithLogoSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args">
+				<HeaderNavigationBar v-bind="args">
 					<template #logo-brand-content>
 						<svg
 							width="22"
@@ -561,7 +593,7 @@ export const WithLogoSlot: Story = {
 							height="52px"
 						/>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -570,7 +602,7 @@ export const WithLogoSlot: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar>
+<HeaderNavigationBar>
 	<template #logo-brand-content>
 		<svg
 			width="22"
@@ -591,7 +623,15 @@ export const WithLogoSlot: Story = {
 			height="52px"
 		/>
 	</template>
-</HeaderNavbar>
+</HeaderNavigationBar>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
 				`,
 			},
 		],
@@ -605,19 +645,19 @@ export const WithNavigationBarPrependSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args" v-model="args.burgerMenu">
+				<HeaderNavigationBar v-bind="args" v-model="args.burgerMenu">
 					<template #navigation-bar-prepend>
 						<BackBtn
 							:dark="true"
 							class="mr-4"
 						/>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -626,14 +666,22 @@ export const WithNavigationBarPrependSlot: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar>
+<HeaderNavigationBar>
 	<template #navigation-bar-prepend>
 		<BackBtn
 			:dark="true"
 			class="mr-4"
 		/>
 	</template>
-</HeaderNavbar>
+</HeaderNavigationBar>
+				`,
+			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
 				`,
 			},
 		],
@@ -646,12 +694,12 @@ export const WithNavigationBarAppendSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar v-bind="args">
+				<HeaderNavigationBar v-bind="args">
 					<template #navigation-bar-append>
 						<VBtn
 							variant="tonal"
@@ -660,7 +708,7 @@ export const WithNavigationBarAppendSlot: Story = {
 							Besoin d’aide ?
 						</VBtn>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 			`,
 		}
 	},
@@ -670,7 +718,7 @@ export const WithNavigationBarAppendSlot: Story = {
 				name: 'Template',
 				code: `
 <template>
-	<HeaderNavbar>
+	<HeaderNavigationBar>
 		<template #navigation-bar-append>
 			<VBtn
 				variant="tonal"
@@ -679,10 +727,18 @@ export const WithNavigationBarAppendSlot: Story = {
 				Besoin d’aide ?
 			</VBtn>
 		</template>
-	</HeaderNavbar>
+	</HeaderNavigationBar>
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -695,12 +751,12 @@ export const WithNavigationMenuAppendSlot: Story = {
 	},
 	render: (args) => {
 		return {
-			components: { HeaderNavbar, VBtn, BackBtn },
+			components: { HeaderNavigationBar, VBtn, BackBtn },
 			setup() {
 				return { args }
 			},
 			template: `
-				<HeaderNavbar
+				<HeaderNavigationBar
 					v-bind="args"
 					v-model="args.burgerMenu"
 					@update:burgerMenu="()=>{
@@ -717,7 +773,7 @@ export const WithNavigationMenuAppendSlot: Story = {
 							Besoin d’aide ?
 						</VBtn>
 					</template>
-				</HeaderNavbar>
+				</HeaderNavigationBar>
 				<div style="height: 200px;"></div>
 			`,
 		}
@@ -728,7 +784,7 @@ export const WithNavigationMenuAppendSlot: Story = {
 				name: 'Template',
 				code: `
 <template>
-	<HeaderNavbar
+	<HeaderNavigationBar
 		maxHorizontalMenuItems="0"
 		:items="[
 			{ label: 'Home', href: '' },
@@ -744,10 +800,18 @@ export const WithNavigationMenuAppendSlot: Story = {
 				Besoin d’aide ?
 			</VBtn>
 		</template>
-	</HeaderNavbar>
+	</HeaderNavigationBar>
 </template>
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }
@@ -766,7 +830,7 @@ export const WithVuetifyOptions: Story = {
 			{
 				name: 'Template',
 				code: `
-<HeaderNavbar
+<HeaderNavigationBar
 	:items="[
 		{ label: 'Home', href: '' },
 		{ label: 'About', href: '' },
@@ -779,6 +843,14 @@ export const WithVuetifyOptions: Story = {
 />
 				`,
 			},
+			{
+				name: 'Script',
+				code: `
+				<script setup lang="ts">
+					import { HeaderNavigationBar } from '@cnamts/synapse'
+				</script>
+				`,
+			},
 		],
 	},
 }

package/src/components/HeaderNavigationBar/HorizontalNavbar/HorizontalNavbar.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-	import { VTabs } from 'vuetify/components'
 	import type { NavigationItem } from '../types'
 	import useCustomizableOptions, { type CustomizableOptions } from '@/composables/useCustomizableOptions'
 	import { config } from './config'
@@ -19,56 +18,59 @@
 </script>
 
 <template>
-	<VSheet
-		class="horizontal-menu px-12"
-		v-bind="options.sheet"
-	>
-		<slot name="navigation-bar-prepend" />
-		<slot>
-			<VTabs
-				class="horizontal-menu__tabs"
-				v-bind="options.tabs"
-			>
-				<VTab
-					v-for="(item, index) in items"
-					:key="index"
-					:href="item.href"
-					:to="item.to"
-					v-bind="options.tab"
-					tabindex="0"
-					class="horizontal-menu__item"
+	<VSheet v-bind="options.sheet">
+		<div class="horizontal-menu px-xl-0 px-14">
+			<slot name="navigation-bar-prepend" />
+			<slot>
+				<VTabs
+					class="horizontal-menu__tabs"
+					v-bind="options.tabs"
 				>
-					<span class="horizontal-menu__item-link">
-						{{ item.label }}
-					</span>
-				</VTab>
-			</VTabs>
-		</slot>
-		<slot name="navigation-bar-append" />
+					<VTab
+						v-for="(item, index) in items"
+						:key="index"
+						:href="item.href"
+						:to="item.to"
+						v-bind="options.tab"
+						tabindex="0"
+						class="horizontal-menu__item"
+					>
+						<span class="horizontal-menu__item-link">
+							{{ item.label }}
+						</span>
+					</VTab>
+				</VTabs>
+			</slot>
+			<slot name="navigation-bar-append" />
+		</div>
 	</VSheet>
 </template>
 
 <style lang="scss" scoped>
+@use '@/assets/tokens.scss' as *;
+@use '@/components/HeaderBar/consts' as *;
 
 .horizontal-menu {
-	display: flex;
-	align-items: center;
+  display: flex;
+  align-items: center;
+  max-width: $header-max-width;
+  margin: 0 auto;
 }
 
 .horizontal-menu__tabs {
-	flex: 1 1 0;
+  flex: 1 1 0;
 }
 
 .horizontal-menu__item {
-	cursor: pointer;
+  cursor: pointer;
 }
 
 .horizontal-menu__item-link {
-	font-size: 0.875rem;
-	font-weight: 700;
+  font-size: 0.875rem;
+  font-weight: 700;
 }
 
 .v-tab-item--selected span {
-	color: #fff;
+  color: #fff;
 }
 </style>

package/src/components/HeaderToolbar/Accessibilite.mdx

@@ -0,0 +1,14 @@
+import { Meta, Story } from '@storybook/addon-docs';
+import * as AccessStories from './Accessibilite.stories.ts';
+
+<Meta of={AccessStories} />
+
+Accessibilité
+=============
+<Story of={AccessStories.Legende} />
+<br />
+
+--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
+
+<Story of={AccessStories.AccessibilitePanel} />
+<br />

package/src/components/HeaderToolbar/Accessibilite.stories.ts

@@ -0,0 +1,203 @@
+import { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon } from 'vuetify/components'
+import type { StoryObj } from '@storybook/vue3'
+import { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated } from './AccessibiliteItems'
+import { mdiCheckboxMarkedCircle, mdiLink, mdiEye } from '@mdi/js'
+
+const checkIcon = mdiCheckboxMarkedCircle
+const iconEye = mdiEye
+const linkICon = mdiLink
+
+export default {
+	title: 'Composants/Structure/HeaderToolbar/Accessibilité',
+}
+
+export const AccessibilitePanel: StoryObj = {
+
+	render: () => {
+		return {
+			components: { VExpansionPanels, VExpansionPanel, VExpansionPanelTitle, VExpansionPanelText, VDataTable, VIcon },
+
+			setup() {
+				const icon = checkIcon
+
+				return { AccessibiliteItemsIndeterminate, AccessibiliteItemsValidated, icon, linkICon, iconEye }
+			},
+			template: `
+				<div class="accessibiliteItems" style="display:flex; max-width: none !important;">
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsIndeterminate.length }} critères à prendre en charge par le projet</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+
+						<v-expansion-panels value="opened" multiple>
+							<v-expansion-panel v-for="(item, index) in AccessibiliteItemsIndeterminate" :key="index" style="background-color: rgba(42, 96, 158, 0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon :icon="iconEye" style="margin-right: 5px; color:#5778b7;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+										<v-expansion-panel>
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+														<p>{{ element.info4 }}</p>
+														<p>{{ element.info5 }}</p>
+														<p>{{ element.info6 }}</p>
+														<p>{{ element.info7 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+					</v-col>
+					<v-col cols="6">
+						<div style="display:flex; margin-bottom: 10px; justify-content: space-between; align-items: center;">
+							<h5>{{ AccessibiliteItemsValidated.length }} critères pris en charge par l'équipe Design System</h5>
+							<div style="display: flex; align-items: center;">
+								<v-btn variant="tonal" color="red" size="x-small" style="margin: 4px;font-size: 8px;"
+									   rounded>Tanaguru
+								</v-btn>
+							</div>
+						</div>
+						<v-expansion-panels v-if="AccessibiliteItemsValidated.length > 0" value="opened" multiple>
+							<v-expansion-panel 
+								v-for="(item, index) in AccessibiliteItemsValidated"
+								:key="index" style="background-color: rgba(53,135,0,0.1); margin-bottom: 10px;">
+								<v-expansion-panel-title>
+									<VIcon color="green" :icon="icon" style="margin-right: 5px;"/>
+									{{ item.title }}
+								</v-expansion-panel-title>
+								<v-expansion-panel-text>
+									<v-expansion-panels>
+
+									<v-expansion-panel v-for="(i, index) in item.items2" :key="i"  style="margin-bottom: 10px;">
+											<v-expansion-panel-title
+												style="font-weight: bold; font-size: 13px; line-height: 16px;">
+												{{ i.subtitle}}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div>
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ i.precision }}
+													</p>
+													<div v-for="(value, index) in i.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="{{i.link}}" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+
+														<p>{{ value.info1 }}</p>
+														<p>{{ value.info2 }}</p>
+														<p>{{ value.info3 }}</p>
+
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+										
+										<v-expansion-panel>
+											<v-expansion-panel-title style="font-weight: bold;font-size: 13px; line-height: 16px;">
+												{{ item.subtitle }}
+											</v-expansion-panel-title>
+											<v-expansion-panel-text>
+												<div v-for="(value, i) in item.items" :key="i">
+													<p style="font-size: 13px;line-height: 16px;">
+														{{ value.precision }}
+													</p>
+													<div v-for="element in value.solution"
+														 style="margin-top:15px; font-size: 13px;line-height: 16px;">
+														<p style="font-weight: bold;">Méthodologie du test : <a
+															href="value.link" target="blank">
+															<VIcon :icon="linkICon"/>
+														</a></p>
+														<p>{{ element.info1 }}</p>
+														<p>{{ element.info2 }}</p>
+														<p>{{ element.info3 }}</p>
+														<p>{{ element.info4 }}</p>
+														<p>{{ element.info5 }}</p>
+														<p>{{ element.info6 }}</p>
+														<p>{{ element.info7 }}</p>
+													</div>
+													<span style="display:flex; justify-content:center; margin-bottom:5px;">______</span>
+												</div>
+											</v-expansion-panel-text>
+										</v-expansion-panel>
+									</v-expansion-panels>
+								</v-expansion-panel-text>
+							</v-expansion-panel>
+						</v-expansion-panels>
+						<div v-else style="display: flex;justify-content: center;"><span style="text-align:center;"  >Pas de critère d'accessibilité bloquant</span></div>
+					</v-col>
+				</div>
+			`,
+		}
+	},
+	tags: ['!dev'],
+}
+
+export const Legende: StoryObj = {
+	args: {
+		icon: checkIcon,
+	},
+	render: (args) => {
+		return {
+			components: { VIcon },
+			setup() {
+				return { args }
+			},
+			template: `
+			  <p style="color: grey;font-size: 11px; margin-bottom: 12px;">Date de conception: 20/11/2024</p>
+			  <div>
+				<p>Le tableau ci-dessous liste nos recommandations suivant les <a target="blank" style="color:#0C41BD;" href="https://www.numerique.gouv.fr/publications/rgaa-accessibilite/#contenu">catégories du RGAA</a>.</p>
+				<p style="margin-bottom: 12px;font-weight:bold;">Pour rappel le composant seul ne garantie pas
+				  l'accessibilité du site.</p>
+				<div style="font-size: 14px">
+				  <p>Nous avons deux façons de relever les problèmes d'accessibilité des composants :</p>
+				  <div>
+					<v-btn variant="tonal" color="grey" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Audit
+					</v-btn>
+					Problèmes relevés par le projet
+				  </div>
+				  <div>
+					<v-btn variant="tonal" color="red" size="x-small" style="margin: 2px;font-size: 8px;" rounded>
+					  Tanaguru
+					</v-btn>
+					Problèmes relevés par Tanaguru
+				  </div>
+				</div>
+			  </div>
+            `,
+		}
+	},
+	tags: ['!dev'],
+}