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

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 {

package/src/components/IconBox/IconBox.vue

@@ -1,10 +1,15 @@
 <template>
-	<div :class="{
-		'farm-icon-box': true,
-		[cssColorClass]: true,
-		'farm-icon-box--inverted': inverted,
-	}" :size="size">
-		<farm-icon :color="inverted ? 'white' : color" :size="size">{{ iconParsed }}</farm-icon>
+	<div
+		:class="{
+			'farm-icon-box': true,
+			[cssColorClass]: true,
+			'farm-icon-box--inverted': inverted,
+		}"
+		:size="size"
+	>
+		<farm-icon :color="inverted ? 'white' : color" :variation="variation" :size="size">
+			{{ iconParsed }}
+		</farm-icon>
 	</div>
 </template>
 
@@ -28,18 +33,23 @@ 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'
 			>,
 			default: 'primary',
 		},
+		variation: {
+			type: String as PropType<'base' | 'darken'>,
+			default: 'base',
+		},
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'md',

package/src/components/IdCaption/IdCaption.vue

@@ -1,15 +1,26 @@
 <template>
-	<div :class="{ 
-		idcaption: true, 
-		'farm-idcaption': true, 
-		'farm-idcaption--noicon': !icon, 
-		'farm-idcaption--noheight': noHeight }"
+	<div
+		:class="{
+			idcaption: true,
+			'farm-idcaption': true,
+			'farm-idcaption--noicon': !icon,
+			'farm-idcaption--noheight': noHeight,
+		}"
 	>
-		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
+		<farm-icon-box
+			v-if="icon"
+			:icon="icon"
+			:color="iconBoxColor"
+			variation="darken"
+			size="md"
+		/>
 		<div
-			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
+			:class="{
+				idcaption__body: true,
+				'idcaption__body--single': !hasTitle || !hasSubtitle,
+			}"
 		>
-			<farm-caption variation="medium" v-if="hasTitle">
+			<farm-caption variation="semiBold" v-if="hasTitle">
 				<span>
 					<slot name="title"></slot>
 				</span>
@@ -20,16 +31,17 @@
 					class="farm-btn--clickable"
 					@click="$emit('onLinkClick')"
 				>
-					<farm-icon size="xs">open-in-new</farm-icon>
+					<farm-icon size="16px">open-in-new</farm-icon>
 				</farm-btn>
 			</farm-caption>
 
-			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
+			<farm-caption variation="regular" color="black" colorVariation="50" v-if="hasSubtitle">
 				<span>
 					<slot name="subtitle"></slot>
 				</span>
 				<farm-copytoclipboard
 					v-if="copyText"
+					sizeIcon="16px"
 					:toCopy="copyText"
 					:successMessage="successMessage"
 					:tooltipColor="tooltipColor"
@@ -57,18 +69,19 @@ export default Vue.extend({
 		iconBoxColor: {
 			type: String as PropType<
 				| 'primary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'secondary'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
 				| 'gray'
 			>,
-			default: 'primary',
+			default: 'secondary-golden',
 		},
 		/**
 		 * Text to be copied to clipboard
@@ -98,12 +111,13 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
 			>,

package/src/components/Label/Label.scss

@@ -4,11 +4,23 @@
     font-size: 12px;
     margin-bottom: 8px;
     line-height: 24px;
-    color: var(--farm-text-primary);
+    color: var(--farm-bw-black-50);
+    font-weight: 600;
 
-    &.farm-label--required::after {
-        content: '*';
-        margin-left: 2px;
-        color: var(--farm-error-base);
+    &.farm-label--required:not(:has(.farm-tooltip)) {
+        &::after {
+            content: '*';
+            margin-left: 2px;
+            color: var(--farm-error-base);
+        }
+    }
+
+    &:has(.farm-tooltip) {
+        .farm-tooltip::before {
+            content: '*';
+            margin-left: 1px;
+            margin-right: 2px;
+            color: var(--farm-error-base);
+        }
     }
 }

package/src/components/Label/Label.stories.js

@@ -27,7 +27,6 @@ export const Primary = () => ({
 
 export const Required = () => ({
 	template: `<div>
-		<farm-label :required="true">Label</farm-label>
 		<farm-label required>Label</farm-label>
 	</div>`,
 });

package/src/components/ListItem/ListItem.scss

@@ -18,18 +18,20 @@
 
     &:hover {
 
+        border-radius: 5px;
+
         @each $color in $theme-colors-list {
 
             &#{'.farm-listitem--' + $color + '-base'} {
-                background-color: themeColor($color);
+                background-color: rgba(themeColor($color), 0.27);
             }
 
             &#{'.farm-listitem--' + $color + '-lighten'} {
-                background-color: themeColor($color, 'lighten');
+                background-color: rgba(themeColor($color, 'lighten'), 0.27);
             }
 
             &#{'.farm-listitem--' + $color + '-darken'} {
-                background-color: themeColor($color, 'darken');
+                background-color: rgba(themeColor($color, 'darken'), 0.27);
             }
         }
     }

package/src/components/ListItem/ListItem.vue

@@ -32,6 +32,8 @@ export default Vue.extend({
 			type: [String, null] as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'error'
 				| 'warning'

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

@@ -12,7 +12,7 @@
 .logger__item {
 	display: flex;
 	flex-direction: row;
-	height: 64px;
+	height: 74px;
 	align-items: center;
 
 	> div {
@@ -52,3 +52,11 @@
 		color: white;
 	}
 }
+
+.logger__item > .farm-btn.logger__item--button {
+	margin-left: 8px;
+}
+
+.logger__item > div .logger__item--spacing-bottom {
+	margin-bottom: 8px;
+}