@farm-investimentos/front-mfe-components 6.2.0 → 6.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "6.2.0",
+	"version": "6.2.3",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -55,7 +55,7 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
         }
     }
 
-    &:not(.farm-btn--plain):active {
+    &:not(.farm-btn--plain):not(.farm-btn--disabled):active {
         box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
 
         &:before {
@@ -91,7 +91,7 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
     width: 36px;
 
     .farm-btn__content i.mdi {
-        color: gray !important;
+        color: gray;
     }
 
     @each $color in $colors {
@@ -150,4 +150,13 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
 
 .farm-btn--elevated {
     box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
+}
+
+@media screen and (max-width: 600px) {
+
+    .farm-btn.farm-btn--responsive {
+        width: 100%;
+        margin: 0;
+    }
+
 }

package/src/examples/Buttons.stories.js

@@ -109,6 +109,25 @@ export const Icons = () => ({
 	</div>`,
 });
 
+export const Iconed = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Icon</h4>
+        <farm-btn icon v-for="color of colors":key="color" >
+            <v-icon :color="color">mdi-book</v-icon>
+        </farm-btn>
+
+
+	</div>`,
+});
+
 ActiveButtons.story = {
 	name: 'Active',
 };
@@ -124,3 +143,6 @@ Plain.story = {
 Icons.story = {
 	name: 'Icons',
 };
+Iconed.story = {
+	name: 'Iconed',
+};

package/src/scss/ButtonOverrides.scss

@@ -63,4 +63,11 @@
         width: 100%;
         margin: 0;
     }
+
+    .farm-btn.v-btn-responsive,
+    .farm-btn.v-btn--responsive {
+        width: 100%;
+        margin: 0;
+    }
+
 }