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

package/src/examples/Table.stories.js

@@ -1,6 +1,4 @@
 import { withDesign } from 'storybook-addon-designs';
-import { DataTableEmptyWrapper } from '../main';
-import { DataTablePaginator } from '../main';
 
 const headers = [
 	{
@@ -20,13 +18,12 @@ const headers = [
 ];
 
 export default {
-	title: 'Examples/Table',
+	title: 'Display/Table/Examples',
 	decorators: [withDesign],
 	parameters: {
 		design: {
 			type: 'figma',
-			url:
-				'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1505%3A372',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1505%3A372',
 		},
 		viewMode: 'docs',
 		docs: {
@@ -38,9 +35,6 @@ export default {
 };
 
 export const TableNoData = () => ({
-	components: {
-		DataTableEmptyWrapper,
-	},
 	data() {
 		return {
 			headers,
@@ -63,9 +57,6 @@ export const TableNoData = () => ({
 });
 
 export const TableSampleData = () => ({
-	components: {
-		DataTableEmptyWrapper,
-	},
 	data() {
 		return {
 			headers,

package/src/examples/inputs/Password.stories.js

@@ -1,5 +1,5 @@
 export default {
-	title: 'Examples/Form/Inputs/Password',
+	title: 'Form/Textfield/Examples/Password',
 	component: Password,
 	parameters: {
 		docs: {

package/src/examples/inputs/Select.stories.js

@@ -1,5 +1,5 @@
 export default {
-	title: 'Examples/Form/Inputs/Select',
+	title: 'Form/Select/Examples',
 	parameters: {
 		docs: {
 			description: {

package/src/main.ts

@@ -22,6 +22,7 @@ import CardContext from './components/CardContext';
 
 import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';
+import IdCaption from './components/IdCaption';
 
 export {
 	DataTableEmptyWrapper,
@@ -45,6 +46,7 @@ export {
 	IconBox,
 	CardContext,
 	Collapsible,
+	IdCaption,
 };
 
 export * from './components/AlertReload';
@@ -57,6 +59,7 @@ export * from './components/Buttons/ToggleButton';
 export * from './components/Buttons/RemoveButton';
 export * from './components/Buttons/MultiImportButton';
 export * from './components/Card';
+export * from './components/Checkbox';
 export * from './components/Chip';
 export * from './components/Logos/ProductLogo';
 export * from './components/Logos/OriginatorLogo';

package/src/stories/Introduction.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta } from '@storybook/addon-docs';
 
-<Meta title="Examples/Introduction" />
+<Meta title="Introduction" />
 
 <style>{`
   .subheading {

package/src/components/Loader/Loader.stories.js

@@ -1,13 +0,0 @@
-import Loader from './Loader.vue';
-
-export default {
-    title: 'API/Loader',
-    component: Loader,
-};
-
-export const Primary = () => ({
-    components: { Loader },
-    template: '<Loader />',
-});
-
-Primary.storyName = 'Básico';

package/src/examples/Chip.stories.js

@@ -1,53 +0,0 @@
-import { Chip } from '../main';
-
-import('./Chip.stories.scss');
-
-export default {
-	title: 'Examples/Chip',
-	component: Chip,
-};
-
-const colors = ['secondary', 'info', 'error'];
-const variations = ['darken', 'lighten'];
-
-export const Colors = () => ({
-	components: { 'farm-chip': Chip },
-	data() {
-		return {
-			colors,
-		};
-	},
-	template: `<div class="chips-container">
-		<h3>Base Colors</h3>
-		<farm-chip 
-			v-for="color in colors"
-			:key="color"
-			:color="color">
-				{{ color }}
-		</farm-chip>
-	</div>`,
-});
-
-export const Variations = () => ({
-	components: { 'farm-chip': Chip },
-	data() {
-		return {
-			colors,
-			variations,
-		};
-	},
-	template: `
-	<div>
-		<h3>Variations</h3>
-		<div class="chips-container" v-for="color in colors">
-			<h4>{{ color }}</h4>
-			<farm-chip 
-				v-for="variation in variations"
-				:key="color + '_' + variation"
-				:color="color"
-				:variation="variation">
-					{{ variation }}
-			</farm-chip>
-		</div>
-	</div>`,
-});

package/src/examples/Collapsible.stories.js

@@ -1,52 +0,0 @@
-import { Collapsible } from '../main.ts';
-
-export default {
-	title: 'Examples/Collapsible',
-	parameters: {
-		docs: {
-			description: {
-				component: `Collapsible<br />selector: <em>farm-collapsible</em>`,
-			},
-		},
-		viewMode: 'docs',
-	},
-};
-
-export const Primary = () => ({
-	components: { 'farm-collapsible': Collapsible },
-	template: '<farm-collapsible title="">collapsible content</farm-collapsible>',
-});
-
-export const Title = () => ({
-	components: { 'farm-collapsible': Collapsible },
-	template: '<farm-collapsible title="Title">collapsible content</farm-collapsible>',
-});
-
-export const Icon = () => ({
-	components: { 'farm-collapsible': Collapsible },
-	template: '<farm-collapsible icon="book" title="With Icon">collapsible content</farm-collapsible>',
-});
-
-export const Opened = () => ({
-	components: { 'farm-collapsible': Collapsible },
-	data() {
-		return {
-			isOpen: true,
-		};
-	},
-	template: `<div>
-        status: {{ isOpen }}
-        <farm-collapsible
-            title=""
-            :open="isOpen"
-            @open="value => isOpen = value"
-        >
-            collapsible content
-        </farm-collapsible>
-    </div>`,
-});
-
-Primary.storyName = 'Basic';
-Title.storyName = 'Title';
-Icon.storyName = 'Icon';
-Opened.storyName = 'Opened';

package/src/examples/Dialog/DialogFooter.stories.js

@@ -1,42 +0,0 @@
-import { DialogFooter } from '../../main';
-
-export default {
-	title: 'Examples/Dialog/DialogFooter',
-	component: DialogFooter,
-};
-
-export const Primary = () => ({
-	components: { 'farm-dialog-footer': DialogFooter },
-	template: '<farm-dialog-footer />',
-});
-
-export const ExtraButton = () => ({
-	components: { 'farm-dialog-footer': DialogFooter },
-	data() {
-		return { extraButtons: [{ label: 'Random label', color: 'error', outlined: true }] };
-	},
-	template: `<farm-dialog-footer :extraButtons="extraButtons" />`,
-});
-
-export const ConfirmIcon = () => ({
-	components: { 'farm-dialog-footer': DialogFooter },
-	template: `<div>
-        <farm-dialog-footer confirmIcon="check" />
-        <farm-dialog-footer confirmIcon="check" confirmColor="yellow" />
-        <farm-dialog-footer confirmIcon="check" confirmColor="accent" />
-    </div>
-	`,
-});
-
-export const Handlers = () => ({
-	components: { 'farm-dialog-footer': DialogFooter },
-	template: '<farm-dialog-footer @onConfirm="onConfirm"  @onClose="onClose" />',
-	methods: {
-		onConfirm() {
-			alert('onConfirm handler');
-		},
-        onClose() {
-			alert('onClose handler');
-		},
-	},
-});

package/src/examples/Dialog/DialogHeader.stories.js

@@ -1,43 +0,0 @@
-import { DialogHeader } from '../../main';
-
-export default {
-	title: 'Examples/Dialog/DialogHeader',
-	component: DialogHeader,
-};
-
-export const Primary = () => ({
-	components: { 'farm-dialog-header': DialogHeader },
-	template: `
-		<div style="max-width: 480px; position: relative;">
-			<farm-dialog-header title="Título do header" />
-		</div>`,
-});
-
-export const CustomIcon = () => ({
-	components: { 'farm-dialog-header': DialogHeader },
-	template: `
-		<div style="max-width: 480px; position: relative;">
-			<farm-dialog-header title="Título do header" iconTitle="calendar" />
-		</div>`,
-});
-
-export const CloseHandler = () => ({
-	components: { 'farm-dialog-header': DialogHeader },
-	template: `
-		<div style="max-width: 480px; position: relative;">
-			<farm-dialog-header title="Título do header" iconTitle="calendar" @onClose="onClose" />
-		</div>`,
-	methods: {
-		onClose() {
-			alert('onClose handler');
-		},
-	},
-});
-
-export const NoCloseIcon = () => ({
-	components: { 'farm-dialog-header': DialogHeader },
-	template: `
-		<div style="max-width: 480px; position: relative;">
-			<farm-dialog-header title="Título do header" :hasCloseIcon="false" />
-		</div>`,
-});

package/src/examples/Form/Label.stories.js

@@ -1,18 +0,0 @@
-import { Label } from '../../main.ts';
-
-export default {
-	title: 'Examples/Form/Label',
-	component: Label,
-};
-
-export const Primary = () => ({
-	components: { 'farm-label': Label },
-	template: '<farm-label>Label</farm-label>',
-});
-export const Required = () => ({
-	components: { 'farm-label': Label },
-	template: '<farm-label :required="true">Label</farm-label>',
-});
-
-Primary.storyName = 'Basic';
-Required.storyName = 'Required';

package/src/examples/Form/TextField.stories.js

@@ -1,47 +0,0 @@
-import { TextField } from '../../main.ts';
-
-export default {
-	title: 'Examples/Form/TextField',
-	component: TextField,
-};
-
-export const Primary = () => ({
-	components: { 'farm-textfield': TextField },
-	template: `<div style="width: 480px">
-		<farm-textfield />
-	</div>`,
-});
-
-export const BindVar = () => ({
-	components: { 'farm-textfield': TextField },
-	data() {
-		return {
-			v: '',
-		};
-	},
-	template: `<div style="width: 480px">
-		<farm-textfield v-model="v" />
-		value: {{ v }}
-	</div>`,
-});
-
-export const Rules = () => ({
-	components: { 'farm-textfield': TextField },
-	data() {
-		return {
-			v: '',
-			rules: {
-				required: val => !!val,
-			},
-		};
-	},
-	template: `<div style="width: 480px">
-		<h4>Custom rule (required field)</h4>
-		<farm-textfield v-model="v" :rules="[rules.required]" />
-		value: {{ v }}
-	</div>`,
-});
-
-Primary.storyName = 'Basic';
-BindVar.storyName = 'Bind variable';
-Rules.storyName = 'Rules';

package/src/examples/IconBox.stories.js

@@ -1,62 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-import { IconBox } from '../main';
-import colors from '../configurations/colors';
-import sizes from '../configurations/sizes';
-import('../components/Icon/Icons.stories.scss');
-
-export default {
-	title: 'Examples/IconBox',
-	decorators: [withDesign],
-	parameters: {
-		viewMode: 'docs',
-		docs: {
-			description: {
-				component: `IconBox`,
-			},
-		},
-	},
-};
-
-export const IconBoxes = () => ({
-	components: {
-		'farm-icon-box': IconBox,
-	},
-	data() {
-		return {
-			colors,
-		};
-	},
-	template: `<div class="icons-container">
-        <farm-icon-box
-			v-for="color of colors"
-			:key="color"
-			:color="color"
-			icon="book" />
-	</div>`,
-});
-
-export const Sizes = () => ({
-	components: {
-		'farm-icon-box': IconBox,
-	},
-	data() {
-		return {
-			sizes,
-		};
-	},
-	template: `<div class="icons-container">
-        <div v-for="size of sizes" :key="size">
-            <farm-icon-box icon="book" :key="size" :size="size" />
-			{{ size }}
-        </div>
-       
-	</div>`,
-});
-
-IconBoxes.story = {
-	name: 'Colors',
-};
-
-Sizes.story = {
-	name: 'Sizes',
-};

package/src/examples/Logger/Logger.stories.js

@@ -1,59 +0,0 @@
-import { Logger } from '../../main';
-
-export default {
-	title: 'Examples/Logger/Logger',
-	component: Logger,
-	parameters: {
-		docs: {
-			description: {
-				component: `Logger<br />
-				selector: <em>farm-logger</em>
-				`,
-			},
-		},
-		viewMode: 'docs',
-	},
-};
-
-export const Primary = () => ({
-	components: { Logger },
-	data() {
-		return {
-			items: [
-				{
-					message: 'Recusado entre as pré elegíveis',
-					userName: 'Cleyton Rasta',
-					formattedDate: '13/06/2022  20:40',
-					status: 'error',
-				},
-				{
-					message: 'Aprovado entre as pré elegíveis',
-					userName: 'Cleyton Rasta',
-					formattedDate: '13/06/2022  20:40',
-					status: 'success',
-				},
-				{
-					message: 'Aprovado entre as pré elegíveis',
-					userName: 'Cleyton Rasta',
-					formattedDate: '13/06/2022  20:40',
-					status: 'success',
-				},
-				{
-					message: 'Recusado entre as pré elegíveis',
-					userName: 'Cleyton Rasta',
-					formattedDate: '13/06/2022  20:40',
-					status: 'error',
-				},
-				{
-					message: 'Recusado entre as pré elegíveis',
-					userName: 'Cleyton Rasta',
-					formattedDate: '13/06/2022  20:40',
-					status: 'error',
-				},
-			],
-		};
-	},
-	template: `<Logger :items="items" />`,
-});
-
-Primary.storyName = 'Básico';

package/src/examples/Logger/LoggerItem.stories.js

@@ -1,81 +0,0 @@
-import { LoggerItem } from '../../main';
-
-export default {
-	title: 'Examples/Logger/LoggerItem',
-	component: LoggerItem,
-	parameters: {
-		docs: {
-			description: {
-				component: `LoggerItem<br />
-				selector: <em>farm-logger-item</em>
-				`,
-			},
-		},
-		viewMode: 'docs',
-	},
-};
-
-export const Primary = () => ({
-	components: { LoggerItem },
-	data() {
-		return {
-			item: {
-				message: 'Recusado entre as pré elegíveis',
-				userName: 'Cleyton Rasta',
-				formattedDate: '13/06/2022  20:40',
-			},
-		};
-	},
-	template: `<LoggerItem :item="item" />`,
-});
-
-export const Success = () => ({
-	components: { LoggerItem },
-	data() {
-		return {
-			item: {
-				message: 'Recusado entre as pré elegíveis',
-				userName: 'Cleyton Rasta',
-				formattedDate: '13/06/2022  20:40',
-				status: 'success',
-			},
-		};
-	},
-	template: `<LoggerItem :item="item" />`,
-});
-
-export const Error = () => ({
-	components: { LoggerItem },
-	data() {
-		return {
-			item: {
-				message: 'Recusado entre as pré elegíveis',
-				userName: 'Cleyton Rasta',
-				formattedDate: '13/06/2022  20:40',
-				status: 'error',
-			},
-		};
-	},
-	template: `<LoggerItem :item="item" />`,
-});
-
-export const CustomIcon = () => ({
-	components: { LoggerItem },
-	data() {
-		return {
-			item: {
-				icon: 'book',
-				message: 'Recusado entre as pré elegíveis',
-				userName: 'Cleyton Rasta',
-				formattedDate: '13/06/2022  20:40',
-				status: 'success',
-			},
-		};
-	},
-	template: `<LoggerItem :item="item" />`,
-});
-
-Primary.storyName = 'Basic';
-Success.storyName = 'Success';
-Error.storyName = 'Error';
-CustomIcon.storyName = 'Custom Icon';

package/src/examples/MainFilter.stories.js

@@ -1,29 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-import { MainFilter } from '../main';
-
-export default {
-	title: 'Examples/MainFilter',
-	decorators: [withDesign],
-	component: MainFilter,
-};
-
-export const MainFilters = () => ({
-	/*
-	 * How to toggle filters
-	 */
-	components: {
-		MainFilter,
-	},
-	data() {
-		return {
-			showFilters: false,
-			items: [1, 2, 3, 4, 5],
-		};
-	},
-	template: `<div style="max-width: 480px">
-	<MainFilter @onClick="showFilters = !showFilters" :showFilters="showFilters" />
-        <section v-if="showFilters">
-            <v-select :items="items" />
-        </section>
-	</div>`,
-});

package/src/examples/ProgressBar.stories.js

@@ -1,71 +0,0 @@
-import { withDesign } from 'storybook-addon-designs';
-import ProgressBar from '../components/ProgressBar';
-
-export default {
-	title: 'Examples/ProgressBar',
-	component: ProgressBar,
-	decorators: [withDesign],
-	parameters: {
-		viewMode: 'docs',
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
-		},
-		docs: {
-			description: {
-				component: `ProgressBar<br />
-				selector: <em>farm-progressbar</em>`,
-			},
-		},
-	},
-};
-
-export const Primary = () => ({
-	components: { 'farm-progressbar': ProgressBar },
-	data() {
-		return {
-			val: 35,
-		};
-	},
-	template: '<farm-progressbar :value="val" />',
-});
-
-export const CustomColors = () => ({
-	components: { 'farm-progressbar': ProgressBar },
-	data() {
-		return {
-			val: 35,
-		};
-	},
-	template: '<farm-progressbar :value="val" backgroundColor="accent" valueColor="secondary" />',
-});
-
-export const CustomHexaColors = () => ({
-	components: { 'farm-progressbar': ProgressBar },
-	data() {
-		return {
-			val: 35,
-		};
-	},
-	template: '<farm-progressbar :value="val" backgroundColor="#FFFF00" valueColor="#00FF00" />',
-});
-
-const parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
-	},
-};
-
-Primary.story = {
-	name: 'Basic',
-	parameters,
-};
-CustomColors.story = {
-	name: 'Custom Colors',
-	parameters,
-};
-CustomHexaColors.story = {
-	name: 'Custom Hexadecimals Colors',
-	parameters,
-};