@farm-investimentos/front-mfe-components 5.2.1 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "5.2.1",
+	"version": "5.2.2",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -27,11 +27,11 @@
 		"vuetify-dialog": "^2.0.17"
 	},
 	"devDependencies": {
-		"@socheatsok78/storybook-addon-vuetify": "^0.1.8",
-		"@storybook/addon-actions": "^6.3.6",
-		"@storybook/addon-essentials": "^6.3.6",
-		"@storybook/addon-links": "^6.3.6",
-		"@storybook/vue": "^6.3.6",
+		"@socheatsok78/storybook-addon-vuetify": "^0.1.9",
+		"@storybook/addon-actions": "^6.5.8",
+		"@storybook/addon-essentials": "^6.5.8",
+		"@storybook/addon-links": "^6.5.8",
+		"@storybook/vue": "^6.5.8",
 		"@types/jest": "^24.9.1",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",

package/src/components/Stepper/StepperHeader/StepperHeader.scss

@@ -1,9 +1,6 @@
 $step-height: 64px;
-$vertical-step-width: 160px;
 
 @mixin stepperHeaderStepColor($color) {
-	
-
 	i.mdi {
 		background-color: $color;
 		border-color: $color;
@@ -14,6 +11,10 @@ $vertical-step-width: 160px;
 	}
 }
 
+.horizontal-step-size .stepper__header--vertical {
+	width: 160px;
+}
+
 .stepper__header {
 	display: flex;
 	flex-direction: row;
@@ -72,8 +73,6 @@ $vertical-step-width: 160px;
 
 	&.stepper__header--vertical {
 		display: block;
-		width: $vertical-step-width;
-
 
 		div.stepper__header-step {
 			width: 100%;
@@ -86,8 +85,10 @@ $vertical-step-width: 160px;
 			}
 
 			span {
-				display: block;
+				display: flex;
+				align-items: center;
 				width: calc(100% - 40px);
+				height: 32px;
 				clear: none;
 				float: left;
 				margin-top: 0;
@@ -109,11 +110,19 @@ $vertical-step-width: 160px;
 			}
 
 			&.stepper__divider--previous-to-current {
-				background: linear-gradient(to bottom, var(--v-secondary-base), var(--v-accent-base));
+				background: linear-gradient(
+					to bottom,
+					var(--v-secondary-base),
+					var(--v-accent-base)
+				);
 			}
 
 			&.stepper__divider--previous-to-error {
-				background: linear-gradient(to bottom, var(--v-secondary-base), var(--v-error-base));
+				background: linear-gradient(
+					to bottom,
+					var(--v-secondary-base),
+					var(--v-error-base)
+				);
 			}
 		}
 	}
@@ -130,9 +139,8 @@ i.mdi {
 	align-items: center;
 	justify-content: center;
 
-
 	&:before {
 		font-size: 16px;
 		color: var(--v-gray-lighten1);
 	}
-}
+}

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -1,39 +1,41 @@
 <template>
-	<section :class="{ stepper__header: true, 'stepper__header--vertical': vertical }">
-		<template v-for="(step, index) in steps">
-			<div
-				:class="{
-					'stepper__header-step': true,
-					'stepper__header-step--current': isStepCurrent(index),
-					'stepper__header-step--previous': isStepPrevious(index),
-					'stepper__header-step--error': isStepError(index),
-				}"
-				:key="step.label"
-			>
-				<i
+	<div class="horizontal-step-size">
+		<section :class="{ stepper__header: true, 'stepper__header--vertical': vertical }">
+			<template v-for="(step, index) in steps">
+				<div
 					:class="{
-						mdi: true,
-						['mdi-' + step.icon]: true,
+						'stepper__header-step': true,
+						'stepper__header-step--current': isStepCurrent(index),
+						'stepper__header-step--previous': isStepPrevious(index),
+						'stepper__header-step--error': isStepError(index),
 					}"
-					v-if="step.icon"
+					:key="step.label"
+				>
+					<i
+						:class="{
+							mdi: true,
+							['mdi-' + step.icon]: true,
+						}"
+						v-if="step.icon"
+					/>
+					<span>
+						{{ step.label }}
+					</span>
+				</div>
+				<div
+					:class="{
+						'stepper__divider--horizontal': !vertical,
+						'stepper__divider--vertical': vertical,
+						'stepper__divider--previous': isStepPrevious(index),
+						'stepper__divider--previous-to-current': isStepPreviousToCurrent(index),
+						'stepper__divider--previous-to-error': isStepPreviousToError(index),
+					}"
+					v-if="hasDivider(index)"
+					:key="'divider_' + step.label"
 				/>
-				<span>
-					{{ step.label }}
-				</span>
-			</div>
-			<div
-				:class="{
-					'stepper__divider--horizontal': !vertical,
-					'stepper__divider--vertical': vertical,
-					'stepper__divider--previous': isStepPrevious(index),
-					'stepper__divider--previous-to-current': isStepPreviousToCurrent(index),
-					'stepper__divider--previous-to-error': isStepPreviousToError(index),
-				}"
-				v-if="hasDivider(index)"
-				:key="'divider_' + step.label"
-			/>
-		</template>
-	</section>
+			</template>
+		</section>
+	</div>
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';

package/src/examples/Modal.stories.js

@@ -58,6 +58,54 @@ export const ModalSmall = () => ({
 	</div>`,
 });
 
+export const ModalExtremeSmall = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-x-small" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
+export const ModalMedium = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-md" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
 export const ModalScrollVertical = () => ({
 	components: {
 		DialogHeader,
@@ -181,4 +229,8 @@ ModalSmall.story = {
 
 ModalScrollVertical.storyName = 'Rolagem vertical';
 
-ModalScrollHorizontal.storyName = 'Rolagem horizontal';
+ModalScrollHorizontal.storyName = 'Rolagem horizontal';
+
+ModalExtremeSmall.storyName = 'Extra pequeno';
+
+ModalMedium.storyName = 'Médio';

package/src/scss/DefaultModal.scss

@@ -72,7 +72,16 @@
 			max-width: calc(392px - 2rem);
 		}
 	}
+
+	.v-dialog.modal-default.modal-default-md {
+		max-width: calc(600px - 2rem);
+
+		header {
+			max-width: calc(600px - 2rem);
+		}
+	}
 }
+
 @media screen and (max-width: 960px) {
 	.v-dialog.modal-default header {
 		max-width: calc(100% - 3rem);