@farm-investimentos/front-mfe-components-vue3 0.0.1

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

@@ -0,0 +1,317 @@
+// import { withDesign } from 'storybook-addon-designs';
+import baseThemeColors from '../../../configurations/_theme-colors-base.module.scss';
+import './Buttons.stories.scss';
+import DefaultButton from './DefaultButton.vue';
+const colors = Object.keys(baseThemeColors);
+
+export default {
+	title: 'Buttons/Default',
+	component: DefaultButton,
+
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Default button<br />
+				selector: <em>farm-btn</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=2491%3A4486',
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Default = () => ({
+	template: '<farm-btn color="primary"> Pass text as slot </farm-btn>',
+});
+
+export const Full = () => ({
+	template:
+		'<farm-btn color="primary" full> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const PrimaryActive = () => ({
+	template:
+		'<farm-btn color="primary"> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const PrimaryInactive = () => ({
+	template:
+		'<farm-btn disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+export const OutlinedActive = () => ({
+	template:
+		'<farm-btn outlined> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const OutlinedInactive = () => ({
+	template:
+		'<farm-btn outlined disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const PlainActive = () => ({
+	template:
+		'<farm-btn plain> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const PlainInactive = () => ({
+	template:
+		'<farm-btn plain disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
+});
+
+export const HtmlMarkup = () => ({
+	template: '<farm-btn><em>I am italic</strong></em></farm-btn>',
+});
+
+export const Props = () => ({
+	template: '<farm-btn outlined>props</farm-btn>',
+});
+
+export const Listener = () => ({
+	data() {
+		return {
+			x: 1,
+		};
+	},
+	template: `
+		<farm-btn color="error" @click="x++">click me to change: {{ x }}</farm-btn>
+	`,
+});
+
+export const ActiveButtons = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<farm-box>
+		<farm-row>
+		
+		<farm-col cols="12" md="3" class="d-flex flex-column">
+			Base
+			<farm-btn v-for="color of colors" :key="'random_9_' + color" :color="color" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+	
+		<farm-col cols="12" md="3"  class="d-flex flex-column">
+			Lighten
+			<farm-btn v-for="color of colors" :key="'random_9_lighten_' + color" :color="color" variation="lighten" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+
+			<farm-col cols="12" md="3"  class="d-flex flex-column">
+			Darken
+			<farm-btn v-for="color of colors" :key="'random_9_darken_' + color" :color="color" variation="darken" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+		<farm-row>
+	</farm-box>`,
+});
+
+export const OutlinedButtons = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Outlined</h4>
+        <farm-btn v-for="color of colors" :key="'random_8_' + color" :color="color" outlined>
+            {{ color }}
+        </farm-btn>
+	</div>`,
+});
+
+export const DisabledButtons = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+			x: 1,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Default</h4>
+        <farm-btn v-for="color of colors" :key="'random_5_' + color" :color="color" disabled>
+            {{ color }}
+        </farm-btn>
+		<h4>Outlined</h4>
+		<farm-btn v-for="color of colors" :key="'random_6_' + color" :color="color" outlined disabled>
+            {{ color }}
+        </farm-btn>
+		<h4>Plain</h4>
+		<farm-btn v-for="color of colors" :key="'random_7_' + color" :color="color" plain disabled>
+            {{ color }}
+        </farm-btn>
+		<h4>Icon</h4>
+        <farm-btn v-for="color of colors" :key="color + '_disabled_icon'" :color="color" plain disabled>
+            <farm-icon>book</farm-icon> {{ color }}
+        </farm-btn>
+		<farm-btn v-for="color of colors" :key="'random_icon_' + color" :color="color" disabled>
+			<farm-icon>book</farm-icon>
+			{{ color }}
+	</farm-btn>
+	</div>`,
+});
+
+export const Plain = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+        <farm-btn v-for="color of colors" :key="'random_4_' + color" :color="color" plain>
+            {{ color }}
+        </farm-btn>
+	</div>`,
+});
+
+export const Icons = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Full</h4>
+        <farm-btn v-for="color of colors" :key="'random_3_' + color" :color="color">
+			<farm-icon>book</farm-icon> book
+        </farm-btn>
+
+		<h4>Outlined</h4>
+        <farm-btn v-for="color of colors" :key="color + 'outlined'" :color="color" outlined>
+			<farm-icon>book</farm-icon> book
+        </farm-btn>
+
+		<h4>Plain</h4>
+        <farm-btn v-for="color of colors" :key="color + 'plain'" :color="color" plain>
+			<farm-icon color="primary">book</farm-icon> book
+        </farm-btn>
+		
+
+	</div>`,
+});
+
+export const Iconed = () => ({
+	data() {
+		return {
+			colors: [...colors, 'white'],
+		};
+	},
+	template: `<farm-box>
+	<farm-row>
+	
+	<farm-col cols="12" md="3" class="d-flex flex-column">
+		Base
+        <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color">
+            <farm-icon>book</farm-icon>
+        </farm-btn>
+	</farm-col>
+	
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
+
+		<h4>Darken</h4>
+        <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="darken">
+            <farm-icon>book</farm-icon>
+        </farm-btn>
+		</farm-col>
+	
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
+
+		<h4>Lighten </h4>
+        <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="lighten">
+            <farm-icon>book</farm-icon>
+        </farm-btn>
+	</farm-col>
+
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
+
+		<h4>Disabled</h4>
+        <farm-btn icon v-for="color of colors" :key="'disabled_random_2_' + color" :color="color" :disabled="true">
+            <farm-icon>book</farm-icon>
+        </farm-btn>
+		</farm-col>
+	</farm-row>
+	</farm-box>`,
+});
+
+export const Rounded = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+		<h4>Rounded</h4>
+        <farm-btn v-for="color of colors" :key="'random_1_' + color" :color="color" rounded >rounded
+        </farm-btn>
+	</div>`,
+});
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes: ['xs', 'sm', 'md', 'lg', 'xl', 'default'],
+			styles: {
+				display: 'flex',
+				flexDirection: 'row',
+				farmBtn: {
+					marginRight: '12px',
+				},
+			},
+		};
+	},
+	template: `<div>
+		<h4>Default</h4>
+        <div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'default_' + size" :size="size">
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Outlined</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'outlined_' + size" :size="size" outlined>
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Plain</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'plain_' + size" :size="size" plain>
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Rounded</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'rouned_' + size" :size="size" rounded>
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Icon</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'icon_' + size" :size="size" icon>
+				<farm-icon :size="size">book</farm-icon>
+            </farm-btn>
+        </div>
+	</div>`,
+});
+
+export const Elevated = () => ({
+	template: '<farm-btn :elevated="true">Elevated</farm-btn>',
+});

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -0,0 +1,128 @@
+<template>
+	<button
+		v-if="!to"
+		v-bind="$attrs"
+		:disabled="disabled"
+		:type="type"
+		:class="classes"
+		:size="$props.size"
+	>
+		<span class="farm-btn__content">
+			<slot></slot>
+		</span>
+	</button>
+	<router-link :to="to" v-bind="$attrs" :disabled="disabled" :class="classes" v-else>
+		<span class="farm-btn__content">
+			<slot></slot>
+		</span>
+	</router-link>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-btn',
+	inheritAttrs: true,
+
+	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Outlined
+		 */
+		outlined: { type: Boolean, default: false },
+		/**
+		 * Is plain
+		 */
+		plain: { type: Boolean, default: false },
+		/**
+		 * Is full
+		 */
+		full: { type: Boolean, default: false },
+		/**
+		 * Is disabled
+		 */
+		disabled: { type: Boolean, default: false },
+		/**
+		 * Is rounded
+		 */
+		rounded: { type: Boolean, default: false },
+		icon: { type: Boolean, default: false },
+		/**
+		 * Has elevation
+		 */
+		elevated: { type: Boolean, default: false },
+		type: {
+			type: String,
+			default: 'button',
+		},
+		/**
+		 * Denotes the target route of the link
+		 * Will transform button into a router-link
+		 */
+		to: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Size
+		 */
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+			default: 'default',
+		},
+		/**
+		 * Color Variation to Icons
+		 */
+		variation: {
+			type: String as PropType<'base' | 'lighten' | 'darken'>,
+			default: 'base',
+		},
+	},
+
+	computed: {
+		classes() {
+			const obj = {};
+			['outlined', 'plain', 'disabled']
+				.filter(key => this[key])
+				.forEach(key => {
+					obj['farm-btn--' + key] = this[key];
+				});
+			return {
+				'farm-btn': true,
+				'farm-btn--elevated': this.elevated,
+				'farm-btn--round': this.isRound,
+				'farm-btn--rounded': this.rounded,
+				'farm-btn--icon': this.icon,
+				'farm-btn--full': this.full,
+				['farm-btn--' + this.color]: true,
+				['farm-btn--variation-' + this.variation]: true,
+				...obj,
+			};
+		},
+		isRound(): boolean {
+			return Boolean(this.icon);
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'DefaultButton';
+</style>

package/src/components/Buttons/DefaultButton/__tests__/DefaultButton.spec.js

@@ -0,0 +1,32 @@
+import { shallowMount } from '@vue/test-utils';
+import DefaultButton from '../DefaultButton';
+
+describe('DefaultButton component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DefaultButton);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('computed properties', () => {
+		it('get isRound false', () => {
+			expect(component.isRound).toBeFalsy();
+		});
+
+		it('get isRound false', async () => {
+			await wrapper.setProps({ icon: true });
+			expect(component.isRound).toBeTruthy();
+		});
+
+		it('get classes', () => {
+			expect(component.classes).toBeDefined();
+		});
+
+	});
+});

package/src/components/Buttons/DefaultButton/index.ts

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

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

@@ -0,0 +1,40 @@
+import ExportButton from './ExportButton.vue';
+
+export default {
+	title: 'Buttons/Export',
+	component: ExportButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `Export Button<br />
+				selector: <em>farm-btn-export</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-btn-export />',
+});
+
+export const Disabled = () => ({
+	template: '<farm-btn-export :disabled="true" />',
+});
+
+export const List = () => ({
+	template: `<farm-btn-export :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />`,
+});
+
+export const DisabledList = () => ({
+	template: `<farm-btn-export :disabled="true" :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />`,
+});
+
+export const CustomColor = () => ({
+	template: `<div>
+		<farm-btn-export color="info" />
+		<farm-btn-export color="info" :optionsList="[{ key: 1, label: 'XLS teste'}, { key: 2, label: 'CSV teste novo'}]" />
+	</div>`,
+});

package/src/components/Buttons/ExportButton/ExportButton.vue

@@ -0,0 +1,82 @@
+<template>
+	<farm-btn
+		v-if="optionsList.length == 0 || disabled"
+		class="farm-btn--responsive"
+		outlined
+		title="Exportar"
+		:color="$attrs.color"
+		:disabled="disabled"
+		@click="onClick"
+	>
+		<farm-icon v-if="optionsList.length == 0" class="mr-2"> file-export-outline </farm-icon>
+		Exportar
+		<farm-icon v-if="optionsList.length != 0" class="ml-2"> chevron-down </farm-icon>
+	</farm-btn>
+
+	<farm-contextmenu v-else v-model="value" :bottom="true">
+		<template v-slot:activator="{}">
+			<farm-btn outlined title="Exportar" :color="$attrs.color" @click="toggleValue">
+				Exportar
+				<farm-icon class="ml-2"> chevron-{{ value ? 'up' : 'down' }} </farm-icon>
+			</farm-btn>
+		</template>
+		<farm-list>
+			<farm-listitem
+				v-for="item in optionsList"
+				clickable
+				hoverColorVariation="lighten"
+				:hoverColor="$attrs.color || 'primary'"
+				:key="'exportbutton_key_' + item.label"
+				:title="item.label"
+				@click="onClick(item.key)"
+			>
+				<farm-caption bold tag="span">{{ item.label }}</farm-caption>
+			</farm-listitem>
+		</farm-list>
+	</farm-contextmenu>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export interface IExportOption {
+	label: String;
+	key: String;
+}
+
+/**
+ * BExport Button: standalone or menu list
+ */
+export default {
+	name: 'farm-btn-export',
+	props: {
+		/**
+		 * Options list
+		 */
+		optionsList: {
+			type: Array as PropType<Array<IExportOption>>,
+			default: () => [],
+		},
+		/**
+		 * Is disabled?
+		 */
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	data() {
+		return {
+			value: false,
+		};
+	},
+	methods: {
+		onClick(key) {
+			this.$emit('onClick', key);
+		},
+		toggleValue(event: MouseEvent) {
+			this.value = !this.value;
+			event.stopPropagation();
+		},
+	},
+};
+</script>

package/src/components/Buttons/ExportButton/__tests__/ExportButton.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import ExportButton from '../ExportButton';
+
+describe('ExportButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ExportButton);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/ExportButton/index.ts

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

package/src/components/Buttons/ImportButton/ImportButton.scss

@@ -0,0 +1,8 @@
+.farm-btn.farm-btn--import {
+   
+
+    .farm-btn__content .farm-icon {
+        color: white;
+        margin-right: 1rem;
+    }
+}

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

@@ -0,0 +1,23 @@
+import ImportButton from './ImportButton.vue';
+
+export default {
+	title: 'Buttons/Import',
+	component: ImportButton,
+};
+
+export const Primary = () => ({
+	template: '<farm-btn-import />',
+});
+
+export const CustomLabel = () => ({
+	components: { ImportButton },
+	template: '<farm-btn-import label="Label custom" />',
+});
+
+export const CustomColors = () => ({
+	components: { ImportButton },
+	template: `<div>
+		<farm-btn-import color="info" variation="lighten" />
+		<farm-btn-import color="info" variation="darken" />
+	</div>`,
+});

package/src/components/Buttons/ImportButton/ImportButton.vue

@@ -0,0 +1,35 @@
+<template>
+	<farm-btn
+		class="farm-btn--responsive farm-btn--import"
+		title="Importar"
+		v-bind="$attrs"
+		@click="onClick"
+	>
+		<farm-icon>upload</farm-icon>
+		{{ label }}
+	</farm-btn>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-btn-import',
+	props: {
+		/**
+		 * Label do botão
+		 */
+		label: {
+			type: String,
+			default: 'Importar',
+		},
+	},
+	methods: {
+		onClick() {
+			this.$emit('onClick');
+		},
+	},
+};
+</script>
+<style scoped lang="scss">
+@import 'ImportButton';
+</style>