@farm-investimentos/front-mfe-components 8.7.1 → 9.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "8.7.1",
+	"version": "9.1.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -27,7 +27,7 @@
 		"vuetify-dialog": "^2.0.17"
 	},
 	"devDependencies": {
-		"@farm-investimentos/front-mfe-libs-ts": "^1.0.6",
+		"@farm-investimentos/front-mfe-libs-ts": "^1.0.9",
 		"@socheatsok78/storybook-addon-vuetify": "^0.1.9",
 		"@storybook/addon-actions": "^6.5.8",
 		"@storybook/addon-essentials": "^6.5.8",

package/src/components/Buttons/ConfirmButton/ConfirmButton.vue

@@ -4,15 +4,11 @@
 		<slot></slot>
 	</farm-btn>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-confirm',
-	components: {
-		'farm-btn': DefaultButton,
-	},
 	inheritAttrs: true,
 	props: {
 		/**

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

@@ -16,43 +16,32 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { DangerButton },
-	template: '<DangerButton>Danger Button</DangerButton>',
+	template: '<farm-btn-danger>Danger Button</farm-btn-danger>',
 });
 
 export const HtmlMarkup = () => ({
-	components: { DangerButton },
-	template: '<DangerButton><em>I am italic</strong></em></DangerButton>',
+	template: '<farm-btn-danger><em>I am italic</strong></em></farm-btn-danger>',
 });
 
 export const Props = () => ({
-	components: { DangerButton },
-	template: '<DangerButton title="custom title">custom title (hover me)</DangerButton>',
+	template: '<farm-btn-danger title="custom title">custom title (hover me)</farm-btn-danger>',
 });
 
 export const Listener = () => ({
-	components: { DangerButton },
 	data() {
 		return {
 			x: 1,
 		};
 	},
 	template: `
-		<DangerButton color="error" @click="x = 2">click me to change: {{ x }}</DangerButton>
+		<farm-btn-danger color="error" @click="x = 2">click me to change: {{ x }}</farm-btn-danger>
 	`,
 });
 
 export const Iconed = () => ({
-	components: { DangerButton },
 	template: `<div>
-		<DangerButton :icon="true">default icon</DangerButton>
-		<DangerButton :icon="true" customIcon="information-outline">information-outline</DangerButton>
-		<DangerButton :icon="true" customIcon="account-search">account-search</DangerButton>
+		<farm-btn-danger :icon="true">default icon</farm-btn-danger>
+		<farm-btn-danger :icon="true" customIcon="information-outline">information-outline</farm-btn-danger>
+		<farm-btn-danger :icon="true" customIcon="account-search">account-search</farm-btn-danger>
 	</div>`,
 });
-
-Primary.storyName = 'Básico';
-HtmlMarkup.storyName = 'Html Markup';
-Props.storyName = 'Props';
-Listener.storyName = 'Listener';
-Iconed.storyName = 'Icon';

package/src/components/Buttons/DangerButton/DangerButton.vue

@@ -4,15 +4,11 @@
 		<slot></slot>
 	</farm-btn>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-danger',
-	components: {
-		'farm-btn': DefaultButton,
-	},
 	inheritAttrs: true,
 	props: {
 		/**
@@ -31,7 +27,7 @@ export default Vue.extend({
 		},
 	},
 	computed: {
-		iconPath() {
+		iconPath(): string {
 			if (!this.customIcon) {
 				return 'mdi-trash-can-outline';
 			}

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

@@ -36,7 +36,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-    
+
         ::v-deep i.mdi {
             font-size: 1rem;
         }
@@ -83,7 +83,6 @@
     }
 
     &: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 {
             opacity: 0.16;
@@ -214,6 +213,16 @@
 
 }
 
+.farm-btn--outlined.farm-btn--disabled {
+    border: 1px solid #D6D6D6;
+    color: #D6D6D6;
+    background-color: white;
+
+    i.mdi.farm-icon {
+        color: white;
+    }
+}
+
 .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%);
 }

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

@@ -15,35 +15,35 @@ export default {
 				selector: <em>farm-btn</em>
 				`,
 			},
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=2491%3A4486',
+			},
 		},
 		viewMode: 'docs',
 	},
 };
 
 export const Primary = () => ({
-	components: { DefaultButton },
-	template: '<DefaultButton title="Pass text as slot">Pass text as slot</DefaultButton>',
+	template: '<farm-btn title="Pass text as slot">Pass text as slot</farm-btn>',
 });
 
 export const HtmlMarkup = () => ({
-	components: { DefaultButton },
-	template: '<DefaultButton><em>I am italic</strong></em></DefaultButton>',
+	template: '<farm-btn><em>I am italic</strong></em></farm-btn>',
 });
 
 export const Props = () => ({
-	components: { 'farm-btn': DefaultButton },
 	template: '<farm-btn color="secondary" outlined>props</farm-btn>',
 });
 
 export const Listener = () => ({
-	components: { DefaultButton },
 	data() {
 		return {
 			x: 1,
 		};
 	},
 	template: `
-		<DefaultButton color="error" @click="x = 2">click me to change: {{ x }}</DefaultButton>
+		<farm-btn color="error" @click="x = 2">click me to change: {{ x }}</farm-btn>
 	`,
 });
 
@@ -228,3 +228,7 @@ export const Sizes = () => ({
         </div>
 	</div>`,
 });
+
+export const Elevated = () => ({
+	template: '<farm-btn :elevated="true">Elevated</farm-btn>',
+});

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

@@ -48,10 +48,23 @@ export default Vue.extend({
 		 * Outlined
 		 */
 		outlined: { type: Boolean, default: false },
+		/**
+		 * Is plain
+		 */
 		plain: { type: Boolean, default: false },
+		/**
+		 * Is disabled
+		 */
 		disabled: { type: Boolean, default: false },
+		/**
+		 * Is rounded
+		 */
 		rounded: { type: Boolean, default: false },
 		icon: { type: Boolean, default: false },
+		/**
+		 * Has elevation
+		 */
+		elevated: { type: Boolean, default: false },
 		type: {
 			type: String,
 			default: 'button',
@@ -61,9 +74,7 @@ export default Vue.extend({
 			default: null,
 		},
 		size: {
-			type: String as PropType<
-				'xs' | 'sm' | 'md' | 'lg' | 'xl'
-			>,
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'default',
 		},
 	},
@@ -78,7 +89,7 @@ export default Vue.extend({
 				});
 			return {
 				'farm-btn': true,
-				'farm-btn--elevated': this.isElevated,
+				'farm-btn--elevated': this.elevated,
 				'farm-btn--round': this.isRound,
 				'farm-btn--rounded': this.rounded,
 				'farm-btn--icon': this.icon,
@@ -89,17 +100,6 @@ export default Vue.extend({
 		isRound(): boolean {
 			return Boolean(this.icon || this.fab);
 		},
-		isElevated(): boolean {
-			return Boolean(
-				!this.icon &&
-					!this.text &&
-					!this.outlined &&
-					!this.depressed &&
-					!this.disabled &&
-					!this.plain &&
-					(this.elevation == null || Number(this.elevation) > 0)
-			);
-		},
 	},
 });
 </script>

package/src/components/Buttons/DefaultButton/__tests__/DefaultButton.spec.js

@@ -24,10 +24,6 @@ describe('DefaultButton component', () => {
 			expect(component.isRound).toBeTruthy();
 		});
 
-		it('get isElevated false', () => {
-			expect(component.isElevated).toBeTruthy();
-		});
-
 		it('get classes', () => {
 			expect(component.classes).toBeDefined();
 		});

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

@@ -6,18 +6,15 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { ExportButton },
-	template: '<ExportButton />',
+	template: '<farm-btn-export />',
 });
 
 export const Disabled = () => ({
-	components: { ExportButton },
-	template: '<ExportButton :disabled="true" />',
+	template: '<farm-btn-export :disabled="true" />',
 });
 
 export const List = () => ({
-	components: { ExportButton },
-	template: `<ExportButton :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />`,
+	template: `<farm-btn-export :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />`,
 });
 
 Primary.storyName = 'Básico';

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

@@ -34,7 +34,7 @@
 					:class="{
 						'ml-2': true,
 						'mr-0': true,
-						'mdi': true,
+						mdi: true,
 						'mdi-chevron-up': togglePopover,
 						'mdi-chevron-down': !togglePopover,
 					}"
@@ -64,7 +64,6 @@ import VList from 'vuetify/lib/components/VList/VList';
 import VMenu from 'vuetify/lib/components/VMenu';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
-import DefaultButton from '../DefaultButton';
 
 /**
  * Botão de Exportação, com opção de gerar menu dropdown
@@ -99,7 +98,6 @@ export default Vue.extend({
 		VMenu,
 		VListItemContent,
 		VListItemTitle,
-		'farm-btn': DefaultButton,
 	},
 	methods: {
 		onClick(key) {
@@ -109,10 +107,6 @@ export default Vue.extend({
 });
 </script>
 <style scoped lang="scss">
-.v-btn {
-	color: var(--v-extra-lighten2);
-	background: white;
-}
 .v-list-item {
 	border-bottom: 1px solid var(--v-gray-lighten2);
 	&:last-child {

package/src/components/Buttons/ImportButton/ImportButton.scss

@@ -0,0 +1,9 @@
+.farm-btn.farm-btn--import {
+    background: var(--v-extra-lighten2);
+    color: var(--v-gray-lighten5);
+
+    .farm-btn__content .farm-icon {
+        color: white;
+        margin-right: 1rem;
+    }
+}

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

@@ -1,19 +1,15 @@
 import ImportButton from './ImportButton.vue';
 
 export default {
-    title: 'Buttons/Import',
-    component: ImportButton,
+	title: 'Buttons/Import',
+	component: ImportButton,
 };
 
 export const Primary = () => ({
-    components: { ImportButton },
-    template: '<ImportButton />',
+	template: '<farm-btn-import />',
 });
 
 export const CustomLabel = () => ({
-    components: { ImportButton },
-    template: '<ImportButton label="Label custom" />',
+	components: { ImportButton },
+	template: '<farm-btn-import label="Label custom" />',
 });
-
-Primary.storyName = 'Básico';
-CustomLabel.storyName = 'Label customizado';

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

@@ -1,18 +1,14 @@
 <template>
-	<farm-btn @click="onClick" dense class="farm-btn--responsive farm-btn--import" outlined title="Importar">
-		<i class="mdi mdi-upload"></i>
+	<farm-btn class="farm-btn--responsive farm-btn--import" title="Importar" @click="onClick">
+		<farm-icon>upload</farm-icon>
 		{{ label }}
 	</farm-btn>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-import',
-	components: {
-		'farm-btn': DefaultButton,
-	},
 	props: {
 		/**
 		 * Label do botão
@@ -30,12 +26,5 @@ export default Vue.extend({
 });
 </script>
 <style scoped lang="scss">
-.farm-btn.farm-btn--import {
-	background: var(--v-extra-lighten2);
-	color: var(--v-gray-lighten5);
-	.farm-btn__content i.mdi {
-		color: white;
-		margin-right: 1rem;
-	}
-}
+@import 'ImportButton';
 </style>

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

@@ -6,14 +6,11 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { MultiImport },
-	template: '<MultiImport />',
+	template: '<farm-btn-multipleimport />',
 });
 
 export const List = () => ({
-	components: { MultiImport },
-	template: `<MultiImport :optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]" />`,
+	template: `<farm-btn-multipleimport :optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]" />`,
 });
 
-Primary.storyName = 'Básico';
 List.storyName = 'Lista';

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

@@ -45,7 +45,6 @@ import VList from 'vuetify/lib/components/VList/VList';
 import VMenu from 'vuetify/lib/components/VMenu';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
-import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-multipleimport',
@@ -55,7 +54,6 @@ export default Vue.extend({
 		VMenu,
 		VListItemContent,
 		VListItemTitle,
-		'farm-btn': DefaultButton,
 	},
 	props: {
 		/**

package/src/components/Buttons/RemoveButton/RemoveButton.scss

@@ -0,0 +1,5 @@
+.farm-btn {
+    .farm-icon {
+        margin-right: 1rem;
+    }
+}

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

@@ -6,13 +6,11 @@ export default {
 };
 
 export const Primary = () => ({
-    components: { RemoveButton },
-    template: '<RemoveButton />',
+    template: '<farm-btn-remove />',
 });
 
 export const Secondary = () => ({
-    components: { RemoveButton },
-    template: '<RemoveButton label="Custom label" />',
+    template: '<farm-btn-remove label="Custom label" />',
 });
 
 Primary.storyName = 'Básico';

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

@@ -7,14 +7,12 @@
 		:disabled="disabled"
 		@click="onClick"
 	>
-		<v-icon>mdi-trash-can-outline</v-icon>
+		<farm-icon>trash-can-outline</farm-icon>
 		{{ label }}
 	</farm-btn>
 </template>
 <script>
 import Vue from 'vue';
-import VIcon from 'vuetify/lib/components/VIcon';
-import DefaultButton from '../DefaultButton';
 
 export default Vue.extend({
 	name: 'farm-btn-remove',
@@ -34,10 +32,6 @@ export default Vue.extend({
 			default: false,
 		},
 	},
-	components: {
-		VIcon,
-		'farm-btn': DefaultButton,
-	},
 	methods: {
 		onClick() {
 			this.$emit('onClick');
@@ -46,9 +40,5 @@ export default Vue.extend({
 });
 </script>
 <style scoped lang="scss">
-.farm-btn {
-	.v-icon {
-		margin-right: 1rem;
-	}
-}
+@import './RemoveButton';
 </style>

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

@@ -1,25 +1,18 @@
 import ToggleButton from './ToggleButton.vue';
 
 export default {
-    title: 'Buttons/ToggleButton',
-    component: ToggleButton,
+	title: 'Buttons/ToggleButton',
+	component: ToggleButton,
 };
 
 export const Primary = () => ({
-    components: { ToggleButton },
-    template: '<ToggleButton label="Botão" />',
+	template: '<farm-btn-toggle label="Botão" />',
 });
 
 export const Secondary = () => ({
-    components: { ToggleButton },
-    template: '<ToggleButton label="Botão" position="right" />',
+	template: '<farm-btn-toggle label="Botão" position="right" />',
 });
 
 export const Opened = () => ({
-    components: { ToggleButton },
-    template: '<ToggleButton label="Botão" :pressed="true" />',
+	template: '<farm-btn-toggle label="Botão" :pressed="true" />',
 });
-
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Ícone na direita';
-Opened.storyName = 'Aberto';

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

@@ -11,25 +11,19 @@
 		:outlined="!open"
 		:title="label"
 	>
-		<v-icon v-if="prepend">{{ `mdi-chevron-${open ? 'up' : 'down'}` }}</v-icon>
+		<farm-icon v-if="prepend" class="mr-3 ml-0">{{ `chevron-${open ? 'up' : 'down'}` }}</farm-icon>
 		{{ label }}
-		<v-icon v-if="!prepend" class="ml-3 mr-0">{{ `mdi-chevron-${open ? 'up' : 'down'}` }}</v-icon>
+		<farm-icon v-if="!prepend" class="ml-3 mr-0">{{ `chevron-${open ? 'up' : 'down'}` }}</farm-icon>
 	</farm-btn>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
-import VIcon from 'vuetify/lib/components/VIcon';
-import DefaultButton from '../DefaultButton';
 
 /**
  * Botão de Toggle, emitindo e guardando status
  */
 export default Vue.extend({
 	name: 'farm-btn-toggle',
-	components: {
-		VIcon,
-		'farm-btn': DefaultButton,
-	},
 	data: () => ({
 		open: false,
 	}),

package/src/{examples/Card.stories.ts → components/Card/CardComposition.stories.ts}

@@ -1,9 +1,8 @@
 import { withDesign } from 'storybook-addon-designs';
-import { Card, CardContent } from '../main';
-import gutters from '../configurations/gutters';
+import gutters from '../../configurations/gutters';
 
 export default {
-	title: 'Examples/Card',
+	title: 'Surfaces/Card/Molecules',
 	decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
@@ -15,25 +14,7 @@ export default {
 	},
 };
 
-export const Primary = () => ({
-	components: {
-		'farm-card': Card,
-		'farm-card-content': CardContent,
-	},
-	template: `<div style="width: 480px;">
-    <farm-card>
-		<farm-card-content>
-			Content!
-		</farm-card-content>
-	</farm-card>
-    </div>`,
-});
-
 export const MultipleContents = () => ({
-	components: {
-		'farm-card': Card,
-		'farm-card-content': CardContent,
-	},
 	template: `<div style="width: 480px;">
     <farm-card>
 		<farm-card-content>
@@ -50,10 +31,6 @@ export const MultipleContents = () => ({
 });
 
 export const Gutters = () => ({
-	components: {
-		'farm-card': Card,
-		'farm-card-content': CardContent,
-	},
 	data() {
 		return { gutters };
 	},
@@ -67,10 +44,6 @@ export const Gutters = () => ({
 });
 
 export const Shadow = () => ({
-	components: {
-		'farm-card': Card,
-		'farm-card-content': CardContent,
-	},
 	template: `<div style="width: 480px;">
     <farm-card shadow>
 		<farm-card-content>