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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "3.4.0",
+	"version": "3.4.3",
 	"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,26 +14,40 @@
 </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/';
 
 export default Vue.extend({
 	name: 'farm-chip-invite',
-	components: VChip,
+	components: {
+		VChip,
+	},
 	props: {
 		/**
 		 * Invite status
 		 */
 		status: {
-			type: String,
-			default: '',
+			type: Number,
+			default: 10,
 		},
 		/**
 		 * Full width (from parent)
@@ -45,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

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