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

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;
+}

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -7,24 +7,41 @@
 	>
 		<farm-icon size="16px">{{ mdiIconName }}</farm-icon>
 		<div>
-			<farm-caption variation="regular">
+			<farm-bodysmall
+				variation="regular"
+				color="black"
+				colorVariation="50"
+				class="logger__item--spacing-bottom"
+			>
 				{{ item.formattedDate }}
-			</farm-caption>
-			<farm-bodytext :type="2" variation="bold">
+			</farm-bodysmall>
+			<farm-bodytext
+				:type="2"
+				variation="bold"
+				color="black"
+				colorVariation="50"
+				class="logger__item--spacing-bottom"
+			>
 				{{ item.message }}
 			</farm-bodytext>
-			<farm-caption variation="regular" v-if="item.userName">
-				<farm-icon color="black" size="xs">account-circle</farm-icon>
+			<farm-bodysmall
+				variation="regular"
+				color="black"
+				colorVariation="50"
+				v-if="item.userName"
+			>
+				<farm-icon color="black" variation="50" size="xs">account-circle</farm-icon>
 				{{ item.userName }}
-			</farm-caption>
+			</farm-bodysmall>
 			<farm-caption variation="regular">
 				{{ item.extraMessage }}
 			</farm-caption>
 		</div>
 		<farm-btn
 			v-if="hasDetails"
-			plain
+			outlined
 			title="Ver Detalhes"
+			class="logger__item--button"
 			:color="buttonColor"
 			@click="callDetails"
 		>
@@ -69,7 +86,7 @@ export default Vue.extend({
 				return 'error';
 			}
 
-			return 'secondary';
+			return 'primary';
 		},
 		hasDetails(): boolean {
 			return !!this.item.details;

package/src/components/Logger/LoggerItem/__tests__/LoggerItem.spec.js

@@ -73,7 +73,7 @@ describe('LoggerItem component', () => {
 					status: 'primary',
 				},
 			});
-			expect(component.buttonColor).toEqual('secondary');
+			expect(component.buttonColor).toEqual('primary');
 		});
 
 		it('Should not have a detail button', async () => {

package/src/components/MainFilter/MainFilter.stories.js

@@ -61,16 +61,16 @@ export const Application = () => ({
 			Extra filters
 			</farm-col>
 			<farm-col cols="12" md="3">
-				<farm-textfield />
+				<farm-textfield-v2 />
 			</farm-col>
 			<farm-col cols="12" md="3">
-				<farm-textfield />
+				<farm-textfield-v2 />
 			</farm-col>
 			<farm-col cols="12" md="3">
-				<farm-textfield />
+				<farm-textfield-v2 />
 			</farm-col>
 			<farm-col cols="12" md="3">
-				<farm-textfield />
+				<farm-textfield-v2 />
 			</farm-col>
 		</farm-row>
 	</div>`,

package/src/components/Modal/Modal.scss

@@ -17,14 +17,14 @@
         left: 0;
         width: 100vw;
         height: 100vh;
-        opacity: 0.46;
-        background-color: rgb(33, 33, 33) !important;
+        opacity: 0.36;
+        background-color: var(--farm-gray-darken);
         z-index: 101;
     }
 
     &--container {
         background-color: white;
-        border-radius: 8px;
+        border-radius: 4px;
         max-height: calc(100vh - 48px);
         position: relative;
         overflow: hidden;

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -92,4 +92,30 @@ export const Slot = () => ({
 			reabrir
 			</farm-btn>
 		</div>`,
+});
+
+export const OnConfirm = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	methods: {
+		onConfirm() {
+			alert('On confirm triggered');
+		}
+	},
+	template: `<div>
+		<farm-prompt-user
+			match="CONFIRMAR"
+			title="Título"
+			subtitle="Digite CONFIRMAR para habilitar"
+			v-model="showPrompt"
+			@onConfirm="onConfirm"
+		/>
+		click:
+		<farm-btn color="primary" @click="showPrompt = true;">
+		reabrir
+		</farm-btn>
+		</div>`,
 });

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -5,6 +5,9 @@
 		</template>
 		<template v-slot:content>
 			<section class="modal-content">
+				<!--
+				@slot subtitle content
+				-->
 				<slot name="subtitle"></slot>
 				<farm-promptusertoconfirm
 					v-if="inputVal"
@@ -60,6 +63,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
@@ -114,6 +119,11 @@ export default Vue.extend({
 			this.inputVal = false;
 		},
 		confirm() {
+			/**
+			 * input is correct filled and confirm button is triggered
+			 *
+			 * @event onConfirm
+			 */
 			this.$emit('onConfirm');
 			this.inputVal = false;
 		},

package/src/components/MultipleFilePicker/MultipleFilePicker.scss

@@ -1,7 +1,7 @@
 section {
-	border: 2px dashed var(--v-gray-lighten1);
+	border: 2px dashed var(--farm-primary-base);
 	border-radius: 2rem;
-	background-color: var(--v-gray-lighten4);
+	background-color: var(--farm-primary-lighten);
 	padding: 1.5rem;
 	position: relative;
 	min-height: 12rem;
@@ -20,7 +20,7 @@ section {
 	}
 
 	&.highlight {
-		background: var(--v-secondary-lighten5);
+		background: var(--farm-primary-lighten);
 		opacity: 0.5;
 	}
 
@@ -32,7 +32,7 @@ section {
 		}
 		p {
 			font-weight: 600;
-			color: var(--v-gray-base);
+			color: var(--farm-bw-black-50);
 		}
 	}
 
@@ -56,7 +56,7 @@ section {
 	span {
 		display: block;
 		font-size: 24px;
-		color: #fff;
+		color: var(--farm-bw-white); 
 	}
 
 	@media screen and (max-width: 600px) {
@@ -83,9 +83,10 @@ section {
 
 .itemFilesStyled {
 	width: 100%;
-	background-color: #858585;
+	background-color: var(--farm-bw-black-5);
+	border: 1px solid var(--farm-bw-black-30);
 	border-radius: 50px;
-	color: white;
+	color: var(--farm-bw-white);
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
@@ -106,6 +107,10 @@ section {
 	display: flex;
 	align-items: center;
 
+	p{
+		margin-top: 2px;
+	}
+
 	@media screen and (max-width: 600px) {
 		display: block;
 		text-align: center;
@@ -119,7 +124,7 @@ section {
 	width: 15rem;
 	span {
 		font-size: 1.5rem;
-		color: #fff;
+		color: var(--farm-bw-black-50);	
 		cursor: pointer;
 	}
 
@@ -143,19 +148,21 @@ section {
 }
 
 .download-button.farm-btn {
-	background-color: #858585 !important;
-	color: #fff;
+	background-color: var(--farm-bw-black-30) !important;
+	color: var(--farm-bw-black-50);
 	margin-right: 1rem;
 
 	&__content {
-		color: #fff;
+		color: var(--farm-bw-black-50);
 	}
 }
 
 .download-button__icon {
-	color: #fff !important;
+	color: var(--farm-bw-black-50) !important;
 }
 
+
+
 .upload-icon {
 	cursor: pointer;
 }

package/src/components/MultipleFilePicker/MultipleFilePicker.stories.js

@@ -60,3 +60,15 @@ export const InvalidFiles = () => ({
 			@onInvalidFiles="onInvalidFiles" />
 	</div>`,
 });
+
+export const Reset = () => ({
+	methods: {
+		onReset() {
+			this.$refs.picker.reset();
+		}
+	},
+	template: `<div>
+		<farm-multiple-filepicker ref="picker" />
+		<farm-btn @click="onReset" class="mt-1">reset</farm-btn>
+	</div>`,
+});

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -9,10 +9,12 @@
 			@change="fileChange($event.target.files)"
 		/>
 		<div v-if="!hasFiles" class="selectfile-container">
-			<farm-icon class="upload-icon" size="lg" @click="addMoreFiles">
-				cloud-upload
+			<farm-icon class="upload-icon" color="primary" size="lg" @click="addMoreFiles">
+				cloud-upload-outline
 			</farm-icon>
-			<p>Clique para selecionar ou arraste o arquivo aqui</p>
+			<farm-subtitle :type="2" variation="regular" color="primary">
+				Arraste e solte o arquivo <br/> ou clique aqui
+			</farm-subtitle>
 		</div>
 
 		<ul
@@ -25,18 +27,20 @@
 			<li class="itemFilesStyled" v-for="file in downloadFiles" :key="file.id">
 				<div class="itemFilesContentStyled">
 					<div class="fileDocumentStyled">
-						<farm-icon color="white" size="md">file</farm-icon>
+						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
 					</div>
 					<div>
-						<span clas="textStyled">
+						<farm-bodysmall  color="black" color-variation="50">
 							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
-						</span>
+						</farm-bodysmall>
 					</div>
 				</div>
 				<div class="itemFilesContentButtonStyled">
 					<farm-btn
-						class="download-button"
 						plain
+						color="black"
+						variation="50"
+						class="download-button"
 						title="Baixar Arquivo"
 						@click.prevent="onDownload(file.id)"
 					>
@@ -53,20 +57,22 @@
 		<ul class="listFilesStyled" v-if="files.length > 0">
 			<li class="itemFilesStyled" v-for="(file, index) in files" :key="index">
 				<div class="itemFilesContentStyled">
+					
 					<div class="fileDocumentStyled">
-						<farm-icon color="white" size="md">file</farm-icon>
+						<farm-icon color="black" variation="50" size="sm">attachment</farm-icon>
 					</div>
 					<div>
-						<span clas="textStyled">
+						<farm-bodysmall  color="black" color-variation="50">
 							Arquivo selecionado: {{ file.name }} ({{ sizeOf(file.size) }})
-						</span>
+						</farm-bodysmall>
 					</div>
 				</div>
 				<div class="itemFilesContentButtonStyled">
 					<farm-btn
 						icon
 						title="Remover"
-						color="neutral"
+						color="black"
+						variation="50"
 						size="md"
 						@click.prevent="remove(index)"
 					>
@@ -162,6 +168,7 @@ export default Vue.extend({
 		},
 		reset(): void {
 			this.$refs.container.querySelector('input').value = '';
+			this.files = [];
 		},
 		fileChange(fileList): void {
 			this.files.push(...fileList);

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

@@ -69,6 +69,15 @@ describe('MultipleFilePicker component', () => {
 			});
 		});
 
+		describe('reset', () => {
+			it('should reset', () => {
+				const file = new File([], 'test');
+				component.files = [file];
+				component.reset();
+				expect(component.files.length).toEqual(0);
+			});
+		});
+
 		describe('remove', () => {
 			it('should remove an item and call reset method when files length is 1', () => {
 				const spy = jest.spyOn(component, 'reset');

package/src/components/ProgressBar/ProgressBar.vue

@@ -16,6 +16,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
@@ -34,6 +36,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'

package/src/components/Radio/Radio.scss

@@ -2,7 +2,7 @@
 @import '../../configurations/theme-colors';
 
 .farm-radio-wrapper {
-	align-items: baseline;
+	align-items: center;
 	display: flex;
 }
 
@@ -80,15 +80,29 @@ input[type='radio'] {
 	}
 }
 
-@each $size, $value in $sizes {
+@each $size,
+$value in $sizes {
 	#{'input[type="radio"][size=' + $size + ']'} {
 		width: $value;
 		height: $value;
 
 		&::before {
 			content: '';
-			width: $value / 2;
-			height: $value / 2;
+
+			@if $value == 14px {
+				width: 6px;
+				height: 6px;
+			}
+
+			@else {
+				width: $value / 2;
+				height: $value / 2;
+			}
 		}
 	}
 }
+
+.farm-label {
+	margin-left: 10px;
+	margin-bottom: 0;
+}

package/src/components/Radio/Radio.stories.js

@@ -68,7 +68,8 @@ export const Reset = () => ({
 			<farm-radio v-model="v" value="2" />
 			<farm-radio v-model="v" value="3" />
 			v-model: {{ v }}
-			<farm-btn @click="reset">reset</farm-btn>
+			<farm-btn @click="reset">reset by method</farm-btn>
+			<farm-btn @click="v = null">reset by value</farm-btn>
 		</farm-form>
 	</div>`,
 });