♻️ vue-dot: Add show-nav-bar-menu-btn & mobile-version props to Heade…

…rBar (#1728)

CHANGELOG.md

@@ -7,6 +7,7 @@
 
 - ♻️ **Refactoring**
   - **HeaderBar:** Refonte du bouton pour activer le menu sur les écrans mobiles ([#1726](https://github.com/assurance-maladie-digital/design-system/pull/1726)) ([50e0938](https://github.com/assurance-maladie-digital/design-system/commit/50e09381f38102e42ab321a3915607efbd111ebe))
+  - **HeaderBar:** Ajout des props `show-nav-bar-menu-btn` et `mobile-version` ([#1728](https://github.com/assurance-maladie-digital/design-system/pull/1728))
 
 - 🐛 **Corrections de bugs**
   - **NotificationBar:** Correction de l'affichage sur les écrans mobiles ([#1675](https://github.com/assurance-maladie-digital/design-system/pull/1675)) ([b18214c](https://github.com/assurance-maladie-digital/design-system/commit/b18214ce5646382b281adb62fe96896b588f27df))
@@ -67,7 +68,7 @@
   - **eslint-plugin-jsdoc:** Mise à jour vers la `v37.6.1` ([#1695](https://github.com/assurance-maladie-digital/design-system/pull/1695)) ([5e475f2](https://github.com/assurance-maladie-digital/design-system/commit/5e475f28316498818cc5b3165ef0e799fa10d472))
   - **sass-loader:** Mise à jour vers la `v10.2.1` ([#1721](https://github.com/assurance-maladie-digital/design-system/pull/1721)) ([b3de137](https://github.com/assurance-maladie-digital/design-system/commit/b3de137294e3ec36e3c44898e0ff511284bda749))
   - **core-js:** Mise à jour vers la `v3.20.3` ([#1722](https://github.com/assurance-maladie-digital/design-system/pull/1722)) ([0aba7b7](https://github.com/assurance-maladie-digital/design-system/commit/0aba7b71bc40fb943da2347a0de9ed4fafbaed9c))
-  - **@types/node:** Mise à jour vers la `v14.18.7` ([#1727](https://github.com/assurance-maladie-digital/design-system/pull/1727))
+  - **@types/node:** Mise à jour vers la `v14.18.7` ([#1727](https://github.com/assurance-maladie-digital/design-system/pull/1727)) ([2394ca0](https://github.com/assurance-maladie-digital/design-system/commit/2394ca08cb9c2732ce9bcb78d37f7a712611f7f0))
 
 ## v2.2.0
 

packages/docs/src/assets/styles/base.scss

@@ -48,7 +48,7 @@ html {
 	scroll-padding-top: 120px;
 }
 
-@media only screen and (max-width: 960px) {
+@media only screen and (max-width: 1264px) {
 	html {
 		scroll-padding-top: 72px;
 	}

packages/docs/src/components/DocHeader.vue

@@ -1,63 +1,30 @@
 <template>
 	<HeaderBar
+		:mobile-version="$vuetify.breakpoint.mdAndDown"
 		app
 		fixed
 		clipped-left
 		service-title="Design System"
-		@click="emitDrawerEvent"
 	>
-		<template #navigation-bar-content>
-			<div
-				v-if="!$vuetify.breakpoint.lgAndUp"
-				class="d-flex align-center"
-			>
-				<VBtn
-					:aria-label="menuBtnActionLabel"
-					:elevation="0"
-					color="transparent"
-					class="mx-n2"
-					@click="emitDrawerEvent"
-				>
-					<VIcon class="mr-2">
-						{{ menuIcon }}
-					</VIcon>
-
-					Menu
-				</VBtn>
-			</div>
+		<template #navigation-drawer="{ drawer, updateDrawer }">
+			<DocDrawer
+				:value="drawer"
+				@input="updateDrawer"
+			/>
 		</template>
 	</HeaderBar>
 </template>
 
 <script lang="ts">
 	import Vue from 'vue';
-	import Component, { mixins } from 'vue-class-component';
-
-	import { mdiMenu } from '@mdi/js';
-
-	const Props = Vue.extend({
-		props: {
-			drawer: {
-				type: Boolean,
-				default: false
-			}
-		}
-	});
+	import Component from 'vue-class-component';
 
-	const MixinsDeclaration = mixins(Props);
-
-	@Component
-	export default class DocHeader extends MixinsDeclaration {
-		menuIcon = mdiMenu;
-
-		get menuBtnActionLabel(): string {
-			const action = this.drawer ? 'Masquer' : 'Afficher';
-
-			return `${action} le menu`;
-		}
+	import DocDrawer from '../components/drawer/DocDrawer.vue';
 
-		emitDrawerEvent(): void {
-			this.$emit('update:drawer', !this.drawer);
+	@Component({
+		components: {
+			DocDrawer
 		}
-	}
+	})
+	export default class DocHeader extends Vue {}
 </script>

packages/docs/src/components/drawer/DocDrawer.vue

@@ -1,10 +1,10 @@
 <template>
 	<VNavigationDrawer
-		:value="drawer"
+		:value="value"
 		app
 		clipped
 		width="320px"
-		@input="$emit('change', $event)"
+		@input="$emit('input', $event)"
 	>
 		<KeepAlive>
 			<DocDrawerList :items="items" />
@@ -22,7 +22,7 @@
 
 	const Props = Vue.extend({
 		props: {
-			drawer: {
+			value: {
 				type: Boolean,
 				default: null
 			}
@@ -36,8 +36,8 @@
 			DocDrawerList
 		},
 		model: {
-			prop: 'drawer',
-			event: 'change'
+			prop: 'value',
+			event: 'input'
 		}
 	})
 	export default class DocDrawer extends MixinsDeclaration {

packages/docs/src/content/composants/header-bar.md

@@ -62,6 +62,12 @@ Vous pouvez définir une largeur interne en utilisant la prop `inner-width`.
 
 <doc-example file="header-bar/inner-width"></doc-example>
 
+### Bouton menu dans la barre de navigation
+
+Vous pouvez afficher le bouton pour activer le menu dans la barre de navigation sur les écrans mobiles en utilisant la prop `show-nav-bar-menu-btn`.
+
+<doc-example file="header-bar/nav-bar-menu-btn"></doc-example>
+
 ### Composants Vuetify
 
 Vous pouvez personnaliser les composants Vuetify contenus dans le pattern `Header` en utilisant la prop `vuetify-options`.

packages/docs/src/content/examples/header-bar/nav-bar-menu-btn.vue

@@ -0,0 +1,30 @@
+<template>
+	<HeaderBar
+		:navigation-items="navigationItems"
+		theme="ameli-pro"
+		mobile-version
+		show-nav-bar-menu-btn
+	/>
+</template>
+
+<script lang="ts">
+	import Vue from 'vue';
+	import Component from 'vue-class-component';
+
+	import { NavigationItem } from '@cnamts/vue-dot/src/patterns/HeaderBar/types';
+
+	@Component
+	export default class HeaderBarNavBarMenuBtn extends Vue {
+		navigationItems: NavigationItem[] = [
+			{
+				label: 'Accueil'
+			},
+			{
+				label: 'Mes projets'
+			},
+			{
+				label: 'Mes outils'
+			}
+		];
+	}
+</script>

packages/docs/src/content/examples/header-bar/usage.vue

@@ -36,6 +36,9 @@
 		];
 
 		options = {
+			booleans: [
+				'mobileVersion'
+			],
 			selects: {
 				theme: [
 					'default',

packages/docs/src/data/api/header-bar.ts

@@ -10,11 +10,11 @@ const themeProp = {
 	example: `'default' | 'cnam' | 'ameli' | 'ameli-pro' | 'risque-pro'`
 };
 
-const isMobileProp = {
-	name: 'is-mobile',
+const mobileVersionProp = {
+	name: 'mobile-version',
 	type: 'boolean',
 	default: false,
-	description: 'Affiche la version mobile.'
+	description: 'Affiche le header en version en version pour les écrans mobiles.<br>Par défaut, ce mode est activé à partir du [breakpoint `sm`](https://vuetifyjs.com/en/features/breakpoints/).'
 };
 
 const innerWidthProp = {
@@ -46,7 +46,7 @@ const itemsProp = {
 	example: `{
 	label: string;
 	to?: string | RawLocation;
-	href?: string | string;
+	href?: string;
 }[]`
 };
 
@@ -57,6 +57,13 @@ const homeLinkProp = {
 	description: 'Le lien vers la page d’accueil.<br>La valeur `false` permet de désactiver le lien.'
 };
 
+const drawerProp = {
+	name: 'drawer',
+	type: 'boolean',
+	default: false,
+	description: 'Contrôle la visibilité du menu sur les écrans mobiles.'
+};
+
 export const api: Api = {
 	HeaderBar: {
 		props: [
@@ -74,12 +81,20 @@ export const api: Api = {
 			},
 			innerWidthProp,
 			homeLinkProp,
+			{
+				name: 'show-nav-bar-menu-btn',
+				type: 'boolean',
+				default: false,
+				description: 'Affiche le bouton pour activer le menu dans la barre de navigation sur les écrans mobiles.'
+			},
+			mobileVersionProp,
 			...customizable(`{
 	appBar: 'VAppBar',
 	contentSheet: 'VSheet',
 	innerSheet: 'VSheet',
-	spacer: 'VSpacer'
-}`)
+	spacer: 'VSpacer',
+	menuBtn: 'HeaderMenuBtn'
+}`, 'et `HeaderMenuBtn`')
 		],
 		slots: [
 			{
@@ -94,6 +109,14 @@ export const api: Api = {
 				name: 'navigation-bar-content',
 				description: 'Slot pour remplacer le contenu de la barre de navigation.'
 			},
+			{
+				name: 'navigation-drawer',
+				description: 'Slot pour remplacer le menu de navigation sur les écrans mobiles.',
+				props: {
+					drawer: 'boolean',
+					updateDrawer: '(value: boolean) => void'
+				}
+			},
 			{
 				name: 'navigation-drawer-content',
 				description: 'Slot pour remplacer le contenu du menu de navigation sur les écrans mobiles.'
@@ -105,12 +128,7 @@ export const api: Api = {
 			themeProp,
 			titleProp,
 			subTitleProp,
-			{
-				name: 'is-mobile',
-				type: 'boolean',
-				default: false,
-				description: 'Affiche la version mobile.'
-			},
+			mobileVersionProp,
 			homeLinkProp
 		],
 		slots: [
@@ -120,17 +138,36 @@ export const api: Api = {
 			}
 		]
 	},
+	HeaderMenuBtn: {
+		props: [
+			drawerProp,
+			{
+				name: 'spacing',
+				type: 'string',
+				default: `'px-2 mx-n2'`,
+				description: 'L’espacement du bouton.'
+			}
+		]
+	},
 	HeaderNavigationBar: {
 		props: [
 			themeProp,
 			itemsProp,
-			isMobileProp,
+			mobileVersionProp,
 			innerWidthProp,
+			drawerProp,
+			{
+				name: 'tab',
+				type: [
+					'number',
+					'string'
+				],
+				default: null,
+				description: 'L’onglet sélectionné.'
+			},
 			...customizable(`{
 	sheet: 'VSheet',
 	innerSheet: 'VSheet',
-	menuBtn: 'VBtn',
-	menuIcon: 'VIcon',
 	tabs: 'VTabs',
 	tab: 'VTab'
 }`)
@@ -146,13 +183,8 @@ export const api: Api = {
 		props: [
 			themeProp,
 			itemsProp,
-			isMobileProp,
-			{
-				name: 'drawer',
-				type: 'boolean',
-				default: false,
-				description: 'Contrôle la visibilité du menu sur les écrans mobiles.'
-			},
+			mobileVersionProp,
+			drawerProp,
 			...customizable(`{
 	navigationDrawer: 'VNavigationDrawer',
 	closeBtn: 'VBtn',

packages/docs/src/data/api/shared/mixins/customizable.ts

@@ -1,12 +1,14 @@
 import { Props } from "~/types";
 
-export function customizable(example: string): Props {
+export function customizable(example: string, otherComponents?: string): Props {
+	const descriptionComplement = otherComponents ? ` ${otherComponents}` : '';
+
 	return [
 		{
 			name: 'vuetify-options',
 			type: 'Options',
 			default: 'undefined',
-			description: 'Personnalisation des composants Vuetify en utilisant la directive `customizable`.',
+			description: `Personnalisation des composants Vuetify${descriptionComplement} en utilisant la directive \`customizable\`.`,
 			example
 		}
 	];

packages/docs/src/pages/_.vue

@@ -1,13 +1,11 @@
 <template>
 	<VApp>
-		<DocHeader :drawer.sync="drawer" />
-
-		<DocDrawer v-model="drawer" />
+		<DocHeader />
 
 		<VMain>
 			<PageContainer
 				class="h-100"
-				spacing="pa-6 pa-sm-14"
+				spacing="pa-6 pa-lg-14"
 				size="m"
 			>
 				<article class="flex-grow-1">
@@ -64,23 +62,19 @@
 	import { slugifyAnchors } from '../functions/slugifyAnchors';
 
 	import DocHeader from '../components/DocHeader.vue';
-	import DocDrawer from '../components/drawer/DocDrawer.vue';
 	import DocPageInfo from '../components/page/DocPageInfo.vue';
 	import DocPrevNext from '../components/page/DocPrevNext.vue';
 
 	@Component({
 		components: {
 			DocHeader,
-			DocDrawer,
 			DocPageInfo,
 			DocPrevNext
 		}
 	})
 	export default class Slug extends Vue {
 		document?: ContentDocument;
 
-		drawer: boolean | null = null;
-
 		@Middleware
 		middleware({ app, params, redirect }: Context): void {
 			if (params.pathMatch === 'index') {