@farm-investimentos/front-mfe-components 7.0.2 → 7.3.0

package/src/components/TextField/TextField.stories.js

@@ -0,0 +1,47 @@
+import { withDesign } from 'storybook-addon-designs';
+import TextField from './TextField.vue';
+
+export default {
+	title: 'API/Form/TextField',
+	component: TextField,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Text field<br />
+				selector: <em>farm-texfield</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-textfield': TextField },
+	data() {
+		return {
+			v: '',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield v-model="v" />
+		value: {{ v }}
+	</div>`,
+});
+
+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,
+};

package/src/components/TextField/TextField.vue

@@ -0,0 +1,18 @@
+<template>
+	<v-text-field class="farm-textfield" v-on="{ ...$listeners }" v-bind="$attrs" outlined />
+</template>
+<script lang="ts">
+import Vue from 'vue';
+import { VTextField } from 'vuetify/lib/components/VTextField';
+
+export default Vue.extend({
+	name: 'farm-textfield',
+	inheritAttrs: true,
+	components: {
+		VTextField,
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'TextField.scss';
+</style>

package/src/components/TextField/__tests__/Label.spec.js

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import TextField from '../TextField';
+
+describe('TextField component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TextField);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/TextField/index.ts

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

package/src/examples/Buttons.stories.js

@@ -1,5 +1,5 @@
 import { withDesign } from 'storybook-addon-designs';
-import { DefaultButton } from '../main';
+import { DefaultButton, Icon } from '../main';
 import('./Buttons.stories.scss');
 
 export default {
@@ -27,7 +27,7 @@ export const ActiveButtons = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <farm-btn v-for="color of colors":key="color" :color="color">
+        <farm-btn v-for="color of colors":key="'random_9_' + color" :color="color">
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -44,7 +44,7 @@ export const OutlinedButtons = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Outlined</h4>
-        <farm-btn v-for="color of colors":key="color" :color="color" outlined>
+        <farm-btn v-for="color of colors":key="'random_8_' + color" :color="color" outlined>
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -62,15 +62,15 @@ export const DisabledButtons = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Default</h4>
-        <farm-btn v-for="color of colors":key="color" :color="color" disabled>
+        <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="color" :color="color" outlined disabled>
+		<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="color" :color="color" plain disabled>
+		<farm-btn v-for="color of colors":key="'random_7_' + color" :color="color" plain disabled>
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -86,7 +86,7 @@ export const Plain = () => ({
 		};
 	},
 	template: `<div class="buttons-container">
-        <farm-btn v-for="color of colors":key="color" :color="color" plain>
+        <farm-btn v-for="color of colors":key="'random_4_' + color" :color="color" plain>
             {{ color }}
         </farm-btn>
 	</div>`,
@@ -103,7 +103,7 @@ export const Icons = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Full</h4>
-        <farm-btn v-for="color of colors":key="color" :color="color">
+        <farm-btn v-for="color of colors":key="'random_3_' + color" :color="color">
             <v-icon>mdi-book</v-icon> book
         </farm-btn>
 
@@ -123,6 +123,7 @@ export const Icons = () => ({
 export const Iconed = () => ({
 	components: {
 		'farm-btn': DefaultButton,
+		'farm-icon': Icon,
 	},
 	data() {
 		return {
@@ -131,8 +132,8 @@ export const Iconed = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Icon</h4>
-        <farm-btn icon v-for="color of colors" :key="color" :color="color">
-            <v-icon>mdi-book</v-icon>
+        <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color">
+            <farm-icon>book</farm-icon>
         </farm-btn>
 	</div>`,
 });
@@ -148,11 +149,62 @@ export const Rounded = () => ({
 	},
 	template: `<div class="buttons-container">
 		<h4>Rounded</h4>
-        <farm-btn v-for="color of colors" :key="color" :color="color" rounded >rounded
+        <farm-btn v-for="color of colors" :key="'random_1_' + color" :color="color" rounded >rounded
         </farm-btn>
 	</div>`,
 });
 
+export const Sizes = () => ({
+	components: {
+		'farm-btn': DefaultButton,
+		'farm-icon': Icon,
+	},
+	data() {
+		return {
+			sizes: ['xs', 'sm', 'md', 'lg', 'xl'],
+			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" color="secondary">
+                {{ 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" color="secondary" 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" color="secondary" 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" color="secondary" rounded>
+                {{ size }}
+            </farm-btn>
+        </div>
+		<h4>Icon</h4>
+		<div :style="styles">
+            <farm-btn v-for="size of sizes" :style="styles.farmBtn" :key="'icon_' + size" color="secondary" :size="size" icon>
+				<farm-icon :size="size">book</farm-icon>
+            </farm-btn>
+        </div>
+	</div>`,
+});
+
 ActiveButtons.story = {
 	name: 'Active',
 };
@@ -171,3 +223,6 @@ Icons.story = {
 Rounded.story = {
 	name: 'Rounded',
 };
+Sizes.story = {
+	name: 'Sizes',
+};

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

@@ -0,0 +1,64 @@
+import { Label, TextField } from '../../main.ts';
+
+export default {
+	title: 'Examples/Form/Full',
+	component: Label,
+};
+
+export const Primary = () => ({
+	components: { 'farm-label': Label, 'farm-textfield': TextField },
+	data() {
+		return {
+			form: {
+				document: 22055527835,
+				email: '',
+				name: '',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+				email: value =>
+					value === '' || value === null || emailValidator(value) || 'E-mail inválido',
+			},
+			styles: {
+				vForm: {
+					maxWidth: '480px',
+				},
+				footer: {
+					display: 'flex',
+					justifyContent: 'end',
+				},
+			},
+		};
+	},
+	template: `
+        <v-form v-model="validForm" :style="[styles.vForm]">
+            <div>
+                <farm-label :required="true">Documento</farm-label>
+                <farm-textfield v-model="form.document" :rules="[rules.required]" />
+            </div>
+            <div>
+                <farm-label :required="true">E-mail</farm-label>
+                <farm-textfield v-model="form.email" :rules="[rules.required, rules.email]" />
+            </div>
+            <div>
+                <farm-label>Nome</farm-label>
+                <farm-textfield v-model="form.name" />
+            </div>
+            <div class="footer" :style="[styles.footer]">
+                <v-btn color="secondary" :disabled="!validForm">Salvar</v-btn>
+            </div>
+        </v-form>
+    `,
+});
+
+Primary.storyName = 'Basic';
+
+const emailValidator = value => {
+	if (!value) {
+		return false;
+	}
+	const pattern =
+		/^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+	return pattern.test(value.trim()) || false;
+};

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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,47 @@
+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/ProgressBar.stories.js

@@ -0,0 +1,71 @@
+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,
+};

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

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

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

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

package/src/main.ts

@@ -61,8 +61,11 @@ export * from './components/ResetTableRowSelection';
 export * from './components/MultipleSelectShortener';
 export * from './components/SelectModalOptions';
 export * from './components/ChipInviteStatus';
-export * from './components/Stepper';
+export * from './components/Label';
 export * from './components/Logger';
 export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
+export * from './components/ProgressBar';
+export * from './components/Stepper';
 export * from './components/Switcher';
+export * from './components/TextField';