@farm-investimentos/front-mfe-components 3.4.1 → 3.4.4

package/src/components/FilePicker/FilePicker.vue

@@ -1,78 +1,106 @@
 <template>
-    <section ref="container" id="droparea-container">
-        <input
-            type="file"
-            name="file"
-            @change="fileChange($event.target.files)"
-            :accept="acceptedFileTypes"
-        />
-        <div v-if="!selectedFile" class="selectfile-container">
-            <v-icon color="secondary">mdi-cloud-upload</v-icon>
-            <p>Clique para selecionar ou arraste o arquivo aqui</p>
-        </div>
-        <div v-if="selectedFile" class="reset-container">
-            <div>
-                <v-icon>mdi-file</v-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
-                    Math.floor(selectedFile.size / 1024)
-                }}kB)
-            </div>
+	<section ref="container" id="droparea-container">
+		<input
+			type="file"
+			name="file"
+			@change="fileChange($event.target.files)"
+			:accept="acceptedFileTypes"
+		/>
+		<div v-if="!selectedFile" class="selectfile-container">
+			<v-icon color="secondary">mdi-cloud-upload</v-icon>
+			<p>Clique para selecionar ou arraste o arquivo aqui</p>
+		</div>
+		<div v-if="selectedFile || maxSizeReach" class="reset-container">
+			<div v-if="selectedFile">
+				<v-icon>mdi-file</v-icon> Arquivo selecionado: {{ selectedFile.name }} ({{
+					Math.floor(selectedFile.size / 1024)
+				}}kB)
+			</div>
 
-            <v-btn depressed outlined color="secondary" class="v-btn-responsive" @click="reset"
-                >Escolher outro</v-btn
-            >
-        </div>
-    </section>
+			<p v-if="maxSizeReach" v-html="maxSizeReachMsg"></p>
+
+			<v-btn depressed outlined color="secondary" class="v-btn-responsive" @click="reset"
+				>Escolher outro</v-btn
+			>
+		</div>
+	</section>
 </template>
 <script>
 import { VBtn } from 'vuetify/lib/components/VBtn';
 import { VIcon } from 'vuetify/lib/components/VIcon';
 export default {
-    props: {
-        acceptedFileTypes: {
-            type: String,
-            default: '*',
-        },
-    },
-    data() {
-        return {
-            selectedFile: null,
-            dropArea: null,
-        };
-    },
-    mounted() {
-        this.dropArea = this.$refs.container;
-        this.addListeners();
-    },
-    methods: {
-        reset() {
-            this.$refs.container.querySelector('input').value = '';
-            this.$emit('onReset');
-            this.selectedFile = null;
-        },
-        fileChange(fileList) {
-            if (!fileList.length || fileList.length > 1) return;
-            this.selectedFile = fileList[0];
-            this.$emit('onFileChange', this.selectedFile);
-        },
-        handlerFunctionHighlight() {
-            this.dropArea.classList.add('highlight');
-        },
-        handlerFunctionUnhighlight() {
-            this.dropArea.classList.remove('highlight');
-        },
-        addListeners() {
-            this.dropArea.addEventListener('dragenter', this.handlerFunctionHighlight, false);
-            this.dropArea.addEventListener('dragleave', this.handlerFunctionUnhighlight, false);
-            this.dropArea.addEventListener('dragover', this.handlerFunctionHighlight, false);
-            this.dropArea.addEventListener('drop', this.handlerFunctionUnhighlight, false);
-        },
-    },
-    components: {
-        VBtn,
-        VIcon,
-    },
+	props: {
+		/*
+		 * Accepted file types
+		 */
+		acceptedFileTypes: {
+			type: String,
+			default: '*',
+		},
+        /**
+         * Max file size (in MB)
+         */
+		maxFileSize: {
+			default: null,
+		},
+	},
+	data() {
+		return {
+			selectedFile: null,
+			dropArea: null,
+			maxSizeReach: false,
+		};
+	},
+	computed: {
+		maxSizeReachMsg() {
+			return `Arquivo ultrapassou o tamanho máximo de ${this.maxFileSize}MB`;
+		}
+	},
+	mounted() {
+		this.dropArea = this.$refs.container;
+		this.addListeners();
+	},
+	methods: {
+		reset() {
+			this.$refs.container.querySelector('input').value = '';
+			this.$emit('onReset');
+            this.maxSizeReach = false;
+			this.selectedFile = null;
+		},
+		fileChange(fileList) {
+			this.maxSizeReach = false;
+			if (!fileList.length || fileList.length > 1) return;
+
+			if (this.maxFileSize) {
+				const sizeInMB = fileList[0].size / (1024 * 1024);
+
+				if (sizeInMB > this.maxFileSize) {
+					this.maxSizeReach = true;
+					return;
+				}
+			}
+			this.selectedFile = fileList[0];
+			this.$emit('onFileChange', this.selectedFile);
+		},
+		handlerFunctionHighlight() {
+			this.dropArea.classList.add('highlight');
+		},
+		handlerFunctionUnhighlight() {
+			this.dropArea.classList.remove('highlight');
+		},
+		addListeners() {
+			this.dropArea.addEventListener('dragenter', this.handlerFunctionHighlight, false);
+			this.dropArea.addEventListener('dragleave', this.handlerFunctionUnhighlight, false);
+			this.dropArea.addEventListener('dragover', this.handlerFunctionHighlight, false);
+			this.dropArea.addEventListener('drop', this.handlerFunctionUnhighlight, false);
+		},
+	},
+	components: {
+		VBtn,
+		VIcon,
+	},
 };
 </script>
 <style scoped lang="scss">
 @import './FilePicker.scss';
-</style>
+</style>

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

@@ -23,6 +23,14 @@ describe('FilePicker component', () => {
 				wrapper.vm.fileChange([]);
 				expect(wrapper.emitted().onFileChange).toBeUndefined();
 			});
+
+			it('Should handle max file size', async () => {
+				await wrapper.setProps({
+					maxFileSize: 5,
+				});
+				wrapper.vm.fileChange([{ size: 6 * 1024 * 1024 }]);
+				expect(wrapper.vm.maxSizeReach).toBeTruthy();
+			});
 		});
 
 		describe('handlerFunctionHighlight', () => {
@@ -49,4 +57,13 @@ describe('FilePicker component', () => {
 			});
 		});
 	});
+
+	describe('Computed properties', () => {
+		it('Should return maxSizeReachMsg', () => {
+			wrapper.setProps({
+				maxFileSize: 5,
+			});
+			expect(wrapper.vm.maxSizeReachMsg).toContain('Arquivo ultrapassou o tamanho máximo');
+		});
+	});
 });

package/src/components/IconBox/IconBox.stories.js

@@ -1,7 +1,7 @@
 import IconBox from './IconBox.vue';
 
 export default {
-	title: 'Example/IconBox',
+	title: 'API/IconBox',
 	component: IconBox,
 };
 

package/src/components/Loader/Loader.stories.js

@@ -1,7 +1,7 @@
 import Loader from './Loader.vue';
 
 export default {
-    title: 'Example/Loader',
+    title: 'API/Loader',
     component: Loader,
 };
 

package/src/components/Logos/OriginatorLogo/OriginatorLogo.stories.js

@@ -1,7 +1,7 @@
 import OriginatorLogo from './OriginatorLogo.vue';
 
 export default {
-	title: 'Example/Logos/OriginatorLogo',
+	title: 'API/Logos/OriginatorLogo',
 	component: OriginatorLogo,
 };
 

package/src/components/Logos/ProductLogo/ProductLogo.stories.js

@@ -1,7 +1,7 @@
 import ProductLogo from './ProductLogo.vue';
 
 export default {
-	title: 'Example/Logos/ProductLogo',
+	title: 'API/Logos/ProductLogo',
 	component: ProductLogo,
 };
 

package/src/components/MainFilter/MainFilter.stories.js

@@ -1,7 +1,7 @@
 import MainFilter from './MainFilter.vue';
 
 export default {
-	title: 'Example/MainFilter',
+	title: 'API/MainFilter',
 	component: MainFilter,
 };
 

package/src/components/ManagersList/ManagersList.stories.js

@@ -1,7 +1,7 @@
 import ManagersList from './ManagersList';
 
 export default {
-    title: 'Example/ManagersList',
+    title: 'API/ManagersList',
     component: ManagersList,
 };
 

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

@@ -1,14 +1,57 @@
 import ModalPromptUser from './ModalPromptUser.vue';
 
 export default {
-	title: 'Example/ModalPromptUser',
+	title: 'API/ModalPromptUser',
 	component: ModalPromptUser,
 };
 
 export const Primary = () => ({
 	components: { ModalPromptUser },
-	template:
-		'<ModalPromptUser match="CONFIRMAR" title="Título" subtitle="Digite CONFIRMAR para habilitar" :value="true" />',
+	data() {
+		return {
+			showPrompt: true,
+		};
+	},
+	template: `<div>
+		<ModalPromptUser match="CONFIRMAR" title="Título" subtitle="Digite CONFIRMAR para habilitar" v-model="showPrompt" />
+			<v-btn color="secondary" @click="showPrompt = true;">
+			reabrir
+			</v-btn>
+		</div>`,
+});
+export const Error = () => ({
+	components: { ModalPromptUser },
+	data() {
+		return {
+			showPrompt: true,
+		};
+	},
+	template: `<div>
+		<ModalPromptUser match="REMOVER" title="Título" subtitle="Digite REMOVER para habilitar" v-model="showPrompt" confirmColor="error" confirmLabel="Remover" />
+			<v-btn color="secondary" @click="showPrompt = true;">
+			reabrir
+			</v-btn>
+		</div>`,
 });
 
-Primary.storyName = 'Básico';
+Primary.story = {
+	name: 'Básico',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1%3A7',
+		},
+	},
+};
+
+Error.story = {
+	name: 'Error',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1%3A7',
+		},
+	},
+};

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/MultipleSelectShortener/MultipleSelectShortener.stories.js

@@ -1,7 +1,7 @@
 import MultipleSelectShortener from './MultipleSelectShortener';
 
 export default {
-	title: 'Example/MultipleSelectShortener',
+	title: 'API/MultipleSelectShortener',
 	component: MultipleSelectShortener,
 };
 

package/src/components/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -1,19 +1,39 @@
 import PromptUserToConfirm from './PromptUserToConfirm';
 
 export default {
-	title: 'Example/PromptUserToConfirm',
+	title: 'API/PromptUserToConfirm',
 	component: PromptUserToConfirm,
 };
 
 export const Primary = () => ({
 	components: { PromptUserToConfirm },
-	template: '<PromptUserToConfirm />',
+	data() {
+		return {
+			model: {},
+		};
+	},
+	template: `<div style="max-width: 320px"><PromptUserToConfirm  v-model="model"/>
+	match: {{ model }}
+	</div>`,
 });
 
 export const CustomTitle = () => ({
 	components: { PromptUserToConfirm },
-	template: '<PromptUserToConfirm title="Custom" /> ',
+	template: '<div style="max-width: 320px"><PromptUserToConfirm title="Custom" /></div>',
+});
+
+export const CustomMatchInput = () => ({
+	components: { PromptUserToConfirm },
+	data() {
+		return {
+			model: {},
+		};
+	},
+	template: `<div style="max-width: 320px"><PromptUserToConfirm title="Custom match input: CONFIRMAR" match="CONFIRMAR" v-model="model" />
+	match: {{ model }}
+	</div>`,
 });
 
 Primary.storyName = 'Básico';
 CustomTitle.storyName = 'Título customizado';
+CustomMatchInput.storyName = 'Match input customizado';

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

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

package/src/components/RangeDatePicker/RangeDatePicker.stories.js

@@ -1,8 +1,10 @@
+import { withDesign } from 'storybook-addon-designs';
 import RangeDatePicker from './RangeDatePicker';
 
 export default {
-	title: 'Example/Form/RangeDatePicker',
+	title: 'API/Form/RangeDatePicker',
 	component: RangeDatePicker,
+	decorators: [withDesign],
 };
 
 export const Primary = () => ({
@@ -20,6 +22,23 @@ export const MinMax = () => ({
 	template: `<RangeDatePicker inputId="input-custom-id" min="2022-01-17" max="2022-02-15" />`,
 });
 
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Data inicial';
-MinMax.storyName = 'Data Mínima e Máxima';
+const parameters = {
+	design: {
+		type: 'figma',
+		url:
+			'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A810',
+	},
+};
+
+Primary.story = {
+	name: 'Básico',
+	parameters
+};
+Secondary.story = {
+	name: 'Data Inicial',
+	parameters
+};
+MinMax.story = {
+	name: 'Data Mínima e Máxima',
+	parameters
+};

package/src/components/ResetTableRowSelection/ResetTableRowSelection.stories.js

@@ -1,7 +1,7 @@
 import ResetTableRowSelection from './ResetTableRowSelection';
 
 export default {
-	title: 'Example/ResetTableRowSelection',
+	title: 'API/ResetTableRowSelection',
 	component: ResetTableRowSelection,
 };
 

package/src/components/SelectModalOptions/SelectModalOptions.stories.js

@@ -1,7 +1,7 @@
 import SelectModalOptions from './SelectModalOptions';
 
 export default {
-	title: 'Example/SelectModalOptions',
+	title: 'API/SelectModalOptions',
 	component: SelectModalOptions,
 };
 

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -0,0 +1,3 @@
+[role='menuitem'] {
+	border-bottom: 1px solid var(--v-gray-lighten2);
+}

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

@@ -1,7 +1,9 @@
 import TableContextMenu from './TableContextMenu';
+import { withDesign } from 'storybook-addon-designs';
 
 export default {
-	title: 'Example/TableContextMenu',
+	title: 'API/TableContextMenu',
+	decorators: [withDesign],
 	component: TableContextMenu,
 };
 
@@ -15,5 +17,40 @@ export const Icons = () => ({
 	template: `<TableContextMenu :items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]" />`,
 });
 
-Primary.storyName = 'Básico';
-Icons.storyname = 'Ícone';
+export const Multi = () => ({
+	components: { TableContextMenu },
+	template: `<TableContextMenu :items="[{ label: 'Novo', icon: { color: 'grey', type: 'open-in-new' } }, { label: 'Editar', icon: { color: 'secondary', type: 'open-in-new' } }, { label: 'Remover', icon: { color: 'error', type: 'delete' } }]" />`,
+});
+
+Primary.story = {
+	name: 'Básico',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=3516%3A11516',
+		},
+	},
+};
+
+Icons.story = {
+	name: 'Ícone',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=3516%3A11516',
+		},
+	},
+};
+
+Multi.story = {
+	name: 'Múltiplos Itens',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=3516%3A11516',
+		},
+	},
+};

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -63,3 +63,6 @@ export default Vue.extend({
 	},
 });
 </script>
+<style lang="scss" scoped>
+@import 'TableContextMenu';
+</style>

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

@@ -1,7 +1,7 @@
 import Tabs from './Tabs.vue';
 
 export default {
-    title: 'Example/Tabs',
+    title: 'API/Tabs',
     component: Tabs,
 };
 

package/src/examples/Modal.stories.js

@@ -0,0 +1,47 @@
+import { withDesign } from 'storybook-addon-designs';
+import { DialogHeader, DialogFooter } from '../main';
+
+export default {
+	title: 'Examples/Modal',
+	decorators: [withDesign],
+	component: Modal,
+};
+
+export const Modal = () => ({
+	/*
+	 * How to create the default modal following FARM's Design System guideline
+	 */
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			inputVal: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default" v-model="inputVal">
+		<DialogHeader title="Exemplo" @onClose="inputVal = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="inputVal = false;" />
+	</v-dialog>
+		<v-btn @click="inputVal = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
+// Modal.storyName = 'Básico';
+Modal.story = {
+	name: 'Básico',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=2867%3A10594',
+		},
+	},
+};