Merge pull request #847 from Sysvale/bugfix/fix-top-app-bar

Bugfix/fix top app bar

Author: RafaelGondi

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.91.0",
+	"version": "3.91.1",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/TopAppBar.vue

@@ -1,35 +1,38 @@
 <template>
 	<div class="top-app-bar">
-		<icon
-			v-if="showMenuIcon"
-			class="top-app-bar__menu"
-			name="menu-outline"
-			:width="iconSize"
-			:height="iconSize"
-			@click="emit('on-menu-click')"
-		/>
-		<router-link
-			v-else-if="showBackNavigation"
-			:to="handleRouterBack"
-		>
+		<div class="top-app-bar__menu-container">
 			<icon
-				name="arrow-left-outline"
+				v-if="showMenuIcon"
+				class="top-app-bar__menu"
+				name="menu-outline"
 				:width="iconSize"
 				:height="iconSize"
+				@click="emit('on-menu-click')"
 			/>
-		</router-link>
-		<img
-			v-if="logoUrl"
-			class="top-app-bar__logo-image"
-			:src="logoUrl"
-			:alt="title"
-		>
-		<h2
-			v-else
-			class="top-app-bar__title"
-		>
-			{{ title }}
-		</h2>
+			<router-link
+				v-else-if="showBackNavigation"
+				:to="handleRouterBack"
+			>
+				<icon
+					class="top-app-bar__back-arrow"
+					name="arrow-left-outline"
+					:width="iconSize"
+					:height="iconSize"
+				/>
+			</router-link>
+			<img
+				v-if="logoUrl"
+				class="top-app-bar__logo-image"
+				:src="logoUrl"
+				:alt="title"
+			>
+			<h2
+				v-else
+				class="top-app-bar__title"
+			>
+				{{ title }}
+			</h2>
+		</div>
 		<div class="top-app-bar__actions">
 			<!-- @slot Slot utilizado para os botões de action do lado direito-->
 			<slot name="actions" />
@@ -141,10 +144,16 @@ function handleRouterBack() {
     width: 100%;
 	z-index: $z-index-modal;
 
-    &__menu {
+    &__menu, &__back-arrow {
         cursor: pointer;
     }
 
+	&__menu-container {
+		display: flex;
+		align-items: center;
+		gap: spacer(6);
+	}
+
 	&__title {
 		@include subheading-2;
 	}
@@ -155,7 +164,7 @@ function handleRouterBack() {
     }
 
     &__logo-image {
-        height: 100%;
+        height: 50px;
     }
 }
 

src/stories/components/TopAppBar.stories.mdx

@@ -33,12 +33,19 @@ export const Template = (args) => ({
 				src="https://images.unsplash.com/photo-1738526787238-96d5352c2ba9?q=80&w=1974&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 				style="width: 100%; height: 100%;"
 			/>
-			<cds-top-app-bar v-bind="args" />
+			<cds-top-app-bar
+				v-bind="args"
+				@on-menu-click="logMenuClick"
+			/>
 		</div>
 	`,
+	methods: {
+		logMenuClick() {
+			console.info('Menu click emitted');
+		},
+	},
 });
 
-
 # TopAppBar
 
 ### O TopAppBar é um componente de barra de aplicação responsivo que pode exibir um título, um logotipo, um botão de menu e ações personalizadas.
@@ -51,7 +58,6 @@ export const Template = (args) => ({
 - Quando for necessário exibir um logotipo ou título na parte superior da interface.
 - Quando houver ações que precisam estar sempre acessíveis na barra superior.
 
-
 <br />
 
 ## Quando não usar:
@@ -68,6 +74,10 @@ export const Template = (args) => ({
 		name="TopAppBar"
 		args={{
 			title: 'Título bacana',
+			logoUrl: 'https://framerusercontent.com/images/xz7CrU73qctPY2Vm79XMnTAVM.svg',
+			showMenuIcon: true,
+			showBackNavigation: false,
+			defaultRoute: { name: 'rota-default' },
 		}}
 	>
 		{ Template.bind({}) }

src/tests/__snapshots__/TopAppBar.spec.ts.snap

@@ -1,10 +1,12 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`TopAppBar > renders correctly 1`] = `
-"<div data-v-ea2050ea="" class="top-app-bar"><svg data-v-ea2050ea="" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" aria-labelledby="menu-outline" role="presentation" class="top-app-bar__menu">
-    <g fill="currentColor"></g>
-  </svg>
-  <h2 data-v-ea2050ea="" class="top-app-bar__title">Título massa</h2>
+"<div data-v-ea2050ea="" class="top-app-bar">
+  <div data-v-ea2050ea="" class="top-app-bar__menu-container"><svg data-v-ea2050ea="" xmlns="http://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 24 24" aria-labelledby="menu-outline" role="presentation" class="top-app-bar__menu">
+      <g fill="currentColor"></g>
+    </svg>
+    <h2 data-v-ea2050ea="" class="top-app-bar__title">Título massa</h2>
+  </div>
   <div data-v-ea2050ea="" class="top-app-bar__actions">
     <!-- @slot Slot utilizado para os botões de action do lado direito-->
   </div>