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

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>`,
 });

package/src/components/Radio/Radio.vue

@@ -14,7 +14,7 @@
 			v-bind="$attrs"
 			@click="onClick"
 		/>
-		<farm-label v-if="label" class="ml-2" :for="id">
+		<farm-label v-if="label" :for="id">
 			{{ label }}
 		</farm-label>
 	</div>
@@ -50,6 +50,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'

package/src/components/ResourceMetaInfo/ResourceMetaInfo.vue

@@ -1,28 +1,28 @@
 <template>
 	<div class="farm-resource-metainfo">
 		<div v-if="showCreate">
-			<farm-icon color="gray" size="sm">calendar-blank</farm-icon>
-			<farm-caption color="gray" variation="regular">
+			<farm-icon color="black" variation="40" size="sm">calendar-blank</farm-icon>
+			<farm-caption color="black" color-variation="40" variation="regular">
 				Data de cadastro:
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedCreatedAt }}
 				</farm-caption>
 			</farm-caption>
 		</div>
 		<div v-if="showUpdate">
-			<farm-icon color="gray" size="sm">history</farm-icon>
+			<farm-icon color="black" variation="40" size="sm">history</farm-icon>
 
-			<farm-caption color="gray" variation="regular">
+			<farm-caption color="black" color-variation="40" variation="regular">
 				Última atualização feita por
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedUsername }}
 				</farm-caption>
 				, dia
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedUpdatedAt }}
 				</farm-caption>
 				às
-				<farm-caption color="gray" variation="medium" tag="span">
+				<farm-caption color="black" color-variation="40" variation="medium" tag="span">
 					{{ formattedUpdatedHours }}
 				</farm-caption>
 			</farm-caption>

package/src/components/Select/Select.scss

@@ -28,6 +28,10 @@
 	margin-right: 8px;
 }
 
+:deep(.farm-listitem:hover .farm-typography) {
+	color: var(--farm-primary-base);
+}
+
 :deep(.farm-listitem:hover .farm-checkbox .farm-icon) {
 	color: var(--farm-primary-lighten);
 }

package/src/components/Select/Select.vue

@@ -7,6 +7,7 @@
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
 			'farm-textfield--disabled': disabled,
+			'farm-textfield--focused': isFocus || isVisible,
 			'farm-textfield--hiddendetails': hideDetails,
 		}"
 		v-if="!readonly && !disabled"
@@ -250,6 +251,9 @@ export default Vue.extend({
 			newValue => {
 				innerValue.value = newValue;
 				errorBucket.value = [];
+				if(multiple.value && newValue === null || (Array.isArray(newValue) && newValue.length === 0)) {
+					multipleValues.value = [];
+				}
 				validate(newValue);
 				updateSelectedTextValue();
 				emit('input', newValue);

package/src/components/Stepper/StepperHeader/StepperHeader.scss

@@ -17,7 +17,7 @@ $step-height: 64px;
 		flex-direction: column;
 		align-items: center;
 		justify-items: center;
-		color: var(--v-gray-lighten1);
+		color: var(--farm-bw-black-5);
 		font-size: 14px;
 		font-weight: 700;
 
@@ -26,7 +26,7 @@ $step-height: 64px;
 		}
 
 		&.stepper__header-step--current {
-			@include stepperHeaderStepColor(#5089de);
+			@include stepperHeaderStepColor(var(--farm-info-base));
 		}
 
 		&.stepper__header-step--error {
@@ -36,7 +36,7 @@ $step-height: 64px;
 		&.stepper__header-step--next {
 			.farm-icon,
 			.farm-icon__number {
-				color: var(--farm-gray-base);
+				color: var(--farm-bw-black-50);
 			}
 		}
 
@@ -54,7 +54,7 @@ $step-height: 64px;
 
 		border: none;
 		margin: 16px -16px 0;
-		background: var(--farm-gray-base);
+		background: var(--farm-bw-black-5);
 
 		&.stepper__divider--previous {
 			background: var(--farm-primary-base);
@@ -96,7 +96,7 @@ $step-height: 64px;
 			height: 32px;
 			margin: -24px 0 8px 16px;
 			width: 1px;
-			background-color: var(----farm-gray-lighten);
+			background-color: var(--farm-bw-black-5);
 
 			&.stepper__divider--previous {
 				background-color: var(--farm-primary-base);
@@ -109,7 +109,7 @@ $step-height: 64px;
 
 .farm-icon,
 .farm-icon__number {
-	border: 1px solid var(--farm-gray-base);
+	border: 1px solid var(--farm-bw-black-5);
 	border-radius: 50%;
 	width: 32px;
 	height: 32px;
@@ -122,6 +122,6 @@ $step-height: 64px;
 
 	&:before {
 		font-size: 16px;
-		color: var(--v-gray-lighten1);
+		color: var(--farm-bw-black-50);
 	}
 }

package/src/components/Switcher/Switcher.scss

@@ -1,15 +1,25 @@
-.farm-switch--selected {
-    background-color: var(--farm-primary-base);
+@import '../../configurations/theme-colors';
+
+
+
+.farm-switch {
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            .farm-switch--selected {
+                background-color: themeColor($color);
+            }
+
+            .farm-switch--disabled-on {
+                background-color: rgba(themeColor($color), 0.27);
+            }
+        }
+    }
 }
 
 .farm-switch--idle {
     background-color: var(--farm-neutral-base);
 }
 
-.farm-switch--disabled-on {
-    background-color: var(--farm-primary-lighten);
-}
-
 .farm-switch--disabled-off {
     background-color: var(--farm-neutral-lighten);
 }
@@ -17,7 +27,7 @@
 .farm-switch {
     display: inline-block;
     position: relative;
-    cursor: pointer;
+
     width: 24px;
     height: 16px;
     border-radius: 9999px;
@@ -30,6 +40,13 @@
         display: block;
     }
 
+    cursor: pointer;
+
+    &:has(.farm-switch--disabled-on),
+    &:has(.farm-switch--disabled-off) {
+        cursor: default;
+    }
+
 }
 
 .farm-switch__background {
@@ -38,7 +55,6 @@
     margin-top: 0;
     height: 12px;
     width: 100%;
-    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
     transition: background-color .4s ease;
 }