@farm-investimentos/front-mfe-components 8.7.1 → 9.1.1

package/src/components/Logos/ProductLogo/ProductLogo.stories.js

@@ -1,13 +1,12 @@
 import ProductLogo from './ProductLogo.vue';
 
 export default {
-	title: 'API/Logos/ProductLogo',
+	title: 'Display/Logos/ProductLogo',
 	component: ProductLogo,
 };
 
 export const Primary = () => ({
-	components: { ProductLogo },
-	template: '<ProductLogo alt="primary" id="34" />',
+	template: '<farm-imglogo-product alt="primary" id="34" />',
 });
 
 Primary.storyName = 'Básico';

package/src/components/MainFilter/MainFilter.stories.js

@@ -1,25 +1,34 @@
 import MainFilter from './MainFilter.vue';
 
 export default {
-	title: 'API/MainFilter',
+	title: 'Form/MainFilter',
 	component: MainFilter,
 };
 
 export const Primary = () => ({
-	components: { MainFilter },
-	template: '<MainFilter />',
+	template: '<farm-form-mainfilter />',
 });
 
 export const Secondary = () => ({
-	components: { MainFilter },
-	template: '<MainFilter :hasExtraFilters="false" />',
+	template: '<farm-form-mainfilter :hasExtraFilters="false" />',
 });
 
 export const CustomLabel = () => ({
-	components: { MainFilter },
-	template: '<MainFilter label="Custom" />',
+	template: '<farm-form-mainfilter label="Custom" />',
 });
 
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Apenas input';
-CustomLabel.storyName = 'Custom Label';
+
+export const MainFilters = () => ({
+	data() {
+		return {
+			showFilters: false,
+			items: [1, 2, 3, 4, 5],
+		};
+	},
+	template: `<div style="max-width: 480px">
+		<farm-form-mainfilter @onClick="showFilters = !showFilters" :showFilters="showFilters" />
+        <section v-if="showFilters">
+            <v-select :items="items" />
+        </section>
+	</div>`,
+});

package/src/components/MainFilter/MainFilter.vue

@@ -10,7 +10,7 @@
 				@keyup="onKeyUp"
 			/>
 		</fieldset>
-		<farm-button
+		<farm-btn
 			v-if="hasExtraFilters"
 			color="secondary"
 			class="farm-btn--responsive mt-14 mt-sm-8"
@@ -18,25 +18,15 @@
 		>
 			<farm-icon class="mr-2">{{ extraFiltersBtnIcon }}</farm-icon>
 			{{ extraFiltersBtnLabel }}
-		</farm-button>
+		</farm-btn>
 	</section>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import DefaultButton from '../Buttons/DefaultButton';
-import Icon from '../Icon';
-import Label from '../Label';
-import TextField from '../TextField';
 
 export default Vue.extend({
 	name: 'farm-form-mainfilter',
-	components: {
-		'farm-button': DefaultButton,
-		'farm-icon': Icon,
-		'farm-textfield': TextField,
-		'farm-label': Label
-	},
 	props: {
 		/**
 		 * Show or not button for extra filters

package/src/components/ManagersList/ManagersList.stories.js

@@ -1,14 +1,10 @@
 import ManagersList from './ManagersList';
 
 export default {
-    title: 'API/ManagersList',
+    title: 'Display/ManagersList',
     component: ManagersList,
 };
 
 export const Primary = () => ({
-    components: { ManagersList },
-    template: '<ManagersList managersString="nome1,nome2,nome3" />',
+    template: '<farm-managers-list managersString="nome1,nome2,nome3" />',
 });
-
-
-Primary.storyName = 'Básico';

package/src/components/ManagersList/ManagersList.vue

@@ -5,8 +5,10 @@
 		</li>
 	</ul>
 </template>
-<script>
-export default {
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	name: 'farm-managers-list',
 	props: {
 		managersString: {
 			type: String,
@@ -18,7 +20,7 @@ export default {
 			return !this.managersString ? [] : this.managersString.split(',');
 		},
 	},
-};
+});
 </script>
 <style scoped lang="scss">
 ul {

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

@@ -1,57 +1,49 @@
+import { withDesign } from 'storybook-addon-designs';
 import ModalPromptUser from './ModalPromptUser.vue';
 
 export default {
-	title: 'API/ModalPromptUser',
+	title: 'Interactions/ModalPromptUser',
 	component: ModalPromptUser,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Modal Prompt User to Confirm<br />
+				selector: <em>farm-prompt-user</em>`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1%3A7',
+		},
+	},
 };
 
 export const Primary = () => ({
-	components: { ModalPromptUser },
 	data() {
 		return {
-			showPrompt: true,
+			showPrompt: false,
 		};
 	},
 	template: `<div>
-		<ModalPromptUser match="CONFIRMAR" title="Título" subtitle="Digite CONFIRMAR para habilitar" v-model="showPrompt" />
-			<v-btn color="secondary" @click="showPrompt = true;">
+		<farm-prompt-user match="CONFIRMAR" title="Título" subtitle="Digite CONFIRMAR para habilitar" v-model="showPrompt" />
+		click:		
+		<v-btn color="secondary" @click="showPrompt = true;">
 			reabrir
 			</v-btn>
 		</div>`,
 });
 export const Error = () => ({
-	components: { ModalPromptUser },
 	data() {
 		return {
-			showPrompt: true,
+			showPrompt: false,
 		};
 	},
 	template: `<div>
-		<ModalPromptUser match="REMOVER" title="Título" subtitle="Digite REMOVER para habilitar" v-model="showPrompt" confirmColor="error" confirmLabel="Remover" />
+		<farm-prompt-user 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.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/ModalPromptUser.vue

@@ -23,16 +23,12 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import { DialogHeader, DialogFooter, PromptUserToConfirm } from '../../main';
 import { VDialog } from 'vuetify/lib/components/VDialog';
 import { VMain } from 'vuetify/lib/components/VMain';
 
 export default Vue.extend({
 	name: 'farm-prompt-user',
 	components: {
-		DialogHeader,
-		DialogFooter,
-		PromptUserToConfirm,
 		VDialog,
 		VMain,
 	},

package/src/components/MultipleFilePicker/MultipleFilePicker.stories.js

@@ -1,32 +1,23 @@
 import MultipleFilePicker from './MultipleFilePicker.vue';
 
 export default {
-	title: 'API/MultipleFilePicker',
+	title: 'Form/MultipleFilePicker',
 	component: MultipleFilePicker,
 };
 
 export const Primary = () => ({
-	components: { MultipleFilePicker },
 	template: '<MultipleFilePicker />',
 });
 
 export const MaxFileSize = () => ({
-	components: { MultipleFilePicker },
 	template: '<MultipleFilePicker :maxFileSize="5" />',
 });
 
 export const MaxFilesNumber = () => ({
-	components: { MultipleFilePicker },
 	template: '<MultipleFilePicker :maxFileSize="5" :maxFilesNumber="1" />',
 });
 
 export const Download = () => ({
-	components: { MultipleFilePicker },
 	template:
 		'<MultipleFilePicker :maxFileSize="5" :downloadFiles="[{ id: 1, name: `Arquivo 1`, size: 10000 }, { id: 2, name: `Arquivo 2`, size: 15000 }]" />',
 });
-
-Primary.storyName = 'Básico';
-MaxFileSize.storyName = 'Max File Size';
-MaxFilesNumber.storyName = 'Max Files Number';
-Download.storyName = 'Download Files';

package/src/components/MultipleSelectShortener/MultipleSelectShortener.stories.js

@@ -1,12 +1,11 @@
 import MultipleSelectShortener from './MultipleSelectShortener';
 
 export default {
-	title: 'API/MultipleSelectShortener',
+	title: 'Display/MultipleSelectShortener',
 	component: MultipleSelectShortener,
 };
 
 export const Primary = () => ({
-	components: { MultipleSelectShortener },
 	data() {
 		return {
 			items: {
@@ -19,19 +18,15 @@ export const Primary = () => ({
 });
 
 export const Secondary = () => ({
-	components: { MultipleSelectShortener },
 	data() {
 		return {
 			items: [
 				{
 					id: 0,
-					label: `Convidar`
+					label: `Convidar`,
 				},
 			],
 		};
 	},
 	template: '<MultipleSelectShortener :item="{...items}" :index="1" :itemsLength="3"/>',
 });
-
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Multiplos';

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -2,7 +2,7 @@ import { withDesign } from 'storybook-addon-designs';
 import ProgressBar from './ProgressBar.vue';
 
 export default {
-	title: 'API/ProgressBar',
+	title: 'Feedback/ProgressBar',
 	component: ProgressBar,
 	decorators: [withDesign],
 	parameters: {
@@ -21,7 +21,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-progressbar': ProgressBar },
 	data() {
 		return {
 			val: 35,
@@ -30,14 +29,20 @@ export const Primary = () => ({
 	template: '<farm-progressbar :value="val" />',
 });
 
-const parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+export const CustomColors = () => ({
+	data() {
+		return {
+			val: 35,
+		};
 	},
-};
+	template: '<farm-progressbar :value="val" backgroundColor="accent" valueColor="secondary" />',
+});
 
-Primary.story = {
-	name: 'Basic',
-	parameters,
-};
+export const CustomHexaColors = () => ({
+	data() {
+		return {
+			val: 35,
+		};
+	},
+	template: '<farm-progressbar :value="val" backgroundColor="#FFFF00" valueColor="#00FF00" />',
+});

package/src/components/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -1,39 +1,45 @@
 import PromptUserToConfirm from './PromptUserToConfirm';
 
 export default {
-	title: 'API/PromptUserToConfirm',
+	title: 'INteractions/PromptUserToConfirm',
 	component: PromptUserToConfirm,
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Prompt User to Confirm<br />
+				selector: <em>farm-promptusertoconfirm</em>`,
+			},
+		},
+	},
 };
 
 export const Primary = () => ({
-	components: { PromptUserToConfirm },
 	data() {
 		return {
 			model: {},
 		};
 	},
-	template: `<div style="max-width: 320px"><PromptUserToConfirm  v-model="model"/>
+	template: `<div style="max-width: 320px"><farm-promptusertoconfirm v-model="model"/>
 	match: {{ model }}
 	</div>`,
 });
 
 export const CustomTitle = () => ({
-	components: { PromptUserToConfirm },
-	template: '<div style="max-width: 320px"><PromptUserToConfirm title="Custom" /></div>',
+	template: '<div style="max-width: 320px"><farm-promptusertoconfirm title="Custom" /></div>',
 });
 
 export const CustomMatchInput = () => ({
-	components: { PromptUserToConfirm },
 	data() {
 		return {
 			model: {},
 		};
 	},
-	template: `<div style="max-width: 320px"><PromptUserToConfirm title="Custom match input: CONFIRMAR" match="CONFIRMAR" v-model="model" />
-	match: {{ model }}
+	template: `<div style="max-width: 320px">
+		<farm-promptusertoconfirm
+			title="Custom match input: CONFIRMAR"
+			match="CONFIRMAR"
+			v-model="model" />
+		match: {{ model }}
 	</div>`,
 });
-
-Primary.storyName = 'Básico';
-CustomTitle.storyName = 'Título customizado';
-CustomMatchInput.storyName = 'Match input customizado';

package/src/components/PromptUserToConfirm/PromptUserToConfirm.vue

@@ -15,11 +15,13 @@
 		</v-row>
 	</v-form>
 </template>
-<script>
+<script lang="ts">
+import Vue from 'vue';
 import { VForm } from 'vuetify/lib/components/VForm';
 import { VTextField } from 'vuetify/lib/components/VTextField';
 import { VRow, VCol } from 'vuetify/lib/components/VGrid';
-export default {
+export default Vue.extend({
+	name: 'farm-promptusertoconfirm',
 	props: {
 		/**
 		 * String to be matched with user prompt
@@ -71,5 +73,5 @@ export default {
 	mounted() {
 		this.matchInput = null;
 	},
-};
+});
 </script>

package/src/components/ResetTableRowSelection/ResetTableRowSelection.stories.js

@@ -1,12 +1,11 @@
 import ResetTableRowSelection from './ResetTableRowSelection';
 
 export default {
-	title: 'API/ResetTableRowSelection',
+	title: 'Interactions/ResetTableRowSelection',
 	component: ResetTableRowSelection,
 };
 
 export const Primary = () => ({
-	components: { ResetTableRowSelection },
 	data() {
 		return {
 			items: [1, 2, 3],
@@ -14,5 +13,3 @@ export const Primary = () => ({
 	},
 	template: `<ResetTableRowSelection v-model="items" />`,
 });
-
-Primary.storyName = 'Básico';

package/src/components/SelectModalOptions/SelectModalOptions.stories.js

@@ -1,12 +1,11 @@
 import SelectModalOptions from './SelectModalOptions';
 
 export default {
-	title: 'API/SelectModalOptions',
+	title: 'INteractions/SelectModalOptions',
 	component: SelectModalOptions,
 };
 
 export const Primary = () => ({
-	components: { SelectModalOptions },
 	data() {
 		return {
 			items: [
@@ -17,7 +16,7 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div>
-	<SelectModalOptions
+	<farm-select-modal-options
 		:items="items"
 		v-model="selectedValue"
 		label="label"
@@ -27,7 +26,6 @@ export const Primary = () => ({
 });
 
 export const InitialValue = () => ({
-	components: { SelectModalOptions },
 	data() {
 		return {
 			items: [
@@ -38,7 +36,7 @@ export const InitialValue = () => ({
 		};
 	},
 	template: `<div>
-	<SelectModalOptions
+	<farm-select-modal-options
 		:items="items"
 		v-model="selectedValue"
 		label="label"
@@ -46,6 +44,3 @@ export const InitialValue = () => ({
 		<br />selected value: {{ selectedValue }}
 	</div>`,
 });
-
-Primary.storyName = 'Basic';
-InitialValue.storyName = 'Initial value';

package/src/components/Stepper/StepperHeader/StepperHeader.stories.js

@@ -1,7 +1,7 @@
 import StepperHeader from './StepperHeader.vue';
 
 export default {
-	title: 'API/Stepper/StepperHeader',
+	title: 'Navigation/StepperHeader',
 	component: StepperHeader,
 	parameters: {
 		docs: {
@@ -19,8 +19,14 @@ export default {
 	},
 };
 
+const steps = [
+	{ label: 'Solicitação de limite', icon: 'book' },
+	{ label: 'Lista impeditiva', icon: 'monitor' },
+	{ label: 'Lista pré-elegíveis', icon: 'book' },
+	{ label: 'Fila de compliance', icon: 'logout' },
+];
+
 export const Primary = () => ({
-	components: { 'farm-stepper-header': StepperHeader },
 	data() {
 		return {
 			steps: [
@@ -35,4 +41,49 @@ export const Primary = () => ({
 	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
 });
 
-Primary.storyName = 'Básico';
+export const Error = () => ({
+	data() {
+		return {
+			steps,
+			currentStep: 3,
+		};
+	},
+	template:
+		'<farm-stepper-header :steps="steps" :currentStep="currentStep" :errorCurrentStepStatus="true" />',
+});
+
+export const Vertical = () => ({
+	data() {
+		return {
+			steps,
+			currentStep: 3,
+		};
+	},
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" vertical />',
+});
+
+export const VerticalError = () => ({
+	data() {
+		return {
+			steps,
+			currentStep: 3,
+		};
+	},
+	template:
+		'<farm-stepper-header :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
+});
+
+export const Numbers = () => ({
+	data() {
+		return {
+			steps: [
+				{ label: 'Solicitação de limite' },
+				{ label: 'Lista impeditiva' },
+				{ label: 'Lista pré-elegíveis' },
+				{ label: 'Fila de compliance' },
+			],
+			currentStep: 2,
+		};
+	},
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
+});

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -42,13 +42,9 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import IStep from './IStep';
-import Icon from '../../Icon';
 
 export default Vue.extend({
 	name: 'farm-stepper-header',
-	components: {
-		'farm-icon': Icon,
-	},
 	props: {
 		/**
 		 * Steps

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -2,55 +2,35 @@ import TableContextMenu from './TableContextMenu';
 import { withDesign } from 'storybook-addon-designs';
 
 export default {
-	title: 'API/TableContextMenu',
+	title: 'Navigation/TableContextMenu',
 	decorators: [withDesign],
 	component: TableContextMenu,
+	parameters: {
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=3516%3A11516',
+		},
+	},
 };
 
 export const Primary = () => ({
-	components: { TableContextMenu },
-	template: `<TableContextMenu :items="[{ label: 'Remover' }]" />`,
+	template: `<farm-context-menu :items="[{ label: 'Remover' }]" />`,
 });
 
 export const Icons = () => ({
-	components: { TableContextMenu },
-	template: `<TableContextMenu :items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]" />`,
+	template: `<farm-context-menu
+		:items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]" />`,
 });
 
 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',
-		},
+	data() {
+		return {
+			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' } },
+			],
+		};
 	},
-};
-
-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',
-		},
-	},
-};
+	template: `<farm-context-menu :items="items" />`,
+});