@farm-investimentos/front-mfe-components 14.2.2 → 15.0.1

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

@@ -1,77 +0,0 @@
-import { shallowMount } from '@vue/test-utils';
-import FilePicker from '../FilePicker';
-
-describe('FilePicker component', () => {
-	let wrapper;
-	let component;
-
-	beforeEach(() => {
-		wrapper = shallowMount(FilePicker);
-		component = wrapper.vm;
-	});
-
-	test('Created hook', () => {
-		expect(wrapper).toBeDefined();
-	});
-
-	describe('Component methods', () => {
-		describe('fileChange', () => {
-			it('Should emit event with a file', () => {
-				component.fileChange([1]);
-				expect(wrapper.emitted().onFileChange[0]).toBeDefined();
-			});
-
-			it('Should not emit', () => {
-				component.fileChange([]);
-				expect(wrapper.emitted().onFileChange).toBeUndefined();
-			});
-
-			it('Should handle max file size', async () => {
-				await wrapper.setProps({
-					maxFileSize: 5,
-				});
-				component.fileChange([{ size: 6 * 1024 * 1024 }]);
-				expect(wrapper.vm.maxSizeReach).toBeTruthy();
-			});
-		});
-
-		describe('handlerFunctionHighlight', () => {
-			it('Should add class', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'add');
-				component.handlerFunctionHighlight();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
-
-		describe('handlerFunctionUnhighlight', () => {
-			it('Should add class', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea.classList, 'remove');
-				wrapper.vm.handlerFunctionUnhighlight();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
-
-		describe('addListeners', () => {
-			it('Should add listeners', () => {
-				const spyObj = jest.spyOn(wrapper.vm.dropArea, 'addEventListener');
-				wrapper.vm.addListeners();
-				expect(spyObj).toHaveBeenCalled();
-			});
-		});
-	});
-
-	describe('Computed properties', () => {
-		it('Should return maxSizeReachMsg', () => {
-			wrapper.setProps({
-				maxFileSize: 5,
-			});
-			expect(wrapper.vm.maxSizeReachMsg).toContain('Arquivo ultrapassou o tamanho máximo');
-		});
-
-		it('Should have input element', () => {
-			expect(component.inputEl).toBeDefined();
-		});
-
-		
-	});
-});

package/src/components/FilePicker/index.ts

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

package/src/components/TextField/TextField.scss

@@ -1,43 +0,0 @@
-.farm-textfield {
-    padding-bottom: 4px;
-
-    &.v-input {
-
-        &.v-text-field {
-
-            :deep(.v-input__slot) {
-                min-height: 36px !important;
-                height: 36px;
-                background: white;
-                padding: 0 8px;
-
-                fieldset {
-                    border-color: var(--farm-gray-lighten);
-                }
-
-                input,
-                .v-select__selection {
-                    font-size: 12px;
-                }
-            }
-
-            &.v-input--is-label-active.v-input--is-focused:not(.error--text) {
-                :deep(.v-input__slot fieldset) {
-                    border-color: var(--v-secondary-base);
-                }
-
-                :deep(input) {
-                    color: var(--v-secondary-base);
-                }
-            }
-
-            &.error--text {
-                :deep(.v-input__slot) fieldset {
-                    border-color: var(--farm-error-primary);
-                    border-width: 1px;
-                }
-
-            }
-        }
-    }
-}

package/src/components/TextField/TextField.stories.js

@@ -1,104 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-import TextField from './TextField.vue';
-
-export default {
-	title: 'Form/TextField',
-	component: TextField,
-	decorators: [withDesign],
-	parameters: {
-		docs: {
-			description: {
-				component: `Text field<br />
-				selector: <em>farm-texfield</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%85---Design-System-%7C-v1?node-id=1503%3A227',
-		},
-		viewMode: 'docs',
-	},
-};
-
-export const Primary = () => ({
-	data() {
-		return {
-			v: 'input text',
-		};
-	},
-	template: `<div style="width: 480px">
-		<farm-textfield v-model="v" />
-		value: {{ v }}
-	</div>`,
-});
-
-export const Disabled = () => ({
-	data() {
-		return {
-			v: 'disabled field',
-		};
-	},
-	template: `<div style="width: 480px">
-		<farm-textfield v-model="v" disabled />
-	</div>`,
-});
-
-export const Readonly = () => ({
-	data() {
-		return {
-			v: 'readonly field',
-		};
-	},
-	template: `<div style="width: 480px">
-		<farm-textfield v-model="v" readonly />
-	</div>`,
-});
-
-export const BindVar = () => ({
-	data() {
-		return {
-			v: '',
-		};
-	},
-	template: `<div style="width: 480px">
-		<farm-textfield v-model="v" />
-		value: {{ v }}
-	</div>`,
-});
-
-export const Validate = () => ({
-	data() {
-		return {
-			v1: 'input 1',
-			v2: '',
-			v3: '',
-			v4: '',
-			rules: {
-				required: value => !!value || 'Required field',
-				email: v =>
-					!v ||
-					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
-					'Must be an e-mail',
-			},
-		};
-	},
-	template: `<div style="width: 480px">
-		<farm-label required>Required field</farm-label>
-		<farm-textfield v-model="v1" :rules="[rules.required]" />
-
-		<farm-label>E-mail</farm-label>
-		<farm-textfield v-model="v2" :rules="[rules.email]" />
-
-		<farm-label required>Required and e-mail</farm-label>
-		<farm-textfield v-model="v3" :rules="[rules.required, rules.email]" />
-
-		<farm-label required>Required field with hint</farm-label>
-		<farm-textfield v-model="v4" :rules="[rules.required]" hint="hint text" />
-
-		<farm-label required>Required field with icon</farm-label>
-		<farm-textfield v-model="v1" :rules="[rules.required]" append-icon="mdi-eye" />
-
-	</div>`,
-});

package/src/components/TextField/TextField.vue

@@ -1,18 +0,0 @@
-<template>
-	<v-text-field class="farm-textfield" v-on="{ ...$listeners }" v-bind="$attrs" outlined />
-</template>
-<script lang="ts">
-import Vue from 'vue';
-import { VTextField } from 'vuetify/lib/components/VTextField';
-
-export default Vue.extend({
-	name: 'farm-textfield',
-	inheritAttrs: true,
-	components: {
-		VTextField,
-	},
-});
-</script>
-<style lang="scss" scoped>
-@import 'TextField.scss';
-</style>

package/src/components/TextField/index.ts

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

package/src/scss/ButtonOverrides.scss

@@ -1,73 +0,0 @@
-.v-btn {
-
-    .v-btn__content {
-        text-transform: none;
-        letter-spacing: 0;
-        font-weight: 700;
-    }
-
-    &.v-size--default {
-        font-size: 0.75rem !important;
-
-        .v-icon {
-            font-size: 1rem;
-        }
-    }
-
-    &.v-btn-outlined-noborder {
-        border: 0;
-    }
-
-    &.v-btn-rounded {
-        border-radius: 2rem;
-    }
-
-    &.v-btn--no-min-width {
-        min-width: 0 !important;
-        padding: 0.125rem 0.35rem !important;
-        height: auto !important;
-    }
-}
-
-.v-btn.v-btn-noeffect {
-    &:hover {
-        opacity: 0.8;
-    }
-
-    &:before {
-        opacity: 0 !important;
-    }
-
-    .v-ripple__container {
-        opacity: 0 !important;
-    }
-}
-
-
-.v-btn--plain {
-    &:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) {
-        .v-btn__content {
-            opacity: 1;
-        }
-    }
-    &:hover {
-        opacity: 0.62;
-    }
-}
-
-
-@media screen and (max-width: 600px) {
-
-    .v-btn.v-btn-responsive,
-    .v-btn.v-btn--responsive {
-        width: 100%;
-        margin: 0;
-    }
-
-    .farm-btn.v-btn-responsive,
-    .farm-btn.v-btn--responsive {
-        width: 100%;
-        margin: 0;
-    }
-
-}

package/src/scss/DefaultModal.scss

@@ -1,89 +0,0 @@
-.modal-default.v-dialog {
-	background: white;
-
-	header {
-		font-size: 0.75rem;
-		color: var(--v-secondary-base);
-		padding-right: calc(1rem);
-		position: absolute;
-		z-index: 4;
-		max-width: calc(960px);
-		margin-top: -1.5rem;
-		padding: 1rem;
-		background-color: white;
-		font-weight: 700;
-		border-radius: 4px 4px 0 0;
-		border-bottom: 1px solid var(--v-gray-lighten2);
-
-		.dialog-header__title-icon {
-			color: var(--v-secondary-base);
-			font-size: 1rem;
-		}
-
-		.dialog-header__close-icon {
-			position: absolute;
-			right: 1rem;
-			color: var(--v-secondary-base);
-			font-size: 1rem;
-			&:hover {
-				opacity: 0.8;
-			}
-		}
-	}
-
-	> main > .v-main__wrap > section {
-		padding: 1.5rem;
-		font-size: 0.75rem;
-	}
-
-	.v-dialog__footer {
-		border-top: 1px solid var(--v-gray-lighten2);
-		padding: 1rem;
-	}
-
-	&.modal-default-top {
-		position: fixed;
-		top: 0;
-		header {
-			padding-top: 3rem;
-		}
-		> main > .v-main__wrap > section {
-			padding-top: 5rem;
-		}
-	}
-}
-
-@media screen and (min-width: 960px) {
-	.v-dialog.modal-default {
-		max-width: 960px;
-	}
-	.v-dialog.modal-default.modal-default-small {
-		max-width: calc(480px - 2rem);
-
-		header {
-			max-width: calc(480px - 2rem);
-		}
-	}
-
-	.v-dialog.modal-default.modal-default-x-small {
-		max-width: calc(392px - 2rem);
-
-		header {
-			max-width: calc(392px - 2rem);
-		}
-	}
-
-	.v-dialog.modal-default.modal-default-md {
-		max-width: calc(600px - 2rem);
-
-		header {
-			max-width: calc(600px - 2rem);
-		}
-	}
-}
-
-@media screen and (max-width: 960px) {
-	.v-dialog.modal-default header {
-		max-width: calc(100% - 3rem);
-	}
-}

package/src/scss/DialogOverrides.scss

@@ -1,94 +0,0 @@
-
-.v-dialog.vuedl-layout {
-	.v-toolbar {
-		color: var(--v-secondary-base);
-		padding-right: calc(1rem);
-		padding: 0;
-		background-color: white;
-		font-weight: 700;
-		.v-toolbar__content {
-			background-color: white;
-			.v-toolbar__title {
-				font-size: 0.75rem;
-			}
-		}
-		&.error {
-			color: var(--v-error-base);
-		}
-	}
-	.v-dialog-wrapper {
-		position: relative;
-	}
-	.vuedl-layout__closeBtn {
-		display: none;
-	}
-	.v-card__actions {
-		border-top: 1px solid var(--v-gray-lighten2);
-		padding: 1rem;
-	}
-	.v-card__text {
-		border-top: 1px solid var(--v-gray-lighten2);
-		padding-top: 2rem !important;
-		padding-bottom: 2rem !important;
-		font-size: 0.75rem !important;
-		color: var(--v-primary-base) !important;
-		font-family: 'Montserrat', sans-serif !important;
-	}
-
-	.v-btn {
-		&.secondary-outlined--text {
-			background-color: white;
-			border: 1px solid var(--v-secondary-base);
-			color: var(--v-secondary-base);
-		}
-	}
-
-	.v-btn.primary--text,
-	.v-btn.danger--text {
-		background-color: white;
-		border: 1px solid var(--v-primary-base);
-	}
-
-	.v-btn.error--text {
-		background-color: var(--v-error-base);
-		color: white !important;
-	}
-
-	.v-btn.secondary--text {
-		background-color: var(--v-secondary-base);
-	}
-	.v-btn.info--text {
-		background-color: var(--v-info-base);
-	}
-	.v-btn.info--text {
-		background-color: var(--v-info-base);
-	}
-	.v-btn.yellow--text {
-		background-color: var(--v-yellow-base);
-	}
-	.v-btn.extra--text {
-		background-color: var(--v-extra-base);
-	}
-	.v-btn.gray--text {
-		background-color: var(--v-gray-base);
-	}
-	.v-btn.info--text,
-	.v-btn.yellow--text,
-	.v-btn.extra--text,
-	.v-btn.gray--text,
-	.v-btn.secondary--text,
-	.v-btn.yellow--text {
-		
-		margin-left: 0.75rem !important;
-	}
-	.v-btn.yellow--text {
-		color: black !important;
-	}
-	.v-btn.info--text,
-	.v-btn.yellow--text,
-	.v-btn.extra--text,
-	.v-btn.gray--text,
-	.v-btn.secondary--text {
-		color: white !important;
-	}
-}