@farm-investimentos/front-mfe-components 7.2.0 → 7.3.0

package/package.json

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

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

@@ -22,6 +22,13 @@
     min-width: 64px;
     padding: 0 16px;
 
+    @each $size,
+    $value in $sizes {
+        &#{'.farm-btn[size=' + $size +']'} {
+            font-size: $value;
+        }
+    }
+
 
     &.farm-btn--disabled {
         background-color: #DADADA;
@@ -97,6 +104,21 @@
     .farm-btn__content i.mdi {
         color: gray;
     }
+    @each $size,
+    $value in $sizes {
+        &#{'.farm-btn[size=' + $size +']'} {
+            font-size: $value;
+        }
+    }
+
+    &[size='lg'] {
+        width: 48px;
+        height: 48px;
+    }
+    &[size='xl'] {
+        width: 64px;
+        height: 64px;
+    }
 
     @each $color in $colors {
         &#{'.farm-btn--' + $color} {
@@ -133,12 +155,12 @@
         }
     }
 
-    :not(.farm-btn--disabled){
+    :not(.farm-btn--disabled) {
         &.farm-btn--outlined#{'.farm-btn--' + $color} {
             border: 1px solid var(--v-#{$color}-base);
             background: white;
             color: var(--v-#{$color}-base);
-    
+
             .farm-btn__content i.mdi {
                 color: var(--v-#{$color}-base);
             }
@@ -148,14 +170,14 @@
             border: none;
             background: white;
             color: var(--v-#{$color}-base);
-    
+
             .farm-btn__content i.mdi {
                 color: var(--v-#{$color}-base);
             }
         }
     }
 
-    
+
 }
 
 .farm-btn--elevated {

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -6,6 +6,7 @@
 		:disabled="disabled"
 		:type="type"
 		:class="classes"
+		:size="$props.size"
 	>
 		<span class="farm-btn__content">
 			<slot></slot>
@@ -18,19 +19,39 @@
 	</router-link>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-btn',
 	inheritAttrs: true,
 
 	props: {
-		color: { type: String, default: 'primary' },
-		outlined: Boolean,
-		plain: Boolean,
-		disabled: Boolean,
-		rounded: Boolean,
-		icon: Boolean,
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'error'
+				| 'extra'
+				| 'accent'
+				| 'info'
+				| 'success'
+				| 'gray'
+				| 'yellow'
+				| 'white'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Outlined
+		 */
+		outlined: { type: Boolean, default: false },
+		plain: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
+		rounded: { type: Boolean, default: false },
+		icon: { type: Boolean, default: false },
 		type: {
 			type: String,
 			default: 'button',
@@ -39,6 +60,12 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		size: {
+			type: String as PropType<
+				'xs' | 'sm' | 'md' | 'lg' | 'xl'
+			>,
+			default: 'default',
+		},
 	},
 
 	computed: {

package/src/components/Icon/Icon.scss

@@ -9,16 +9,17 @@
     line-height: 1;
     position: relative;
     text-indent: 0;
+
     @each $color in $colors {
         &#{'.farm-icon--' + $color} {
             color: var(--v-#{$color}-base);
         }
     }
 
-    @each $size, $value in $sizes {
+    @each $size,
+    $value in $sizes {
         &#{'.farm-icon[size=' + $size +']'} {
-            font-size: $value; 
+            font-size: $value;
         }
-        
     }
 }

package/src/examples/Buttons.stories.js

@@ -1,5 +1,5 @@
 import { withDesign } from 'storybook-addon-designs';
-import { DefaultButton } from '../main';
+import { DefaultButton, Icon } from '../main';
 import('./Buttons.stories.scss');
 
 export default {
@@ -27,7 +27,7 @@ export const ActiveButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <farm-btn v-for="color of colors":key="color" :color="color">
+        <farm-btn v-for="color of colors":key="'random_9_' + color" :color="color">
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -44,7 +44,7 @@ export const OutlinedButtons = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Outlined</h4>
-        <farm-btn v-for="color of colors":key="color" :color="color" outlined>
+        <farm-btn v-for="color of colors":key="'random_8_' + color" :color="color" outlined>
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -62,15 +62,15 @@ export const DisabledButtons = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Default</h4>
-        <farm-btn v-for="color of colors":key="color" :color="color" disabled>
+        <farm-btn v-for="color of colors":key="'random_5_' + color" :color="color" disabled>
             {{ color }}
         </farm-btn>
 		<h4>Outlined</h4>
-		<farm-btn v-for="color of colors":key="color" :color="color" outlined disabled>
+		<farm-btn v-for="color of colors":key="'random_6_' + color" :color="color" outlined disabled>
             {{ color }}
         </farm-btn>
 		<h4>Plain</h4>
-		<farm-btn v-for="color of colors":key="color" :color="color" plain disabled>
+		<farm-btn v-for="color of colors":key="'random_7_' + color" :color="color" plain disabled>
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -86,7 +86,7 @@ export const Plain = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <farm-btn v-for="color of colors":key="color" :color="color" plain>
+        <farm-btn v-for="color of colors":key="'random_4_' + color" :color="color" plain>
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -103,7 +103,7 @@ export const Icons = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Full</h4>
-        <farm-btn v-for="color of colors":key="color" :color="color">
+        <farm-btn v-for="color of colors":key="'random_3_' + color" :color="color">
             <v-icon>mdi-book</v-icon> book
         </farm-btn>
 
@@ -123,6 +123,7 @@ export const Icons = () => ({
 export const Iconed = () => ({
 	components: {
 		'farm-btn': DefaultButton,
+		'farm-icon': Icon,
 	},
 	data() {
 		return {
@@ -131,8 +132,8 @@ export const Iconed = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Icon</h4>
-        <farm-btn icon v-for="color of colors" :key="color" :color="color">
-            <v-icon>mdi-book</v-icon>
+        <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color">
+            <farm-icon>book</farm-icon>
         </farm-btn>
 	</div>`,
 });
@@ -148,11 +149,62 @@ export const Rounded = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Rounded</h4>
-        <farm-btn v-for="color of colors" :key="color" :color="color" rounded >rounded
+        <farm-btn v-for="color of colors" :key="'random_1_' + color" :color="color" rounded >rounded
         </farm-btn>
 	</div>`,
 });
 
+export const Sizes = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+		'farm-icon': Icon,
+	},
+	data() {
+		return {
+			sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+			styles: {
+				display: 'flex',
+				flexDirection: 'row',
+				farmBtn: {
+					marginRight: '12px',
+				},
+			},
+		};
+	},
+	template: `<div>
+		<h4>Default</h4>
+        <div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'default_' + size" :size="size" color="secondary">
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Outlined</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'outlined_' + size" :size="size" color="secondary" outlined>
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Plain</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'plain_' + size" :size="size" color="secondary" plain>
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Rounded</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'rouned_' + size" :size="size" color="secondary" rounded>
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Icon</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'icon_' + size" color="secondary" :size="size" icon>
+				<farm-icon :size="size">book</farm-icon>
+            </farm-btn>
+        </div>
+	</div>`,
+});
+
 ActiveButtons.story = {
 	name: 'Active',
 };
@@ -171,3 +223,6 @@ Icons.story = {
 Rounded.story = {
 	name: 'Rounded',
 };
+Sizes.story = {
+	name: 'Sizes',
+};