@farm-investimentos/front-mfe-components 9.3.1 → 9.3.2

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "9.3.1",
+	"version": "9.3.2",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

package/src/components/Chip/Chip.scss

@@ -50,6 +50,15 @@
         &.farm-chip--lighten {
             color: themeColor('secondary');
         }
+        &.farm-chip--darken {
+            color: white;
+        }
+    }
+
+    &[color='secondary'] {
+        &.farm-chip--lighten {
+            color: white;
+        }
     }
 
     &--outlined {

package/src/components/Form/Form.stories.js

@@ -0,0 +1,134 @@
+import Form from './Form.vue';
+
+export default {
+	title: 'Form/Form',
+	component: Form,
+	parameters: {
+		docs: {
+			description: {
+				component: `Form<br />
+				selector: <em>farm-form</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+const styles = {
+	vForm: {
+		maxWidth: '480px',
+	},
+	footer: {
+		display: 'flex',
+		justifyContent: 'end',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				name: 'Name',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield v-model="form.document" :rules="[rules.required]" />
+				</div>
+			</section>
+			<section>
+				<div>
+					<farm-label :required="true">Nome</farm-label>
+					<farm-textfield v-model="form.name" :rules="[rules.required]" />
+				</div>
+			</section>
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});
+
+export const Secondary = () => ({
+	data() {
+		return {
+			form: {
+				document: 'Document',
+				not: 'Not required field',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield v-model="form.document" :rules="[rules.required]" />
+				</div>
+			</section>
+			<section>
+				<div>
+					<farm-label>not</farm-label>
+					<farm-textfield v-model="form.not" />
+				</div>
+			</section>
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});
+
+export const InitInvalid = () => ({
+	data() {
+		return {
+			form: {
+				document: '',
+				name: '',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+            <section>
+				<div>
+					<farm-label :required="true">Documento</farm-label>
+					<farm-textfield v-model="form.document" :rules="[rules.required]" />
+				</div>
+			</section>
+			<section>
+				<div>
+					<farm-label :required="true">Nome</farm-label>
+					<farm-textfield v-model="form.name" :rules="[rules.required]" />
+				</div>
+			</section>
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});

package/src/components/Form/Form.vue

@@ -0,0 +1,67 @@
+<template>
+	<form class="farm-form"><slot></slot></form>
+</template>
+<script lang="ts">
+import Vue, { onMounted, reactive, ref, getCurrentInstance } from 'vue';
+
+type ErrorsBag = Record<number, boolean>;
+
+export default Vue.extend({
+	name: 'farm-form',
+	props: {
+		value: { type: [Array, Boolean], required: true },
+	},
+	inheritAttrs: true,
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+		const errorsBag = reactive({} as ErrorsBag);
+		let validationFields = [];
+
+		const dispatchError = () => {
+			const keys = Object.keys(errorsBag);
+			const errorsIds = keys.filter(key => !errorsBag[key]);
+			emit('input', errorsIds.length === 0);
+		};
+
+		const watchInput = (field: any) => {
+			field.$watch(
+				'hasError',
+				() => {
+					errorsBag[field._uid] = field.valid;
+					dispatchError();
+				},
+				{ immediate: true }
+			);
+		};
+
+		const reset = () => {
+			validationFields.forEach(field => {
+				field.reset();
+			});
+		};
+
+		const recursiveFormField = $node => {
+			$node.$children.forEach($leaf => {
+				if ($leaf.$children.length > 1) {
+					recursiveFormField($leaf);
+				} else if ($leaf.$children[0] && $leaf.$children[0].validate) {
+					validationFields.push($leaf.$children[0]);
+				}
+			});
+		};
+
+		onMounted(() => {
+			recursiveFormField(getCurrentInstance().proxy);
+			validationFields.forEach(field => {
+				watchInput(field);
+			});
+		});
+
+		return {
+			innerValue,
+			errorsBag,
+			reset,
+		};
+	},
+});
+</script>

package/src/components/Form/__tests__/Form.spec.js

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

package/src/components/Form/index.ts

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

package/src/components/RadioGroup/IRadioGroup.ts

@@ -0,0 +1,6 @@
+interface IRadioGroup {
+    id: Number;
+	label: String;
+}
+
+export default IRadioGroup;

package/src/components/RadioGroup/RadioGroup.scss

@@ -0,0 +1,82 @@
+.farm-radio-group {
+    border: none;
+    cursor: default;
+    display: flex;
+    width: 100%;
+    &__item {
+        font-size: 16px;
+        line-height: 1.1;
+        cursor: pointer;
+        display: grid;
+        grid-template-columns: 16px auto;
+        gap: 8px;
+        color: rgba(0,0,0,.6);
+        margin-top: 16px;
+        margin-right: 16px;
+    }
+}
+
+.farm-radio-group--column {
+    flex-direction: column;
+}
+
+input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #ffffff;
+    margin: 0;
+    font: inherit;
+    color: rgba(0,0,0,.6);
+    width: 18px;
+    height: 18px;
+    border: 1.5px solid rgba(0,0,0,.6);
+    border-radius: 50%;
+    transform: translate(-12px);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+}
+
+input[type="radio"]::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    box-shadow: inset 16px 16px var(--radio-group-color);
+    background-color: CanvasText;
+}
+
+input[type="radio"]:checked::before {
+    transform: scale(1);
+}
+
+input[type="radio"]:focus {
+    outline: none;
+    outline-offset: none;
+}
+
+input[type="radio"]:checked {
+    border: 1.5px solid var(--radio-group-color);
+}
+
+input[type='radio']:hover {
+    box-shadow: 0px 0px 0px 8px  rgba(0, 0, 0, 0.1);
+    background-color:  rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    opacity: 1;
+}
+
+input[type='radio']:active {
+    animation: pulse 0.2s 1 ease-out;
+}
+
+@keyframes pulse {
+    from {
+      box-shadow:  0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
+    }
+    to {
+      box-shadow:  0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
+    }
+}

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -0,0 +1,34 @@
+import RadioGroup from './RadioGroup';
+
+export default {
+	title: 'Form/RadioGroup',
+	component: RadioGroup,
+	parameters: {
+		docs: {
+			description: {
+				component: `RadioGroup<br />
+				selector: <em>farm-radio-group</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			buttons: [
+                { label: 'Button 1', id: 1 }, 
+                { label: 'Button 2', id: 2 }, 
+                { label: 'Button 3', id: 3 }
+            ],
+			checkedValue: 1
+		};
+	},
+	template: `<div>
+	    <farm-radio-group v-model="checkedValue" column :buttons="buttons" />
+	</div>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,71 @@
+<template>
+    <div 
+    :class="{
+        'farm-radio-group': true,
+        'farm-radio-group--column': $props.column,
+    }">
+        <div class="farm-radio-group__item"
+            v-for="(button, index) in buttons" 
+            :key="`farm-radio-group_` + index"
+            @click="clicked(button.id)"
+        >   
+            <input  
+                type="radio" 
+                name="radio" 
+                :checked="button.id === $props.value"
+                :id="`farm-radio-group_` + index"
+                :style="cssVars" 
+                :value="button.id"
+               >
+            <label>
+                {{button.label}}
+            </label>
+        </div>
+    </div>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import IRadioGroup from './IRadioGroup';
+export default Vue.extend({
+	name: 'farm-radio-group',
+	props: {
+		/**
+		 * Array of buttons
+		 */
+		buttons: {
+			type: Array as PropType<Array<IRadioGroup>>,
+			default: () => [],
+		},
+        /**
+		 * v-model
+		 */
+		value: {
+			required: true,
+		},
+        column: {
+            type: Boolean,
+            default: false
+        },
+        color: {
+            type: String,
+			default: '#00B493',
+        }
+	},
+    methods: {
+        clicked(value) {
+            this.$emit('input', value);
+        }
+    },
+    computed: {
+        cssVars () {
+            return {
+                '--radio-group-color': this.color
+            };
+        }
+    }
+
+});
+</script>
+<style lang="scss" scoped>
+@import './RadioGroup.scss';
+</style>

package/src/components/RadioGroup/__tests__/RadioGroup.spec.js

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

package/src/components/RadioGroup/index.ts

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

package/src/components/layout/Container/Container.stories.js

@@ -16,7 +16,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-container': Container },
 	template: '<farm-container>content</farm-container>',
 });
 

package/src/components/layout/Row/Row.scss

@@ -0,0 +1,6 @@
+.farm-row {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    margin: -12px;
+}

package/src/components/layout/Row/Row.stories.js

@@ -0,0 +1,22 @@
+import Row from './Row.vue';
+
+export default {
+	title: 'Layout/Row',
+	component: Row,
+	parameters: {
+		docs: {
+			description: {
+				component: `Row<br />
+				selector: <em>farm-row</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-row>row content</farm-row>',
+});
+
+Primary.storyName = 'Basic';

package/src/components/layout/Row/Row.vue

@@ -0,0 +1,22 @@
+<template>
+	<component v-bind:is="tag" class="farm-row">
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-row',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+	},
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'Row.scss';
+</style>

package/src/components/layout/Row/__tests__/Row.spec.js

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

package/src/components/layout/Row/index.ts

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

package/src/configurations/_theme-colors.scss

@@ -11,9 +11,9 @@ $secondary: (
 );
 
 $neutral: (
-    base: #EEEEEE,
+    base: #E0E0E0,
     lighten: #F5F5F5,
-    darken: #E0E0E0,
+    darken: #5C5C5C,
 );
 
 $error: (
@@ -42,7 +42,7 @@ $success: (
 
 $extra-1: (
     base: #8E24AA,
-    lighten: #E8F5E9,
+    lighten: #F3E5F5,
     darken: #4A148C,
 );
 

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

@@ -42,7 +42,7 @@ export const Primary = () => ({
                 <farm-textfield v-model="form.name" />
             </div>
             <div class="footer" :style="[styles.footer]">
-                <v-btn color="secondary" :disabled="!validForm">Salvar</v-btn>
+                <farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
             </div>
         </v-form>
     `,

package/src/main.ts

@@ -69,12 +69,14 @@ export * from './components/ResetTableRowSelection';
 export * from './components/MultipleSelectShortener';
 export * from './components/SelectModalOptions';
 export * from './components/ChipInviteStatus';
+export * from './components/Form';
 export * from './components/Label';
 export * from './components/Logger';
 export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
 export * from './components/Modal';
 export * from './components/ProgressBar';
+export * from './components/RadioGroup';
 export * from './components/Stepper';
 export * from './components/Switcher';
 export * from './components/TextField';
@@ -83,4 +85,5 @@ export * from './components/Typography';
 
 export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
+export * from './components/layout/Row';
 export * from './components/layout/Line';