@farm-investimentos/front-mfe-components 14.2.1 → 15.0.0

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -8,7 +8,7 @@
 					item.sortable ? 'sortable' : '',
 					sortClick[$index].clicked ? 'active' : '',
 					item.sortable ? (sortClick[$index].descending === 'DESC' ? 'DESC' : 'ASC') : '',
-					showCheckbox && $index == 0 ? 'checkbox-container' : ''
+					showCheckbox && $index == 0 ? 'checkbox-container' : '',
 				]"
 				v-bind:style="{
 					textAlign: item.align ? item.align : '',
@@ -28,10 +28,11 @@
 							sortClick[$index][item.value] ? 'farm-icon--desc' : 'farm-icon--asc',
 						]"
 						class="ml-2"
-						size="12px"
-						color="gray"
+						size="16px"
+						color="black"
+						variation="30"
 					>
-						sort-descending
+						sort-reverse-variant
 					</farm-icon>
 				</span>
 

package/src/components/DataTablePaginator/DataTablePaginator.scss

@@ -1,88 +1,90 @@
+@import '../../configurations/theme-colors';
 ul.farm-paginator {
-    display: flex;
-    flex-direction: row;
-    list-style-type: none;
-    align-items: flex-start;
+	display: flex;
+	flex-direction: row;
+	list-style-type: none;
+	align-items: flex-start;
 
-    &--disabled {
-        opacity: 0.7;
-    }
+	&--disabled {
+		opacity: 0.7;
+	}
 
-    >li {
-        align-items: center;
-        display: flex;
+	> li {
+		align-items: center;
+		display: flex;
 
-        button {
-            border: 1px solid var(--farm-stroke-base);
-            border-right: 0;
-            height: 36px;
-            min-width: 36px;
-            display: inline-flex;
-            justify-content: center;
-            align-items: center;
-            font-size: 12px;
-            transition: all ease 0.5s;
-            padding: 4px 12px;
+		button {
+			border: 1px solid var(--farm-bw-black-10);
+			border-right: 0;
+			height: 36px;
+			min-width: 36px;
+			display: inline-flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 12px;
+			font-weight: 400;
+			transition: all ease 0.5s;
+			padding: 4px 12px;
 
-            p {
-                color: var(--farm-neutral-darken);
-                margin: 0;
-            }
-            
-            .farm-icon {
-                color: var(--farm-text-primary);
-            }
-            
-            &:disabled {
-                .farm-icon {
-                    color: var(--farm-neutral-base);
-                }
-            }
-        }
+			p {
+				color: var(--farm-neutral-darken);
+				margin: 0;
+			}
 
-        &:first-child button {
-            border-radius: 4px 0 0 4px;
-        }
+			.farm-icon {
+				color: var(--farm-bw-black-80);
+			}
 
-        &:last-child button {
-            border-right: 1px solid var(--farm-stroke-base);
-            border-radius: 0 4px 4px 0;
-        }
+			&:disabled {
+				background-color: var(--farm-bw-black-5);
+				.farm-icon {
+					color: var(--farm-bw-black-10);
+				}
+			}
+		}
 
-        &.farm-paginator__item--selected {
-            button {
-                background-color: var(--farm-primary-base);
+		&:first-child button {
+			border-radius: 4px 0 0 4px;
+		}
 
-                p{
-                    color: #FFFFFF;  
-                }
-                
-            }
-        }
+		&:last-child button {
+			border-right: 1px solid var(--farm-stroke-base);
+			border-radius: 0 4px 4px 0;
+		}
 
-        &:hover {
-            button:not([disabled="disabled"]) {
-                background-color: var(--farm-primary-lighten);
-            }
-        }
-    }
+		&.farm-paginator__item--selected {
+			button {
+				background-color: var(--farm-primary-base);
+
+				p {
+					color: #ffffff;
+				}
+			}
+		}
+
+		&:hover {
+			button:not([disabled='disabled']) {
+				background-color: transparentize(themeColor('primary', 'lighten'), 0.86);
+			}
+		}
+	}
 }
 
-.farm-paginator-footer{
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    margin: 0;
+.farm-paginator-footer {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	margin: 0;
 
-    &.hidden-perpageoptions {
-        justify-content: flex-end;
-    }
+	&.hidden-perpageoptions {
+		justify-content: flex-end;
+	}
 }
 
 .farm-paginator--gutter {
-    margin: 16px 24px 0;
+	margin: 16px 24px 0;
 }
 
 .farm-typography.button {
-    font-size: 14px;
-}
+	font-size: 14px;
+}

package/src/components/DatePicker/DatePicker.scss

@@ -1,13 +1,9 @@
-.datepicker :deep(.v-picker__actions) {
-	padding: 0;
-	margin: 0 16px 16px;
-}
 .datepicker :deep(.v-btn--active) {
 	background: var(--farm-primary-base);
 }
 
 .datepicker :deep(.v-picker__body) {
-	width: 341px !important;
+	width: 304px !important;
 }
 
 .btn-cancel {
@@ -17,3 +13,7 @@
 .farm-contextmenu {
 	width: 100%;
 }
+
+.v-picker ::v-deep   {
+	@import './vDatePicker.scss';
+}

package/src/components/DatePicker/DatePicker.vue

@@ -46,8 +46,6 @@
 				:id="inputId"
 				:rules="[checkMax, checkMin, checkRequire]"
 				@keyup="keyUpInput"
-				@click="openDatepicker"
-				@onClickIcon="openDatepicker"
 			/>
 		</template>
 	</farm-contextmenu>
@@ -192,8 +190,9 @@ export default Vue.extend({
 			const arr = onlyDMY.split('/');
 			return new Date(arr[2], arr[1] - 1, arr[0]);
 		},
-		openDatepicker() {
+		openDatepicker(event: MouseEvent) {
 			this.menuField = true;
+			event.stopPropagation();
 		},
 		closeDatepicker() {
 			this.menuField = false;

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

@@ -77,7 +77,7 @@ describe('DatePicker component', () => {
 
 	describe('methods', () => {
 		it('openDatepicker', () => {
-			component.openDatepicker();
+			component.openDatepicker({ stopPropagation: jest.fn() });
 			expect(component.menuField).toBeTruthy();
 		});
 

package/src/components/DatePicker/vDatePicker.scss

@@ -0,0 +1,214 @@
+.v-picker__actions {
+    padding: 16px 8px 0;
+    border-top: 1px solid var(--farm-stroke-base);
+    margin-bottom: 16px;
+    margin-left: -4px;
+    margin-right: -4px;
+}
+
+.v-date-picker-header__value {
+    text-align: left;
+
+    button:first-letter {
+        text-transform: capitalize;
+    }
+
+    button:hover:after {
+        border-top-color: var(--v-secondary-base);
+    }
+
+    button:after {
+        position: absolute;
+        content: '';
+        width: 0px;
+        height: 0px;
+        border-top: 0.25rem solid var(--v-primary-base);
+        border-right: 0.25rem solid transparent;
+        border-bottom: 0.25rem solid transparent;
+        border-left: 0.25rem solid transparent;
+        margin-left: 0.5rem;
+        margin-top: 0.5rem;
+    }
+}
+
+.v-date-picker-header {
+    display: grid;
+    grid-template-columns: 1fr 60px 36px;
+    grid-template-areas: ' a b c ';
+
+    .v-btn:nth-child(1) {
+        grid-area: b;
+    }
+
+    >div {
+        grid-area: a;
+    }
+
+    .v-btn:nth-child(3) {
+        grid-area: c;
+    }
+}
+
+.v-date-picker-table__current.v-btn--active {
+    color: white;
+}
+
+.v-date-picker-header {
+    padding: 0;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    margin-left: 16px;
+
+    .mdi-chevron-left::before,
+    .mdi-chevron-right::before {
+        color: var(--farm-neutral-darken);
+        font-size: 20px;
+        font-weight: 900;
+    }
+}
+
+.v-picker__body:has(div > .v-date-picker-years) {
+    li {
+        color: var(--farm-neutral-darken);
+        font-size: 12px;
+        font-weight: 500;
+        width: 70px;
+        margin: 0 auto;
+        border-radius: 5px;
+
+        &.active {
+            color: #fff;
+            background-color: var(--farm-primary-base);
+            border: 1px solid var(--farm-primary-base);
+        }
+
+        &:hover:not(.active) {
+            background-color: var(--farm-primary-lighten);
+        }
+    }
+}
+
+.v-date-picker-header__value {
+    button {
+        padding-left: 0;
+    }
+}
+
+.v-date-picker-table {
+    padding: 0 40px;
+    margin-bottom: 24px;
+    height: auto;
+
+    table {
+        height: 100%;
+        border-spacing:0;
+        border-collapse: collapse;
+
+        td {
+            height: 32px;
+            width: 32px;
+            overflow: hidden;
+            padding: 0;
+            display: table-cell;
+        }
+    }
+
+    table thead th {
+        color: var(--farm-neutral-darken);
+        font-size: 16px;
+        font-weight: 700;
+    }
+
+    table tbody td .v-btn {
+        color: var(--farm-neutral-darken);
+        font-size: 12px;
+        font-weight: 500;
+    }
+
+    table tbody td .v-btn.v-btn--disabled {
+        color: var(--farm-gray-lighten);
+    }
+
+    table tbody td .v-btn.v-date-picker-table__current,
+    .v-btn.v-btn--active {
+        border-radius: 5px;
+        border-color: var(--farm-primary-base);
+        border-width: 2px;
+    }
+
+    table tbody td .v-btn.v-date-picker-table__current {
+        color: var(--farm-primary-base);
+    }
+
+    table tbody td .v-btn.v-btn--active {
+        color: white;
+    }
+
+    table tbody td .v-btn--rounded {
+        border-radius: 5px;
+    }
+
+    table tbody td .v-btn {
+        &:not(.v-btn--active):hover::before {
+            background-color: var(--farm-primary-lighten);
+            opacity: 1;
+        }
+
+        &::before {
+            background-color: transparent;
+        }
+    }
+
+}
+
+&.rangedatepicker .v-date-picker-table {
+    table tbody td .v-btn.v-btn--active {
+        &:not(.v-date-picker--first-in-range, .v-date-picker--last-in-range) {
+            background: var(--farm-primary-lighten);
+            color: var(--farm-primary-base);
+            border-radius: 0;
+            //width: 37px;
+        }
+
+        &.v-date-picker--first-in-range,
+        &.v-date-picker--last-in-range {
+            //width: 37px;
+        }
+
+        &.v-date-picker--first-in-range {
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+        }
+
+        &.v-date-picker--last-in-range {
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+        }
+
+        &.v-date-picker--last-in-range.v-date-picker--first-in-range {
+            border-radius: 5px;
+        }
+    }
+}
+
+&.rangedatepicker.invert-date .v-date-picker-table {
+    table tbody td .v-btn.v-btn--active {
+        &.v-date-picker--first-in-range {
+            border-top-left-radius: 0;
+            border-bottom-left-radius: 0;
+            border-top-right-radius: 5px;
+            border-bottom-right-radius: 5px;
+        }
+
+        &.v-date-picker--last-in-range {
+            border-top-left-radius: 5px;
+            border-bottom-left-radius: 5px;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+        }
+    }
+}

package/src/components/DialogFooter/DialogFooter.scss

@@ -2,7 +2,7 @@
 @import '../../configurations/mixins';
 
 .farm-dialog__footer {
-    border-top: 1px solid var(--farm-stroke-base);
+    border-top: 1px solid var(--farm-gray-lighten);
     padding: gutter('md');
     display: flex;
     flex-direction: row;

package/src/components/DialogFooter/DialogFooter.stories.js

@@ -30,8 +30,8 @@ export const ExtraButton = () => ({
 export const ConfirmIcon = () => ({
 	template: `<div>
         <farm-dialog-footer confirmIcon="check" />
-        <farm-dialog-footer confirmIcon="check" confirmColor="yellow" />
-        <farm-dialog-footer confirmIcon="check" confirmColor="accent" />
+        <farm-dialog-footer confirmIcon="check" confirmColor="warning" />
+        <farm-dialog-footer confirmIcon="check" confirmColor="extra-1" />
     </div>
 	`,
 });

package/src/components/DialogFooter/DialogFooter.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="farm-dialog__footer">
-		<farm-btn v-if="hasCancel" color="primary" outlined @click="$emit('onClose')">
+		<farm-btn v-if="hasCancel" color="primary" plain @click="$emit('onClose')">
 			{{ closeLabel }}
 		</farm-btn>
 		

package/src/components/DialogHeader/DialogHeader.scss

@@ -3,10 +3,9 @@
 .farm-dialog-header__close {
 	position: absolute;
 	margin-top: 0;
+	margin-right: -8px;
 	font-size: 16px;
-
 	transition: all 0.4s;
-
 	&:hover {
 		opacity: 0.8;
 	}
@@ -18,7 +17,6 @@ header {
 	background-color: #fff;
 	font-weight: 700;
 	color: var(--farm-primary-base);
-	border-bottom: 1px solid var(--farm-stroke-divider);
 	display: flex;
 	justify-content: flex-start;
 	align-items: center;
@@ -28,6 +26,7 @@ header {
 		align-items: center;
 		width: 100%;
 		margin-bottom: 0;
+		color: var(--farm-bw-black-80);
 		@include ellipsis;
 	}
 }

package/src/components/DialogHeader/DialogHeader.vue

@@ -1,7 +1,7 @@
 <template>
 	<header>
-		<farm-icon v-if="iconTitle" size="16px" color="primary">{{ iconTitle }}</farm-icon>
-		<farm-caption v-if="title" variation="regular" color="primary" bold>
+		<farm-icon v-if="iconTitle" size="16px" color="primary" class="mr-2">{{ iconTitle }}</farm-icon>
+		<farm-caption v-if="title" variation="semiBold">
 			{{ title }}
 		</farm-caption>
 
@@ -10,12 +10,12 @@
 		<farm-btn
 			v-if="hasCloseIcon"
 			icon
-			color="secondary"
+			color="primary"
 			class="farm-dialog-header__close"
 			title="Fechar"
 			@click="onClose"
 		>
-			<farm-icon role="button" size="md"> window-close </farm-icon>
+			<farm-icon role="button" size="24px"> window-close </farm-icon>
 		</farm-btn>
 	</header>
 </template>

package/src/components/Form/Form.stories.js

@@ -125,7 +125,7 @@ export const Secondary = () => ({
 			<section>
 				<div>
 					<farm-label>not</farm-label>
-					<farm-textfield v-model="form.not" />
+					<farm-textfield-v2 v-model="form.not" />
 				</div>
 			</section>
 

package/src/components/Icon/Icon.scss

@@ -34,6 +34,12 @@
 			font-size: $value;
 		}
 	}
+
+	@each $v in $bwVariations {
+		&.farm-icon--black-#{$v} {
+			color: var(--farm-bw-black-#{$v});
+		}
+	}
 }
 
 @each $color in $theme-colors-list {

package/src/components/Icon/Icon.stories.js

@@ -2,6 +2,7 @@ import { withDesign } from 'storybook-addon-designs';
 import Icon from './Icon.vue';
 import sizes from '../../configurations/sizes';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+import bwThemeColors from '../../configurations/_theme-colors-bw.scss';
 import iconsList from './icons_list';
 const colors = Object.keys(baseThemeColors);
 
@@ -70,6 +71,23 @@ export const ColorsDarken = () => ({
 	</div>`,
 });
 
+export const ColorsBlack = () => ({
+	data() {
+		return {
+			bwColors: Object.keys(bwThemeColors),
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon 
+			v-for="bw in bwColors"
+			:key="color" 
+			:color="bw.split('-')[0]"
+			:variation="bw.split('-')[1]">
+            book
+        </farm-icon>
+	</div>`,
+});
+
 export const Sizes = () => ({
 	data() {
 		return {
@@ -125,7 +143,7 @@ export const ListOfIcons = () => ({
 		},
 	},
 	template: `<div>
-        <farm-textfield v-model="filterKey" style="margin: 0 auto; width: 240px;" />
+        <farm-textfield-v2 v-model="filterKey" style="margin: 0 auto; width: 240px;" />
         <div class="icons-container__list">
             <div v-for="icon of iconsList" :key="'icon_' + icon">
                 <farm-icon>

package/src/components/Icon/Icon.vue

@@ -18,15 +18,18 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
 				| 'gray'
+				| 'black'
+				| 'white'
 			>,
 			default: 'primary',
 		},
@@ -37,7 +40,9 @@ export default Vue.extend({
 			default: 'default',
 		},
 		variation: {
-			type: String as PropType<'lighten' | 'base' | 'darken'>,
+			type: String as PropType<
+				'lighten' | 'base' | 'darken' | '80' | '50' | '40' | '30' | '10' | '5'
+			>,
 			default: 'base',
 		},
 	},
@@ -58,6 +63,7 @@ export default Vue.extend({
 				['mdi-' + this.icon]: true,
 				'farm-icon--lighten': this.variation === 'lighten',
 				'farm-icon--darken': this.variation === 'darken',
+				['farm-icon--black-' + this.variation]: this.color === 'black',
 				...obj,
 			};
 		},

package/src/components/IconBox/IconBox.stories.js

@@ -43,6 +43,22 @@ export const Colors = () => ({
 	</div>`,
 });
 
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon-box
+			v-for="color of colors"
+			:key="color"
+			:color="color"
+			variation="darken"
+			icon="book" />
+	</div>`,
+});
+
 export const Sizes = () => ({
 	data() {
 		return {