@farm-investimentos/front-mfe-components 6.3.1 → 6.3.4

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

@@ -1,12 +1,12 @@
 $step-height: 64px;
 
 @mixin stepperHeaderStepColor($color) {
-	i.mdi {
+	.farm-icon, .farm-icon__number {
 		background-color: $color;
 		border-color: $color;
 	}
 
-	i.mdi:before {
+	.farm-icon:before, .farm-icon__number {
 		color: white;
 	}
 }
@@ -43,12 +43,12 @@ $step-height: 64px;
 		}
 
 		&.stepper__header-step--next {
-			i.mdi {
+			.farm-icon, .farm-icon__number {
 				color: var(--v-gray-lighten1);
 			}
 		}
 
-		span {
+		span:not(.farm-icon__number) {
 			margin-top: 8px;
 			text-align: center;
 		}
@@ -78,7 +78,8 @@ $step-height: 64px;
 	}
 
 	&.stepper__header--vertical {
-		display: block;
+		display: flex;
+		flex-direction: column;
 
 		div.stepper__header-step {
 			width: 100%;
@@ -86,11 +87,11 @@ $step-height: 64px;
 			clear: both;
 			height: 64px;
 
-			i.mdi {
+			.farm-icon {
 				float: left;
 			}
 
-			span {
+			span:not(.farm-icon__number) {
 				display: flex;
 				align-items: center;
 				width: calc(100% - 40px);
@@ -130,7 +131,8 @@ $step-height: 64px;
 	}
 }
 
-i.mdi {
+.farm-icon,
+.farm-icon__number {
 	border: 1px solid var(--v-gray-lighten2);
 	border-radius: 50%;
 	width: 32px;

package/src/components/Stepper/StepperHeader/StepperHeader.stories.js

@@ -20,7 +20,7 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { StepperHeader },
+	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps: [
@@ -32,9 +32,7 @@ export const Primary = () => ({
 			currentStep: 3,
 		};
 	},
-	template: '<StepperHeader :steps="steps" :currentStep="currentStep" />',
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
 });
 
 Primary.storyName = 'Básico';
-
-//

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

@@ -12,14 +12,12 @@
 					}"
 					:key="step.label"
 				>
-					<i
-						:class="{
-							mdi: true,
-							['mdi-' + step.icon]: true,
-						}"
-					>
-						{{ step.icon ? '' : index + 1 }}
-					</i>
+					<farm-icon v-if="step.icon">
+						{{ step.icon }}
+					</farm-icon>
+					<span v-else class="farm-icon__number">
+						{{ index + 1 }}
+					</span>
 					<span>
 						{{ step.label }}
 					</span>
@@ -42,9 +40,13 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import IStep from './IStep';
+import Icon from '../../Icon';
 
 export default Vue.extend({
 	name: 'farm-stepper-header',
+	components: {
+		'farm-icon': Icon,
+	},
 	props: {
 		/**
 		 * Steps

package/src/configurations/_functions.scss

@@ -0,0 +1,5 @@
+@import './variables';
+
+@function gutter($key: 'default') {
+    @return map-get($gutters, $key)
+}

package/src/configurations/_mixins.scss

@@ -0,0 +1,5 @@
+@mixin for-sm-breakpoint {
+    @media (max-width: 599px) {
+        @content;
+    }
+}

package/src/configurations/_variables.scss

@@ -1,2 +1,15 @@
 $colors: primary, secondary, error, extra, accent, info, success, gray, yellow, white;
-$sizes: ("xs": 12px, "sm": 16px , "md": 24px, "lg": 36px, "xl": 40px);
+$sizes: (
+    "xs": 12px,
+    "sm": 16px,
+    "md": 24px,
+    "lg": 36px,
+    "xl": 40px
+);
+$gutters: (
+    "xs": 4px,
+    'sm': 8px,
+    "default": 12px,
+    'md': 16px,
+    "lg": 36px,
+    "xl": 40px);

package/src/examples/Buttons.stories.js

@@ -43,6 +43,7 @@ export const OutlinedButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
+		<h4>Outlined</h4>
         <farm-btn v-for="color of colors":key="color" :color="color" outlined>
             {{ color }}
         </farm-btn>
@@ -60,8 +61,17 @@ export const DisabledButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
+		<h4>Default</h4>
         <farm-btn v-for="color of colors":key="color" :color="color" disabled>
             {{ color }}
+        </farm-btn>
+		<h4>Outlined</h4>
+		<farm-btn v-for="color of colors":key="color" :color="color" outlined disabled>
+            {{ color }}
+        </farm-btn>
+		<h4>Plain</h4>
+		<farm-btn v-for="color of colors":key="color" :color="color" plain disabled>
+            {{ color }}
         </farm-btn>
 	</div>`,
 });

package/src/examples/Icon.stories.js

@@ -66,6 +66,12 @@ export const Sizes = () => ({
                 book
             </farm-icon>
             Custom: 14px
+        </div>
+		<div>
+            <farm-icon size="14">
+                book
+            </farm-icon>
+            Custom: 14 (no unit, use px)
         </div>
 	</div>`,
 });

package/src/examples/Logger/Logger.stories.js

@@ -38,6 +38,18 @@ export const Primary = () => ({
 					formattedDate: '13/06/2022  20:40',
 					status: 'success',
 				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
 			],
 		};
 	},

package/src/examples/Stepper/StepperHeader.stories.js

@@ -21,18 +21,18 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { StepperHeader },
+	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps,
 			currentStep: 3,
 		};
 	},
-	template: '<StepperHeader :steps="steps" :currentStep="currentStep" />',
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
 });
 
 export const Error = () => ({
-	components: { StepperHeader },
+	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps,
@@ -40,22 +40,22 @@ export const Error = () => ({
 		};
 	},
 	template:
-		'<StepperHeader :steps="steps" :currentStep="currentStep" :errorCurrentStepStatus="true" />',
+		'<farm-stepper-header :steps="steps" :currentStep="currentStep" :errorCurrentStepStatus="true" />',
 });
 
 export const Vertical = () => ({
-	components: { StepperHeader },
+	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps,
 			currentStep: 3,
 		};
 	},
-	template: '<StepperHeader :steps="steps" :currentStep="currentStep" vertical />',
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" vertical />',
 });
 
 export const VerticalError = () => ({
-	components: { StepperHeader },
+	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps,
@@ -63,11 +63,11 @@ export const VerticalError = () => ({
 		};
 	},
 	template:
-		'<StepperHeader :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
+		'<farm-stepper-header :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
 });
 
 export const Numbers = () => ({
-	components: { StepperHeader },
+	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps: [
@@ -79,7 +79,7 @@ export const Numbers = () => ({
 			currentStep: 2,
 		};
 	},
-	template: '<StepperHeader :steps="steps" :currentStep="currentStep" />',
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
 });
 
 Primary.story = {