@farm-investimentos/front-mfe-components 10.1.3 → 11.0.0

package/package.json

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

package/src/components/AlertReload/AlertReload.vue

@@ -11,7 +11,7 @@
 				{{ label }}
 			</farm-typography>
 		</div>
-		<farm-btn color="secondary" alt="Recarregar" @click="$emit('onClick')">
+		<farm-btn alt="Recarregar" @click="$emit('onClick')">
 			<farm-icon>refresh</farm-icon>
 			Recarregar
 		</farm-btn>

package/src/components/ButtonToggle/ButtonToggle.vue

@@ -3,7 +3,7 @@
 		<farm-btn
 			v-for="(button, index) in buttons"
 			:key="`button_toggle_` + index"
-			:color="isSelected(index) ? 'secondary' : 'gray'"
+			:color="isSelected(index) ? 'primary' : 'secondary'"
 			:outlined="!isSelected(index)"
 			@click="setValue(index)"
 		>

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

@@ -1,5 +1,5 @@
 <template>
-	<farm-btn v-bind="$attrs" v-on="$listeners" color="secondary">
+	<farm-btn v-bind="$attrs" v-on="$listeners">
 		<i :class="{ mdi: true, [iconPath]: true, 'mr-3': true }" v-if="icon"></i>
 		<slot></slot>
 	</farm-btn>

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

@@ -1,5 +1,6 @@
 @import '../../../configurations/variables';
 @import '../../../configurations/mixins';
+@import '../../../configurations/theme-colors';
 
 .farm-btn {
     font-size: 14px;
@@ -137,23 +138,23 @@
         height: 64px;
     }
 
-    @each $color in $colors {
+    @each $color in $theme-colors-list {
         &#{'.farm-btn--' + $color}:not(.farm-btn--disabled) {
             &:hover {
-                color: var(--v-#{$color}-base);
+                color: var(--farm-#{$color}-base);
             }
 
             i.mdi {
-                color: var(--v-#{$color}-base);
+                color: var(--farm-#{$color}-base);
             }
         }
     }
 }
 
-@each $color in $colors {
+@each $color in $theme-colors-list {
     #{'.farm-btn--' + $color} {
-        border: 1px solid var(--v-#{$color}-base);
-        background-color: var(--v-#{$color}-base);
+        border: 1px solid var(--farm-#{$color}-base);
+        background-color: var(--farm-#{$color}-base);
         color: white;
 
         ::v-deep .farm-btn__content {
@@ -175,9 +176,9 @@
 
     :not(.farm-btn--disabled) {
         &.farm-btn--outlined#{'.farm-btn--' + $color} {
-            border: 1px solid var(--v-#{$color}-base);
+            border: 1px solid var(--farm-#{$color}-base);
             background: white;
-            color: var(--v-#{$color}-base);
+            color: var(--farm-#{$color}-base);
 
             &.farm-btn--extra,
             &.farm-btn--white {
@@ -186,14 +187,14 @@
             }
 
             .farm-btn__content i.mdi {
-                color: var(--v-#{$color}-base);
+                color: var(--farm-#{$color}-base);
             }
         }
 
         &.farm-btn--plain#{'.farm-btn--' + $color} {
             border: none;
             background: white;
-            color: var(--v-#{$color}-base);
+            color: var(--farm-#{$color}-base);
 
             &.farm-btn--extra,
             &.farm-btn--white {
@@ -205,7 +206,7 @@
             }
 
             .farm-btn__content i.mdi {
-                color: var(--v-#{$color}-base);
+                color: var(--farm-#{$color}-base);
             }
         }
     }

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

@@ -1,13 +1,14 @@
 import DefaultButton from './DefaultButton.vue';
-// import { withDesign } from 'storybook-addon-designs';
-import colors from '../../../configurations/colors';
+import { withDesign } from 'storybook-addon-designs';
+import baseThemeColors from '../../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 import './Buttons.stories.scss';
 
 export default {
 	title: 'Buttons/Default',
 	component: DefaultButton,
 
-	//decorators: [withDesign],
+	decorators: [withDesign],
 	parameters: {
 		docs: {
 			description: {
@@ -198,31 +199,31 @@ export const Sizes = () => ({
 	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">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'default_' + size" :size="size">
                 {{ 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>
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'outlined_' + size" :size="size" 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>
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'plain_' + size" :size="size" 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>
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'rouned_' + size" :size="size" 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-btn v-for="size of sizes" :style="styles.farmBtn" :key="'icon_' + size" :size="size" icon>
 				<farm-icon :size="size">book</farm-icon>
             </farm-btn>
         </div>
@@ -231,4 +232,4 @@ export const Sizes = () => ({
 
 export const Elevated = () => ({
 	template: '<farm-btn :elevated="true">Elevated</farm-btn>',
-});
+});

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

@@ -33,14 +33,14 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
-				| 'error'
-				| 'extra'
-				| 'accent'
+				| 'neutral'
 				| 'info'
 				| 'success'
-				| 'gray'
-				| 'yellow'
-				| 'white'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
 			>,
 			default: 'primary',
 		},
@@ -104,5 +104,5 @@ export default Vue.extend({
 });
 </script>
 <style lang="scss" scoped>
-@import 'DefaultButton.scss';
+@import 'DefaultButton';
 </style>

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

@@ -6,6 +6,7 @@
 		class="farm-btn--responsive"
 		outlined
 		title="Exportar"
+		color="secondary"
 		:disabled="disabled"
 	>
 		<i :class="{ 'mr-2': true, 'mdi-file-export-outline': true, mdi: true }"></i>
@@ -26,6 +27,7 @@
 				class="farm-btn--responsive"
 				outlined
 				title="Exportar"
+				color="secondary"
 				@onClick="togglePopover = true"
 				:disabled="disabled"
 			>

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

@@ -1,6 +1,5 @@
 .farm-btn.farm-btn--import {
-    background: var(--v-extra-lighten2);
-    color: var(--v-gray-lighten5);
+   
 
     .farm-btn__content .farm-icon {
         color: white;

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

@@ -1,5 +1,5 @@
 <template>
-	<farm-btn class="farm-btn--responsive farm-btn--import" title="Importar" @click="onClick">
+	<farm-btn class="farm-btn--responsive farm-btn--import" color="secondary" title="Importar" @click="onClick">
 		<farm-icon>upload</farm-icon>
 		{{ label }}
 	</farm-btn>

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

@@ -7,6 +7,7 @@
 				dense
 				class="farm-btn--responsive farm-btn--import"
 				outlined
+				color="secondary"
 				title="Importar"
 				@onClick="togglePopover = true"
 			>

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

@@ -40,7 +40,7 @@ export default Vue.extend({
 		 */
 		color: {
 			type: String,
-			default: 'secondary',
+			default: 'primary',
 		},
 		/**
 		 * Pressionado ou não

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -2,7 +2,7 @@
 	<farm-tooltip v-model="show">
 		{{ feedbackMessage }}
 		<template v-slot:activator="{}">
-			<farm-btn icon color="secondary" :disabled="disabled" @click="onClick">
+			<farm-btn icon :disabled="disabled" @click="onClick">
 				<farm-icon size="xs">content-copy</farm-icon>
 			</farm-btn>
 		</template>

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.scss

@@ -0,0 +1,20 @@
+div {
+    border-top: 1px solid var(--farm-stroke-divider);
+    padding: 64px 24px 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+
+    p:first-of-type {
+        margin: 24px auto 16px;
+    }
+
+    p:last-child {
+        color: var(--farm-text-secondary);
+    }
+
+    .farm-icon.farm-icon--primary {
+        color: var(--farm-text-disabled);
+    }
+}

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

@@ -3,13 +3,24 @@ import DataTableEmptyWrapper from './DataTableEmptyWrapper.vue';
 export default {
 	title: 'Display/Table/DataTableEmptyWrapper',
 	component: DataTableEmptyWrapper,
+	parameters: {
+		docs: {
+			description: {
+				component: `Message for empty list/data<br />
+				selector: <em>farm-emptywrapper</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
-	template: '<DataTableEmptyWrapper />',
+	template: '<farm-emptywrapper />',
 });
 
 export const CustomTitles = () => ({
 	template:
-		'<DataTableEmptyWrapper title="Título customizado" subtitle="Subtítulo customizado" />',
+		'<farm-emptywrapper title="Título customizado" subtitle="Subtítulo customizado" />',
 });

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.vue

@@ -1,27 +1,25 @@
 <template>
-	<div align="center">
-		<v-icon>mdi-magnify</v-icon>
-		<p>{{ title }}</p>
-		<p>{{ subtitle }}</p>
+	<div>
+		<farm-icon size="lg">magnify</farm-icon>
+		<farm-caption bold>{{ title }}</farm-caption>
+		<farm-caption variation="regular" v-if="subtitle">{{ subtitle }}</farm-caption>
 	</div>
 </template>
-<script>
-import { VIcon } from 'vuetify/lib/components/VIcon';
-/**
- * Componente de lista vazia
- */
-export default {
-	name: 'DataTableEmptyWrapper',
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-emptywrapper',
 	props: {
 		/**
-		 * Título
+		 * Title
 		 */
 		title: {
 			type: String,
 			default: 'Nenhuma informação para exibir aqui',
 		},
-        /**
-		 * Subtítulo
+		/**
+		 * Subtitle
 		 */
 		subtitle: {
 			type: String,
@@ -29,31 +27,8 @@ export default {
 				'Tente filtrar novamente sua pesquisa ou faça uma importação para ver mais resultados',
 		},
 	},
-	components: {
-		VIcon,
-	},
-};
+});
 </script>
 <style scoped lang="scss">
-div {
-	border-top: 1px solid var(--v-gray-lighten2);
-	padding: 3rem 1rem;
-	.v-icon {
-		margin-top: 1rem;
-		font-size: 2.625rem;
-		color: var(--v-gray-lighten2);
-	}
-	p:nth-child(2) {
-		color: var(--v-primary-base);
-		font-weight: 700;
-		font-size: 0.75rem;
-		margin-top: 1rem;
-	}
-	p:nth-child(3) {
-		color: var(--v-gray-base);
-		font-weight: 400;
-		font-size: 0.625rem;
-		margin-bottom: 1rem;
-	}
-}
+@import './DataTableEmptyWrapper';
 </style>

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `Paginator with items per page select<br />
-				selector: <em>farm-datatable-paginator</em>
+				selector: <em>farm-datatable-paginator</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -22,10 +23,9 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { DataTablePaginator },
 	data() {
 		return {
-			totalPages: 8
+			totalPages: 8,
 		};
 	},
 	template: '<DataTablePaginator :totalPages="totalPages" :page="1" />',
@@ -33,46 +33,18 @@ export const Primary = () => ({
 		setTimeout(() => {
 			this.totalPages = 0;
 		}, 1000);
-	}
+	},
 });
 
 export const Secondary = () => ({
-	components: { DataTablePaginator },
 	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({
-	components: { DataTablePaginator },
 	template: '<DataTablePaginator :disabled="true":totalPages="19" :page="1" />',
 });
 
 export const CustomPerPage = () => ({
-	components: { DataTablePaginator },
 	template:
 		'<DataTablePaginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
 });
-
-const parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
-	},
-};
-
-Primary.story = {
-	name: 'Básico',
-	parameters,
-};
-Secondary.story = {
-	name: 'Sem limite por páginas',
-	parameters,
-};
-Disabled.story = {
-	name: 'Desabilitado',
-	parameters,
-};
-CustomPerPage.story = {
-	name: 'Lista de registros por página customizada',
-	parameters,
-};
-

package/src/components/DatePicker/DatePicker.vue

@@ -35,17 +35,11 @@
 			:max="max"
 			:min="min"
 		>
-			<farm-btn outlined color="primary" @click="menuField = false" title="Fechar">
+			<farm-btn outlined color="secondary" @click="menuField = false" title="Fechar">
 				Fechar
 			</farm-btn>
-			<farm-btn outlined color="secondary" class="ml-2" @click="clear"> Limpar </farm-btn>
-			<farm-btn
-				color="secondary"
-				class="ml-2"
-				title="Confirmar"
-				:disabled="!dateField.length"
-				@click="save()"
-			>
+			<farm-btn outlined class="ml-2" @click="clear"> Limpar </farm-btn>
+			<farm-btn class="ml-2" title="Confirmar" :disabled="!dateField.length" @click="save()">
 				Confirmar
 			</farm-btn>
 		</v-date-picker>
@@ -136,7 +130,9 @@ export default Vue.extend({
 					timeZone: 'America/Sao_Paulo',
 				});
 
-				return this.min && this.getUniversalDate(locatedSelectedDate) < this.getUniversalDate(locatedMinDate)
+				return this.min &&
+					this.getUniversalDate(locatedSelectedDate) <
+						this.getUniversalDate(locatedMinDate)
 					? 'A data está fora do período permitido'
 					: true;
 			},
@@ -177,7 +173,7 @@ export default Vue.extend({
 		getUniversalDate(d) {
 			const onlyDMY = d.split(' ')[0];
 			const arr = onlyDMY.split('/');
-			return new Date(arr[2], arr[1] -1, arr[0]);
+			return new Date(arr[2], arr[1] - 1, arr[0]);
 		},
 	},
 	computed: {

package/src/components/DialogFooter/DialogFooter.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="farm-dialog__footer">
-		<farm-btn v-if="hasCancel" color="secondary" outlined @click="$emit('onClose')">
+		<farm-btn v-if="hasCancel" color="primary" outlined @click="$emit('onClose')">
 			{{ closeLabel }}
 		</farm-btn>
 		<farm-btn
@@ -74,7 +74,7 @@ export default Vue.extend({
 		 */
 		confirmColor: {
 			type: String,
-			default: 'secondary',
+			default: 'primary',
 		},
 		/**
 		 * Ícone no botão Confirmar

package/src/components/IdCaption/IdCaption.vue

@@ -4,7 +4,7 @@
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
 		>
-			<farm-caption bold variation="medium" v-if="hasTitle">
+			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
 					{{ $slots.title ? $slots.title[0].text : null }}
 					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">

package/src/components/Logger/Logger.scss

@@ -8,18 +8,18 @@
 	width: 1px;
 
 	&.logger__divider--success {
-		background: var(--v-secondary-base);
+		background: var(--farm-primary-base);
 	}
 
 	&.logger__divider--error {
-		background: var(--v-error-base);
+		background: var(--farm-error-base);
 	}
 
 	&.logger__divider--error-to-success {
-		background: linear-gradient(to bottom, var(--v-error-base), var(--v-secondary-base));
+		background: linear-gradient(to bottom, var(--farm-error-base), var(--farm-primary-base));
 	}
 
 	&.logger__divider--success-to-error {
-		background: linear-gradient(to bottom, var(--v-secondary-base), var(--v-error-base));
+		background: linear-gradient(to bottom, var(--farm-primary-base), var(--farm-error-base));
 	}
 }

package/src/components/Logger/LoggerItem/LoggerItem.scss

@@ -22,18 +22,18 @@
     }
 
     &.logger__item--error {
-        @include loggerMessage(var(--v-error-base));
+        @include loggerMessage(var(--farm-error-base));
     }
 
     &.logger__item--success {
-        @include loggerMessage(var(--v-secondary-base));
+        @include loggerMessage(var(--farm-primary-base));
 
     }
 }
 
 
 .logger__item>i.mdi {
-    border: 1px solid var(--v-gray-lighten2);
+    border: 1px solid var(--farm-stroke-base);
     border-radius: 50%;
     width: 32px;
     height: 32px;
@@ -43,8 +43,8 @@
     align-items: center;
     justify-content: center;
 
-    border-color: var(--v-gray-lighten1);
-    background-color: var(--v-gray-lighten1);
+    border-color: var(--farm-neutral-base);
+    background-color: var(--farm-neutral-base);
 
     &:before {
         font-size: 16px;

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -21,12 +21,13 @@
 		</div>
 		<farm-btn
 			v-if="hasDetails"
-			:color="buttonColor"
 			plain
 			title="Ver Detalhes"
+			:color="buttonColor"
 			@click="callDetails"
-			>Ver Detalhes</farm-btn
-		>
+			>
+				Ver Detalhes
+			</farm-btn>
 	</section>
 </template>
 <script lang="ts">
@@ -58,12 +59,12 @@ export default Vue.extend({
 		},
 		buttonColor(): string {
 			if (this.item.status === 'success') {
-				return 'secondary';
+				return 'primary';
 			} else if (this.item.status === 'error') {
 				return 'error';
 			}
 
-			return 'primary';
+			return 'secondary';
 		},
 		hasDetails(): boolean {
 			return !!this.item.details;

package/src/components/Logger/LoggerItem/__tests__/LoggerItem.spec.js

@@ -55,7 +55,7 @@ describe('LoggerItem component', () => {
 					status: 'success',
 				},
 			});
-			expect(component.buttonColor).toEqual('secondary');
+			expect(component.buttonColor).toEqual('primary');
 		});
 
 		it('Should return error button color', async () => {
@@ -73,7 +73,7 @@ describe('LoggerItem component', () => {
 					status: 'primary',
 				},
 			});
-			expect(component.buttonColor).toEqual('primary');
+			expect(component.buttonColor).toEqual('secondary');
 		});
 
 		it('Should not have a detail button', async () => {

package/src/components/MainFilter/MainFilter.vue

@@ -16,7 +16,6 @@
 		</fieldset>
 		<farm-btn
 			v-if="hasExtraFilters"
-			color="secondary"
 			class="farm-btn--responsive mt-14 mt-sm-8"
 			@click="onFilterClick"
 		>

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -56,7 +56,7 @@ export default Vue.extend({
 		 */
 		confirmColor: {
 			type: String,
-			default: 'secondary',
+			default: 'primary',
 		},
 		/**
 		 * Label do botão