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

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',
+		},
+	},
+};

package/src/examples/Table.stories.js

@@ -0,0 +1,84 @@
+import { withDesign } from 'storybook-addon-designs';
+import { DataTableEmptyWrapper } from '../main';
+
+const headers = [
+	{
+		text: 'ID',
+		sortable: false,
+		value: 'id',
+		width: 80,
+		align: 'left',
+	},
+];
+
+export default {
+	title: 'Examples/Table',
+	decorators: [withDesign],
+};
+
+export const TableNoData = () => ({
+	components: {
+		DataTableEmptyWrapper,
+	},
+	data() {
+		return {
+			headers,
+		};
+	},
+	template: `<div>
+	<v-data-table
+        hide-default-footer
+		:headers="headers"
+	>
+    <template slot="no-data">
+        <DataTableEmptyWrapper
+            subtitle="Tente filtrar novamente sua pesquisa"
+        />
+    </template>
+    </v-data-table>
+	</div>`,
+});
+
+export const TableSampleData = () => ({
+	components: {
+		DataTableEmptyWrapper,
+	},
+	data() {
+		return {
+			headers,
+			items: [{ id: 1 }, { id: 2 }, { id: 3 }],
+		};
+	},
+	template: `<div>
+	<v-data-table
+        hide-default-footer
+		:headers="headers"
+        :items="items"
+	>
+    
+    </v-data-table>
+	</div>`,
+});
+
+TableNoData.story = {
+	name: 'No data',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=2867%3A10594',
+		},
+	},
+};
+
+TableSampleData.story = {
+	name: 'With data',
+	parameters: {
+		design: {
+			type: 'figma',
+			url:
+				'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=2867%3A10594',
+		},
+	},
+};
+

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;
+    }
+}