@farm-investimentos/front-mfe-components 10.1.4 → 11.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "10.1.4",
+	"version": "11.0.1",
 	"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);
+            ::v-deep .farm-btn__content i.mdi {
+                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/CardContext/CardContext.stories.js

@@ -64,3 +64,12 @@ export const NoIcon = () => ({
         </farm-card-context>
     `,
 });
+
+export const TooltipText = () => ({
+	template: `
+        <farm-card-context tooltipText="Lorem Ipsum is simply dummy text of the printing and typesetting industry" icon="mdi-currency-usd" title="Titulo do Card">
+            <p>Conteúdo do Card</p>
+        </farm-card-context>
+    `,
+});
+

package/src/components/CardContext/CardContext.vue

@@ -9,9 +9,22 @@
 		<div class="card-context-header" v-if="isSuccess && title">
 			<farm-icon-box v-if="icon" :icon="icon" />
 			<div class="card-context-content">
-				<p :class="{ 'card-context-title': true, 'card-context-content--bold': bold }">
-					{{ title }}
-				</p>
+				<div class="d-flex align-center">
+					<p :class="{ 
+						'mr-2': true, 
+						'mb-1': true, 
+						'card-context-title': true, 
+						'card-context-content--bold': bold }"
+					>
+						{{ title }}
+					</p>
+					<farm-tooltip v-if="tooltipText !== null">
+						{{ tooltipText }}
+						<template v-slot:activator="{}">
+							<farm-icon size="sm" color="gray">help-circle</farm-icon>
+						</template>
+					</farm-tooltip>
+				</div>
 			</div>
 		</div>
 		<div class="card-context-body" v-if="isSuccess">
@@ -93,6 +106,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Show Tooltip and help text
+		 */
+		tooltipText: {
+			type: String,
+			default: null,
+		}
 	},
 	computed: {
 		isSuccess() {

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/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/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

package/src/components/RangeDatePicker/RangeDatePicker.vue

@@ -33,11 +33,11 @@
 			color="secondary"
 			locale="pt-br"
 		>
-			<farm-btn outlined color="primary" @click="menuField = false" tutle="Fechar">
+			<farm-btn outlined color="secondary" @click="menuField = false" title="Fechar">
 				Fechar
 			</farm-btn>
-			<farm-btn outlined color="secondary" class="ml-2" @click="clear()" title="Limpar"> Limpar</farm-btn>
-			<farm-btn color="secondary" class="ml-2" :disabled="canConfirm" @click="save()" title="Confirmar">
+			<farm-btn outlined class="ml-2" @click="clear()" title="Limpar"> Limpar</farm-btn>
+			<farm-btn class="ml-2" :disabled="canConfirm" @click="save()" title="Confirmar">
 				Confirmar
 			</farm-btn>
 		</v-date-picker>

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -1,6 +1,7 @@
 [role='menuitem'] {
-	border-bottom: 1px solid var(--v-gray-lighten2);
+	border-bottom: 1px solid var(--farm-stoke-base);
 }
+
 .v-list-item__title {
 	.farm-icon {
 		vertical-align: sub;

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -1,7 +1,7 @@
 <template>
 	<v-menu>
 		<template v-slot:activator="{ on, attrs }">
-			<farm-btn icon v-bind="attrs" v-on="on" title="Abrir opções">
+			<farm-btn icon v-bind="attrs" v-on="on" title="Abrir opções" color="secondary">
 				<farm-icon size="md">dots-horizontal</farm-icon>
 			</farm-btn>
 		</template>

package/src/components/layout/Box/Box.scss

@@ -12,25 +12,4 @@
         position: relative;
     }
 
-    @each $k in $justifications {
-        &#{'--justify-' + $k} {
-            >div {
-                justify-content: $k;
-            }
-        }
-    }
-
-    @each $k in $directions {
-        &#{'--direction-' + $k} {
-            >div {
-                flex-direction: $k;
-            }
-        }
-    }
-
-    @each $k in map-keys($gutters) {
-        &#{'[gutter=' + $k + ']'} {
-            padding: map-get($gutters, $k);
-        }
-    }
 }

package/src/components/layout/Box/Box.stories.js

@@ -1,5 +1,4 @@
 import Box from './Box.vue';
-import { directions, justifications } from '../../../configurations/flexVariables';
 import gutters from '../../../configurations/gutters';
 
 export default {
@@ -30,42 +29,6 @@ export const Tag = () => ({
 	</div>`,
 });
 
-export const Justify = () => ({
-	data() {
-		return {
-			justifications,
-		};
-	},
-	template: `<div>
-		<farm-box :justify="k" v-for="k in justifications" :key="'justify-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
-			<div>
-				justify {{ k }}
-			</div>
-			<div>
-				another div
-			</div>
-		</farm-box>
-	</div>`,
-});
-
-export const Directions = () => ({
-	data() {
-		return {
-			directions,
-		};
-	},
-	template: `<div>
-		<farm-box :direction="k" v-for="k in directions" :key="'direction-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
-			<div>
-			direction {{ k }}
-			</div>
-			<div>
-				another div
-			</div>
-		</farm-box>
-	</div>`,
-});
-
 export const Gutters = () => ({
 	data() {
 		return { gutters };

package/src/components/layout/Box/Box.vue

@@ -3,8 +3,6 @@
 		:is="tag"
 		:class="{
 			'farm-box': true,
-			[`farm-box--justify-${justify}`]: justify,
-			[`farm-box--direction-${direction}`]: direction,
 		}"
 		:gutter="gutter"
 	>
@@ -23,20 +21,6 @@ export default Vue.extend({
 		 * Html tag
 		 */
 		tag: { type: String, default: 'div' },
-		/**
-		 * Applies the flex-direction css property
-		 */
-		direction: {
-			type: String as PropType<'row' | 'row-reverse' | 'column' | 'column-reverse'>,
-			default: 'row',
-		},
-		/**
-		 * Applies the justify-content css property
-		 */
-		justify: {
-			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
-			default: '',
-		},
 		/**
 		 * Add gutter
 		 */