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

package/src/components/Modal/Modal.vue

@@ -0,0 +1,135 @@
+<template>
+	<transition name="fade">
+		<div
+			v-if="inputValue"
+			:class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }"
+			:style="styleObject"
+		>
+			<div class="farm-modal--container">
+				<div class="farm-modal--header">
+					<!-- @slot header -->
+					<slot name="header"></slot>
+				</div>
+				<div class="farm-modal--content">
+					<div :style="styles">
+						<!-- @slot main content -->
+						<slot name="content"></slot>
+					</div>
+				</div>
+				<div class="farm-modal--footer">
+					<!-- @slot footer -->
+					<slot name="footer"></slot>
+				</div>
+			</div>
+			<div class="farm-modal--overlay" @click="close()"></div>
+		</div>
+	</transition>
+</template>
+
+<script lang="ts">
+import {
+	onBeforeUnmount,
+	onMounted,
+	PropType,
+	reactive,
+	ref,
+	toRefs,
+	watch,
+} from 'vue';
+import { calculateMainZindex } from '../../helpers';
+
+export default {
+	name: 'farm-modal',
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: { type: Boolean, required: true, default: false },
+		/**
+		 * Is persistent
+		 */
+		persistent: { type: Boolean, default: false },
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'default'>,
+			default: 'default',
+		},
+		/**
+		 * content offset, in pixels, from the top
+		 */
+		offsetTop: {
+			type: Number,
+			default: 0,
+		},
+		/**
+		 * content offset, in pixels, from the bottom
+		 */
+		offsetBottom: {
+			type: Number,
+			default: 0,
+		},
+	},
+	setup(props, { emit }) {
+		let hasBeenBoostrapped = false;
+		const { offsetTop, offsetBottom, persistent, size } = toRefs(props);
+		const inputValue = ref(props.modelValue);
+		const styleObject = reactive({ zIndex: 1 });
+		const styles = {
+			marginTop: offsetTop.value + 'px',
+			marginBottom: offsetBottom.value + 'px',
+			maxHeight: `calc(100vh - ${offsetTop.value + offsetBottom.value + 48}px)`,
+		};
+
+		const close = () => {
+			if (persistent.value) {
+				return false;
+			}
+			window.removeEventListener('keyup', escHandler);
+			inputValue.value = false;
+			emit('input', false);
+		};
+
+		watch(
+			() => props.modelValue,
+			newValue => {
+				inputValue.value = newValue;
+				if (newValue) {
+					bootstrap();
+				}
+			}
+		);
+
+		onMounted(() => {
+			bootstrap();
+		});
+
+		const escHandler = event => {
+			if (event.key === 'Escape') {
+				close();
+			}
+		};
+
+		const bootstrap = () => {
+			styleObject.zIndex = calculateMainZindex();
+			window.addEventListener('keyup', escHandler);
+			hasBeenBoostrapped = true;
+		};
+
+		onBeforeUnmount(() => {
+			if (hasBeenBoostrapped) {
+				window.removeEventListener('resize', escHandler);
+			}
+		});
+
+		return {
+			inputValue,
+			styles,
+			styleObject,
+			size,
+			close,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './Modal';
+</style>

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

@@ -0,0 +1,19 @@
+import { shallowMount } from '@vue/test-utils';
+
+import Modal from '../index';
+
+describe('Modal component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Modal, {
+			propsData: {
+				value: false,
+			},
+		});
+	});
+
+	test('Modal created', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Modal/index.ts

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

package/src/components/ModalPromptUser/ModalPromptUser.scss

@@ -0,0 +1,3 @@
+section.modal-content {
+    margin: 32px 0 16px;
+}

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -0,0 +1,121 @@
+// import { withDesign } from 'storybook-addon-designs';
+import ModalPromptUser from './ModalPromptUser.vue';
+
+export default {
+	title: 'Interactions/ModalPromptUser',
+	component: ModalPromptUser,
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Modal Prompt User to Confirm<br />
+				selector: <em>farm-prompt-user</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1%3A7',
+		},
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	template: `<div>
+		<farm-prompt-user match="CONFIRMAR" title="Título" subtitle="Digite CONFIRMAR para habilitar" v-model="showPrompt" />
+			click:
+			<farm-btn color="primary" @click="showPrompt = true;">
+			reabrir
+			</farm-btn>
+		</div>`,
+});
+
+export const Error = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	template: `<div>
+		<farm-prompt-user match="REMOVER" title="Título" subtitle="Digite REMOVER para habilitar" v-model="showPrompt" confirmColor="error" confirmLabel="Remover" />
+			<farm-btn color="primary" @click="showPrompt = true;">
+			reabrir
+			</farm-btn>
+		</div>`,
+});
+
+
+export const ButtonLabels = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	template: `<div>
+		<farm-prompt-user
+			match="CONFIRMAR"
+			title="Título"
+			subtitle="Digite CONFIRMAR para habilitar"
+			confirmLabel="SIM"
+			closeLabel="NÃO"
+			v-model="showPrompt"
+		/>
+			click:
+			<farm-btn @click="showPrompt = true;">
+			reabrir
+			</farm-btn>
+		</div>`,
+});
+
+export const Slot = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	template: `<div>
+		<farm-prompt-user match="CONFIRMAR" title="Título" subtitle="" v-model="showPrompt">
+		<template v-slot:subtitle>
+			<farm-caption>Using caption and <farm-chip dense>chip</farm-chip></farm-caption>
+			<br />
+			Digite <strong>CONFIRMAR</strong> para habilitar
+		</template>
+		</farm-prompt-user>
+			click:
+			<farm-btn color="primary" @click="showPrompt = true;">
+			reabrir
+			</farm-btn>
+		</div>`,
+});
+
+export const OnConfirm = () => ({
+	data() {
+		return {
+			showPrompt: false,
+		};
+	},
+	methods: {
+		onConfirm() {
+			alert('On confirm triggered');
+		}
+	},
+	template: `<div>
+		<farm-prompt-user
+			match="CONFIRMAR"
+			title="Título"
+			subtitle="Digite CONFIRMAR para habilitar"
+			v-model="showPrompt"
+			@onConfirm="onConfirm"
+		/>
+		click:
+		<farm-btn color="primary" @click="showPrompt = true;">
+		reabrir
+		</farm-btn>
+		</div>`,
+});

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -0,0 +1,135 @@
+<template>
+	<farm-modal v-model="inputVal" size="sm" :offsetTop="48" :offsetBottom="68">
+		<template v-slot:header>
+			<farm-dialog-header :title="title" @onClose="close" />
+		</template>
+		<template v-slot:content>
+			<section class="modal-content">
+				<!--
+				@slot subtitle content
+				-->
+				<slot name="subtitle"></slot>
+				<farm-promptusertoconfirm
+					v-if="inputVal"
+					v-model="canConfirm"
+					:match="match"
+					:title="subtitle"
+				/>
+			</section>
+		</template>
+
+		<template v-slot:footer>
+			<farm-dialog-footer
+				:confirmColor="confirmColor"
+				:confirmLabel="confirmLabel"
+				:closeLabel="closeLabel"
+				:isConfirmDisabled="!canConfirm"
+				@onConfirm="confirm"
+				@onClose="close"
+			/>
+		</template>
+	</farm-modal>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-prompt-user',
+	props: {
+		/**
+		 * Open/close modal
+		 */
+		value: {
+			required: true,
+		},
+		/**
+		 * Modal title
+		 */
+		title: {
+			required: true,
+			type: String,
+		},
+		/**
+		 * Modal subtitle
+		 */
+		subtitle: {
+			required: true,
+			type: String,
+		},
+		/**
+		 * Confirm button color
+		 */
+		confirmColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Confirm button label
+		 */
+		confirmLabel: {
+			type: String,
+			default: 'Confirmar',
+		},
+		/**
+		 * Close button label
+		 */
+		closeLabel: {
+			type: String,
+			default: 'Fechar',
+		},
+		/**
+		 * String to be matched (and enable confirm button)
+		 */
+		match: {
+			required: true,
+			type: String,
+		},
+	},
+	data() {
+		return {
+			canConfirm: false,
+		};
+	},
+	computed: {
+		inputVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+	},
+	methods: {
+		close() {
+			this.inputVal = false;
+		},
+		confirm() {
+			/**
+			 * input is correct filled and confirm button is triggered
+			 *
+			 * @event onConfirm
+			 */
+			this.$emit('onConfirm');
+			this.inputVal = false;
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './ModalPromptUser';
+</style>

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

@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+import ModalPromptUser from '../ModalPromptUser';
+
+describe('ModalPromptUser component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ModalPromptUser, {
+			propsData: {
+				value: false,
+				title: '',
+				subtitle: '',
+				match: 'CONFIRMAR',
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/ModalPromptUser/index.ts

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

package/src/components/MultipleFilePicker/MultipleFilePicker.scss

@@ -0,0 +1,168 @@
+section {
+	border: 2px dashed var(--farm-primary-base);
+	border-radius: 2rem;
+	background-color: var(--farm-primary-lighten);
+	padding: 1.5rem;
+	position: relative;
+	min-height: 12rem;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	width: 100%;
+
+	input {
+		opacity: 0;
+		width: 100%;
+		height: 100%;
+		position: absolute;
+		cursor: pointer;
+	}
+
+	&.highlight {
+		background: var(--farm-primary-lighten);
+		opacity: 0.5;
+	}
+
+	.selectfile-container {
+		text-align: center;
+		.farm-icon {
+			font-size: 2.25rem;
+			margin-bottom: 1rem;
+		}
+		p {
+			font-weight: 600;
+			color: var(--farm-bw-black-50);
+		}
+	}
+
+	.reset-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		> p {
+			margin-bottom: 0;
+			font-size: 0.75rem;
+		}
+		.farm-btn {
+			margin-top: 1rem;
+		}
+	}
+}
+.fileDocumentStyled {
+	margin-left: 1rem;
+	margin-right: 5px;
+	span {
+		display: block;
+		font-size: 24px;
+		color: var(--farm-bw-white); 
+	}
+
+	@media screen and (max-width: 600px) {
+		display: none;
+	}
+}
+.listFilesStyled {
+	width: 100%;
+	list-style: none;
+	min-height: auto;
+	margin-bottom: 20px;
+	padding: 0;
+
+	&--download {
+		margin-bottom: 1rem;
+		min-height: auto;
+	}
+
+	&--margin-bottom {
+		min-height: 100px;
+		margin-bottom: 1.25rem;
+	}
+}
+
+.itemFilesStyled {
+	width: 100%;
+	background-color: var(--farm-bw-black-5);
+	border: 1px solid var(--farm-bw-black-30);
+	border-radius: 50px;
+	color: var(--farm-bw-white);
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	margin-bottom: 16px;
+	padding: 14px 8px;
+
+	&:last-child {
+		margin-bottom: 0;
+	}
+
+	@media screen and (max-width: 600px) {
+		flex-direction: column;
+	}
+}
+
+.itemFilesContentStyled {
+	width: calc(100% - 24px);
+	display: flex;
+	align-items: center;
+
+	p{
+		margin-top: 2px;
+	}
+
+	@media screen and (max-width: 600px) {
+		display: block;
+		text-align: center;
+	}
+}
+
+.itemFilesContentButtonStyled {
+	display: flex;
+	margin-right: 1rem;
+	justify-content: flex-end;
+	width: 15rem;
+	span {
+		font-size: 1.5rem;
+		color: var(--farm-bw-black-50);	
+		cursor: pointer;
+	}
+
+	@media screen and (max-width: 600px) {
+		justify-content: center;
+		margin-right: 0;
+	}
+}
+
+.download-button {
+	&__text {
+		font-size: 0.95rem !important;
+	}
+	@media screen and (max-width: 600px) {
+		margin-right: 0 !important;
+
+		&__text {
+			display: none;
+		}
+	}
+}
+
+.download-button.farm-btn {
+	background-color: var(--farm-bw-black-30) !important;
+	color: var(--farm-bw-black-50);
+	margin-right: 1rem;
+
+	&__content {
+		color: var(--farm-bw-black-50);
+	}
+}
+
+.download-button__icon {
+	color: var(--farm-bw-black-50) !important;
+}
+
+
+
+.upload-icon {
+	cursor: pointer;
+}

package/src/components/MultipleFilePicker/MultipleFilePicker.stories.js

@@ -0,0 +1,74 @@
+import MultipleFilePicker from './MultipleFilePicker.vue';
+
+export default {
+	title: 'Form/MultipleFilePicker',
+	component: MultipleFilePicker,
+	parameters: {
+		docs: {
+			description: {
+				component: `Multiple File Picker<br />
+				selector: <em>farm-multiple-filepicker</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-multiple-filepicker />',
+});
+
+export const MaxFileSize = () => ({
+	template: '<farm-multiple-filepicker :maxFileSize="5" />',
+});
+
+export const MaxFilesNumber = () => ({
+	methods: {
+		onMaxFilesNumberWarning() {
+			alert('Max files count reached');
+		},
+	},
+	template: `<div>
+		<farm-multiple-filepicker :maxFileSize="5" :maxFilesNumber="2" @onMaxFilesNumberWarning="onMaxFilesNumberWarning" />
+		max files allowed: 2
+	</div>`,
+});
+
+export const Download = () => ({
+	template:
+		'<farm-multiple-filepicker :maxFileSize="5" :downloadFiles="[{ id: 1, name: `Arquivo 1`, size: 10000 }, { id: 2, name: `Arquivo 2`, size: 15000 }]" />',
+});
+
+export const InvalidFiles = () => ({
+	data() {
+		return {
+			fileTypes:
+				'.csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel',
+		};
+	},
+	methods: {
+		onInvalidFiles(files) {
+			alert(`${files.length} invalid file(s)`);
+		},
+	},
+	template: `<div>
+		<farm-multiple-filepicker
+			:maxFileSize="5"
+			:maxFilesNumber="3"
+			:acceptedFileTypes="fileTypes"
+			@onInvalidFiles="onInvalidFiles" />
+	</div>`,
+});
+
+export const Reset = () => ({
+	methods: {
+		onReset() {
+			this.$refs.picker.reset();
+		}
+	},
+	template: `<div>
+		<farm-multiple-filepicker ref="picker" />
+		<farm-btn @click="onReset" class="mt-1">reset</farm-btn>
+	</div>`,
+});