@farm-investimentos/front-mfe-components 3.4.2 → 3.4.3

package/package.json

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

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

@@ -7,8 +7,51 @@ export default {
 
 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/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -7,12 +7,12 @@ export default {
 
 export const Primary = () => ({
 	components: { PromptUserToConfirm },
-	template: '<PromptUserToConfirm />',
+	template: '<div style="max-width: 320px"><PromptUserToConfirm /></div>',
 });
 
 export const CustomTitle = () => ({
 	components: { PromptUserToConfirm },
-	template: '<PromptUserToConfirm title="Custom" /> ',
+	template: '<div style="max-width: 320px"><PromptUserToConfirm title="Custom" /></div>',
 });
 
 Primary.storyName = 'Básico';

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/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: '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/scss/ButtonOverrides.scss

@@ -16,9 +16,15 @@
         border: 0;
     }
 
-    &.v-btn-rounded, &.v-btn--rounded {
+    &.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 {

package/src/scss/DefaultModal.scss

@@ -1,78 +1,80 @@
 .modal-default.v-dialog {
-    background: white;
+	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-bottom: 1px solid  var(--v-gray-lighten2);
+	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;
-            }
-        }
-    }
+		.dialog-header__title-icon {
+			color: var(--v-secondary-base);
+			font-size: 1rem;
+		}
 
-    > main > .v-main__wrap > section {
-        padding: 1.5rem;
-        font-size: 0.75rem;
-    }
+		.dialog-header__close-icon {
+			position: absolute;
+			right: 1rem;
+			color: var(--v-secondary-base);
+			font-size: 1rem;
+			&:hover {
+				opacity: 0.8;
+			}
+		}
+	}
 
-    .v-dialog__footer {
-        border-top: 1px solid  var(--v-gray-lighten2);
-        padding: 1rem;
-    }
+	> main > .v-main__wrap > section {
+		padding: 1.5rem;
+		font-size: 0.75rem;
+	}
 
-    &.modal-default-top {
-        position: fixed;
-        top: 0;
-        header {
-            padding-top: 3rem;
-        }
-        > main > .v-main__wrap > section {
-            padding-top: 5rem;
-        }
-    }
+	.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);
+	.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);
-        }
-    }
+		header {
+			max-width: calc(480px - 2rem);
+		}
+	}
 
-    .v-dialog.modal-default.modal-default-x-small {
-        max-width: calc(392px - 2rem);
+	.v-dialog.modal-default.modal-default-x-small {
+		max-width: calc(392px - 2rem);
 
-        header {
-            max-width: calc(392px - 2rem);
-        }
-    }
+		header {
+			max-width: calc(392px - 2rem);
+		}
+	}
 }
 @media screen and (max-width: 960px) {
-    .v-dialog.modal-default header {
-        max-width: calc(100% - 3rem);
-    }
+	.v-dialog.modal-default header {
+		max-width: calc(100% - 3rem);
+	}
 }

package/src/scss/DialogOverrides.scss

@@ -0,0 +1,86 @@
+.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.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 {
+		box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
+			0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
+		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;
+	}
+}

package/src/scss/FormOverrides.scss

@@ -3,11 +3,10 @@
     .v-col-fieldset-default {
         border: 0;
         label {
-            font-weight: 500;
+            font-weight: bold;
             display: block;
             margin-bottom: 0.5rem;
         }
-
     }
 
     &.v-input {
@@ -15,6 +14,7 @@
             .v-input__slot {
                 min-height: 36px !important;
                 height: 36px;
+                background: white;
                 fieldset {
                     border-color: var(--v-gray-lighten2);
                 }
@@ -37,13 +37,12 @@
                     border-width: 1px;
                 }
                 &:after {
-                    content: "\F0028";
+                    content: '\F0028';
                     position: absolute;
-                    font: normal normal normal 24px/1 "Material Design Icons";
+                    font: normal normal normal 24px/1 'Material Design Icons';
                     right: 6px;
                     top: 6px;
                 }
-                
             }
         }
     }
@@ -76,6 +75,15 @@
             color: var(--v-error-base);
         }
     }
+    .row.form__footer-buttons--right {
+        margin: 0;
+        margin-top: 1rem;
+        padding: 0;
+        justify-content: flex-end;
+        .v-btn {
+            margin-left: 1rem;
+        }
+    }
 }
 .v-form.v-form-importfile {
     > .row:first-child {
@@ -102,7 +110,6 @@
             input,
             label {
                 color: var(--v-primary-base);
-
                 font-size: 1rem !important;
             }
         }
@@ -114,3 +121,36 @@
 .v-text-field.v-text-field--solo .v-input__control {
     min-height: 30px;
 }
+
+.theme--light.v-input--switch {
+    .v-input--switch__thumb {
+        color: #ffffff !important;
+    }
+    .v-input--switch__track.theme--light {
+        background: #f0643b;
+
+        &.secondary--text {
+            background-color: var(--v-secondary-base);
+        }
+    }
+    label {
+        font-size: 0.5rem;
+        font-weight: 600;
+        margin-top: 0.5rem;
+        padding-bottom: 0.5rem;
+    }
+}
+
+@media screen and (max-width: 600px) {
+    .v-form {
+        .row.form__footer-buttons--right {
+            justify-content: unset;
+            .v-btn {
+                margin-left: 0;
+            }
+            .v-btn:not(:first-child) {
+                margin-top: 1rem;
+            }
+        }
+    }
+}

package/src/scss/VMenuOverrides.scss

@@ -0,0 +1,5 @@
+.v-menu__content {
+    .v-list--dense .v-list-item .v-list-item__title {
+        font-weight: bold;
+    }
+}