@farm-investimentos/front-mfe-components 11.4.7 → 11.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.4.7",
+	"version": "11.5.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -49,8 +49,9 @@
 		"sass": "~1.32.0",
 		"sass-loader": "^10.0.0",
 		"storybook-addon-designs": "^6.2.1",
+		"text-mask-addons": "^3.8.0",
 		"typescript": "~4.1.5",
-		"v-mask": "^2.3.0",
+		"v-mask": "2.3.0",
 		"vue-template-compiler": "2.7.10"
 	},
 	"browserslist": [

package/src/components/CopyToClipboard/CopyToClipboard.stories.js

@@ -23,3 +23,10 @@ export const Primary = () => ({
 		<farm-copytoclipboard toCopy="To be copied" />
     </div>`,
 });
+
+export const NoIcon = () => ({
+	components: { 'farm-copytoclipboard': CopyToClipboard },
+	template: `<div style="max-width: 480px; padding-top: 80px; padding-left: 80px;">
+		<farm-copytoclipboard toCopy="To be copied" :isIcon="false" />
+    </div>`,
+});

package/src/components/CopyToClipboard/CopyToClipboard.vue

@@ -2,9 +2,13 @@
 	<farm-tooltip v-model="show">
 		{{ feedbackMessage }}
 		<template v-slot:activator="{}">
-			<farm-btn icon :disabled="disabled" @click="onClick">
+			<farm-btn v-if="isIcon" title="Copiar" icon :disabled="disabled" @click="onClick">
 				<farm-icon size="xs">content-copy</farm-icon>
 			</farm-btn>
+			<farm-btn v-else outlined title="Copiar" :disabled="disabled" @click="onClick">
+				<farm-icon>content-copy</farm-icon>
+				Copiar
+			</farm-btn>
 		</template>
 	</farm-tooltip>
 </template>
@@ -20,12 +24,16 @@ export default Vue.extend({
 		 * Content to be copied to clipboard
 		 */
 		toCopy: { type: String, required: true },
+		/**
+		 * Is button with icon?
+		 */
+		isIcon: { type: Boolean, default: true },
 	},
 	setup(props) {
 		const show = ref(false);
 		const feedbackMessage = ref('');
 		const disabled = ref(false);
-		const { toCopy } = toRefs(props);
+		const { toCopy, isIcon } = toRefs(props);
 
 		const onClick = async () => {
 			disabled.value = true;
@@ -45,6 +53,7 @@ export default Vue.extend({
 
 		return {
 			show,
+			isIcon,
 			feedbackMessage,
 			disabled,
 			onClick,
@@ -52,4 +61,3 @@ export default Vue.extend({
 	},
 });
 </script>
-

package/src/components/Switcher/Switcher.scss

@@ -1,17 +1,25 @@
 .farm-switch--selected {
-    background-color: var(--v-secondary-base);
+    background-color: var(--farm-primary-base);
 }
 
 .farm-switch--idle {
-    background-color: var(--v-error-base);
+    background-color: var(--farm-neutral-base);
+}
+
+.farm-switch--disabled-on {
+    background-color: var(--farm-primary-lighten);
+}
+
+.farm-switch--disabled-off {
+    background-color: var(--farm-neutral-lighten);
 }
 
 .farm-switch {
     display: inline-block;
     position: relative;
     cursor: pointer;
-    width: 32px;
-    height: 20px;
+    width: 24px;
+    height: 16px;
     border-radius: 9999px;
 
     &:focus {
@@ -22,10 +30,6 @@
         display: block;
     }
 
-    &--disabled {
-        opacity: 0.6;
-        cursor: default;
-    }
 }
 
 .farm-switch__background {
@@ -40,10 +44,10 @@
 
 .farm-switch__indicator {
     position: absolute;
-    height: 20px;
-    width: 20px;
-    left: -2px;
-    top: -4px;
+    height: 16px;
+    width: 16px;
+    left: -4px;
+    top: -2px;
     background-color: #ffffff;
     border-radius: 9999px;
     box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);

package/src/components/Switcher/Switcher.stories.js

@@ -8,7 +8,7 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			selectedValue: false,
+			selectedValue: true,
 		};
 	},
 	template: `<div>
@@ -16,7 +16,29 @@ export const Primary = () => ({
 	</div>`,
 });
 
-export const Disabled = () => ({
+export const OnDisabled = () => ({
+	data() {
+		return {
+			selectedValue: true,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="true" />
+	</div>`,
+});
+
+export const Off = () => ({
+	data() {
+		return {
+			selectedValue: false,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="false" />
+	</div>`,
+});
+
+export const OffDisabled = () => ({
 	data() {
 		return {
 			selectedValue: false,

package/src/components/Switcher/Switcher.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		:class="{ 'farm-switch': true, 'farm-switch--disabled': isDisabled }"
+		:class="{ 'farm-switch': true }"
 		role="checkbox"
 		@click="toggle"
 		@keydown.space.prevent="toggle"
@@ -35,8 +35,10 @@ export default Vue.extend({
 	computed: {
 		backgroundStyles() {
 			return {
-				'farm-switch--selected': this.value,
-				'farm-switch--idle': !this.value,
+				'farm-switch--selected': this.value && !this.isDisabled,
+				'farm-switch--idle': !this.value && !this.isDisabled,
+				'farm-switch--disabled-on': this.value && this.isDisabled,   
+				'farm-switch--disabled-off': !this.value && this.isDisabled,   
 			};
 		},
 		indicatorStyles() {

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,4 +1,5 @@
 .farm-textfield {
+	height: 64px;
 	&--input {
 		display: flex;
 		align-items: center;
@@ -24,6 +25,10 @@
 
 		width: 100%;
 	}
+
+	.farm-caption {
+		line-height: 12px;
+	}
 }
 
 .farm-textfield--touched.farm-textfield--validatable {

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

@@ -1,6 +1,16 @@
 import { withDesign } from 'storybook-addon-designs';
 import TextFieldV2 from './TextFieldV2.vue';
 
+import createNumberMask from 'text-mask-addons/dist/createNumberMask';
+const currencyMask = createNumberMask({
+	prefix: 'R$',
+	allowDecimal: true,
+	includeThousandsSeparator: true,
+	thousandsSeparatorSymbol: '.',
+	decimalSymbol: ',',
+	allowNegative: false,
+});
+
 export default {
 	title: 'Form/TextFieldV2',
 	component: TextFieldV2,
@@ -34,18 +44,60 @@ export const Primary = () => ({
 	</div>`,
 });
 
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" disabled />
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" readonly />
+	</div>`,
+});
+
 export const Validate = () => ({
 	data() {
 		return {
-			v: 'input',
+			v1: 'input 1',
+			v2: '',
+			v3: '',
+			v4: '',
 			rules: {
-				required: value => !!value || 'Campo obrigatório',
+				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 field</farm-label>
-		<farm-textfield-v2 v-model="v" :rules="[rules.required]" />
+		<farm-textfield-v2 v-model="v1" :rules="[rules.required]" />
+
+		<farm-label>E-mail</farm-label>
+		<farm-textfield-v2 v-model="v2" :rules="[rules.email]" />
+
+		<farm-label required>Required and e-mail</farm-label>
+		<farm-textfield-v2 v-model="v3" :rules="[rules.required, rules.email]" />
+
+		<farm-label required>Required field with hint</farm-label>
+		<farm-textfield-v2 v-model="v4" :rules="[rules.required]" hint="hint text" />
+
+		<farm-label required>Required field with icon</farm-label>
+		<farm-textfield-v2 v-model="v1" :rules="[rules.required]" icon="eye" />
+
 	</div>`,
 });
 
@@ -61,8 +113,8 @@ export const Icon = () => ({
 		},
 	},
 	template: `<div style="width: 480px">
-		<farm-textfield-v2 v-model="v" icon="eye" onClickIcon="this.show" />
-		<farm-textfield-v2 v-model="v" icon="eye" icon-position="left" onClickIcon="this.show" />
+		<farm-textfield-v2 v-model="v" icon="eye" @onClickIcon="show" />
+		<farm-textfield-v2 v-model="v" icon="eye" icon-position="left" @onClickIcon="show" />
 	</div>`,
 });
 
@@ -72,8 +124,8 @@ export const HintText = () => ({
 			v: 'input text',
 		};
 	},
-	template: `<div style="width: 480px">
-		<farm-textfield-v2 v-model="v" hintText="Hint text" />
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textfield-v2 v-model="v" hint="Hint text" />
 	</div>`,
 });
 
@@ -97,3 +149,83 @@ export const UpdateValue = () => ({
 		<br />v-model: {{ v }}
 	</div>`,
 });
+
+export const Types = () => ({
+	data() {
+		return {
+			types: ['text', 'password', 'email', 'date', 'search', 'color', 'tel', 'url'],
+		};
+	},
+	template: `<div style="width: 480px">
+		<div v-for="type in types" :key="'input_type_' + type">
+			<farm-label>Type: {{ type }}</farm-label>
+			<farm-textfield-v2 :type="type" />
+		</div>
+	</div>`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: 'input text',
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.input.reset();
+			this.$refs.inputValidatable.reset();
+		},
+	},
+	template: `<div style="width: 480px">
+
+		<farm-label>Not Required</farm-label>
+		<farm-textfield-v2 v-model="v" ref="input" />
+		
+		<farm-label required>Required</farm-label>
+		<farm-textfield-v2 v-model="v" ref="inputValidatable" :rules="[rules.required]" />
+		
+		<farm-btn @click="reset">reset</farm-btn>
+
+	</div>`,
+});
+
+export const Mask = () => ({
+	data() {
+		return {
+			v: '',
+			v2: '',
+			mask: '###.###.###/##',
+			currencyMask,
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label>CPF Mask ({{ mask }})</farm-label>
+		<farm-textfield-v2 v-model="v" :v-mask="mask" />
+		v-model: {{ v }}
+
+		<farm-label>Number Mask (R$ ##.###.###,##)</farm-label>
+		<farm-textfield-v2 v-model="v2" :v-mask="currencyMask" />
+		v-model: {{ v2 }}
+
+	</div>`,
+});
+
+export const ToggleVisibility = () => ({
+	data() {
+		return {
+			v: 'hidden password',
+			visible: false,
+		};
+	},
+	methods: {
+		toggle() {
+			this.visible = !this.visible;
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -10,28 +10,28 @@
 		}"
 	>
 		<div class="farm-textfield--input">
-			<button v-if="icon && iconPosition === 'left'" @click="$emit('onClickIcon')">
+			<button type="button" v-if="icon && iconPosition === 'left'" @click="$emit('onClickIcon')">
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
-
 			<input
 				v-bind="$attrs"
 				v-model="innerValue"
+				v-mask="$props.vMask"
 				:disabled="disabled"
+				:readonly="readonly"
 				@keyup="onKeyUp"
 				@blur="onBlur"
 			/>
-
-			<button v-if="icon && iconPosition === 'right'" @click="$emit('onClickIcon')">
+			<button type="button" v-if="icon && iconPosition === 'right'" @click="$emit('onClickIcon')">
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>
 
-		<farm-caption v-if="hasError && isTouched" color="error" variation="regular">
+		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
-		<farm-caption v-if="hintText && !errorMessage" color="gray" variation="regular">
-			{{ hintText }}
+		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+			{{ hint }}
 		</farm-caption>
 	</div>
 </template>
@@ -65,17 +65,24 @@ export default Vue.extend({
 		/**
 		 * Show hint text
 		 */
-		hintText: {
+		hint: {
 			type: String,
 			default: null,
 		},
 		/**
-		 * Show input disable
+		 * Disabled the input
 		 */
 		disabled: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Puts input in readonly state
+		 */
+		readonly: {
+			type: Boolean,
+			default: false,
+		},
 
 		errorMessage: String,
 		/**
@@ -85,6 +92,13 @@ export default Vue.extend({
 			type: Array as PropType<Array<Function>>,
 			default: () => [],
 		},
+		/**
+		 * Mask
+		 */
+		vMask: {
+			default: '',
+			type: [String, Function],
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
@@ -100,6 +114,8 @@ export default Vue.extend({
 			return errorBucket.value.length > 0;
 		});
 
+		const showErrorText = computed(() => hasError.value && isTouched.value);
+
 		watch(
 			() => props.value,
 			() => {
@@ -112,6 +128,7 @@ export default Vue.extend({
 			() => innerValue.value,
 			() => {
 				emit('input', innerValue.value);
+				emit('change', innerValue.value);
 			}
 		);
 
@@ -139,6 +156,12 @@ export default Vue.extend({
 			isBlured.value = true;
 		};
 
+		const reset = () => {
+			innerValue.value = '';
+			isTouched.value = true;
+			emit('input', innerValue.value);
+		};
+
 		return {
 			innerValue,
 			errorBucket,
@@ -147,9 +170,11 @@ export default Vue.extend({
 			hasError,
 			isTouched,
 			isBlured,
+			showErrorText,
 			validate,
 			onKeyUp,
 			onBlur,
+			reset,
 		};
 	},
 });

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

@@ -3,9 +3,11 @@ import TextFieldV2 from '../TextFieldV2';
 
 describe('TextFieldV2 component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(TextFieldV2);
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -17,4 +19,23 @@ describe('TextFieldV2 component', () => {
 			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();
+		});
+
+	});
 });

package/src/components/Typography/BodyText/BodyText.vue

@@ -20,7 +20,7 @@ export default Vue.extend({
 		/**
 		 * Type of the bodytext
 		 */
-		type: { type: Number as PropType<1 | 2>, default: 1 },
+		type: { type: [Number, String] as PropType<1 | 2>, default: 1 },
 		/**
 		 * Variation of the bodytext
 		 */

package/src/components/Typography/Caption/Caption.vue

@@ -3,7 +3,7 @@
 		:weight="weight"
 		:size="size"
 		:key="key"
-		:class="{ [`farm-caption--${variation}`]: true }"
+		:class="{ 'farm-caption': true, [`farm-caption--${variation}`]: true }"
 		v-bind="$attrs"
 	>
 		<slot></slot>

package/src/components/Typography/Heading/Heading.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
         /**
          * Type of the heading
          */
-		type: { type: Number as PropType<1 | 2 | 3 | 4 | 5 | 6>, default: 1 },
+		type: { type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6>, default: 1 },
 	},
 	setup(props) {
 		const { type } = toRefs(props);

package/src/components/Typography/Subtitle/Subtitle.stories.js

@@ -24,15 +24,15 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div>
-	<template v-for="type in types" :key="type">
+	<div v-for="type in types" :key="type">
 		<farm-subtitle
 			v-for="variation in variations"
-			:key="variation"
+			:key="'primary_' + variation + type"
 			:type="type"
 			:variation="variation">
 			Subtitle {{ type }} {{ variation }}
 		</farm-subtitle>
-	</template>
+	</div>
 	</div>`,
 });
 
@@ -47,7 +47,7 @@ export const CustomTag = () => ({
 		<farm-subtitle
 			v-for="t in tags"
 			:tag="t"
-			:key="t"
+			:key="'customtag_' + t"
 			:type="1"
 			variation="regular"
 			>

package/src/components/Typography/Subtitle/Subtitle.vue

@@ -21,7 +21,7 @@ export default Vue.extend({
 		/**
 		 * Type of the subtitle
 		 */
-		type: { type: Number as PropType<1 | 2>, default: 1 },
+		type: { type: [Number, String] as PropType<1 | 2>, default: 1 },
 		/**
 		 * Variation of the subtitle
 		 */

package/src/components/Typography/Typography.vue

@@ -48,7 +48,7 @@ export default Vue.extend({
 		 * Font-weight
 		 */
 		weight: {
-			type: Number as PropType<100 | 200 | 300 | 400 | 500 | 600 | 700>,
+			type: [Number, String] as PropType<100 | 200 | 300 | 400 | 500 | 600 | 700>,
 		},
 		/**
 		 * Color