@farm-investimentos/front-mfe-components 14.1.5 → 14.2.0

package/package.json

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

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

@@ -2,11 +2,11 @@
 @import '../../../configurations/mixins';
 @import '../../../configurations/theme-colors';
 $butonSizes: (
-	"xs": 20px,
-	"sm": 28px,
-	"md": 32px,
-	"lg": 48px,
-	"xl": 56px,
+	'xs': 20px,
+	'sm': 28px,
+	'md': 32px,
+	'lg': 48px,
+	'xl': 56px,
 	'default': 36px,
 );
 
@@ -37,8 +37,7 @@ $butonSizes: (
 		width: 100%;
 	}
 
-	@each $size,
-	$value in $sizes {
+	@each $size, $value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
 			height: map-get($butonSizes, $size);
@@ -136,8 +135,7 @@ $butonSizes: (
 		color: gray;
 	}
 
-	@each $size,
-	$value in $sizes {
+	@each $size, $value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
 		}
@@ -162,11 +160,30 @@ $butonSizes: (
 			::v-deep .farm-btn__content i.mdi {
 				color: var(--farm-#{$color}-base);
 			}
+
+			&.lighten-variation-icon {
+				&:hover {
+					color: var(--farm-#{$color}-lighten);
+				}
+
+				::v-deep .farm-btn__content i.mdi {
+					color: var(--farm-#{$color}-lighten);
+				}
+			}
+
+			&.darken-variation-icon {
+				&:hover {
+					color: var(--farm-#{$color}-darken);
+				}
+
+				::v-deep .farm-btn__content i.mdi {
+					color: var(--farm-#{$color}-darken);
+				}
+			}
 		}
 	}
 
 	&#{'.farm-btn--white'}:not(.farm-btn--disabled) {
-
 		::v-deep .farm-btn__content i.mdi {
 			color: white;
 		}
@@ -190,7 +207,6 @@ $butonSizes: (
 				}
 			}
 		}
-
 	}
 
 	.farm-btn--extra,
@@ -270,4 +286,4 @@ $butonSizes: (
 		width: 100%;
 		margin: 0;
 	}
-}
+}

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

@@ -201,6 +201,16 @@ export const Iconed = () => ({
             <farm-icon>book</farm-icon>
         </farm-btn>
 
+		<h4>Darken Icon</h4>
+        <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="darken">
+            <farm-icon>book</farm-icon>
+        </farm-btn>
+
+		<h4>Lighten Icon</h4>
+        <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="lighten">
+            <farm-icon>book</farm-icon>
+        </farm-btn>
+
 		<h4>Disabled Icon</h4>
         <farm-btn icon v-for="color of colors" :key="'disabled_random_2_' + color" :color="color" :disabled="true">
             <farm-icon>book</farm-icon>

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

@@ -87,6 +87,13 @@ export default Vue.extend({
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'default',
 		},
+		/**
+		 * Color Variation to Icons
+		 */
+		variation: {
+			type: String as PropType<'base' | 'lighten' | 'darken'>,
+			default: 'base',
+		},
 	},
 
 	computed: {
@@ -105,6 +112,7 @@ export default Vue.extend({
 				'farm-btn--icon': this.icon,
 				'farm-btn--full': this.full,
 				['farm-btn--' + this.color]: true,
+				[this.variation + '-variation-icon']: true,
 				...obj,
 			};
 		},

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -10,6 +10,7 @@
 	}
 
 	.farm-icon {
+		transition: transform .8s ease-in-out;  
 		&.farm-icon--asc {
 			transform: rotateX(180deg);
 		}
@@ -19,13 +20,19 @@
 th.sortable {
 	cursor: pointer;
 
+
 	&:not(.active) {
 		&:hover {
-			.farm-icon {
-				opacity: 0.5 !important;
+			.farm-icon::before {
+				color: var(--farm-gray-base) !important;
 			}
 		}
 	}
+
+	.header-text {
+		transition: color 0.5s ease;
+	}
+
 }
 
 th span.span-checkbox {
@@ -47,7 +54,7 @@ th {
 }
 
 :deep(.mdi-sort-descending)::before {
-	color: var(--farm-gray-base);
+	color: var(--farm-secondary-base);
 	font-size: 12px;
 	font-weight: 900;
 }
@@ -55,4 +62,4 @@ th {
 .farm-icon--desc,
 .farm-icon--asc {
 	margin-top: 3.5px;
-}
+}

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -23,10 +23,37 @@ export const Primary = () => ({
 		return {
 			headers,
 			sortClick: [],
-			firstSelected: false,
+			firstSelected: true,
+			
 		};
 	},
-	template: `<farm-datatable-header :headers="headers" :sortClick="sortClick" :showCheckbox="false" :firstSelected="firstSelected" />`,
+	template: `<farm-datatable-header
+		:headers="headers"
+		:sortClick="sortClick"
+		:showCheckbox="false"
+		:firstSelected="firstSelected"
+		:selectedIndex="1"
+	/>`,
+});
+
+export const SetDescInititalOrder = () => ({
+	data() {
+		let customHeaders = [...headers];
+		customHeaders[1].order = 'DESC';
+		return {
+			headers: customHeaders,
+			sortClick: [],
+			firstSelected: true,
+			
+		};
+	},
+	template: `<farm-datatable-header
+		:headers="headers"
+		:sortClick="sortClick"
+		:showCheckbox="false"
+		:firstSelected="firstSelected"
+		:selectedIndex="1"
+	/>`,
 });
 
 export const CheckBox = () => ({
@@ -46,7 +73,13 @@ export const CheckBox = () => ({
 			firstSelected: false,
 		};
 	},
-	template: `<farm-datatable-header :headers="headers" :headerProps="headerProps" :sortClick="sortClick" :firstSelected="firstSelected" :showCheckbox="true" :selectedIndex="1" />`,
+	template: `<farm-datatable-header
+		:headers="headers"
+		:headerProps="headerProps"
+		:sortClick="sortClick"
+		:firstSelected="firstSelected"
+		:showCheckbox="true"
+		:selectedIndex="1" />`,
 });
 
 const headerProps = { someItems: true, everyItem: true };
@@ -57,13 +90,14 @@ const headers = [
 		sortable: true,
 		value: 'name',
 		align: 'left',
+		width: 120,
 	},
 	{
 		text: 'Aprovado',
 		sortable: true,
 		value: 'approvedAmount',
 		align: 'center',
-		width: 320,
+		width: 160,
 	},
 	{
 		text: 'Disponível',

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -118,10 +118,13 @@ export default Vue.extend({
 			return value ? 'DESC' : 'ASC';
 		},
 		clickSort(value, index) {
+			const isClicked = this.sortClick[index].clicked;
 			this.removeClicked();
 			this.sortClick[index].clicked = true;
 			this.sortClick[index].show = true;
-			this.sortClick[index][value] = !this.sortClick[index][value];
+			if (isClicked) {
+				this.sortClick[index][value] = !this.sortClick[index][value];
+			}
 			this.sortClick[index].descending = this.getTypeSort(this.sortClick[index][value]);
 			this.$emit('onClickSort', this.sortClick[index]);
 		},
@@ -167,8 +170,11 @@ export default Vue.extend({
 	created() {
 		for (let i = 0; i < this.headers.length; i += 1) {
 			this.sortClick.push({
-				[this.headers[i].value]: false,
-				descending: 'ASC',
+				[this.headers[i].value]:
+					this.firstSelected &&
+					i === this.selectedIndex &&
+					this.headers[i].order === 'DESC',
+				descending: this.headers[i].order || 'ASC',
 				field: this.headers[i].value,
 				clicked: this.checkFirstSelected(i),
 				show: this.checkFirstSelected(i),

package/src/components/ProgressBar/ProgressBar.scss

@@ -14,11 +14,11 @@ $radius: 5px;
 
     @each $color in $colors {
         &#{'.farm-progressbar--' + $color} {
-            background-color: var(--v-#{$color}-base);
+            background-color: var(--farm-#{$color}-base);
         }
 
         &#{'.farm-progressbar--value-' + $color}>div {
-            background-color: var(--v-#{$color}-base);
+            background-color: var(--farm-#{$color}-base);
         }
     }
 

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -14,7 +14,8 @@ export default {
 		docs: {
 			description: {
 				component: `ProgressBar<br />
-				selector: <em>farm-progressbar</em>`,
+				selector: <em>farm-progressbar</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},
@@ -35,7 +36,7 @@ export const CustomColors = () => ({
 			val: 35,
 		};
 	},
-	template: '<farm-progressbar :value="val" backgroundColor="accent" valueColor="secondary" />',
+	template: '<farm-progressbar :value="val" background-color="info" value-color="secondary" />',
 });
 
 export const CustomHexaColors = () => ({
@@ -44,5 +45,5 @@ export const CustomHexaColors = () => ({
 			val: 35,
 		};
 	},
-	template: '<farm-progressbar :value="val" backgroundColor="#FFFF00" valueColor="#00FF00" />',
+	template: '<farm-progressbar :value="val" background-color="#FFFF00" value-color="#00FF00" />',
 });

package/src/components/ProgressBar/ProgressBar.vue

@@ -4,7 +4,7 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-progressbar',
@@ -12,11 +12,39 @@ export default Vue.extend({
 		/**
 		 * backgroundColor
 		 */
-		backgroundColor: { type: String, default: 'secondary' },
+		backgroundColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| any
+			>,
+			default: 'primary',
+		},
 		/**
 		 * color
 		 */
-		valueColor: { type: String, default: 'error' },
+		valueColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| any
+			>,
+			default: 'error',
+		},
 		/**
 		 * Value (form 0 to 100)
 		 */

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

@@ -3,11 +3,13 @@ import ProgressBar from '../ProgressBar';
 
 describe('ProgressBar component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ProgressBar, {
 			propsData: { value: 40 },
 		});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -19,4 +21,11 @@ describe('ProgressBar component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('computed properties', () => {
+		it('classes', () => {
+			expect(component.classes).toBeDefined();
+			expect(component.classes).toHaveProperty('farm-progressbar');
+		});
+	});
 });

package/src/scss/VuejsDialog.scss

@@ -28,7 +28,7 @@
     margin: 24px 0;
     font-size: 12px;
     line-height: 20px;
-    word-break: break-all;
+    word-break: break-word;
 
     ul {
         margin-left: 16px;