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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.1",
+	"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.stories.js

@@ -1,18 +1,20 @@
 import ChipInviteStatus from './ChipInviteStatus.vue';
 
 export default {
-	title: 'Example/Onboarding/ChipInviteStatus',
+	title: 'API/Onboarding/ChipInviteStatus',
 	component: ChipInviteStatus,
 };
 
 export const Primary = () => ({
 	components: { ChipInviteStatus },
 	template: `<div style="width: 120px;">
-        <ChipInviteStatus status="CONVIDAR" />
-        <ChipInviteStatus status="CONVIDADO" />
-        <ChipInviteStatus status="INCOMPLETO" />
-        <ChipInviteStatus status="CONCLUIDO" />
-        <ChipInviteStatus status="FALHA/ERRO" />
+        <ChipInviteStatus :status="10" />
+        <ChipInviteStatus :status="11" />
+        <ChipInviteStatus :status="12" />
+        <ChipInviteStatus :status="13" />
+        <ChipInviteStatus :status="14" />
+        <ChipInviteStatus :status="15" />
+        <ChipInviteStatus :status="16" />
     </div>`,
 });
 

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -14,12 +14,24 @@
 </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 = {
-	CONVIDAR: 'secondary',
-	CONVIDADO: 'yellow',
-	INCOMPLETO: 'yellow',
-	CONCLUIDO: 'success',
-	'FALHA/ERRO': 'error',
+	10: 'secondary',
+	11: 'yellow',
+	12: 'yellow',
+	13: 'success',
+	14: 'error',
+	15: 'accent',
+	16: 'primary',
 };
 
 import VChip from 'vuetify/lib/components/VChip/';
@@ -34,8 +46,8 @@ export default Vue.extend({
 		 * Invite status
 		 */
 		status: {
-			type: String,
-			default: '',
+			type: Number,
+			default: 10,
 		},
 		/**
 		 * Full width (from parent)
@@ -47,13 +59,13 @@ export default Vue.extend({
 	},
 	computed: {
 		textColor() {
-			return this.status === 'CONVIDAR' ? '' : StatusColor[this.status];
+			return this.status === 10 || this.status === 16 ? '' : StatusColor[this.status];
 		},
 		color() {
 			return !this.status ? '' : StatusColor[this.status];
 		},
 		label() {
-			return this.status;
+			return StatusLabel[this.status];
 		},
 	},
 });

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

@@ -7,7 +7,7 @@ describe('ChipInviteStatus component', () => {
 	beforeEach(() => {
 		wrapper = shallowMount(ChipInviteStatus, {
 			propsData: {
-				status: 'CONVIDAR',
+				status: 10,
 			},
 		});
 		component = wrapper.vm;

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

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