@farm-investimentos/front-mfe-components 15.0.1 → 15.0.3

package/package.json

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

package/src/components/AlertReload/AlertReload.scss

@@ -1,7 +1,7 @@
 @import '../../configurations/functions';
 
 .farm-alert-reload {
-    border: 1px solid var(--v-error-base);
+    border: 1px solid var(--farm-error-base);
     border-radius: 8px;
     padding: gutter('sm') gutter('md');
     display: flex;

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

@@ -27,3 +27,10 @@ export const Disabled = () => ({
 export const List = () => ({
 	template: `<farm-btn-export :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />`,
 });
+
+export const CustomColor = () => ({
+	template: `<div>
+		<farm-btn-export color="info" />
+		<farm-btn-export color="info" :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />
+	</div>`,
+});

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

@@ -5,15 +5,16 @@
 		class="farm-btn--responsive"
 		outlined
 		title="Exportar"
-		color="secondary-green"
+		:color="$attrs.color"
 		:disabled="disabled"
 	>
 		<i :class="{ 'mr-2': true, 'mdi-file-export-outline': true, mdi: true }"></i>
 		Exportar
 	</farm-btn>
+	
 	<farm-contextmenu v-else v-model="value" :bottom="true">
 		<template v-slot:activator="{}">
-			<farm-btn outlined title="Exportar" color="secondary" @click="toggleValue">
+			<farm-btn outlined title="Exportar" :color="$attrs.color" @click="toggleValue">
 				Exportar
 				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
 			</farm-btn>
@@ -22,7 +23,7 @@
 			<farm-listitem
 				v-for="item in optionsList"
 				clickable
-				hoverColor="primary"
+				:hoverColor="$attrs.color || 'primary'"
 				hoverColorVariation="lighten"
 				:key="'exportbutton_key_' + item.label"
 				:title="item.label"

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

@@ -13,3 +13,11 @@ export const CustomLabel = () => ({
 	components: { ImportButton },
 	template: '<farm-btn-import label="Label custom" />',
 });
+
+export const CustomColors = () => ({
+	components: { ImportButton },
+	template: `<div>
+		<farm-btn-import color="info" variation="lighten" />
+		<farm-btn-import color="info" variation="darken" />
+	</div>`,
+});

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

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

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

@@ -20,3 +20,16 @@ export const List = () => ({
 			@onClick="listener"
 		/>`,
 });
+
+export const CustomColor = () => ({
+	methods: {
+		listener(key) {
+			alert('Handler for item ' + key);
+		},
+	},
+	template: `<farm-btn-multipleimport
+			color="info"
+			:optionsList="[{ listenerKey: 1, title: 'XLS teste'}, { listenerKey: 2, title: 'CSV teste novo'}]"
+			@onClick="listener"
+		/>`,
+});

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

@@ -1,7 +1,7 @@
 <template>
 	<farm-contextmenu v-model="value" :bottom="true">
 		<template v-slot:activator="{}">
-			<farm-btn outlined title="Importar" color="secondary" @click="toggleValue">
+			<farm-btn outlined title="Importar" v-bind="$attrs">
 				Importar
 				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
 			</farm-btn>
@@ -10,7 +10,7 @@
 			<farm-listitem
 				v-for="item in optionsList"
 				clickable
-				hoverColor="primary"
+				:hoverColor="$attrs.color || 'primary'"
 				hoverColorVariation="lighten"
 				:key="'importbutton_key_' + item.title"
 				:title="item.title"
@@ -49,9 +49,6 @@ export default Vue.extend({
 		onClick(key) {
 			this.$emit('onClick', key);
 		},
-		toggleValue() {
-			this.value = !this.value;
-		},
 	},
 });
-</script>
+</script>

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

@@ -9,10 +9,14 @@ export const Primary = () => ({
 	template: '<farm-btn-toggle label="Botão" />',
 });
 
-export const Secondary = () => ({
+export const PositionRight = () => ({
 	template: '<farm-btn-toggle label="Botão" position="right" />',
 });
 
 export const Opened = () => ({
 	template: '<farm-btn-toggle label="Botão" :pressed="true" />',
 });
+
+export const CustomColor = () => ({
+	template: '<farm-btn-toggle color="info" label="Botão" />',
+});

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

@@ -1,19 +1,22 @@
 <template>
 	<farm-btn
 		@click="onClick"
-		dense
+		v-bind="$attrs"
 		class="farm-btn--responsive"
 		:class="{
 			'v-btn_icon--prepend': prepend,
 			'v-btn_icon--apppend': !prepend,
 		}"
-		:color="color"
 		:outlined="!open"
 		:title="label"
 	>
-		<farm-icon v-if="prepend" class="mr-3 ml-0">{{ `chevron-${open ? 'up' : 'down'}` }}</farm-icon>
+		<farm-icon v-if="prepend" class="mr-3 ml-0">{{
+			`chevron-${open ? 'up' : 'down'}`
+		}}</farm-icon>
 		{{ label }}
-		<farm-icon v-if="!prepend" class="ml-3 mr-0">{{ `chevron-${open ? 'up' : 'down'}` }}</farm-icon>
+		<farm-icon v-if="!prepend" class="ml-3 mr-0">{{
+			`chevron-${open ? 'up' : 'down'}`
+		}}</farm-icon>
 	</farm-btn>
 </template>
 <script lang="ts">
@@ -35,13 +38,6 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
-		/**
-		 * Cor do botão - usando as do tema do vuetify
-		 */
-		color: {
-			type: String,
-			default: 'primary',
-		},
 		/**
 		 * Pressionado ou não
 		 */

package/src/components/DatePicker/vDatePicker.scss

@@ -14,7 +14,7 @@
     }
 
     button:hover:after {
-        border-top-color: var(--v-secondary-base);
+        border-top-color: var(--farm-primary-base);
     }
 
     button:after {
@@ -22,7 +22,7 @@
         content: '';
         width: 0px;
         height: 0px;
-        border-top: 0.25rem solid var(--v-primary-base);
+        border-top: 0.25rem solid var(--farm-secondary-green-base);
         border-right: 0.25rem solid transparent;
         border-bottom: 0.25rem solid transparent;
         border-left: 0.25rem solid transparent;

package/src/components/Loader/Loader.scss

@@ -6,8 +6,8 @@ $loader-overlay-transition: all 0.6s ease-in-out !default;
 .farm-loader {
 	width: 70px;
 	height: 70px;
-	color: var(--v-secondary-base) !important;
-	caret-color: var(--v-secondary-base) !important;
+	color: var(--farm-primary-base) !important;
+	caret-color: var(--farm-primary-base) !important;
 	position: relative;
 	display: inline-flex;
 	vertical-align: middle;

package/src/components/Typography/Typography.stories.js

@@ -183,7 +183,7 @@ export const LineHeight = () => ({
 			tag="p"
 			:lineHeight="h"
 			:key="h"
-			style="border: 1px solid var(--v-gray-lighten2); padding: 8px;"
+			style="border: 1px solid var(--farm-gray-base); padding: 8px;"
 		>
 			Typography - height {{ h }}<br />
 			Lorem ipsum dolor sit amet, consectetur adipiscing elit,

package/src/main.ts

@@ -15,7 +15,6 @@ import ModalPromptUser from './components/ModalPromptUser';
 
 import TableContextMenu from './components/TableContextMenu';
 import IconBox from './components/IconBox';
-import CardContext from './components/CardContext';
 
 import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';
@@ -39,7 +38,6 @@ export {
 	ModalPromptUser,
 	DefaultButton,
 	IconBox,
-	CardContext,
 	Collapsible,
 	IdCaption,
 	ResourceMetaInfo,

package/src/scss/VMenuOverrides.scss

@@ -7,7 +7,7 @@
         padding: 0;
 
         div.v-list-item {
-            border-bottom: 1px solid var(--v-gray-lighten2);
+            border-bottom: 1px solid var(--farm-gray-lighten2);
 
             &:last-child {
                 border-bottom: 0;

package/src/components/Buttons/MultiImportButton/MultiImportButton.scss

@@ -1,18 +0,0 @@
-.farm-btn.farm-btn--import {
-	background: var(--v-extra-lighten2);
-	color: var(--v-gray-lighten5);
-	.farm-btn__content i.mdi {
-		margin-right: 1rem;
-		color: var(--v-gray-lighten5);
-	}
-}
-
-.v-list-item {
-	border-bottom: 1px solid var(--v-gray-lighten2);
-	&:last-child {
-		border-bottom: none;
-	}
-}
-.v-list-item--link {
-	font-size: 0.875rem;
-}

package/src/components/CardContext/CardContext.scss

@@ -1,54 +0,0 @@
-.card-context {
-	width: 100%;
-	padding: 1.5rem;
-	background: #ffffff;
-	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
-	border-radius: 5px;
-
-	&.card-context--outlined {
-		box-shadow: none;
-		border: 1px solid var(--v-gray-lighten2);
-	}
-}
-
-.card-context.height-full {
-	height: 100%;
-}
-
-.card-context-header {
-	width: 100%;
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: space-between;
-}
-
-.card-context-content {
-	width: calc(100% - 56px);
-	height: 40px;
-	display: flex;
-	align-items: center;
-}
-
-.card-context-title {
-	color: #5c5c5c;
-	margin: 0;
-	font-size: 0.75rem;
-	&.card-context-content--bold {
-		font-size: 0.875rem;
-		font-weight: bold;
-		color: #1c1c1c;
-	}
-}
-
-.card-context-body {
-	width: 100%;
-	padding-top: 1rem;
-}
-
-.card-context-loading-or-error {
-	width: 100%;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}

package/src/components/CardContext/CardContext.stories.js

@@ -1,75 +0,0 @@
-import CardContext from './CardContext.vue';
-
-export default {
-	title: 'Surfaces/CardContext',
-	component: CardContext,
-	parameters: {
-		docs: {
-			description: {
-				component: `Card Context<br />
-				selector: <em>farm-card-context</em>
-				`,
-			},
-		},
-		viewMode: 'docs',
-	},
-};
-
-export const Primary = () => ({
-	template: `
-        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card">
-            <p>Conteúdo do Card</p>
-        </farm-card-context>
-    `,
-});
-
-export const Secondary = () => ({
-	template: `
-        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" bold>
-            <p>Conteúdo do Card</p>
-        </farm-card-context>
-    `,
-});
-
-export const WithLoading = () => ({
-	template: `
-        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isLoading>
-            <p>Conteúdo do Card</p>
-        </farm-card-context>
-    `,
-});
-
-export const WithLoadingLarge = () => ({
-	template: `
-        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isLoading largeLoading>
-            <p>Conteúdo do Card</p>
-        </farm-card-context>
-    `,
-});
-
-export const WithError = () => ({
-	components: { CardContext },
-	template: `
-        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isError>
-            <p>Conteúdo do Card</p>
-        </farm-card-context>
-    `,
-});
-
-export const NoIcon = () => ({
-	components: { CardContext },
-	template: `
-        <farm-card-context title="Titulo do Card">
-            <p>Conteúdo do Card</p>
-        </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

@@ -1,130 +0,0 @@
-<template>
-	<div
-		:class="{
-			'card-context': true,
-			'height-full': this.full,
-			'card-context--outlined': this.outlined,
-		}"
-	>
-		<div class="card-context-header" v-if="isSuccess && title">
-			<farm-icon-box v-if="icon" :icon="icon" />
-			<div class="card-context-content">
-				<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">
-			<slot></slot>
-		</div>
-		<div class="card-context-loading-or-error" v-if="isLoading">
-			<farm-loader :size="isLargeLoading" />
-		</div>
-		<div class="card-context-loading-or-error" v-if="isError">
-			<farm-alert-reload :label="errorLabel" @onClick="$emit('onLoad')" />
-		</div>
-	</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-
-export default Vue.extend({
-	name: 'farm-card-context',
-	props: {
-		/**
-		 * Title
-		 */
-		title: {
-			type: String,
-			required: true,
-		},
-		/**
-		 * Set bold text
-		 */
-		bold: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Icon (from Material Icons)
-		 * Example: mdi-chart-bar
-		 */
-		icon: {
-			type: String,
-			default: null,
-		},
-		/**
-		 * Show loader
-		 */
-		isLoading: {
-			type: Boolean,
-			default: false,
-		},
-		largeLoading: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Show error alert
-		 */
-		isError: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Label to be shown in error alert
-		 */
-		errorLabel: {
-			type: String,
-			default: 'Ocorreu um erro',
-		},
-		/**
-		 * Is full
-		 */
-		full: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Is outlined
-		 */
-		outlined: {
-			type: Boolean,
-			default: false,
-		},
-		/**
-		 * Show Tooltip and help text
-		 */
-		tooltipText: {
-			type: String,
-			default: null,
-		}
-	},
-	computed: {
-		isSuccess() {
-			return !this.isLoading && !this.isError;
-		},
-		isLargeLoading() {
-			return this.largeLoading ? 'normal' : 'small';
-		},
-	},
-});
-</script>
-
-<style lang="scss" scoped>
-@import './CardContext.scss';
-</style>

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

@@ -1,39 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import CardContext from '../CardContext';
-
-describe('CardContext component', () => {
-	let wrapper;
-	let component;
-
-	beforeEach(() => {
-		wrapper = shallowMount(CardContext, {
-			propsData: {
-				title: 'title',
-			},
-		});
-		component = wrapper.vm;
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-
-	describe('mount component', () => {
-		it('renders correctly', () => {
-			expect(wrapper.element).toMatchSnapshot();
-		});
-	});
-
-	describe('Computed properties', () => {
-		it('Should compute isLargeLoading for false', () => {
-			expect(component.isLargeLoading).toEqual('small');
-		});
-
-		it('Should compute isLargeLoading for true', async () => {
-			await wrapper.setProps({
-				largeLoading: true,
-			});
-			expect(component.isLargeLoading).toEqual('normal');
-		});
-	});
-});

package/src/components/CardContext/index.ts

@@ -1,3 +0,0 @@
-import CardContext from './CardContext.vue';
-
-export default CardContext;