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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "7.2.0",
+	"version": "7.3.2",
 	"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,9 +104,24 @@
     .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} {
+        &#{'.farm-btn--' + $color}:not(.farm-btn--disabled) {
             &:hover {
                 color: var(--v-#{$color}-base);
             }
@@ -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/FilePicker/FilePicker.scss

@@ -27,7 +27,7 @@ section {
 
     .selectfile-container {
         text-align: center;
-        .v-icon {
+        .farm-icon {
             font-size: 2.25rem;
             margin-bottom: 1rem;
         }
@@ -46,7 +46,7 @@ section {
             margin-bottom: 0;
             font-size: 0.75rem;
         }
-        .v-btn {
+        .farm-btn {
             margin-top: 1rem;
         }
     }

package/src/components/FilePicker/FilePicker.stories.js

@@ -12,7 +12,7 @@ export const Primary = () => ({
 
 export const MaxFileSize = () => ({
 	components: { FilePicker },
-	template: '<FilePicker maxFileSize="5" />',
+	template: '<FilePicker maxFileSize="0.1" />',
 });
 
 Primary.storyName = 'Básico';

package/src/components/FilePicker/FilePicker.vue

@@ -7,28 +7,37 @@
 			:accept="acceptedFileTypes"
 		/>
 		<div v-if="!selectedFile" class="selectfile-container">
-			<v-icon color="secondary">mdi-cloud-upload</v-icon>
+			<farm-icon color="secondary">cloud-upload</farm-icon>
 			<p>Clique para selecionar ou arraste o arquivo aqui</p>
 		</div>
 		<div v-if="selectedFile || maxSizeReach" class="reset-container">
 			<div v-if="selectedFile">
-				<v-icon>mdi-file</v-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
+				<farm-icon>file</farm-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
 					Math.floor(selectedFile.size / 1024)
 				}}kB)
 			</div>
 
 			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
 
-			<farm-btn depressed outlined color="secondary" class="farm-btn--responsive" @click="reset">
+			<farm-btn
+				outlined
+				color="secondary"
+				class="farm-btn--responsive"
+				title="Escolher outro"
+				@click="reset"
+			>
 				Escolher outro
 			</farm-btn>
 		</div>
 	</section>
 </template>
-<script>
+<script lang="ts">
+import Vue from 'vue';
 import DefaultButton from '../Buttons/DefaultButton';
-import { VIcon } from 'vuetify/lib/components/VIcon';
-export default {
+import Icon from '../Icon';
+
+export default Vue.extend({
+	name: 'farm-filepicker',
 	props: {
 		/*
 		 * Accepted file types
@@ -37,9 +46,9 @@ export default {
 			type: String,
 			default: '*',
 		},
-        /**
-         * Max file size (in MB)
-         */
+		/**
+		 * Max file size (in MB)
+		 */
 		maxFileSize: {
 			default: null,
 		},
@@ -54,7 +63,7 @@ export default {
 	computed: {
 		maxSizeReachMsg() {
 			return `Arquivo ultrapassou o tamanho máximo de ${this.maxFileSize}MB`;
-		}
+		},
 	},
 	mounted() {
 		this.dropArea = this.$refs.container;
@@ -64,10 +73,10 @@ export default {
 		reset() {
 			this.$refs.container.querySelector('input').value = '';
 			this.$emit('onReset');
-            this.maxSizeReach = false;
+			this.maxSizeReach = false;
 			this.selectedFile = null;
 		},
-		fileChange(fileList) {
+		fileChange(fileList: Array<File>) {
 			this.maxSizeReach = false;
 			if (!fileList.length || fileList.length > 1) return;
 
@@ -97,9 +106,9 @@ export default {
 	},
 	components: {
 		'farm-btn': DefaultButton,
-		VIcon,
+		'farm-icon': Icon,
 	},
-};
+});
 </script>
 <style scoped lang="scss">
 @import './FilePicker.scss';

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 → Buttons/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,9 +132,15 @@ 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>
+
+		<h4>Disabled Icon</h4>
+        <farm-btn icon v-for="color of colors" :key="'disabled_random_2_' + color" :color="color" :disabled="true">
+            <farm-icon>book</farm-icon>
+        </farm-btn>
+
 	</div>`,
 });
 
@@ -148,11 +155,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 +229,6 @@ Icons.story = {
 Rounded.story = {
 	name: 'Rounded',
 };
+Sizes.story = {
+	name: 'Sizes',
+};