@farm-investimentos/front-mfe-components 15.4.3 → 15.4.4

package/package.json

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

package/src/components/Logger/Logger.scss

@@ -1,9 +1,41 @@
+$colorsList: success, error, info;
+
 .logger {
 	display: flex;
 	flex-direction: column;
-}
 
-$colorsList: success, error, info;
+	&--horizontal {
+		flex-direction: row;
+		gap: 48px;
+
+		.logger__divider {
+			width: auto;
+			min-width: 192px;
+			height: 1px;
+			margin: 16px -96px 0 -96px;
+
+			@each $fromColor in $colorsList {
+				@each $toColor in $colorsList {
+					&.logger__divider--#{$fromColor}-to-#{$toColor} {
+						background: linear-gradient(
+							to right,
+							var(--farm-#{$fromColor}-base),
+							var(--farm-#{$toColor}-base)
+						);
+					}
+				}
+			}
+		}
+	}
+
+	&--left-aligned {
+		align-items: flex-start;
+
+		.logger__divider {
+			margin: 16px -32px 0 -160px;
+		}
+	}
+}
 
 .logger__divider {
 	height: 40px;
@@ -13,8 +45,12 @@ $colorsList: success, error, info;
 	@each $fromColor in $colorsList {
 		@each $toColor in $colorsList {
 			&.logger__divider--#{$fromColor}-to-#{$toColor} {
-				background: linear-gradient(to bottom, var(--farm-#{$fromColor}-base), var(--farm-#{$toColor}-base));
+				background: linear-gradient(
+					to bottom,
+					var(--farm-#{$fromColor}-base),
+					var(--farm-#{$toColor}-base)
+				);
 			}
 		}
 	}
-}
+}

package/src/components/Logger/Logger.stories.js

@@ -134,3 +134,95 @@ export const Details = () => ({
 	},
 	template: `<farm-logger :items="items" />`,
 });
+
+export const Horizontal = () => ({
+	data() {
+		return {
+			items: [
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				}
+			],
+		};
+	},
+	template: `<farm-logger :items="items" :vertical="false" />`,
+});
+
+export const HorizontalLeftAligned = () => ({
+	data() {
+		return {
+			items: [
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+					details() {
+						alert('Ver Detalhes');
+					},
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+					details() {
+						alert('Ver Detalhes');
+					},
+				}
+			],
+		};
+	},
+	template: `<farm-logger :items="items" :vertical="false" align="left" />`,
+});

package/src/components/Logger/Logger.vue

@@ -1,7 +1,17 @@
 <template>
-	<section class="logger">
+	<section
+		class="logger"
+		:class="{ 'logger--horizontal': !vertical, 'logger--left-aligned': align === 'left' }"
+	>
 		<template v-for="(item, index) in items">
-			<farm-logger-item :item="item" :key="`logger_item_${index}`" />
+			<farm-logger-item
+				:item="item"
+				:key="`logger_item_${index}`"
+				:class="{
+					'logger__item--horizontal': !vertical,
+					'logger__item--left-aligned': align === 'left',
+				}"
+			/>
 			<div
 				v-if="hasDivider(index)"
 				:class="{
@@ -24,6 +34,14 @@ export default defineComponent({
 		 * List of logger items
 		 */
 		items: { required: true, type: Array as PropType<Array<ILoggerItem>> },
+		/**
+		 * Vertical or horizontal
+		 */
+		vertical: { type: Boolean, default: true },
+		/**
+		 * Items alignment
+		 */
+		align: { type: String as PropType<'center' | 'left'>, default: 'center' },
 	},
 	methods: {
 		hasDivider(index: number): boolean {

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

@@ -19,6 +19,35 @@
 		display: flex;
 		flex-direction: column;
 		padding-left: 8px;
+
+		.logger__item--spacing-bottom {
+			margin-bottom: 8px;
+		}
+	}
+
+	> .farm-icon {
+		border: 1px solid var(--farm-stroke-base);
+		border-radius: 50%;
+		min-width: 32px;
+		min-height: 32px;
+		width: 32px;
+		height: 32px;
+		display: block;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		border-color: var(--farm-neutral-base);
+		background-color: var(--farm-neutral-base);
+
+		&:before {
+			color: white;
+		}
+	}
+
+	> .farm-btn.logger__item--button {
+		margin-left: 8px;
 	}
 
 	&.logger__item--error {
@@ -32,31 +61,39 @@
 	&.logger__item--info {
 		@include loggerMessage(var(--farm-info-base));
 	}
-}
 
-.logger__item > .farm-icon {
-	border: 1px solid var(--farm-stroke-base);
-	border-radius: 50%;
-	width: 32px;
-	height: 32px;
-	display: block;
+	&--horizontal {
+		flex-direction: column;
+		height: auto;
+		width: 158px;
 
-	display: flex;
-	align-items: center;
-	justify-content: center;
+		> div {
+			align-items: center;
+			text-align: center;
+			gap: 8px;
+			margin-bottom: 8px;
+			padding-left: 0;
 
-	border-color: var(--farm-neutral-base);
-	background-color: var(--farm-neutral-base);
+			.logger__item--spacing-bottom {
+				margin-bottom: 0;
+			}
+		}
 
-	&:before {
-		color: white;
+		> .farm-icon {
+			margin-bottom: 8px;
+		}
+
+		> .farm-btn.logger__item--button {
+			margin-left: 0;
+		}
 	}
-}
 
-.logger__item > .farm-btn.logger__item--button {
-	margin-left: 8px;
-}
+	&--left-aligned {
+		align-items: flex-start;
 
-.logger__item > div .logger__item--spacing-bottom {
-	margin-bottom: 8px;
+		> div {
+			align-items: flex-start;
+			text-align: left;
+		}
+	}
 }

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

@@ -28,12 +28,13 @@
 				variation="regular"
 				color="black"
 				colorVariation="50"
+				class="logger__item--user"
 				v-if="item.userName"
 			>
 				<farm-icon color="black" variation="50" size="xs">account-circle</farm-icon>
 				{{ item.userName }}
 			</farm-bodysmall>
-			<farm-caption variation="regular">
+			<farm-caption variation="regular" v-if="item.extraMessage">
 				{{ item.extraMessage }}
 			</farm-caption>
 		</div>
@@ -61,6 +62,10 @@ export default defineComponent({
 		 * Logger item
 		 */
 		item: { required: true, type: Object as PropType<ILoggerItem> },
+		/**
+		 * Vertical or horizontal
+		 */
+		vertical: { type: Boolean, default: true },
 		customIcon: { type: String, required: false },
 	},
 	methods: {