@farm-investimentos/front-mfe-components 6.2.6 → 6.3.2

package/package.json

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

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

@@ -56,4 +56,3 @@ HtmlMarkup.storyName = 'Html Markup';
 Props.storyName = 'Props';
 Listener.storyName = 'Listener';
 Iconed.storyName = 'Icon';
-To.storyName = 'Teste rota';

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,10 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
             &:hover {
                 color: var(--v-#{$color}-base);
             }
+
+            i.mdi {
+                color: var(--v-#{$color}-base);
+            }
         }
     }
 }
@@ -125,27 +133,29 @@ $colors: primary, secondary, error, extra, accent, info, success, gray, yellow;
         }
     }
 
-    .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 {
+    :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);
+            }
         }
 
-    }
-
-    .farm-btn--plain#{'.farm-btn--' + $color} {
-        border: none;
-        background: white;
-        color: var(--v-#{$color}-base);
-
-        .farm-btn__content i.mdi {
+        &.farm-btn--plain#{'.farm-btn--' + $color} {
+            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.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>
 				`,
 			},
@@ -47,4 +47,3 @@ Primary.storyName = 'Básico';
 HtmlMarkup.storyName = 'Html Markup';
 Props.storyName = 'Props';
 Listener.storyName = 'Listener';
-To.storyName = 'Teste Rota';

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,67 @@
+<template>
+	<i v-on="$listeners" v-bind="$attrs" :class="classes" :size="$props.size" ref="el" />
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+export default Vue.extend({
+	name: 'farm-icon',
+	inheritAttrs: true,
+
+	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'error'
+				| 'extra'
+				| 'accent'
+				| 'info'
+				| 'success'
+				| 'gray'
+				| 'yellow'
+				| 'white'
+			>,
+			default: 'primary',
+		},
+		size: {
+			type: String as PropType<
+				'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'other (examples: 12px, 3rem)'
+			>,
+			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/configurations/_variables.scss

@@ -0,0 +1,2 @@
+$colors: primary, secondary, error, extra, accent, info, success, gray, yellow, white;
+$sizes: ("xs": 12px, "sm": 16px , "md": 24px, "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>
@@ -56,12 +57,21 @@ export const DisabledButtons = () => ({
 	data() {
 		return {
 			colors,
-			x: 1
+			x: 1,
 		};
 	},
 	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>`,
 });
@@ -121,11 +131,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>`,
 });
 
@@ -144,6 +168,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';