@farm-investimentos/front-mfe-components 6.2.4 → 6.3.0

package/package.json

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

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

@@ -1,4 +1,4 @@
-$colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
+@import '../../../configurations/variables';
 
 .farm-btn {
     font-size: 0.75rem;
@@ -76,6 +76,10 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
             }
         }
     }
+
+    &.farm-btn--rounded {
+        border-radius: 1rem;
+    }
 }
 
 .farm-btn--round {
@@ -99,6 +103,9 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
             &:hover {
                 color: var(--v-#{$color}-base);
             }
+            i.mdi {
+                color: var(--v-#{$color}-base);
+            }
         }
     }
 }
@@ -109,7 +116,7 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
     flex-direction: row;
     align-items: center;
 
-    i.mdi {
+    ::v-deep i.mdi {
         font-size: 1rem;
     }
 }
@@ -120,7 +127,7 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
         background-color: var(--v-#{$color}-base);
         color: white;
 
-        .farm-btn__content i.mdi {
+        ::v-deep .farm-btn__content i.mdi {
             color: white;
         }
     }

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -6,7 +6,7 @@ export default {
 	parameters: {
 		docs: {
 			description: {
-				component: `Default button (inherit from Vuetify)<br />
+				component: `Default button<br />
 				selector: <em>farm-btn</em>
 				`,
 			},

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

@@ -1,9 +1,21 @@
 <template>
-	<button v-on="$listeners" v-bind="$attrs" :type="type" :class="classes">
+	<button
+		v-if="!to"
+		v-on="$listeners"
+		v-bind="$attrs"
+		:disabled="disabled"
+		:type="type"
+		:class="classes"
+	>
 		<span class="farm-btn__content">
 			<slot></slot>
 		</span>
 	</button>
+	<router-link :to="to" v-bind="$attrs" :disabled="disabled" :class="classes" v-else>
+		<span class="farm-btn__content">
+			<slot></slot>
+		</span>
+	</router-link>
 </template>
 <script lang="ts">
 import Vue from 'vue';
@@ -23,6 +35,10 @@ export default Vue.extend({
 			type: String,
 			default: 'button',
 		},
+		to: {
+			type: String,
+			default: null,
+		},
 	},
 
 	computed: {

package/src/components/Buttons/ExportButton/ExportButton.vue

@@ -3,7 +3,7 @@
 		v-if="optionsList.length == 0"
 		@click="onClick"
 		dense
-		class="v-btn--responsive"
+		class="farm-btn--responsive"
 		outlined
 		title="Exportar"
 		:disabled="disabled"
@@ -23,7 +23,7 @@
 				v-bind="attrs"
 				v-on="on"
 				dense
-				class="v-btn--responsive"
+				class="farm-btn--responsive"
 				outlined
 				title="Exportar"
 				@onClick="togglePopover = true"

package/src/components/Buttons/ImportButton/ImportButton.vue

@@ -1,5 +1,5 @@
 <template>
-	<farm-btn @click="onClick" dense class="v-btn--responsive farm-btn--import" outlined title="Importar">
+	<farm-btn @click="onClick" dense class="farm-btn--responsive farm-btn--import" outlined title="Importar">
 		<i class="mdi mdi-upload"></i>
 		{{ label }}
 	</farm-btn>

package/src/components/Buttons/MultiImportButton/MultiImportButton.vue

@@ -5,10 +5,10 @@
 				v-bind="attrs"
 				v-on="on"
 				dense
-				@onClick="togglePopover = true"
-				class="v-btn--responsive farm-btn--import"
+				class="farm-btn--responsive farm-btn--import"
 				outlined
 				title="Importar"
+				@onClick="togglePopover = true"
 			>
 				Importar
 				<i

package/src/components/Buttons/RemoveButton/RemoveButton.vue

@@ -1,11 +1,11 @@
 <template>
 	<farm-btn
-		@click="onClick"
 		dense
-		class="v-btn--responsive"
+		class="farm-btn--responsive"
 		color="error"
 		:title="label"
 		:disabled="disabled"
+		@click="onClick"
 	>
 		<v-icon>mdi-trash-can-outline</v-icon>
 		{{ label }}

package/src/components/Buttons/ToggleButton/ToggleButton.vue

@@ -2,7 +2,7 @@
 	<farm-btn
 		@click="onClick"
 		dense
-		class="v-btn--responsive"
+		class="farm-btn--responsive"
 		:class="{
 			'v-btn_icon--prepend': prepend,
 			'v-btn_icon--apppend': !prepend,

package/src/components/FilePicker/FilePicker.vue

@@ -19,7 +19,7 @@
 
 			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
 
-			<farm-btn depressed outlined color="secondary" class="v-btn-responsive" @click="reset">
+			<farm-btn depressed outlined color="secondary" class="farm-btn--responsive" @click="reset">
 				Escolher outro
 			</farm-btn>
 		</div>

package/src/components/Icon/Icon.scss

@@ -0,0 +1,17 @@
+@import '../../configurations/variables';
+
+.farm-icon {
+    font-size: 24px;
+    @each $color in $colors {
+        &#{'.farm-icon--' + $color} {
+            color: var(--v-#{$color}-base);
+        }
+    }
+
+    @each $size, $value in $sizes {
+        &#{'.farm-icon[size=' + $size +']'} {
+            font-size: $value; 
+        }
+        
+    }
+}

package/src/components/Icon/Icon.stories.js

@@ -0,0 +1,27 @@
+import Icon from './Icon.vue';
+
+export default {
+	title: 'API/Icon',
+	component: Icon,
+	parameters: {
+		docs: {
+			description: {
+				component: `Icon<br />
+				selector: <em>farm-icon</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+
+
+export const Primary = () => ({
+	components: { 'farm-icon': Icon },
+	template: '<farm-icon color="secondary">book</farm-icon>',
+});
+
+
+
+Primary.storyName = 'Primary';

package/src/components/Icon/Icon.vue

@@ -0,0 +1,45 @@
+<template>
+	<i v-on="$listeners" v-bind="$attrs" :class="classes" ref="el"> </i>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+export default Vue.extend({
+	name: 'farm-icon',
+	inheritAttrs: true,
+
+	props: {
+		color: { type: String, default: 'primary' },
+		size: { type: String, default: 'default' },
+	},
+
+	computed: {
+		classes() {
+			const obj = {};
+			return {
+				'farm-icon': true,
+				['farm-icon--' + this.color]: true,
+				mdi: true,
+				['mdi-' + this.icon]: true,
+				...obj,
+			};
+		},
+		icon() {
+			if (!this.$slots.default) {
+				return '';
+			}
+			return this.$slots.default[0].text!.trim();
+		},
+	},
+	mounted() {
+		if (this.size !== 'default' && !breakPoints.includes(this.size)) {
+			this.$el.style.fontSize = this.size;
+		}
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'Icon.scss';
+</style>

package/src/components/Icon/__tests__/Icon.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils';
+import Icon from '../Icon';
+
+describe('Icon component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Icon);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('computed properties', () => {
+		it('get classes', () => {
+			expect(component.classes).toBeDefined();
+		});
+	});
+});

package/src/components/Icon/index.ts

@@ -0,0 +1,4 @@
+import Icon from './Icon.vue';
+
+export { Icon };
+export default Icon;

package/src/components/MainFilter/MainFilter.vue

@@ -17,7 +17,7 @@
 		<DefaultButton
 			v-if="hasExtraFilters"
 			color="secondary"
-			class="v-btn--responsive mt-14 mt-sm-8"
+			class="farm-btn--responsive mt-14 mt-sm-8"
 			@click="onFilterClick"
 		>
 			<v-icon color="white" class="mr-2" small>{{ extraFiltersBtnIcon }}</v-icon>

package/src/configurations/_variables.scss

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

package/src/examples/Buttons.stories.js

@@ -43,7 +43,7 @@ export const OutlinedButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <farm-btn v-for="color of colors":key="color" :color="color"outlined>
+        <farm-btn v-for="color of colors":key="color" :color="color" outlined>
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -56,6 +56,7 @@ export const DisabledButtons = () => ({
 	data() {
 		return {
 			colors,
+			x: 1,
 		};
 	},
 	template: `<div class="buttons-container">
@@ -120,11 +121,25 @@ export const Iconed = () => ({
 	},
 	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 icon v-for="color of colors" :key="color" :color="color">
+            <v-icon>mdi-book</v-icon>
         </farm-btn>
+	</div>`,
+});
 
-
+export const Rounded = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Rounded</h4>
+        <farm-btn v-for="color of colors" :key="color" :color="color" rounded >rounded
+        </farm-btn>
 	</div>`,
 });
 
@@ -143,6 +158,6 @@ Plain.story = {
 Icons.story = {
 	name: 'Icons',
 };
-Iconed.story = {
-	name: 'Iconed',
+Rounded.story = {
+	name: 'Rounded',
 };

package/src/examples/Icon.stories.js

@@ -0,0 +1,78 @@
+import { withDesign } from 'storybook-addon-designs';
+import { Icon } from '../main';
+import('./Icons.stories.scss');
+
+export default {
+	title: 'Examples/Icon',
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Icon`,
+			},
+		},
+	},
+};
+
+const colors = ['primary', 'secondary', 'error', 'gray', 'accent', 'yellow'];
+
+export const Icons = () => ({
+	components: {
+		'farm-icon': Icon,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors":key="color" :color="color">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const Sizes = () => ({
+	components: {
+		'farm-icon': Icon,
+	},
+	data() {
+		return {
+			sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+		};
+	},
+	template: `<div class="icons-container">
+        <div v-for="size of sizes">
+            <farm-icon :key="size" :size="size">
+                book
+            </farm-icon>
+            {{ size }}
+        </div>
+        <div>
+            <farm-icon size="1.5rem">
+                book
+            </farm-icon>
+            Custom: 1.5rem
+        </div>
+        <div>
+            <farm-icon size="0.5rem">
+                book
+            </farm-icon>
+            Custom: 0.5rem
+        </div>
+        <div>
+            <farm-icon size="14px">
+                book
+            </farm-icon>
+            Custom: 14px
+        </div>
+	</div>`,
+});
+
+Icons.story = {
+	name: 'Colors',
+};
+Sizes.story = {
+	name: 'Sizes',
+};

package/src/examples/Icons.stories.scss

@@ -0,0 +1,14 @@
+.icons-container {
+    display: flex;
+    flex-direction: row;
+    > i {
+        margin-right: 1rem;
+    }
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        margin-right: 1rem;
+        align-items: center;
+    }
+}

package/src/main.ts

@@ -67,3 +67,4 @@ export * from './components/ChipInviteStatus';
 export * from './components/Stepper';
 export * from './components/Logger';
 export * from './components/Logger/LoggerItem';
+export * from './components/Icon';