@farm-investimentos/front-mfe-components 5.1.0 → 5.2.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "5.1.0",
+	"version": "5.2.2",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -27,11 +27,11 @@
 		"vuetify-dialog": "^2.0.17"
 	},
 	"devDependencies": {
-		"@socheatsok78/storybook-addon-vuetify": "^0.1.8",
-		"@storybook/addon-actions": "^6.3.6",
-		"@storybook/addon-essentials": "^6.3.6",
-		"@storybook/addon-links": "^6.3.6",
-		"@storybook/vue": "^6.3.6",
+		"@socheatsok78/storybook-addon-vuetify": "^0.1.9",
+		"@storybook/addon-actions": "^6.5.8",
+		"@storybook/addon-essentials": "^6.5.8",
+		"@storybook/addon-links": "^6.5.8",
+		"@storybook/vue": "^6.5.8",
 		"@types/jest": "^24.9.1",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",

package/src/components/Logger/Logger.scss

@@ -0,0 +1,17 @@
+.logger {
+    display: block;
+
+    .logger__item {
+        float: left;
+        clear: both;
+    }
+}
+
+.logger__divider {
+    float: left;
+    clear: both;
+    height: 40px;
+    margin: -4px 0 -4px 16px;
+    width: 1px;
+    background-color: var(--v-gray-lighten1);
+}

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

@@ -0,0 +1,33 @@
+import Logger from './Logger.vue';
+
+export default {
+	title: 'API/Logger',
+	component: Logger,
+	parameters: {
+		docs: {
+			description: {
+				component: `Logger<br />
+				selector: <em>farm-logger</em>
+				`,
+			},
+		},
+
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { Logger },
+	data() {
+		return {};
+	},
+	template: `<Logger>
+	
+	</Logger>`,
+});
+
+Primary.storyName = 'Básico';

package/src/components/Logger/Logger.vue

@@ -0,0 +1,28 @@
+<template>
+	<section class="logger">
+		<template v-for="(item, index) in items">
+			<LoggerItem :item="item" :key="index" />
+			<div v-if="hasDivider(index)" class="logger__divider" :key="'divider_' + index">
+			</div>
+		</template>
+	</section>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import ILoggerItem from './LoggerItem/ILoggerItem';
+import LoggerItem from './LoggerItem/';
+
+export default Vue.extend({
+	name: 'farm-logger',
+	components: { LoggerItem },
+	props: { items: { required: true, type: Array as PropType<Array<ILoggerItem>> } },
+	methods: {
+		hasDivider(index: number): boolean {
+			return index < this.items.length - 1;
+		},
+	},
+});
+</script>
+<style lang="sass" scoped>
+@import './Logger.scss'
+</style>

package/src/components/Logger/LoggerItem/ILoggerItem.ts

@@ -0,0 +1,9 @@
+interface ILoggerItem {
+	userName: string;
+	icon: string;
+	formattedDate: string;
+	message: string;
+	status: string;
+}
+
+export default ILoggerItem;

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

@@ -0,0 +1,64 @@
+@mixin loggerMessage($color) {
+    >i.mdi {
+        border-color: $color;
+        background-color: $color;
+    }
+
+    .logger__message {
+        color: $color;
+    }
+}
+
+.logger__item {
+    display: flex;
+    flex-direction: row;
+    height: 64px;
+    align-items: center;
+
+    >div {
+        display: flex;
+        flex-direction: column;
+        padding-left: 8px;
+    }
+
+    &.logger__item--error {
+        @include loggerMessage(var(--v-error-base));
+    }
+
+    &.logger__item--success {
+        @include loggerMessage(var(--v-secondary-base));
+
+    }
+}
+
+
+.logger__item>i.mdi {
+    border: 1px solid var(--v-gray-lighten2);
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: block;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-color: var(--v-gray-lighten1);
+    background-color: var(--v-gray-lighten1);
+
+    &:before {
+        font-size: 16px;
+        color: white;
+    }
+}
+
+.logger__date,
+.logger__username {
+    font-size: 10px;
+    font-weight: 400;
+}
+
+.logger__message {
+    font-size: 14px;
+    font-weight: 700;
+}

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

@@ -0,0 +1,38 @@
+import LoggerItem from './LoggerItem.vue';
+
+export default {
+	title: 'API/Logger/LoggerItem',
+	component: LoggerItem,
+	parameters: {
+		docs: {
+			description: {
+				component: `LoggerItem<br />
+				selector: <em>farm-logger-item</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				icon: 'book',
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'error',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+Primary.storyName = 'Básico';

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

@@ -0,0 +1,53 @@
+<template>
+	<section
+		class="logger__item"
+		:class="{
+			'logger__item--error': item.status === 'error',
+			'logger__item--success': item.status === 'success',
+		}"
+	>
+		<i
+			:class="{
+				mdi: true,
+				[mdiIconName]: true,
+			}"
+		/>
+		<div>
+			<span class="logger__date">
+				{{ item.formattedDate }}
+			</span>
+			<span class="logger__message">
+				{{ item.message }}
+			</span>
+			<span class="logger__username">
+				<i class="mdi mdi-account-circle" />
+				{{ item.userName }}
+			</span>
+		</div>
+	</section>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import ILoggerItem from './ILoggerItem';
+
+export default Vue.extend({
+	name: 'farm-logger-item',
+	props: {
+		item: { required: true, type: Object as PropType<ILoggerItem> },
+	},
+	computed: {
+		mdiIconName() {
+			if (this.item.icon) {
+				return `mdi-${this.item.icon}`;
+			}
+			if(!this.item.status) {
+				return '';
+			}
+			return `mdi-${this.item.status === 'success' ? 'check' : 'close'}`;
+		},
+	},
+});
+</script>
+<style lang="sass" scoped>
+@import './LoggerItem.scss'
+</style>

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

@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils';
+import LoggerItem from '../LoggerItem';
+
+describe('LoggerItem component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(LoggerItem, {
+			propsData: {
+				item: {},
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('LoggerItem created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Computed properties', () => {
+		it('Should return custom icon', async () => {
+			await wrapper.setProps({
+				item: {
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					icon: 'aaa',
+				},
+			});
+			expect(component.mdiIconName).toEqual('mdi-aaa');
+		});
+
+		it('Should return success icon', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'success',
+				},
+			});
+			expect(component.mdiIconName).toEqual('mdi-check');
+		});
+
+		it('Should return success icon', async () => {
+			await wrapper.setProps({
+				item: {
+					status: 'error',
+				},
+			});
+			expect(component.mdiIconName).toEqual('mdi-close');
+		});
+
+	});
+});

package/src/components/Logger/LoggerItem/index.ts

@@ -0,0 +1,4 @@
+import LoggerItem from './LoggerItem.vue';
+
+export { LoggerItem };
+export default LoggerItem;

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

@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils';
+import Logger from '../Logger';
+
+describe('Logger component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Logger, {
+			propsData: {
+				items: [
+					{
+						icon: 'book',
+						message: 'Recusado entre as pré elegíveis',
+						userName: 'Cleyton Rasta',
+						formattedDate: '13/06/2022  20:40',
+						status: 'error',
+					},
+				],
+			},
+		});
+	});
+
+	test('Logger created', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Logger/index.ts

@@ -0,0 +1,4 @@
+import Logger from './Logger.vue';
+
+export { Logger };
+export default Logger;

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

@@ -1,10 +1,19 @@
 $step-height: 64px;
-$line-color : #D6D6D6;
-$fore-color: #858585;
-$current-color: #5089DE;
-$previous-color: #00B493;
-$error-color: #EA5455;
-$vertical-step-width: 160px;
+
+@mixin stepperHeaderStepColor($color) {
+	i.mdi {
+		background-color: $color;
+		border-color: $color;
+	}
+
+	i.mdi:before {
+		color: white;
+	}
+}
+
+.horizontal-step-size .stepper__header--vertical {
+	width: 160px;
+}
 
 .stepper__header {
 	display: flex;
@@ -17,44 +26,20 @@ $vertical-step-width: 160px;
 		flex-direction: column;
 		align-items: center;
 		justify-items: center;
-		color: $fore-color;
+		color: var(--v-gray-lighten1);
 		font-size: 14px;
 		font-weight: 700;
 
 		&.stepper__header-step--previous {
-			color: $previous-color;
-
-			i.mdi {
-				border-color: $previous-color;
-			}
-
-			i.mdi:before {
-				color: $previous-color;
-			}
+			@include stepperHeaderStepColor(var(--v-secondary-base));
 		}
 
 		&.stepper__header-step--current {
-			color: $current-color;
-
-			i.mdi {
-				border-color: $current-color;
-			}
-
-			i.mdi:before {
-				color: $current-color;
-			}
+			@include stepperHeaderStepColor(var(--v-accent-base));
 		}
 
 		&.stepper__header-step--error {
-			color: $error-color;
-
-			i.mdi {
-				border-color: $error-color;
-			}
-
-			i.mdi:before {
-				color: $error-color;
-			}
+			@include stepperHeaderStepColor(var(--v-error-base));
 		}
 
 		span {
@@ -63,8 +48,6 @@ $vertical-step-width: 160px;
 		}
 	}
 
-
-
 	.stepper__divider--horizontal {
 		display: block;
 		flex: 1 1 0px;
@@ -73,27 +56,23 @@ $vertical-step-width: 160px;
 
 		border: none;
 		margin: 16px -16px 0;
-		background: $line-color;
+		background: var(--v-gray-lighten2);
 
 		&.stepper__divider--previous {
-			background: $previous-color;
+			background: var(--v-secondary-base);
 		}
 
 		&.stepper__divider--previous-to-current {
-			background: linear-gradient(to right, $previous-color, $current-color);
+			background: linear-gradient(to right, var(--v-secondary-base), var(--v-accent-base));
 		}
 
 		&.stepper__divider--previous-to-error {
-			background: linear-gradient(to right, $previous-color, $error-color);
+			background: linear-gradient(to right, var(--v-secondary-base), var(--v-error-base));
 		}
 	}
 
 	&.stepper__header--vertical {
 		display: block;
-		align-items: center;
-		flex-direction: column;
-		width: $vertical-step-width;
-
 
 		div.stepper__header-step {
 			width: 100%;
@@ -106,8 +85,10 @@ $vertical-step-width: 160px;
 			}
 
 			span {
-				display: block;
+				display: flex;
+				align-items: center;
 				width: calc(100% - 40px);
+				height: 32px;
 				clear: none;
 				float: left;
 				margin-top: 0;
@@ -122,25 +103,33 @@ $vertical-step-width: 160px;
 			height: 32px;
 			margin: -24px 0 8px 16px;
 			width: 1px;
-			background-color: $line-color;
+			background-color: var(--v-gray-lighten2);
 
 			&.stepper__divider--previous {
-				background-color: $previous-color;
+				background-color: var(--v-secondary-base);
 			}
 
 			&.stepper__divider--previous-to-current {
-				background: linear-gradient(to bottom, $previous-color, $current-color);
+				background: linear-gradient(
+					to bottom,
+					var(--v-secondary-base),
+					var(--v-accent-base)
+				);
 			}
 
 			&.stepper__divider--previous-to-error {
-				background: linear-gradient(to bottom, $previous-color, $error-color);
+				background: linear-gradient(
+					to bottom,
+					var(--v-secondary-base),
+					var(--v-error-base)
+				);
 			}
 		}
 	}
 }
 
 i.mdi {
-	border: 1px solid $line-color;
+	border: 1px solid var(--v-gray-lighten2);
 	border-radius: 50%;
 	width: 32px;
 	height: 32px;
@@ -150,9 +139,8 @@ i.mdi {
 	align-items: center;
 	justify-content: center;
 
-
 	&:before {
 		font-size: 16px;
-		color: $fore-color;
+		color: var(--v-gray-lighten1);
 	}
-}
+}

package/src/components/Stepper/StepperHeader/StepperHeader.stories.js

@@ -11,6 +11,10 @@ export default {
 				`,
 			},
 		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
 		viewMode: 'docs',
 	},
 };
@@ -32,3 +36,5 @@ export const Primary = () => ({
 });
 
 Primary.storyName = 'Básico';
+
+//

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -1,39 +1,41 @@
 <template>
-	<section :class="{ stepper__header: true, 'stepper__header--vertical': vertical }">
-		<template v-for="(step, index) in steps">
-			<div
-				:class="{
-					'stepper__header-step': true,
-					'stepper__header-step--current': isStepCurrent(index),
-					'stepper__header-step--previous': isStepPrevious(index),
-					'stepper__header-step--error': isStepError(index),
-				}"
-				:key="step.label"
-			>
-				<i
+	<div class="horizontal-step-size">
+		<section :class="{ stepper__header: true, 'stepper__header--vertical': vertical }">
+			<template v-for="(step, index) in steps">
+				<div
 					:class="{
-						mdi: true,
-						['mdi-' + step.icon]: true,
+						'stepper__header-step': true,
+						'stepper__header-step--current': isStepCurrent(index),
+						'stepper__header-step--previous': isStepPrevious(index),
+						'stepper__header-step--error': isStepError(index),
 					}"
-					v-if="step.icon"
+					:key="step.label"
+				>
+					<i
+						:class="{
+							mdi: true,
+							['mdi-' + step.icon]: true,
+						}"
+						v-if="step.icon"
+					/>
+					<span>
+						{{ step.label }}
+					</span>
+				</div>
+				<div
+					:class="{
+						'stepper__divider--horizontal': !vertical,
+						'stepper__divider--vertical': vertical,
+						'stepper__divider--previous': isStepPrevious(index),
+						'stepper__divider--previous-to-current': isStepPreviousToCurrent(index),
+						'stepper__divider--previous-to-error': isStepPreviousToError(index),
+					}"
+					v-if="hasDivider(index)"
+					:key="'divider_' + step.label"
 				/>
-				<span>
-					{{ step.label }}
-				</span>
-			</div>
-			<div
-				:class="{
-					'stepper__divider--horizontal': !vertical,
-					'stepper__divider--vertical': vertical,
-					'stepper__divider--previous': isStepPrevious(index),
-					'stepper__divider--previous-to-current': isStepPreviousToCurrent(index),
-					'stepper__divider--previous-to-error': isStepPreviousToError(index),
-				}"
-				v-if="hasDivider(index)"
-				:key="'divider_' + step.label"
-			/>
-		</template>
-	</section>
+			</template>
+		</section>
+	</div>
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';

package/src/examples/Logger/Logger.stories.js

@@ -0,0 +1,47 @@
+import { Logger } from '../../main';
+
+export default {
+	title: 'Examples/Logger/Logger',
+	component: Logger,
+	parameters: {
+		docs: {
+			description: {
+				component: `Logger<br />
+				selector: <em>farm-logger</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { Logger },
+	data() {
+		return {
+			items: [
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+				},
+			],
+		};
+	},
+	template: `<Logger :items="items" />`,
+});
+
+Primary.storyName = 'Básico';