@farm-investimentos/front-mfe-components 11.7.0 → 11.7.2

package/src/components/TextField/TextField.scss

@@ -1,4 +1,5 @@
 .farm-textfield {
+    padding-bottom: 4px;
 
     &.v-input {
 
@@ -8,20 +9,20 @@
                 min-height: 36px !important;
                 height: 36px;
                 background: white;
+                padding: 0 8px;
 
                 fieldset {
-                    border-color: var(--v-gray-lighten2);
+                    border-color: var(--farm-gray-lighten);
                 }
 
                 input,
                 .v-select__selection {
-                    font-size: 0.75rem;
+                    font-size: 12px;
                 }
             }
 
-            &.v-input--is-label-active.v-input--is-focused {
+            &.v-input--is-label-active.v-input--is-focused:not(.error--text) {
                 :deep(.v-input__slot fieldset) {
-
                     border-color: var(--v-secondary-base);
                 }
 
@@ -32,20 +33,11 @@
 
             &.error--text {
                 :deep(.v-input__slot) fieldset {
-                    border-color: var(--v-error-base);
+                    border-color: var(--farm-error-primary);
                     border-width: 1px;
                 }
 
-                &:after {
-                    content: '\F0028';
-                    position: absolute;
-                    font: normal normal normal 24px/1 'Material Design Icons';
-                    right: 6px;
-                    top: 6px;
-                }
             }
         }
     }
-}
-
-
+}

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

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `Text field<br />
-				selector: <em>farm-texfield</em>
+				selector: <em>farm-texfield</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -24,7 +25,7 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			v: '',
+			v: 'input text',
 		};
 	},
 	template: `<div style="width: 480px">
@@ -33,6 +34,28 @@ export const Primary = () => ({
 	</div>`,
 });
 
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 'disabled field',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield v-model="v" disabled />
+	</div>`,
+});
+
+export const Readonly = () => ({
+	data() {
+		return {
+			v: 'readonly field',
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-textfield v-model="v" readonly />
+	</div>`,
+});
+
 export const BindVar = () => ({
 	data() {
 		return {
@@ -45,18 +68,37 @@ export const BindVar = () => ({
 	</div>`,
 });
 
-export const Rules = () => ({
+export const Validate = () => ({
 	data() {
 		return {
-			v: '',
+			v1: 'input 1',
+			v2: '',
+			v3: '',
+			v4: '',
 			rules: {
-				required: val => !!val,
+				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">
-		<h4>Custom rule (required field)</h4>
-		<farm-textfield v-model="v" :rules="[rules.required]" />
-		value: {{ v }}
+		<farm-label required>Required field</farm-label>
+		<farm-textfield v-model="v1" :rules="[rules.required]" />
+
+		<farm-label>E-mail</farm-label>
+		<farm-textfield v-model="v2" :rules="[rules.email]" />
+
+		<farm-label required>Required and e-mail</farm-label>
+		<farm-textfield v-model="v3" :rules="[rules.required, rules.email]" />
+
+		<farm-label required>Required field with hint</farm-label>
+		<farm-textfield v-model="v4" :rules="[rules.required]" hint="hint text" />
+
+		<farm-label required>Required field with icon</farm-label>
+		<farm-textfield v-model="v1" :rules="[rules.required]" append-icon="mdi-eye" />
+
 	</div>`,
-});
+});

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,5 +1,6 @@
 .farm-textfield {
 	height: 64px;
+
 	&--input {
 		display: flex;
 		align-items: center;
@@ -11,19 +12,30 @@
 		padding: 8px;
 		margin-bottom: 4px;
 
-		> button {
+		>button {
 			display: flex;
 		}
 
 		&>input {
 			flex: 1;
 			outline: none;
-			color: var(--farm-neutral-darken);
+			color: var(--farm-text-primary);
 			font-size: 12px;
 			font-weight: 400;
 		}
 
 		width: 100%;
+
+	}
+
+	&--disabled {
+		input {
+			color: var(--farm-gray-base);
+		}
+		.farm-icon {
+			color: var(--farm-gray-lighten);
+			cursor: default;
+		}
 	}
 
 	.farm-caption {

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

@@ -52,6 +52,7 @@ export const Disabled = () => ({
 	},
 	template: `<div style="width: 480px">
 		<farm-textfield-v2 v-model="v" disabled />
+		<farm-textfield-v2 v-model="v" disabled icon="book" />
 	</div>`,
 });
 

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -7,6 +7,7 @@
 			'farm-textfield--touched': isTouched,
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
+			'farm-textfield--disabled': disabled,
 		}"
 	>
 		<div class="farm-textfield--input">
@@ -20,9 +21,10 @@
 			<input
 				v-bind="$attrs"
 				v-model="innerValue"
-				v-mask="mask"
+				v-mask="mask"		
 				:disabled="disabled"
 				:readonly="readonly"
+				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"
 			/>
@@ -34,7 +36,6 @@
 				<farm-icon color="gray" size="20px">{{ icon }}</farm-icon>
 			</button>
 		</div>
-
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>

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

@@ -73,3 +73,19 @@ export const Tertiary = () => ({
 	</farm-container>
 `,
 });
+
+export const WithTabs = () => ({
+	data() {
+		return {
+			steps: [{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }],
+			currentStep: 1,
+		};
+	},
+	template: `
+	<farm-container>
+		<farm-row extra-decrease>
+			<farm-tabs :tabs="steps" :showCounter="false" class="mt-n6" />
+		</farm-row>
+	</farm-container>
+`,
+});

package/src/components/layout/Container/Container.scss

@@ -13,9 +13,10 @@
         background-color: white;
         border-radius: 8px;
         max-width: 100%;
-        margin: gutter('lg');
+        margin: 40px;
         padding: gutter('lg');
         box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
+        overflow: hidden;
 
         // deprecated
         .container-main__footer-buttons-right {