@tiddh/brave-vue 1.93.11 → 1.93.13

package/dist/src/Card/CardProduct.stories.js

@@ -108,7 +108,7 @@ var productCatalog = {
 		},
 		{
 			id: 1,
-			name: "Experiência sonora",
+			name: "Experiência Sonora",
 			description:
 				"Este livro foi escrito por um premiado autor de literatura infantil com o intuito de despertar nas crianças o interesse pela leitura por meio de experiências personalizadas e repletas de aprendizados.",
 			thumbnail:
@@ -160,17 +160,10 @@ export const Basic = () => ({
 	},
 	template: `<div class="container container-preview">
 
-    <div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
+    <div class="storybook-25" style="background-color: #ccc; width:100%; padding:48px;">
       <CardProduct :product="product" :ageTo="ageTo" :bookType="bookType" />
     </div>
-	<div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
-      <CardProduct :product="productResgate" :ageTo="ageTo" :bookType="bookType" />
-    </div>
-
-	<br>
-	<div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
-      <CardProduct :product="productResgateSquare" :ageTo="ageTo" :bookType="bookType" />
-    </div>
+	
 	
 
   </div>

package/dist/src/Card/CardProduct.vue

@@ -1,7 +1,11 @@
 <template>
 	<div
 		class="panel-book"
-		:class="[gridView ? '' : 'grid', ageTo > 5 ? 'vertical' : 'horizontal']"
+		:class="[
+			gridView ? '' : 'grid',
+			ageTo > 5 ? 'vertical' : 'horizontal',
+			!isMobile ? 'card-desk' : 'card-mobile',
+		]"
 	>
 		<div class="flex-box-column">
 			<div class="flex-box-row">
@@ -36,9 +40,21 @@
 							class="text-description-title"
 							v-if="product.productDisplayDetails"
 						>
-							<Heading kind="h2" size="xxs" color="#AFA2BA">{{
-								product.protagonist
-							}}</Heading>
+							<Heading
+								kind="h2"
+								size="xxs"
+								color="#AFA2BA"
+								v-if="product.protagonist"
+								>{{ product.protagonist }}</Heading
+							>
+							<Heading
+								kind="h2"
+								size="xxs"
+								color="#AFA2BA"
+								v-else-if="product.brand.name"
+								>{{ product.brand.name }}</Heading
+							>
+
 							<Heading
 								kind="h2"
 								size="xs"
@@ -146,7 +162,7 @@
 			</div>
 
 			<div class="flex-box-row-footer">
-				<div class="payment-box" v-if="!isMobile">
+				<div class="payment-box">
 					<!-- productHighlightTags -->
 					<div
 						class="hightlight-flag"
@@ -157,7 +173,7 @@
 							name="speaker"
 							size="sm"
 							stroke="#4965bc"
-							v-if="productHighlight.name.includes('Sonora')"
+							v-if="productHighlight.name.includes('Exp')"
 						/>
 						<Icon
 							name="awards"
@@ -273,9 +289,23 @@
 
 		mounted() {
 			self = this;
+
+			self.isMobile = self.detectSize();
+
+			window.addEventListener("resize", function (e) {
+				self.isMobile = self.detectSize();
+			});
 		},
 
 		methods: {
+			detectSize() {
+				var menuStatus = false;
+				if (window.innerWidth < 990) {
+					menuStatus = true;
+				}
+				return menuStatus;
+			},
+
 			changeBookItem(payload) {
 				const self = this;
 
@@ -634,7 +664,7 @@
 			border: none;
 			border-radius: px-size("sm", $border-radius-md);
 			-webkit-border-radius: px-size("sm", $border-radius-md);
-			margin-top: -px-size("sm", $spacing-stack-md);
+			margin-top: px-size("sm", $spacing-stack-sm);
 		}
 
 		.text-description-title {
@@ -679,8 +709,7 @@
 
 			@include media-breakpoint-down("sm") {
 				height: px-size("sm", 120px);
-				border-radius: px-size("sm", $border-radius-lg) 0px px-size("sm", 150px)
-					0px;
+				border-radius: 0px 0px px-size("sm", 150px) 0px;
 				width: 90%;
 			}
 		}
@@ -694,6 +723,8 @@
 		@include media-breakpoint-down("sm") {
 			padding: px-size("sm", $spacing-inline-sm)
 				px-size("sm", $spacing-inline-md);
+
+			flex-wrap: wrap;
 		}
 	}
 	.button-box {
@@ -712,6 +743,11 @@
 	.payment-box {
 		display: flex;
 		flex-grow: 1;
+
+		@include media-breakpoint-down("sm") {
+			flex-wrap: wrap;
+			margin-bottom: px-size("sm", $spacing-inline-sm);
+		}
 	}
 	.text-orange {
 		background-color: $color-feedback-alert;
@@ -743,7 +779,6 @@
 		padding: px-size("lg", $spacing-inset-xxs);
 		border-radius: 4px;
 		background: #e1f3fe;
-
 		font-family: $font-family-comp-02;
 		font-size: px-size("lg", $font-size-xxs);
 		font-weight: $font-weight-black;
@@ -756,6 +791,17 @@
 		align-items: center;
 		margin-right: px-size("lg", $spacing-inline-xs);
 
+		@include media-breakpoint-down("sm") {
+			width: 100%;
+			margin-bottom: px-size("sm", $spacing-stack-xs);
+			padding: px-size("sm", $spacing-inset-xxs);
+			font-size: px-size("sm", 12px);
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+
 		i {
 			margin-right: px-size("lg", $spacing-inline-xxs);
 		}

package/dist/src/CardProduct.stories.js

@@ -108,7 +108,7 @@ var productCatalog = {
 		},
 		{
 			id: 1,
-			name: "Experiência sonora",
+			name: "Experiência Sonora",
 			description:
 				"Este livro foi escrito por um premiado autor de literatura infantil com o intuito de despertar nas crianças o interesse pela leitura por meio de experiências personalizadas e repletas de aprendizados.",
 			thumbnail:
@@ -160,17 +160,10 @@ export const Basic = () => ({
 	},
 	template: `<div class="container container-preview">
 
-    <div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
+    <div class="storybook-25" style="background-color: #ccc; width:100%; padding:48px;">
       <CardProduct :product="product" :ageTo="ageTo" :bookType="bookType" />
     </div>
-	<div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
-      <CardProduct :product="productResgate" :ageTo="ageTo" :bookType="bookType" />
-    </div>
-
-	<br>
-	<div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
-      <CardProduct :product="productResgateSquare" :ageTo="ageTo" :bookType="bookType" />
-    </div>
+	
 	
 
   </div>

package/dist/src/CardProduct.vue

@@ -1,7 +1,11 @@
 <template>
 	<div
 		class="panel-book"
-		:class="[gridView ? '' : 'grid', ageTo > 5 ? 'vertical' : 'horizontal']"
+		:class="[
+			gridView ? '' : 'grid',
+			ageTo > 5 ? 'vertical' : 'horizontal',
+			!isMobile ? 'card-desk' : 'card-mobile',
+		]"
 	>
 		<div class="flex-box-column">
 			<div class="flex-box-row">
@@ -36,9 +40,21 @@
 							class="text-description-title"
 							v-if="product.productDisplayDetails"
 						>
-							<Heading kind="h2" size="xxs" color="#AFA2BA">{{
-								product.protagonist
-							}}</Heading>
+							<Heading
+								kind="h2"
+								size="xxs"
+								color="#AFA2BA"
+								v-if="product.protagonist"
+								>{{ product.protagonist }}</Heading
+							>
+							<Heading
+								kind="h2"
+								size="xxs"
+								color="#AFA2BA"
+								v-else-if="product.brand.name"
+								>{{ product.brand.name }}</Heading
+							>
+
 							<Heading
 								kind="h2"
 								size="xs"
@@ -146,7 +162,7 @@
 			</div>
 
 			<div class="flex-box-row-footer">
-				<div class="payment-box" v-if="!isMobile">
+				<div class="payment-box">
 					<!-- productHighlightTags -->
 					<div
 						class="hightlight-flag"
@@ -157,7 +173,7 @@
 							name="speaker"
 							size="sm"
 							stroke="#4965bc"
-							v-if="productHighlight.name.includes('Sonora')"
+							v-if="productHighlight.name.includes('Exp')"
 						/>
 						<Icon
 							name="awards"
@@ -273,9 +289,23 @@
 
 		mounted() {
 			self = this;
+
+			self.isMobile = self.detectSize();
+
+			window.addEventListener("resize", function (e) {
+				self.isMobile = self.detectSize();
+			});
 		},
 
 		methods: {
+			detectSize() {
+				var menuStatus = false;
+				if (window.innerWidth < 990) {
+					menuStatus = true;
+				}
+				return menuStatus;
+			},
+
 			changeBookItem(payload) {
 				const self = this;
 
@@ -634,7 +664,7 @@
 			border: none;
 			border-radius: px-size("sm", $border-radius-md);
 			-webkit-border-radius: px-size("sm", $border-radius-md);
-			margin-top: -px-size("sm", $spacing-stack-md);
+			margin-top: px-size("sm", $spacing-stack-sm);
 		}
 
 		.text-description-title {
@@ -679,8 +709,7 @@
 
 			@include media-breakpoint-down("sm") {
 				height: px-size("sm", 120px);
-				border-radius: px-size("sm", $border-radius-lg) 0px px-size("sm", 150px)
-					0px;
+				border-radius: 0px 0px px-size("sm", 150px) 0px;
 				width: 90%;
 			}
 		}
@@ -694,6 +723,8 @@
 		@include media-breakpoint-down("sm") {
 			padding: px-size("sm", $spacing-inline-sm)
 				px-size("sm", $spacing-inline-md);
+
+			flex-wrap: wrap;
 		}
 	}
 	.button-box {
@@ -712,6 +743,11 @@
 	.payment-box {
 		display: flex;
 		flex-grow: 1;
+
+		@include media-breakpoint-down("sm") {
+			flex-wrap: wrap;
+			margin-bottom: px-size("sm", $spacing-inline-sm);
+		}
 	}
 	.text-orange {
 		background-color: $color-feedback-alert;
@@ -743,7 +779,6 @@
 		padding: px-size("lg", $spacing-inset-xxs);
 		border-radius: 4px;
 		background: #e1f3fe;
-
 		font-family: $font-family-comp-02;
 		font-size: px-size("lg", $font-size-xxs);
 		font-weight: $font-weight-black;
@@ -756,6 +791,17 @@
 		align-items: center;
 		margin-right: px-size("lg", $spacing-inline-xs);
 
+		@include media-breakpoint-down("sm") {
+			width: 100%;
+			margin-bottom: px-size("sm", $spacing-stack-xs);
+			padding: px-size("sm", $spacing-inset-xxs);
+			font-size: px-size("sm", 12px);
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+
 		i {
 			margin-right: px-size("lg", $spacing-inline-xxs);
 		}

package/dist/src/Navigation/Stepper.vue

@@ -30,7 +30,7 @@
 						/>
 					</div>
 
-					{{ option }}</Paragraph
+					{{ option.value }}</Paragraph
 				>
 			</div>
 

package/dist/src/Navigation/TopBar.vue

@@ -50,7 +50,7 @@
 				:colors="colors"
 				:selected="'index'"
 				:options="menu"
-				@change="onClick"
+				@change="onClickMenu"
 				size="sm"
 				width="liquid"
 			/>

package/dist/src/Preview/Preview.stories.js

@@ -15,7 +15,7 @@ export default {
 
 // Livro retangular
 var LivroA4 = {
-	uuid: "ddh64d14d0661d3c",
+	uuid: "ddh64ca75893f9b1",
 	product_id: 89,
 	gender: "menina",
 	character_id: 41,
@@ -209,12 +209,12 @@ var emUso = LivroA4;
 
 const routes = [
 	{
-		path: "index",
-		stepperName: "Voltar",
+		key: "index",
+		value: "Voltar",
 	},
 	{
-		path: "second",
-		stepperName: "4 - Preview",
+		key: "second",
+		value: "4 - Preview",
 	},
 ];
 

package/dist/src/Preview/PreviewWithTools.vue

@@ -418,6 +418,9 @@
 
 	.top-bar-area {
 		position: absolute;
+		width: 100%;
+		top: 0px;
+		left: 0px;
 
 		@media (max-width: 990px) {
 			position: relative;

package/dist/src/Preview.stories.js

@@ -15,7 +15,7 @@ export default {
 
 // Livro retangular
 var LivroA4 = {
-	uuid: "ddh64d14d0661d3c",
+	uuid: "ddh64ca75893f9b1",
 	product_id: 89,
 	gender: "menina",
 	character_id: 41,
@@ -209,12 +209,12 @@ var emUso = LivroA4;
 
 const routes = [
 	{
-		path: "index",
-		stepperName: "Voltar",
+		key: "index",
+		value: "Voltar",
 	},
 	{
-		path: "second",
-		stepperName: "4 - Preview",
+		key: "second",
+		value: "4 - Preview",
 	},
 ];
 

package/dist/src/PreviewWithTools.vue

@@ -418,6 +418,9 @@
 
 	.top-bar-area {
 		position: absolute;
+		width: 100%;
+		top: 0px;
+		left: 0px;
 
 		@media (max-width: 990px) {
 			position: relative;

package/dist/src/Stepper.vue

@@ -30,7 +30,7 @@
 						/>
 					</div>
 
-					{{ option }}</Paragraph
+					{{ option.value }}</Paragraph
 				>
 			</div>
 

package/dist/src/TopBar.vue

@@ -50,7 +50,7 @@
 				:colors="colors"
 				:selected="'index'"
 				:options="menu"
-				@change="onClick"
+				@change="onClickMenu"
 				size="sm"
 				width="liquid"
 			/>

package/dist/src/components/Card/CardProduct.stories.js

@@ -108,7 +108,7 @@ var productCatalog = {
 		},
 		{
 			id: 1,
-			name: "Experiência sonora",
+			name: "Experiência Sonora",
 			description:
 				"Este livro foi escrito por um premiado autor de literatura infantil com o intuito de despertar nas crianças o interesse pela leitura por meio de experiências personalizadas e repletas de aprendizados.",
 			thumbnail:
@@ -160,17 +160,10 @@ export const Basic = () => ({
 	},
 	template: `<div class="container container-preview">
 
-    <div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
+    <div class="storybook-25" style="background-color: #ccc; width:100%; padding:48px;">
       <CardProduct :product="product" :ageTo="ageTo" :bookType="bookType" />
     </div>
-	<div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
-      <CardProduct :product="productResgate" :ageTo="ageTo" :bookType="bookType" />
-    </div>
-
-	<br>
-	<div class="storybook-25" style="background-color: #ccc; width:50%; padding:48px;">
-      <CardProduct :product="productResgateSquare" :ageTo="ageTo" :bookType="bookType" />
-    </div>
+	
 	
 
   </div>

package/dist/src/components/Card/CardProduct.vue

@@ -1,7 +1,11 @@
 <template>
 	<div
 		class="panel-book"
-		:class="[gridView ? '' : 'grid', ageTo > 5 ? 'vertical' : 'horizontal']"
+		:class="[
+			gridView ? '' : 'grid',
+			ageTo > 5 ? 'vertical' : 'horizontal',
+			!isMobile ? 'card-desk' : 'card-mobile',
+		]"
 	>
 		<div class="flex-box-column">
 			<div class="flex-box-row">
@@ -36,9 +40,21 @@
 							class="text-description-title"
 							v-if="product.productDisplayDetails"
 						>
-							<Heading kind="h2" size="xxs" color="#AFA2BA">{{
-								product.protagonist
-							}}</Heading>
+							<Heading
+								kind="h2"
+								size="xxs"
+								color="#AFA2BA"
+								v-if="product.protagonist"
+								>{{ product.protagonist }}</Heading
+							>
+							<Heading
+								kind="h2"
+								size="xxs"
+								color="#AFA2BA"
+								v-else-if="product.brand.name"
+								>{{ product.brand.name }}</Heading
+							>
+
 							<Heading
 								kind="h2"
 								size="xs"
@@ -146,7 +162,7 @@
 			</div>
 
 			<div class="flex-box-row-footer">
-				<div class="payment-box" v-if="!isMobile">
+				<div class="payment-box">
 					<!-- productHighlightTags -->
 					<div
 						class="hightlight-flag"
@@ -157,7 +173,7 @@
 							name="speaker"
 							size="sm"
 							stroke="#4965bc"
-							v-if="productHighlight.name.includes('Sonora')"
+							v-if="productHighlight.name.includes('Exp')"
 						/>
 						<Icon
 							name="awards"
@@ -273,9 +289,23 @@
 
 		mounted() {
 			self = this;
+
+			self.isMobile = self.detectSize();
+
+			window.addEventListener("resize", function (e) {
+				self.isMobile = self.detectSize();
+			});
 		},
 
 		methods: {
+			detectSize() {
+				var menuStatus = false;
+				if (window.innerWidth < 990) {
+					menuStatus = true;
+				}
+				return menuStatus;
+			},
+
 			changeBookItem(payload) {
 				const self = this;
 
@@ -634,7 +664,7 @@
 			border: none;
 			border-radius: px-size("sm", $border-radius-md);
 			-webkit-border-radius: px-size("sm", $border-radius-md);
-			margin-top: -px-size("sm", $spacing-stack-md);
+			margin-top: px-size("sm", $spacing-stack-sm);
 		}
 
 		.text-description-title {
@@ -679,8 +709,7 @@
 
 			@include media-breakpoint-down("sm") {
 				height: px-size("sm", 120px);
-				border-radius: px-size("sm", $border-radius-lg) 0px px-size("sm", 150px)
-					0px;
+				border-radius: 0px 0px px-size("sm", 150px) 0px;
 				width: 90%;
 			}
 		}
@@ -694,6 +723,8 @@
 		@include media-breakpoint-down("sm") {
 			padding: px-size("sm", $spacing-inline-sm)
 				px-size("sm", $spacing-inline-md);
+
+			flex-wrap: wrap;
 		}
 	}
 	.button-box {
@@ -712,6 +743,11 @@
 	.payment-box {
 		display: flex;
 		flex-grow: 1;
+
+		@include media-breakpoint-down("sm") {
+			flex-wrap: wrap;
+			margin-bottom: px-size("sm", $spacing-inline-sm);
+		}
 	}
 	.text-orange {
 		background-color: $color-feedback-alert;
@@ -743,7 +779,6 @@
 		padding: px-size("lg", $spacing-inset-xxs);
 		border-radius: 4px;
 		background: #e1f3fe;
-
 		font-family: $font-family-comp-02;
 		font-size: px-size("lg", $font-size-xxs);
 		font-weight: $font-weight-black;
@@ -756,6 +791,17 @@
 		align-items: center;
 		margin-right: px-size("lg", $spacing-inline-xs);
 
+		@include media-breakpoint-down("sm") {
+			width: 100%;
+			margin-bottom: px-size("sm", $spacing-stack-xs);
+			padding: px-size("sm", $spacing-inset-xxs);
+			font-size: px-size("sm", 12px);
+
+			&:last-child {
+				margin-bottom: 0px;
+			}
+		}
+
 		i {
 			margin-right: px-size("lg", $spacing-inline-xxs);
 		}

package/dist/src/components/Navigation/Stepper.vue

@@ -30,7 +30,7 @@
 						/>
 					</div>
 
-					{{ option }}</Paragraph
+					{{ option.value }}</Paragraph
 				>
 			</div>
 

package/dist/src/components/Navigation/TopBar.vue

@@ -50,7 +50,7 @@
 				:colors="colors"
 				:selected="'index'"
 				:options="menu"
-				@change="onClick"
+				@change="onClickMenu"
 				size="sm"
 				width="liquid"
 			/>

package/dist/src/components/Preview/Preview.stories.js

@@ -15,7 +15,7 @@ export default {
 
 // Livro retangular
 var LivroA4 = {
-	uuid: "ddh64d14d0661d3c",
+	uuid: "ddh64ca75893f9b1",
 	product_id: 89,
 	gender: "menina",
 	character_id: 41,
@@ -209,12 +209,12 @@ var emUso = LivroA4;
 
 const routes = [
 	{
-		path: "index",
-		stepperName: "Voltar",
+		key: "index",
+		value: "Voltar",
 	},
 	{
-		path: "second",
-		stepperName: "4 - Preview",
+		key: "second",
+		value: "4 - Preview",
 	},
 ];
 

package/dist/src/components/Preview/PreviewWithTools.vue

@@ -418,6 +418,9 @@
 
 	.top-bar-area {
 		position: absolute;
+		width: 100%;
+		top: 0px;
+		left: 0px;
 
 		@media (max-width: 990px) {
 			position: relative;