@tiddh/brave-vue 1.92.19 → 1.92.21

package/dist/src/components/Buttons/Button.vue

@@ -270,14 +270,14 @@
 				px-size("lg", $spacing-inline-lg);
 
 			//ICON
-			&.icon-left {
-				.icon {
+			&.icons-left {
+				i.icon {
 					left: px-size("lg", $spacing-inline-sm);
 				}
 			}
 
-			&.icon-right {
-				.icon {
+			&.icons-right {
+				i.icon {
 					right: px-size("lg", $spacing-inline-sm);
 				}
 			}
@@ -327,14 +327,15 @@
 			padding: px-size("lg", $spacing-stack-md)
 				px-size("lg", $spacing-inline-lg);
 			width: fit-content;
-			&.icon-left {
+			
+			&.icons-left {
 				padding-left: px-size("lg", $spacing-inline-xxl) !important;
 				.icon {
 					left: px-size("lg", $spacing-inline-sm);
 				}
 			}
 
-			&.icon-right {
+			&.icons-right {
 				padding-right: px-size("lg", $spacing-inline-xxl) !important;
 				.icon {
 					right: px-size("lg", $spacing-inline-sm);
@@ -631,13 +632,13 @@
 				padding: px-size("sm", $spacing-inset-xs);
 			}
 
-			&.icon-left {
+			&.icons-left {
 				.icon {
 					left: px-size("lg", $spacing-inline-sm) !important;
 				}
 			}
 
-			&.icon-right {
+			&.icons-right {
 				.icon {
 					right: px-size("lg", $spacing-inline-sm) !important;
 				}
@@ -682,14 +683,14 @@
 					px-size("sm", $spacing-inline-md);
 			}
 
-			&.icon-left {
+			&.icons-left {
 				padding-left: px-size("lg", $spacing-inline-xxl) !important;
 				.icon {
 					left: px-size("lg", $spacing-inline-sm);
 				}
 			}
 
-			&.icon-right {
+			&.icons-right {
 				padding-right: px-size("lg", $spacing-inline-xxl) !important;
 				.icon {
 					right: px-size("lg", $spacing-inline-sm);
@@ -951,12 +952,12 @@
 				padding: 0px px-size("sm", $spacing-inline-xl) !important;
 				font-size: px-size("sm", $font-size-xxs);
 
-				&.icon-left {
+				&.icons-left {
 					.icon {
 						margin-right: px-size("sm", $spacing-inline-xxs) !important;
 					}
 				}
-				&.icon-right {
+				&.icons-right {
 					.icon {
 						margin-left: px-size("sm", $spacing-inline-xxs) !important;
 					}
@@ -975,12 +976,12 @@
 				height: px-size("sm", 48px);
 				padding: 0px px-size("sm", $spacing-inline-lg) !important;
 				font-size: px-size("sm", $font-size-xxs);
-				&.icon-left {
+				&.icons-left {
 					.icon {
 						margin-right: px-size("sm", $spacing-inline-xxs) !important;
 					}
 				}
-				&.icon-right {
+				&.icons-right {
 					.icon {
 						margin-left: px-size("sm", $spacing-inline-xxs) !important;
 					}
@@ -997,12 +998,12 @@
 				height: px-size("sm", 44px);
 				font-size: px-size("sm", $font-size-xxxs);
 				padding: 0px px-size("sm", $spacing-inline-md) !important;
-				&.icon-left {
+				&.icons-left {
 					.icon {
 						margin-right: px-size("sm", $spacing-inline-xxs) !important;
 					}
 				}
-				&.icon-right {
+				&.icons-right {
 					.icon {
 						margin-left: px-size("sm", $spacing-inline-xxs) !important;
 					}
@@ -1024,12 +1025,12 @@
 				font-size: px-size("sm", $font-size-xxxxs);
 				padding: 0px px-size("sm", $spacing-inline-sm) !important;
 
-				&.icon-left {
+				&.icons-left {
 					.icon {
 						margin-right: px-size("sm", $spacing-inline-xxs) !important;
 					}
 				}
-				&.icon-right {
+				&.icons-right {
 					.icon {
 						margin-left: px-size("sm", $spacing-inline-xxs) !important;
 					}
@@ -1041,7 +1042,7 @@
 			// SHAPE
 			width: 100%;
 
-			&.icon-left {
+			::v-deep &.icons-left {
 				position: relative;
 				.icon {
 					left: 0;
@@ -1072,7 +1073,7 @@
 				}
 			}
 
-			&.icon-right {
+			&.icons-right {
 				position: relative;
 				.icon {
 					right: 0;
@@ -1139,7 +1140,7 @@
 					width: px-size("sm", 24px);
 					height: px-size("sm", 24px);
 				}
-				&.icon-right {
+				&.icons-right {
 					.icon {
 						right: 0;
 					}
@@ -1168,7 +1169,7 @@
 						}
 					}
 				}
-				&.icon-left {
+				&.icons-left {
 					.icon {
 						left: 0;
 					}

package/dist/src/components/Buttons/ButtonWithIcon.stories.js

@@ -37,21 +37,21 @@ export const ButtonWithIcon = () => ({
 	template: `<div :style="inverted ? 'background: #E5F1FB' : null">
     <div class="storybook-6"> 
       <Button kind="ghost" :size="sizes" :icon="icon" width="fluid" :disabled="disabled" :inverted="inverted"@click="action"> 
-        <Icon name="check" fill="#000" stroke="transparent" size="md" /> 
+        <Icon name="check"  stroke="transparent" size="md" /> 
         <span>Fluid - Cols 6 </span>
       </Button> 
     </div> 
     <br> 
     <div class="storybook-12"> 
       <Button kind="ghost" :size="sizes" :icon="icon" width="fluid" :disabled="disabled" :inverted="inverted"@click="action"> 
-      <Icon name="collapse" fill="#000" size="md" stroke="transparent" size="md" /> 
+      <Icon name="collapse"  size="md" stroke="transparent" size="md" /> 
       <span>Fluid - Cols 12 </span>
       </Button> 
     </div> 
     <br> 
     <div class="storybook-25"> 
       <Button kind="ghost" :size="sizes" :icon="icon" width="fluid" :disabled="disabled" :inverted="inverted"@click="action"> 
-        <Icon name="collapse" fill="#fff" size="md" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  size="md" stroke="transparent" size="md" /> 
         <span>Fluid - Cols 25 </span>
       </Button> 
     </div> 
@@ -60,21 +60,21 @@ export const ButtonWithIcon = () => ({
     <div class="storybook-6"> 
       <Button kind="ghost" :size="sizes" icon="right" width="fluid" :disabled="disabled" :inverted="inverted"@click="action"> 
         <span>Fluid - Cols 6 </span>
-        <Icon name="collapse" fill="#fff" size="md" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  size="md" stroke="transparent" size="md" /> 
       </Button> 
     </div> 
     <br> 
     <div class="storybook-12"> 
       <Button kind="ghost" :size="sizes" icon="right" width="fluid" :disabled="disabled" :inverted="inverted"@click="action"> 
       <span>Fluid - Cols 12 </span>
-      <Icon name="collapse" fill="#fff" size="md" stroke="transparent" size="md" /> 
+      <Icon name="collapse"  size="md" stroke="transparent" size="md" /> 
       </Button> 
     </div> 
     <br> 
     <div class="storybook-25"> 
       <Button kind="ghost" :size="sizes" icon="right" width="fluid" :disabled="disabled" :inverted="inverted"@click="action"> 
         <span>Fluid - Cols 25 </span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  stroke="transparent" size="md" /> 
       </Button> 
     </div> 
     <br> 
@@ -82,21 +82,21 @@ export const ButtonWithIcon = () => ({
 
     <div> 
       <Button kind="ghost" :size="sizes" :icon="icon" width="liquid"  :disabled="disabled" :inverted="inverted" @click="action"> 
-        <Icon name="collapse" fill="#fff" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  stroke="transparent" size="md" /> 
         <span>Liquid - CANCELAR</span>
       </Button> 
     </div> 
     <br> 
     <div> 
       <Button kind="ghost" :size="sizes" :icon="icon" width="liquid"  :disabled="disabled" :inverted="inverted" @click="action"> 
-        <Icon name="collapse" fill="#fff" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  stroke="transparent" size="md" /> 
         <span>Liquid - ESCOLHA O GENERO</span>
       </Button> 
     </div> 
     <br> 
     <div> 
       <Button kind="ghost" :size="sizes" :icon="icon" width="liquid"  :disabled="disabled" :inverted="inverted" @click="action"> 
-        <Icon name="collapse" fill="#fff" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  stroke="transparent" size="md" /> 
         <span>Liquid - ESCREVA O SEU DA SUA CRIANÇA</span>
       </Button> 
     </div> 
@@ -106,21 +106,21 @@ export const ButtonWithIcon = () => ({
     <div> 
       <Button kind="ghost" :size="sizes" icon="right" width="liquid"  :disabled="disabled" :inverted="inverted" @click="action"> 
         <span>Liquid - CANCELAR</span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  stroke="transparent" size="md" /> 
       </Button> 
     </div> 
     <br> 
     <div> 
       <Button kind="ghost" :size="sizes" icon="right" width="liquid"  :disabled="disabled" :inverted="inverted" @click="action"> 
         <span>Liquid - ESCOLHA O GENERO</span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  stroke="transparent" size="md" /> 
       </Button> 
     </div> 
     <br> 
     <div> 
       <Button kind="ghost" :size="sizes" icon="left" width="fluid"  :disabled="disabled" :inverted="inverted" @click="action"> 
         <span>Fluid - ESCREVA O SEU DA SUA</span>
-        <Icon name="collapse" fill="#fff" stroke="transparent" size="md" /> 
+        <Icon name="collapse"  stroke="transparent" size="md" /> 
       </Button> 
     </div> 
     <br> 

package/dist/src/components/Buttons/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/components/Buttons/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/components/Buttons/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/components/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/components/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/components/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/components/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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tiddh/brave-vue",
-	"version": "1.92.19",
+	"version": "1.92.21",
 	"private": false,
 	"main": "dist/brave-vue.ssr.js",
 	"browser": "dist/brave-vue.esm.js",