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

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -0,0 +1,92 @@
+import TableContextMenu from './TableContextMenu';
+// import { withDesign } from 'storybook-addon-designs';
+
+export default {
+	title: 'Navigation/TableContextMenu',
+	// decorators: [withDesign],
+	component: TableContextMenu,
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=3516%3A11516',
+		},
+		docs: {
+			description: {
+				component: `TableContextMenu<br />
+				selector: <em>farm-context-menu</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu :items="[{ label: 'Remover', icon: { color: 'error', type: 'open-in-new' } }]" />
+	</div>`,
+});
+
+export const Disabled = () => ({
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu disabled :items="[{ label: 'Remover', icon: { color: 'error', type: 'open-in-new' } }]" />
+	</div>`,
+});
+
+export const Icons = () => ({
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu
+			ref="icons"
+			:items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]"
+		/>
+	</div>`,
+});
+
+export const Multi = () => ({
+	data() {
+		return {
+			items: [
+				{ label: 'Novo', icon: { type: 'open-in-new' } },
+				{ label: 'Editar', icon: { color: 'secondary', type: 'open-in-new' } },
+				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
+				{ label: 'Outro', icon: { color: 'black', type: 'cog' } },
+				{ label: 'Book', icon: { color: 'gray', type: 'book' } },
+			],
+		};
+	},
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu ref="multi" :items="items" />
+	</div>`,
+});
+
+export const ClickHandler = () => ({
+	data() {
+		return {
+			editItem: () => {
+				alert('Click handler');
+			},
+		};
+	},
+	template: `<div style="padding-left: 80px">
+		<farm-context-menu :items="[{ label: 'Click me', icon: { type: 'open-in-new' }, handler: 'edit' }]" @edit="editItem()" />
+	</div>`,
+});
+
+export const OnRightSide = () => ({
+	data() {
+		return {
+			items: [
+				{ label: 'Novo', icon: { type: 'open-in-new' } },
+				{
+					label: 'Nome bem longo sem quebrar linha',
+					icon: { color: 'secondary', type: 'open-in-new' },
+				},
+				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
+			],
+		};
+	},
+	template: `<div style="padding-left: 80px; display: flex; justify-content: end;">
+		<farm-context-menu ref="multi" :items="items" />
+	</div>`,
+});

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -0,0 +1,89 @@
+<template>
+	<farm-contextmenu
+		:class="{ 'farm-context-menu': true, 'farm-context-menu--disabled': disabled }"
+		v-model="value"
+	>
+		<template v-slot:activator>
+			<farm-btn
+				icon
+				title="Ver opções"
+				color="secondary-green"
+				:disabled="disabled"
+				@click="toggleValue"
+			>
+				<farm-icon size="md">dots-horizontal</farm-icon>
+			</farm-btn>
+		</template>
+		<farm-list>
+			<farm-listitem
+				v-for="item in items"
+				clickable
+				hoverColorVariation="lighten"
+				:key="'tablecontextmenu_item_' + item.label"
+				:hoverColor="item.icon.color || 'primary'"
+				@click="onClick(item.handler)"
+			>
+				<farm-icon v-if="item.icon" size="sm" :color="item.icon.color || 'primary'">
+					{{ item.icon.type }}
+				</farm-icon>
+				<farm-caption bold tag="span" :color="item.icon.color || 'primary'">{{
+					item.label
+				}}</farm-caption>
+			</farm-listitem>
+		</farm-list>
+	</farm-contextmenu>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export interface IContextMenuOption {
+	label: string;
+	handler: string;
+	icon: IContextMenuOptionIcon;
+}
+
+export interface IContextMenuOptionIcon {
+	color?: string;
+	type: string;
+}
+
+export default {
+	name: 'farm-context-menu',
+	components: {},
+	props: {
+		/**
+		 * Items to populate the context menu
+		 */
+		items: {
+			type: Array as PropType<Array<IContextMenuOption>>,
+			required: true,
+		},
+		/**
+		 * Is disabled?
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		onClick(handler) {
+			if (handler !== undefined) {
+				this.$emit(handler);
+			}
+		},
+		toggleValue(event: MouseEvent) {
+			this.value = !this.value;
+			event.stopPropagation();
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'TableContextMenu';
+</style>

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

@@ -0,0 +1,45 @@
+import { shallowMount } from '@vue/test-utils';
+import TableContextMenu from '../TableContextMenu';
+const items = [{ label: 'Remover', icon: { color: 'error', type: 'delete' }, handler: 'test' }];
+
+describe('TableContextMenu component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TableContextMenu, {
+			propsData: {
+				items,
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('computed values', () => {
+		it('should items to be created correctly', async () => {
+			expect(wrapper.vm.items).toBeInstanceOf(Array);
+			expect(wrapper.vm.items).toEqual(items);
+		});
+	});
+
+	describe('emitted', () => {
+		it('should emit event', async () => {
+			wrapper.vm.onClick('test');
+			await wrapper.vm.$nextTick();
+			expect(wrapper.emitted().test).toBeTruthy();
+		});
+		it('should not emit click event without value', async () => {
+			wrapper.vm.onClick();
+			await wrapper.vm.$nextTick();
+			expect(wrapper.emitted()).toEqual({});
+		});
+	});
+});

package/src/components/TableContextMenu/index.ts

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

package/src/components/Tabs/Tabs.scss

@@ -0,0 +1,72 @@
+@import '../../configurations/theme-colors';
+
+.farm-tabs {
+	width: 100%;
+}
+.tabs {
+	display: flex;
+	margin-bottom: -1px;
+
+	&__tab {
+		border-bottom: 1px solid var(--farm-primary-lighten);
+		cursor: pointer;
+		display: inline-flex;
+		padding: 18px 24px 14px;
+		height: 54px;
+		transition: all 0.5s ease;
+		&:hover {
+			background-color: transparentize(themeColor('primary', 'base'), 0.86);
+
+			div.rounded-circle {
+				opacity: 0.86;
+			}
+		}
+
+		span {
+			font-weight: 400;
+		}
+
+		&--selected {
+
+			border-bottom: 4px solid var(--farm-primary-base);
+
+			span {
+				font-size: 14px;
+				font-weight: 500;
+			}
+		}
+	}
+
+	&--disabled {
+		.tabs__tab {
+			cursor: default;
+
+			&:hover {
+				background-color: transparent;
+			}
+
+			&--selected {
+				&:hover {
+					background-color: transparent;
+				}
+			}
+		}
+	}
+}
+
+.farm-tabs {
+	border-bottom: 1px solid var(--farm-primary-lighten);
+}
+
+
+div.rounded-circle {
+	background-color: var(--farm-gray-lighten);
+	width: 24px;
+	height: 24px;
+	margin-top: -2px;
+	margin-left: -2px;
+
+	&.is-selected {
+		background-color: var(--farm-primary-base);
+	}
+}

package/src/components/Tabs/Tabs.stories.js

@@ -0,0 +1,68 @@
+import Tabs from './Tabs.vue';
+
+export default {
+	title: 'Display/Tabs',
+	component: Tabs,
+	parameters: {
+		docs: {
+			description: {
+				component: `Tabs<br />
+				selector: <em>farm-tabs</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
+});
+
+export const WithoutCounter = () => ({
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs :showCounter="false" @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'Seleção',
+		};
+	},
+	methods: {
+		updateValue(value) {
+			this.v = value.name;
+		},
+	},
+	template: `<div>
+				<farm-tabs :showCounter="false" :allow-user-change="false" @update="updateValue" /> 
+				<p class="mt-2">selected: {{v}}</p>
+			</div>`,
+});

package/src/components/Tabs/Tabs.vue

@@ -0,0 +1,130 @@
+<template>
+	<div class="farm-tabs">
+		<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
+			<div
+				v-for="(tab, index) in tabs"
+				class="tabs__tab"
+				:key="index"
+				:class="{ hideCounter: !showCounter, 'tabs__tab--selected': isSelected(index) }"
+				@click="changeTab(tab, index)"
+			>
+				<div
+					v-if="showCounter"
+					class="
+						mr-2
+						rounded-circle
+						d-inline-flex
+						align-center
+						justify-center
+						white--text
+					"
+					:class="{ 'is-selected': isSelected(index) }"
+				>
+					<farm-subtitle
+						color="white"
+						tag="span"
+						:type="2"
+						:color-variation="isSelected(index) ? 'base' : 'darken'"
+					>
+						{{ index + 1 }}
+					</farm-subtitle>
+				</div>
+				<farm-subtitle
+					tag="span"
+					:type="2"
+					:color="isSelected(index) ? 'primary' : 'gray'"
+					:color-variation="isSelected(index) ? 'base' : 'darken'"
+				>
+					{{ forceUppercase ? tab.name.toUpperCase() : tab.name }}
+				</farm-subtitle>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+
+
+export default {
+	name: 'farm-tabs',
+	data() {
+		return {
+			selected: 0,
+		};
+	},
+	props: {
+		tabs: {
+			type: Array,
+			default: () => [
+				{
+					name: 'Seleção',
+					path: 'selection',
+				},
+				{
+					name: 'Revisão',
+					path: 'review',
+				},
+			],
+		},
+		showCounter: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Initial tab selected
+		 */
+		initialSelect: {
+			type: Number,
+			default: 0,
+		},
+		allowUserChange: {
+			type: Boolean,
+			default: true,
+		},
+		/**
+		 * Force uppercase in tab
+		 */
+		forceUppercase: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	methods: {
+		isSelected(index) {
+			return index === this.selected;
+		},
+		changeTab(_, index) {
+			if (!this.allowUserChange) return;
+			this.selected = index;
+			this.$emit('update', this.tabs[index]);
+		},
+		next() {
+			if (this.tabs.length - 1 > this.selected + 1)
+				return this.$emit('update', this.tabs[this.selected]);
+			this.selected = this.selected + 1;
+			this.$emit('update', this.tabs[this.selected]);
+		},
+		previous() {
+			if (this.selected - 1 < 0) return this.$emit('update', this.tabs[this.selected]);
+			this.selected = this.selected - 1;
+			this.$emit('update', this.tabs[this.selected]);
+		},
+		toIndex(index) {
+			this.selected = index;
+			this.$emit('update', this.tabs[index]);
+		},
+		updateTabRouting: (component, item, nextRoutePrefix) => {
+			component.currentTab = item.path;
+			const nextRoute = `${nextRoutePrefix}/${item.path}`;
+			const currentRoute = component.$router.history.current.path;
+			if (nextRoute !== currentRoute) component.$router.push(nextRoute);
+		},
+	},
+	created() {
+		this.selected = this.initialSelect;
+	},
+};
+</script>
+<style scoped lang="scss">
+@import './Tabs.scss';
+</style>

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

@@ -0,0 +1,59 @@
+import { shallowMount } from '@vue/test-utils';
+import Tabs from '../Tabs';
+
+describe('Tabs component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Tabs);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('methods', () => {
+		it('Should check isSelected', () => {
+			expect(wrapper.vm.isSelected(1)).toBeFalsy();
+		});
+
+		it('Should emit event when tab is changed', () => {
+			wrapper.vm.changeTab();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when next is triggeredx', () => {
+			wrapper.vm.next();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when previous is triggered', () => {
+			wrapper.vm.previous();
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should emit event when toIndex is triggered', () => {
+			wrapper.vm.toIndex(1);
+			expect(wrapper.vm.selected).toEqual(1);
+			expect(wrapper.emitted().update).toBeTruthy();
+		});
+
+		it('Should updateTab in parent and route', () => {
+			const _component = {
+				currentTab: '',
+				$router: {
+					history: {
+						current: {
+							path: 'some',
+						},
+					},
+					push: () => {},
+				},
+			};
+			const spyObj = jest.spyOn(_component.$router, 'push');
+			wrapper.vm.updateTabRouting(_component, { path: 'desembolso' }, 'nextRoutePrefix');
+			expect(_component.currentTab).toEqual('desembolso');
+			expect(spyObj).toHaveBeenCalled();
+		});
+	});
+});

package/src/components/Tabs/index.ts

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

package/src/components/TextArea/TextArea.scss

@@ -0,0 +1,75 @@
+@import '../../configurations/mixins';
+
+.farm-textarea {
+	min-height: 64px;
+
+	&--hiddendetails {
+		height: auto;
+	}
+
+	&--textarea {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		border: 1px solid;
+		border-color: var(--farm-bw-black-10);
+		min-height: 36px;
+		border-radius: 5px;
+		padding: 8px 0 0 8px;
+		margin-bottom: 4px;
+		background-color: white;
+		width: 100%;
+
+		& > textarea {
+			flex: 1;
+			outline: none;
+			color: var(--farm-bw-black-50);
+			font-size: 12px;
+			font-weight: 400;
+			max-width: 100%;
+			max-height: 100%;
+		}
+	}
+
+	&--focused .farm-textarea--textarea {
+		border-color: var(--farm-bw-black-30);
+	}
+
+	&--disabled {
+		textarea {
+			color: var(--farm-bw-black-30);
+		}
+	}
+
+	.farm-caption {
+		line-height: 12px;
+	}
+
+	&__hint-text {
+		@include hintText;
+	}
+}
+
+.farm-textarea--touched.farm-textarea--validatable {
+	&.farm-textarea--error {
+		.farm-textarea {
+			&--textarea {
+				border-color: var(--farm-error-base);
+
+				& > textarea {
+					color: var(--farm-neutral-darken);
+				}
+			}
+		}
+	}
+}
+
+.farm-textarea--blured.farm-textarea--validatable:not(.farm-textarea--error) {
+	.farm-textarea--textarea {
+		border-color: var(--farm-primary-base);
+
+		& > textarea {
+			color: var(--farm-neutral-darken);
+		}
+	}
+}