@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/Loader/Loader.scss

@@ -0,0 +1,116 @@
+$loader-rotate-animation: loader-rotate 1.4s linear infinite !default;
+$loader-rotate-dash: loader-dash 1.4s ease-in-out infinite !default;
+$loader-intermediate-svg-transition: all 0.2s ease-in-out !default;
+$loader-overlay-transition: all 0.6s ease-in-out !default;
+
+.farm-loader {
+	width: 70px;
+	height: 70px;
+	color: var(--farm-primary-base) !important;
+	caret-color: var(--farm-primary-base) !important;
+	position: relative;
+	display: inline-flex;
+	vertical-align: middle;
+	justify-content: center;
+	align-items: center;
+
+	& circle {
+		stroke-width: 3.7;
+	}
+
+	&--small {
+		width: 35px;
+		height: 35px;
+
+		& circle {
+			stroke-width: 5.7;
+		}
+	}
+
+	&--big {
+		width: 100px;
+		height: 100px;
+
+		& circle {
+			stroke-width: 2.7;
+		}
+	}
+
+	> svg {
+		width: 100%;
+		height: 100%;
+		margin: auto;
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		z-index: 0;
+	}
+
+	&--visible {
+		animation: loader-dash 1.4s ease-in-out infinite;
+		stroke-linecap: round;
+		stroke-dasharray: 80, 200;
+		stroke-dashoffset: 0px;
+	}
+
+	&--indeterminate {
+		> svg {
+			animation: $loader-rotate-animation;
+			transform-origin: center center;
+			transition: $loader-intermediate-svg-transition;
+		}
+
+		.farm-loader__overlay {
+			animation: $loader-rotate-dash;
+			stroke-linecap: round;
+			stroke-dasharray: 80, 200;
+			stroke-dashoffset: 0px;
+		}
+	}
+	&__info {
+		align-items: center;
+		display: flex;
+		justify-content: center;
+	}
+	&__overlay {
+		stroke: currentColor;
+		z-index: 2;
+		transition: $loader-overlay-transition;
+	}
+}
+
+.farm-loader__overlay {
+	align-items: center;
+	border-radius: inherit;
+	background-color: rgba(0, 0, 0, 0.3);
+	display: flex;
+	justify-content: center;
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+}
+
+@keyframes loader-dash {
+	0% {
+		stroke-dasharray: 1, 200;
+		stroke-dashoffset: 0px;
+	}
+	50% {
+		stroke-dasharray: 100, 200;
+		stroke-dashoffset: -15px;
+	}
+	100% {
+		stroke-dasharray: 100, 200;
+		stroke-dashoffset: -125px;
+	}
+}
+
+@keyframes loader-rotate {
+	100% {
+		transform: rotate(360deg);
+	}
+}

package/src/components/Loader/Loader.stories.ts

@@ -0,0 +1,48 @@
+// import { withDesign } from 'storybook-addon-designs';
+
+export default {
+	title: 'Feedback/Loader',
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Loader<br />
+				selector: <em>farm-loader</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: `<div style="width: 480px;">
+    <farm-loader />
+    </div>`,
+});
+
+export const Small = () => ({
+	template: `<div style="width: 480px;">
+    <farm-loader size="small" />
+    </div>`,
+});
+
+export const Overlay = () => ({
+	data() {
+		return {
+			show: false,
+		};
+	},
+	template: `<div style="width: 480px;">
+    <farm-loader mode="overlay" v-if="show" />
+		<farm-btn @click="onClick">click to show</farm-btn>
+	</div>`,
+	methods: {
+		onClick() {
+			this.show = true;
+			setTimeout(() => {
+				this.show = false;
+			}, 5000);
+		},
+	},
+});

package/src/components/Loader/Loader.vue

@@ -0,0 +1,83 @@
+
+<template>
+	<div class="farm-loader__overlay" v-if="mode === 'overlay'" :style="styleObject">
+		<div
+			role="progressbar"
+			aria-valuemin="0"
+			aria-valuemax="100"
+			class="farm-loader farm-loader--big farm-loader--visible farm-loader--indeterminate"
+		>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+				style="transform: rotate(0deg)"
+			>
+				<circle
+					fill="transparent"
+					cx="45.714285714285715"
+					cy="45.714285714285715"
+					r="20"
+					stroke-dasharray="125.664"
+					stroke-dashoffset="125.66370614359172px"
+					class="farm-loader__overlay"
+				></circle>
+			</svg>
+			<div class="farm-loader__info"></div>
+		</div>
+	</div>
+	<div
+		v-else
+		role="progressbar"
+		aria-valuemin="0"
+		aria-valuemax="100"
+		class="farm-loader farm-loader--visible farm-loader--indeterminate"
+		:class="calculateSize"
+	>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			viewBox="22.857142857142858 22.857142857142858 45.714285714285715 45.714285714285715"
+			style="transform: rotate(0deg)"
+		>
+			<circle
+				fill="transparent"
+				cx="45.714285714285715"
+				cy="45.714285714285715"
+				r="20"
+				stroke-dasharray="125.664"
+				stroke-dashoffset="125.66370614359172px"
+				class="farm-loader__overlay"
+			></circle>
+		</svg>
+		<div class="farm-loader__info"></div>
+	</div>
+</template>
+<script lang="ts">
+import { ref, toRefs, computed } from 'vue';
+import { calculateMainZindex } from '../../helpers';
+
+export default {
+	name: 'farm-loader',
+	props: {
+		mode: {
+			type: String,
+			default: 'inline',
+		},
+		size: {
+			type: String,
+			default: 'normal',
+		},
+	},
+	setup(props) {
+		const { size}= toRefs(props);
+		const styleObject = ref({
+			zIndex: calculateMainZindex(),
+		});
+		const calculateSize = computed(() => size.value === 'small' ? 'farm-loader--small' : '');
+		return { styleObject, calculateSize };
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Loader';
+</style>
+

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

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+import Loader from '../Loader';
+
+describe('Loader component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Loader);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should calculate calculateSize for default size prop', () => {
+			expect(component.calculateSize).toEqual('');
+		});
+
+		it('Should calculate calculateSize for small prop', async () => {
+			await wrapper.setProps({
+				size: 'small',
+			});
+			expect(component.calculateSize).toEqual('farm-loader--small');
+		});
+	});
+});

package/src/components/Loader/index.ts

@@ -0,0 +1,3 @@
+import Loader from './Loader.vue';
+
+export default Loader;

package/src/components/Logger/Logger.scss

@@ -0,0 +1,56 @@
+$colorsList: success, error, info;
+
+.logger {
+	display: flex;
+	flex-direction: column;
+
+	&--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;
+	margin: -4px 0 -4px 16px;
+	width: 1px;
+
+	@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)
+				);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,228 @@
+import Logger from './Logger.vue';
+
+export default {
+	title: 'Feedback/Logger',
+	component: Logger,
+	parameters: {
+		docs: {
+			description: {
+				component: `Logger<br />
+				selector: <em>farm-logger</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+
+		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 = () => ({
+	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',
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'info',
+				},
+				{
+					message: 'Info',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'info',
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+				},
+				{
+					message: 'Info',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'info',
+				},
+			],
+		};
+	},
+	template: `<farm-logger :items="items" />`,
+});
+
+export const Details = () => ({
+	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');
+					},
+				},
+				{
+					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" />`,
+});
+
+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

@@ -0,0 +1,49 @@
+<template>
+	<section :class="{ 'logger': true, 'logger--horizontal': !vertical, 'logger--left-aligned': align === 'left' }">
+		<div v-for="(item, index) in items" :key="`logger_item_${index}`">
+			<farm-logger-item :item="item" :class="{
+				'logger__item--horizontal': !vertical,
+				'logger__item--left-aligned': align === 'left',
+			}" />
+			<div v-if="hasDivider(index)" :class="{
+				logger__divider: true,
+				[dividerCssClass(index)]: true,
+			}" :key="'divider_' + index"></div>
+		</div>
+	</section>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+import ILoggerItem from './LoggerItem/ILoggerItem';
+
+export default {
+	name: 'farm-logger',
+	props: {
+		/*
+		 * 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 {
+			return index < this.items.length - 1;
+		},
+		dividerCssClass(index: number): string {
+			const previous = this.items[index].status;
+			const next = this.items[index + 1].status;
+			return `logger__divider--${previous}-to-${next}`;
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './Logger';
+</style>

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

@@ -0,0 +1,11 @@
+interface ILoggerItem {
+	userName: string;
+	icon: string;
+	formattedDate: string;
+	message: string;
+	status: string;
+	extraMessage?: string;
+	details: Function;
+}
+
+export default ILoggerItem;