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

package/package.json

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

package/src/components/Logger/Logger.scss

@@ -0,0 +1,19 @@
+$fore-color: #858585;
+
+.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: $fore-color;
+}

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

@@ -0,0 +1,28 @@
+import Logger from './Logger.vue';
+
+export default {
+	title: 'API/Logger',
+	component: Logger,
+	parameters: {
+		docs: {
+			description: {
+				component: `Logger<br />
+				selector: <em>farm-logger</em>
+				`,
+			},
+		},
+		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,71 @@
+$line-color : #D6D6D6;
+$fore-color: #858585;
+$current-color: #5089DE;
+$success-color: #00B493;
+$error-color: #EA5455;
+
+@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($error-color);
+    }
+
+    &.logger__item--success {
+        @include loggerMessage($success-color);
+
+    }
+}
+
+
+
+.logger__item>i.mdi {
+    border: 1px solid $line-color;
+    border-radius: 50%;
+    width: 32px;
+    height: 32px;
+    display: block;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    border-color: $fore-color;
+    background-color: $fore-color;
+
+    &: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,34 @@
+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>
+				`,
+			},
+		},
+		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

@@ -90,8 +90,6 @@ $vertical-step-width: 160px;
 
 	&.stepper__header--vertical {
 		display: block;
-		align-items: center;
-		flex-direction: column;
 		width: $vertical-step-width;
 
 

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';

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

@@ -0,0 +1,81 @@
+import { LoggerItem } from '../../main';
+
+export default {
+	title: 'Examples/Logger/LoggerItem',
+	component: LoggerItem,
+	parameters: {
+		docs: {
+			description: {
+				component: `LoggerItem<br />
+				selector: <em>farm-logger-item</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+export const Success = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+export const Error = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'error',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+export const CustomIcon = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				icon: 'book',
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+Primary.storyName = 'Basic';
+Success.storyName = 'Success';
+Error.storyName = 'Error';
+CustomIcon.storyName = 'Custom Icon';

package/src/main.ts

@@ -21,6 +21,7 @@ import IconBox from './components/IconBox';
 import CardContext from './components/CardContext';
 
 import DefaultButton from './components/Buttons/DefaultButton';
+import Collapsible from './components/Collapsible';
 
 export {
 	DataTableEmptyWrapper,
@@ -43,6 +44,7 @@ export {
 	DefaultButton,
 	IconBox,
 	CardContext,
+	Collapsible,
 };
 
 export * from './components/Buttons/DefaultButton';
@@ -60,3 +62,5 @@ export * from './components/MultipleSelectShortener';
 export * from './components/SelectModalOptions';
 export * from './components/ChipInviteStatus';
 export * from './components/Stepper';
+export * from './components/Logger';
+export * from './components/Logger/LoggerItem';