@farm-investimentos/front-mfe-components 12.1.4 → 12.2.0

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

@@ -0,0 +1,48 @@
+import { shallowMount } from '@vue/test-utils';
+import TextArea from '../TextArea';
+
+describe('TextArea component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(TextArea);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('methods', () => {
+		it('reset', () => {
+			component.reset();
+			expect(component.isTouched).toBeTruthy();
+			expect(component.innerValue).toEqual('');
+		});
+
+		it('onKeyUp', () => {
+			component.onKeyUp();
+			expect(component.isTouched).toBeTruthy();
+		});
+
+		it('onBlur', () => {
+			component.onBlur();
+			expect(component.isBlured).toBeTruthy();
+		});
+
+		it('makePristine', () => {
+			component.isTouched = true;
+			component.isBlured = true;
+			component.makePristine();
+			expect(component.isTouched).toBeFalsy();
+			expect(component.isBlured).toBeFalsy();
+		});
+	});
+});

package/src/components/TextArea/index.ts

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

package/src/components/TextFieldV2/TextFieldV2.stories.js

@@ -230,27 +230,3 @@ export const ToggleVisibility = () => ({
 		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
-
-
-export const Compare = () => ({
-	data() {
-		return {
-			v1: '',
-			rules: {
-				required: value => !!value || 'Required field',
-				email: v =>
-					!v ||
-					/^\w+([.-]?\w+)*@\w+([.-]?\w+)*(\.\w{2,3})+$/.test(v) ||
-					'Must be an e-mail',
-			},
-		};
-	},
-	template: `<div style="width: 480px">
-
-		<farm-label required>Required and e-mail</farm-label>
-		<farm-textfield-v2 v-model="v1" :rules="[rules.required, rules.email]" />
-
-		<farm-textfield v-model="v1" :rules="[rules.required, rules.email]" />
-
-	</div>`,
-});

package/src/components/Typography/Typography.scss

@@ -4,6 +4,7 @@
 
 .farm-typography {
 	font-size: 16px;
+	color: var(--farm-text-primary);
 
 	&[bold] {
 		font-weight: bold;
@@ -25,16 +26,12 @@
 		margin-bottom: auto;
 	}
 
-	color: var(--farm-text-primary);
-
 	&--lighten {
 		color: var(--farm-text-secondary);
 	}
 
 	&.farm-typography--ellipsis {
-		overflow: hidden;
-		white-space: nowrap;
-		text-overflow: ellipsis;
+		@include ellipsis;
 	}
 
 	@each $k in $theme-colors-list {

package/src/configurations/_mixins.scss

@@ -76,10 +76,17 @@
         }
     }
 }
+
 @mixin activateRipple {
     &:hover {
         .farm-ripple:before {
             opacity: 0.3;
         }
     }
+}
+
+@mixin ellipsis {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
 }

package/src/main.ts

@@ -87,6 +87,7 @@ export * from './components/RadioGroup';
 export * from './components/Select';
 export * from './components/Stepper';
 export * from './components/Switcher';
+export * from './components/TextArea';
 export * from './components/TextField';
 export * from './components/TextFieldV2';
 export * from './components/Tooltip';

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

@@ -1,42 +0,0 @@
-export default {
-	title: 'Form/Textfield/Examples/Password',
-	component: Password,
-	parameters: {
-		docs: {
-			description: {
-				component: `How to toggle password visivility.<br />
-- Password visibility: hidden -> eye on icon (the click/tap will show the password)
-- Password visibility: show -> eye off icon (the click/tap will hide the password)`,
-			},
-		},
-	},
-};
-
-export const Password = () => ({
-	data() {
-		return {
-			password: '',
-			showHidden: false,
-		};
-	},
-	template: `
-        <v-col cols="12" sm="12" md="4" class="v-col-fieldset-default pl-0">
-        <label>
-			Toggle visibility from password field
-		</label>
-        <v-text-field
-            color="secondary"
-            dense
-            outlined
-            v-model="password"
-            :append-icon="showHidden ? 'mdi-eye-off' : 'mdi-eye'"
-            :type="showHidden ? 'text' : 'password'"
-            @click:append="showHidden = !showHidden"
-        />
-        </v-col>
-    `,
-});
-
-Password.story = {
-	name: 'Básico',
-};

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

@@ -1,27 +0,0 @@
-export default {
-	title: 'Form/Select/Examples',
-	parameters: {
-		docs: {
-			description: {
-				component: `How to show select (v-select)<br />
-`,
-			},
-		},
-	},
-};
-
-export const VSelect = () => ({
-	data() {
-		return {
-			items: ['SP', 'RJ', 'MG', 'RS', 'BA'],
-		};
-	},
-	template: `
-        <v-col cols="12" sm="6" md="2" class="v-col-fieldset-default pl-0">
-            <v-select dense outlined :items="items" />
-        </v-col>`,
-});
-
-VSelect.story = {
-	name: 'Básico',
-};