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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.3.0",
+	"version": "3.4.2",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -45,7 +45,7 @@
 		"eslint": "^6.7.2",
 		"eslint-plugin-vue": "^6.2.2",
 		"jest": "^25.5.4",
-		"jsdoc": "^3.6.7",
+		"storybook-addon-designs": "^6.2.1",
 		"vue-template-compiler": "^2.6.11",
 		"webpack-cli": "^4.9.0"
 	},

package/src/components/AlertReload/AlertReload.stories.js

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

package/src/components/Buttons/ConfirmButton/ConfirmButton.stories.js

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

package/src/components/Buttons/DangerButton/DangerButton.stories.js

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

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

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

package/src/components/Buttons/ExportButton/ExportButton.stories.js

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

package/src/components/Buttons/ImportButton/ImportButton.stories.js

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

package/src/components/Buttons/MultiImportButton/MultiImportButton.stories.js

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

package/src/components/Buttons/RemoveButton/RemoveButton.stories.js

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

package/src/components/Buttons/ToggleButton/ToggleButton.stories.js

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

package/src/components/CardContext/CardContext.stories.js

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

package/src/components/ChipInviteStatus/ChipInviteStatus.scss

@@ -0,0 +1,26 @@
+.status-chip--onboarding {
+	font-weight: bold;
+	.status-chip-yellow {
+		color: black;
+	}
+	&.status-chip.status-chip-accent {
+		color: var(--v-accent-base) !important;
+		border: 2px solid var(--v-accent-base) !important;
+		background-color: white !important;
+	}
+	&.status-chip.status-chip-yellow {
+		color: black !important;
+		border: 2px solid var(--v-yellow-lighten1) !important;
+		background-color: white !important;
+	}
+	&.status-chip.status-chip-error {
+		color: var(--v-error-base) !important;
+		border: 2px solid var(--v-error-base) !important;
+		background-color: white !important;
+	}
+	&.status-chip.status-chip-success {
+		color: var(--v-secondary-base) !important;
+		border: 2px solid var(--v-success-base) !important;
+		background-color: white !important;
+	}
+}

package/src/components/ChipInviteStatus/ChipInviteStatus.stories.js

@@ -0,0 +1,21 @@
+import ChipInviteStatus from './ChipInviteStatus.vue';
+
+export default {
+	title: 'API/Onboarding/ChipInviteStatus',
+	component: ChipInviteStatus,
+};
+
+export const Primary = () => ({
+	components: { ChipInviteStatus },
+	template: `<div style="width: 120px;">
+        <ChipInviteStatus :status="10" />
+        <ChipInviteStatus :status="11" />
+        <ChipInviteStatus :status="12" />
+        <ChipInviteStatus :status="13" />
+        <ChipInviteStatus :status="14" />
+        <ChipInviteStatus :status="15" />
+        <ChipInviteStatus :status="16" />
+    </div>`,
+});
+
+Primary.storyName = 'Básico';

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -0,0 +1,75 @@
+<template>
+	<v-chip
+		small
+		:class="
+			`status-chip ${
+				isFull ? 'status-chip--fullwidth' : ''
+			} status-chip-${color} status-chip--onboarding`
+		"
+	>
+		<span :class="`${textColor}--text`">
+			{{ label }}
+		</span>
+	</v-chip>
+</template>
+<script>
+import Vue from 'vue';
+const StatusLabel = {
+	10: 'CONVIDAR',
+	11: 'CONVIDADO',
+	12: 'INCOMPLETO',
+	13: 'CONCLUÍDO',
+	14: 'FALHA/ERRO',
+	15: 'EM ANÁLISE',
+	16: 'EM ANDAMENTO',
+};
+
+const StatusColor = {
+	10: 'secondary',
+	11: 'yellow',
+	12: 'yellow',
+	13: 'success',
+	14: 'error',
+	15: 'accent',
+	16: 'primary',
+};
+
+import VChip from 'vuetify/lib/components/VChip/';
+
+export default Vue.extend({
+	name: 'farm-chip-invite',
+	components: {
+		VChip,
+	},
+	props: {
+		/**
+		 * Invite status
+		 */
+		status: {
+			type: Number,
+			default: 10,
+		},
+		/**
+		 * Full width (from parent)
+		 */
+		isFull: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	computed: {
+		textColor() {
+			return this.status === 10 || this.status === 16 ? '' : StatusColor[this.status];
+		},
+		color() {
+			return !this.status ? '' : StatusColor[this.status];
+		},
+		label() {
+			return StatusLabel[this.status];
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './ChipInviteStatus.scss';
+</style>

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

@@ -0,0 +1,36 @@
+import { shallowMount } from '@vue/test-utils';
+import ChipInviteStatus from '../ChipInviteStatus.vue';
+describe('ChipInviteStatus component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ChipInviteStatus, {
+			propsData: {
+				status: 10,
+			},
+		});
+		component = wrapper.vm;
+	});
+	test('ChipInviteStatus created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should have text color', () => {
+			expect(component.textColor).toBeDefined();
+		});
+		it('Should have color', () => {
+			expect(component.color).toBeDefined();
+		});
+		it('Should have label', () => {
+			expect(component.label).toBeDefined();
+		});
+	});
+});

package/src/components/ChipInviteStatus/index.js

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

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

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

package/src/components/DataTableHeader/DataTableHeader.stories.js

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

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -1,7 +1,7 @@
 import DataTablePaginator from './DataTablePaginator.vue';
 
 export default {
-	title: 'Example/Table/DataTablePaginator',
+	title: 'API/Table/DataTablePaginator',
 	component: DataTablePaginator,
 };
 
@@ -26,7 +26,27 @@ export const CustomPerPage = () => ({
 		'<DataTablePaginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
 });
 
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Sem limite por páginas';
-Disabled.storyName = 'Desabilitado';
-CustomPerPage.storyName = 'Lista de registros por página customizada';
+const parameters = {
+	design: {
+		type: 'figma',
+		url:
+			'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
+	},
+};
+
+Primary.story = {
+	name: 'Básico',
+	parameters,
+};
+Secondary.story = {
+	name: 'Sem limite por páginas',
+	parameters,
+};
+Disabled.story = {
+	name: 'Desabilitado',
+	parameters,
+};
+CustomPerPage.story = {
+	name: 'Lista de registros por página customizada',
+	parameters,
+};

package/src/components/DatePicker/DatePicker.stories.js

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

package/src/components/DefaultTextField/DefaultTextField.stories.js

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

package/src/components/DialogFooter/DialogFooter.stories.js

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

package/src/components/DialogHeader/DialogHeader.stories.js

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

package/src/components/FilePicker/FilePicker.stories.js

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

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,7 +1,7 @@
 import ModalPromptUser from './ModalPromptUser.vue';
 
 export default {
-	title: 'Example/ModalPromptUser',
+	title: 'API/ModalPromptUser',
 	component: ModalPromptUser,
 };
 

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,7 +1,7 @@
 import PromptUserToConfirm from './PromptUserToConfirm';
 
 export default {
-	title: 'Example/PromptUserToConfirm',
+	title: 'API/PromptUserToConfirm',
 	component: PromptUserToConfirm,
 };
 

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

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

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