@tiddh/brave-vue 1.92.19 → 1.92.21

package/dist/src/Navigation/Stepper.vue

@@ -8,18 +8,39 @@
 			<div class="stepper-links-item-area">
 				<Paragraph
 					:size="'sm'"
-					color="#AFA2BA"
+					:color="color"
 					class="stepper-link-text"
-					:class="routes.length - 1 == indexRoute ? 'is-current' : null"
-					@click="routes.length - 1 == indexRoute ? click() : null"
-					>{{ option.stepperName }}</Paragraph
+					:class="
+						routes.length - 1 == indexRoute ? 'is-current' : 'not-current'
+					"
+					@click="
+						routes.length - 1 == indexRoute ? onClick(option) : onClick(option)
+					"
+				>
+					<div
+						class="preview-button"
+						@click="onClick(option)"
+						:style="'color:' + color"
+					>
+						<Icon
+							v-if="indexRoute == 0"
+							name="arrow-left"
+							:fill="color"
+							:color="color"
+							size="sm"
+							stroke="transparent"
+							class="back-button"
+						/>
+					</div>
+
+					{{ option.stepperName }}</Paragraph
 				>
 			</div>
 
 			<Paragraph
 				v-if="routes.length - 1 != indexRoute"
 				:size="'sm'"
-				color="#AFA2BA"
+				:color="color"
 				v-html="'/'"
 				class="stepper-link-divider"
 			></Paragraph>
@@ -49,38 +70,16 @@
 				type: Array,
 				required: true,
 			},
-			// size: {
-			// 	type: String,
-			// 	default: "xl",
-			// },
-			// heading: {
-			// 	type: String,
-			// 	required: true,
-			// },
-			// headingSize: {
-			// 	type: String,
-			// 	default: "sm",
-			// },
-			// headingColor: {
-			// 	type: String,
-			// 	default: "#68596E",
-			// },
-			// paragraph: {
-			// 	type: String,
-			// },
-			// paragraphSize: {
-			// 	type: String,
-			// 	default: "lg",
-			// },
-			// haveClose: {
-			// 	type: Boolean,
-			// 	default: true,
-			// },
+			color: {
+				type: String,
+				required: true,
+				default: "#68596E",
+			},
 		},
 
 		methods: {
-			onClick() {
-				this.$emit("click");
+			onClick(payload) {
+				this.$emit("click", payload);
 			},
 
 			action() {
@@ -126,8 +125,10 @@
 				cursor: pointer;
 
 				&:hover {
-					p {
-						color: $color-brand-primary-medium !important;
+					.preview-button {
+						.icon {
+							color: $color-brand-primary-medium !important;
+						}
 					}
 
 					.icon {
@@ -168,23 +169,28 @@
 				}
 
 				.stepper-link-text {
-					// &:hover {
-					// 	color: $color-brand-primary-medium !important;
-					// }
+					display: flex;
+					flex-wrap: wrap;
+					align-content: center;
+					align-items: center;
 
 					&.is-current {
 						cursor: default;
-						color: $color-neutral-darkest !important;
+						font-weight: bold;
+					}
+
+					&:hover {
+						&.not-current {
+							color: $color-brand-primary-medium !important;
+						}
 					}
 				}
 
 				.icon {
-					width: px-size("md", $icon-width-sm);
-					height: px-size("md", $icon-width-sm);
-					position: relative;
-					svg {
-						width: px-size("md", $icon-width-sm);
-						height: px-size("md", $icon-width-sm);
+					margin-right: px-size("lg", $spacing-inline-xs);
+
+					@include media-breakpoint-down("sm") {
+						margin-right: px-size("lg", $spacing-inline-sm);
 					}
 				}
 			}

package/dist/src/Navigation/TopBar.stories.js

@@ -0,0 +1,69 @@
+import { action } from "@storybook/addon-actions";
+import { linkTo } from "@storybook/addon-links";
+import { withKnobs, text, object } from "@storybook/addon-knobs";
+
+import TopBar from "./TopBar";
+
+export default {
+	title: "Navigation/TopBar",
+	decorators: [withKnobs],
+	component: TopBar,
+};
+
+const routes = [
+	{
+		name: "index",
+		stepperName: "Etapa 2",
+	},
+	{
+		name: "second",
+		stepperName: "5 - Resumo do pedido",
+	},
+];
+
+const color = "#ffffff";
+
+export const Basic = () => ({
+	components: { TopBar },
+	props: {
+		breadcrumbs: {
+			default: routes,
+		},
+	},
+	template: `<div>
+    <div class="storybook-18">
+      <TopBar :breadcrumbs="breadcrumbs" />
+    </div>
+    <br>
+
+  </div>`,
+	methods: {
+		updateData(payload) {
+			console.log(payload);
+		},
+	},
+});
+
+export const BasicColor = () => ({
+	components: { TopBar },
+	props: {
+		breadcrumbs: {
+			default: routes,
+		},
+		color: {
+			default: color,
+		},
+	},
+	template: `<div>
+    <div class="storybook-18" style="background-color:#923FDA">
+      <TopBar :breadcrumbs="breadcrumbs" :color="color" />
+    </div>
+    <br>
+
+  </div>`,
+	methods: {
+		updateData(payload) {
+			console.log(payload);
+		},
+	},
+});

package/dist/src/Navigation/TopBar.vue

@@ -0,0 +1,70 @@
+<template>
+	<div class="top-bar">
+		<div class="steppers" v-if="breadcrumbs">
+			<Stepper :routes="breadcrumbs" :color="color" @click="onClick" />
+		</div>
+	</div>
+</template>
+
+<script>
+	import Button from "../Buttons/Button.vue";
+	import Heading from "../Typography/Heading.vue";
+	import Paragraph from "../Typography/Paragraph.vue";
+	import Icon from "../Icons/Icon.vue";
+	import Stepper from "./Stepper.vue";
+
+	export default {
+		name: "TopBar",
+		components: { Button, Heading, Paragraph, Icon, Stepper },
+		props: {
+			breadcrumbs: {
+				type: Array,
+				required: true,
+			},
+			color: {
+				type: String,
+				required: true,
+				default: "#AFA2BA",
+			},
+		},
+		methods: {
+			onClick(payload) {
+				this.$emit("click", payload);
+			},
+		},
+		computed: {
+			shadowVar() {
+				return {
+					"--shadow-color": this.shadowColor,
+				};
+			},
+		},
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import "./node_modules/@tiddh/brave-tokens/dist/styles/style.scss";
+
+	.top-bar {
+		/* color / surface / neutral / light */
+
+		// background: #ffffff;
+		/* shadow / level 02 */
+		position: relative;
+		width: 100%;
+		top: 0;
+		left: 0;
+		// box-shadow: 0px 10px 26px rgba(104, 89, 110, 0.24);
+		padding-top: px-size("lg", $spacing-stack-md);
+		padding-bottom: px-size("lg", $spacing-stack-md);
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		//max-width: px-size("lg", );
+		padding-left: columns("lg", 1);
+	}
+
+	.preview-button {
+		cursor: pointer;
+	}
+</style>

package/dist/src/Preview/PreviewWithTools.vue

@@ -68,7 +68,7 @@
 	import Preview from "./Preview.vue";
 	import PreviewMobile from "./PreviewMobile.vue";
 	import PreviewTools from "./PreviewTools.vue";
-	import TopBar from "./TopBar.vue";
+	import TopBar from "../Navigation/TopBar.vue";
 	import BottomBar from "./BottomBar.vue";
 
 	//const $ = jQuery

package/dist/src/PreviewWithTools.vue

@@ -68,7 +68,7 @@
 	import Preview from "./Preview.vue";
 	import PreviewMobile from "./PreviewMobile.vue";
 	import PreviewTools from "./PreviewTools.vue";
-	import TopBar from "./TopBar.vue";
+	import TopBar from "../Navigation/TopBar.vue";
 	import BottomBar from "./BottomBar.vue";
 
 	//const $ = jQuery

package/dist/src/Primary.stories.js

@@ -34,7 +34,7 @@ export const Primary = () => ({
     <div class="storybook-12"> 
       <Button kind="primary" size="xl" width="fluid" icon="right" :disabled="disabled" :inverted="inverted" :shadow-color="shadowColor" @click="action"> 
         <span>Fluid - Cols 12</span>
-        <Icon name="collapse" size="md" fill="#fff" stroke="transparent" /> 
+        <Icon name="collapse" size="md"  stroke="transparent" /> 
       </Button> 
     </div> 
     <br> 
@@ -64,7 +64,7 @@ export const Primary = () => ({
     <br> 
     <div> 
       <Button kind="primary" size="xl" width="circle"  :disabled="disabled" :inverted="inverted" :shadow-color="shadowColor"  @click="action"> 
-        <Icon name="chevron-right" fill="#fff" stroke="transparent" size="md" />       
+        <Icon name="chevron-right"  stroke="transparent" size="md" />       
       </Button> 
     </div> 
   </div>`,

package/dist/src/ProgressiveLoading.stories.js

@@ -46,7 +46,7 @@ export const ProgressiveLoading = () => ({
   <div class="storybook-12"> 
       <Button kind="secondary" size="xl" width="liquid" :isLoadingCompleted="isLoadingCompleted" :loadingProgress="loadingProgress" icon="right" :disabled="disabled" :loadingType="loadingType" :loadingText="loadingText" :isLoading="isLoading" :inverted="inverted" :shadow-color="shadowColor" @click="action"> 
         <span>Fluid - Cols 12</span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" /> 
+        <Icon name="collapse"  stroke="transparent" /> 
       </Button> 
     </div>
     <br>
@@ -55,7 +55,7 @@ export const ProgressiveLoading = () => ({
   <div class="storybook-12"> 
       <Button kind="primary" size="xl" width="liquid" :isLoadingCompleted="isLoadingCompleted" :loadingProgress="loadingProgress" icon="right" :disabled="disabled" :loadingType="loadingType" :loadingText="loadingText" :isLoading="isLoading" :inverted="inverted" :shadow-color="shadowColor" @click="action"> 
         <span>Fluid - Cols 12</span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" /> 
+        <Icon name="collapse"  stroke="transparent" /> 
       </Button> 
     </div>
     <br>
@@ -69,14 +69,14 @@ export const ProgressiveLoading = () => ({
     <div class="storybook-12"> 
       <Button kind="primary" size="xl" width="liquid" :loadingProgress="loadingProgress" icon="right" :disabled="disabled" :loadingType="loadingType" :loadingText="loadingText" :isLoading="isLoading" :inverted="inverted" :shadow-color="shadowColor" @click="action"> 
         <span>Fluid - Cols 12</span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" /> 
+        <Icon name="collapse"  stroke="transparent" /> 
       </Button> 
     </div>
     <br>
     <div class="storybook-12"> 
       <Button kind="ghost" size="xl" width="liquid" :loadingProgress="loadingProgress" icon="right" :disabled="disabled" :loadingType="loadingType" :loadingText="loadingText" :isLoading="isLoading" :inverted="inverted" :shadow-color="shadowColor" @click="action"> 
         <span>Fluid - Cols 12</span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" /> 
+        <Icon name="collapse"  stroke="transparent" /> 
       </Button> 
     </div>
     <br>

package/dist/src/Secondary.stories.js

@@ -40,7 +40,7 @@ export const Secondary = () => ({
     <br> 
     <div class="storybook-12"> 
       <Button kind="secondary" :size="sizes" icon="right" width="fluid" :disabled="disabled" :inverted="inverted"@click="action"> 
-        <Icon name="collapse" fill="#fff" stroke="transparent" /> 
+        <Icon name="collapse"  stroke="transparent" /> 
         Fluid - Cols 12
       </Button> 
     </div> 
@@ -71,7 +71,7 @@ export const Secondary = () => ({
     <br> 
     <div> 
       <Button kind="secondary" size="md" width="circle" :disabled="disabled" :inverted="inverted" @click="action"> 
-        <Icon name="chevron-right" fill="#fff" size="md" stroke="transparent" />       
+        <Icon name="chevron-right"  size="md" stroke="transparent" />       
       </Button> 
     </div> 
   </div>`,

package/dist/src/Stepper.vue

@@ -8,18 +8,39 @@
 			<div class="stepper-links-item-area">
 				<Paragraph
 					:size="'sm'"
-					color="#AFA2BA"
+					:color="color"
 					class="stepper-link-text"
-					:class="routes.length - 1 == indexRoute ? 'is-current' : null"
-					@click="routes.length - 1 == indexRoute ? click() : null"
-					>{{ option.stepperName }}</Paragraph
+					:class="
+						routes.length - 1 == indexRoute ? 'is-current' : 'not-current'
+					"
+					@click="
+						routes.length - 1 == indexRoute ? onClick(option) : onClick(option)
+					"
+				>
+					<div
+						class="preview-button"
+						@click="onClick(option)"
+						:style="'color:' + color"
+					>
+						<Icon
+							v-if="indexRoute == 0"
+							name="arrow-left"
+							:fill="color"
+							:color="color"
+							size="sm"
+							stroke="transparent"
+							class="back-button"
+						/>
+					</div>
+
+					{{ option.stepperName }}</Paragraph
 				>
 			</div>
 
 			<Paragraph
 				v-if="routes.length - 1 != indexRoute"
 				:size="'sm'"
-				color="#AFA2BA"
+				:color="color"
 				v-html="'/'"
 				class="stepper-link-divider"
 			></Paragraph>
@@ -49,38 +70,16 @@
 				type: Array,
 				required: true,
 			},
-			// size: {
-			// 	type: String,
-			// 	default: "xl",
-			// },
-			// heading: {
-			// 	type: String,
-			// 	required: true,
-			// },
-			// headingSize: {
-			// 	type: String,
-			// 	default: "sm",
-			// },
-			// headingColor: {
-			// 	type: String,
-			// 	default: "#68596E",
-			// },
-			// paragraph: {
-			// 	type: String,
-			// },
-			// paragraphSize: {
-			// 	type: String,
-			// 	default: "lg",
-			// },
-			// haveClose: {
-			// 	type: Boolean,
-			// 	default: true,
-			// },
+			color: {
+				type: String,
+				required: true,
+				default: "#68596E",
+			},
 		},
 
 		methods: {
-			onClick() {
-				this.$emit("click");
+			onClick(payload) {
+				this.$emit("click", payload);
 			},
 
 			action() {
@@ -126,8 +125,10 @@
 				cursor: pointer;
 
 				&:hover {
-					p {
-						color: $color-brand-primary-medium !important;
+					.preview-button {
+						.icon {
+							color: $color-brand-primary-medium !important;
+						}
 					}
 
 					.icon {
@@ -168,23 +169,28 @@
 				}
 
 				.stepper-link-text {
-					// &:hover {
-					// 	color: $color-brand-primary-medium !important;
-					// }
+					display: flex;
+					flex-wrap: wrap;
+					align-content: center;
+					align-items: center;
 
 					&.is-current {
 						cursor: default;
-						color: $color-neutral-darkest !important;
+						font-weight: bold;
+					}
+
+					&:hover {
+						&.not-current {
+							color: $color-brand-primary-medium !important;
+						}
 					}
 				}
 
 				.icon {
-					width: px-size("md", $icon-width-sm);
-					height: px-size("md", $icon-width-sm);
-					position: relative;
-					svg {
-						width: px-size("md", $icon-width-sm);
-						height: px-size("md", $icon-width-sm);
+					margin-right: px-size("lg", $spacing-inline-xs);
+
+					@include media-breakpoint-down("sm") {
+						margin-right: px-size("lg", $spacing-inline-sm);
 					}
 				}
 			}

package/dist/src/TopBar.stories.js

@@ -0,0 +1,69 @@
+import { action } from "@storybook/addon-actions";
+import { linkTo } from "@storybook/addon-links";
+import { withKnobs, text, object } from "@storybook/addon-knobs";
+
+import TopBar from "./TopBar";
+
+export default {
+	title: "Navigation/TopBar",
+	decorators: [withKnobs],
+	component: TopBar,
+};
+
+const routes = [
+	{
+		name: "index",
+		stepperName: "Etapa 2",
+	},
+	{
+		name: "second",
+		stepperName: "5 - Resumo do pedido",
+	},
+];
+
+const color = "#ffffff";
+
+export const Basic = () => ({
+	components: { TopBar },
+	props: {
+		breadcrumbs: {
+			default: routes,
+		},
+	},
+	template: `<div>
+    <div class="storybook-18">
+      <TopBar :breadcrumbs="breadcrumbs" />
+    </div>
+    <br>
+
+  </div>`,
+	methods: {
+		updateData(payload) {
+			console.log(payload);
+		},
+	},
+});
+
+export const BasicColor = () => ({
+	components: { TopBar },
+	props: {
+		breadcrumbs: {
+			default: routes,
+		},
+		color: {
+			default: color,
+		},
+	},
+	template: `<div>
+    <div class="storybook-18" style="background-color:#923FDA">
+      <TopBar :breadcrumbs="breadcrumbs" :color="color" />
+    </div>
+    <br>
+
+  </div>`,
+	methods: {
+		updateData(payload) {
+			console.log(payload);
+		},
+	},
+});

package/dist/src/TopBar.vue

@@ -1,16 +1,7 @@
 <template>
 	<div class="top-bar">
-		<div class="preview-button" @click="onClick">
-			<Icon
-				name="arrow-left"
-				fill="#AFA2BA"
-				stroke="transparent"
-				class="back-button"
-			/>
-		</div>
-
-		<div class="steppers" v-if="breadcrumbs" @click="onClick">
-			<Stepper :routes="breadcrumbs" />
+		<div class="steppers" v-if="breadcrumbs">
+			<Stepper :routes="breadcrumbs" :color="color" @click="onClick" />
 		</div>
 	</div>
 </template>
@@ -20,7 +11,7 @@
 	import Heading from "../Typography/Heading.vue";
 	import Paragraph from "../Typography/Paragraph.vue";
 	import Icon from "../Icons/Icon.vue";
-	import Stepper from "../Navigation/Stepper.vue";
+	import Stepper from "./Stepper.vue";
 
 	export default {
 		name: "TopBar",
@@ -30,34 +21,15 @@
 				type: Array,
 				required: true,
 			},
+			color: {
+				type: String,
+				required: true,
+				default: "#AFA2BA",
+			},
 		},
-
-		data() {
-			return {
-				// routes: [
-				// 	{
-				// 		path: "index",
-				// 		stepperName: "Etapa 2",
-				// 	},
-				// 	{
-				// 		path: "second",
-				// 		stepperName: "5 - Próximos personagens",
-				// 	},
-				// 	// {
-				// 	// 	path: "index",
-				// 	// 	stepperName: "Etapa 2",
-				// 	// },
-				// 	// {
-				// 	// 	path: "first",
-				// 	// 	stepperName: "first",
-				// 	// },
-				// ],
-			};
-		},
-
 		methods: {
-			onClick() {
-				this.$emit("click");
+			onClick(payload) {
+				this.$emit("click", payload);
 			},
 		},
 		computed: {
@@ -90,23 +62,6 @@
 		align-items: center;
 		//max-width: px-size("lg", );
 		padding-left: columns("lg", 1);
-
-		.preview-button {
-			width: px-size("lg", $icon-width-md);
-			height: px-size("lg", $icon-width-md);
-			margin-right: px-size("lg", $spacing-inline-sm);
-
-			.icon {
-				width: px-size("lg", $icon-width-md);
-				height: px-size("lg", $icon-width-md);
-				display: block;
-
-				svg {
-					width: px-size("lg", $icon-width-md);
-					height: px-size("lg", $icon-width-md);
-				}
-			}
-		}
 	}
 
 	.preview-button {