@farm-investimentos/front-mfe-components 13.1.1 → 14.0.1

package/package.json

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

package/src/components/Select/Select.scss

@@ -1,4 +1,11 @@
 @import '../TextFieldV2/TextFieldV2.scss';
+@import '../../configurations/mixins';
+
+.farm-select {
+	&__hint-text {
+		@include hintText;
+	}
+}
 
 .farm-listitem--selected {
 	background-color: var(--farm-neutral-lighten);

package/src/components/Select/Select.stories.js

@@ -78,6 +78,40 @@ export const Readonly = () => ({
 	</div>`,
 });
 
+export const HintText = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" hint="Hint Text" :persistent-hint="false" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" hint="Hint Text" />
+		v-model: {{ v }}
+	</div>`,
+});
+
 export const Disabled = () => ({
 	data() {
 		return {

package/src/components/Select/Select.vue

@@ -49,9 +49,12 @@
 						v-bind="$attrs"
 						:id="$props.id"
 						v-model="selectedText"
+						ref="inputField"
 						@click="clickInput"
 						@keyup="onKeyUp"
 						@blur="onBlur"
+						@focusin="onFocus(true)"
+						@focusout="onFocus(false)"
 					/>
 					<farm-icon color="gray" :class="{ 'farm-icon--rotate': isVisible }">
 						menu-down
@@ -62,7 +65,15 @@
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
-		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+		<farm-caption
+			v-if="hint && !showErrorText"
+			class="farm-select__hint-text"
+			:class="{
+				'farm-select__hint-text--show': persistentHint || isFocus,
+			}"
+			color="gray"
+			variation="regular"
+		>
 			{{ hint }}
 		</farm-caption>
 	</div>
@@ -89,6 +100,13 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: true,
+		},
 		/**
 		 * Disabled the input
 		 */
@@ -201,12 +219,14 @@ export default Vue.extend({
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
+		const isFocus = ref(false);
 		const isBlured = ref(false);
 		const isVisible = ref(false);
 		const selectedText = ref('');
 		const multipleValues = ref(Array.isArray(props.value) ? [...props.value] : []);
 		const checked = ref('1');
 		const notChecked = ref(false);
+		const inputField = ref();
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
@@ -290,7 +310,12 @@ export default Vue.extend({
 			emit('blur', event);
 		};
 
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
 		const selectItem = item => {
+			inputField.value.focus();
 			if (multiple.value) {
 				const alreadyAdded = multipleValues.value.findIndex(
 					val => val === item[itemValue.value]
@@ -308,6 +333,7 @@ export default Vue.extend({
 
 			innerValue.value = item[itemValue.value];
 			isVisible.value = false;
+
 			setTimeout(() => {
 				emit('change', innerValue.value);
 			}, 100);
@@ -380,6 +406,7 @@ export default Vue.extend({
 			hasError,
 			isTouched,
 			isBlured,
+			isFocus,
 			isVisible,
 			customId,
 			showErrorText,
@@ -388,6 +415,7 @@ export default Vue.extend({
 			selectItem,
 			onKeyUp,
 			onBlur,
+			onFocus,
 			clickInput,
 			updateSelectedTextValue,
 			makePristine,
@@ -396,6 +424,7 @@ export default Vue.extend({
 			isChecked,
 			multipleValues,
 			addLabelToMultiple,
+			inputField,
 		};
 	},
 });

package/src/components/TextArea/TextArea.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/mixins';
+
 .farm-textarea {
 	min-height: 64px;
 
@@ -18,8 +20,7 @@
 		background-color: white;
 		width: 100%;
 
-
-		&>textarea {
+		& > textarea {
 			flex: 1;
 			outline: none;
 			color: var(--farm-text-primary);
@@ -39,6 +40,10 @@
 	.farm-caption {
 		line-height: 12px;
 	}
+
+	&__hint-text {
+		@include hintText;
+	}
 }
 
 .farm-textarea--touched.farm-textarea--validatable {
@@ -47,7 +52,7 @@
 			&--textarea {
 				border-color: var(--farm-error-base);
 
-				&>textarea {
+				& > textarea {
 					color: var(--farm-neutral-darken);
 				}
 			}
@@ -59,8 +64,8 @@
 	.farm-textarea--textarea {
 		border-color: var(--farm-primary-base);
 
-		&>textarea {
+		& > textarea {
 			color: var(--farm-neutral-darken);
 		}
 	}
-}
+}

package/src/components/TextArea/TextArea.stories.js

@@ -107,6 +107,17 @@ export const HintText = () => ({
 	</div>`,
 });
 
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textarea v-model="v" hint="Hint text" persistent-hint />
+	</div>`,
+});
+
 export const Reset = () => ({
 	data() {
 		return {
@@ -133,4 +144,4 @@ export const Reset = () => ({
 		<farm-btn @click="reset">reset</farm-btn>
 
 	</div>`,
-});
+});

package/src/components/TextArea/TextArea.vue

@@ -26,12 +26,22 @@
 				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"
+				@focusin="onFocus(true)"
+				@focusout="onFocus(false)"
 			/>
 		</div>
 		<farm-caption v-if="showErrorText" color="error" variation="regular">
 			{{ errorBucket[0] }}
 		</farm-caption>
-		<farm-caption v-if="hint && !showErrorText" color="gray" variation="regular">
+		<farm-caption
+			v-if="hint && !showErrorText"
+			class="farm-textarea__hint-text"
+			:class="{
+				'farm-textarea__hint-text--show': persistentHint || isFocus,
+			}"
+			color="gray"
+			variation="regular"
+		>
 			{{ hint }}
 		</farm-caption>
 	</div>
@@ -60,6 +70,13 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Disabled the input
 		 */
@@ -109,6 +126,7 @@ export default Vue.extend({
 		const { rules } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
+		const isFocus = ref(false);
 		const isBlured = ref(false);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
@@ -164,6 +182,10 @@ export default Vue.extend({
 			emit('blur', event);
 		};
 
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
 		const reset = () => {
 			innerValue.value = '';
 			isTouched.value = true;
@@ -184,10 +206,12 @@ export default Vue.extend({
 			customId,
 			isTouched,
 			isBlured,
+			isFocus,
 			showErrorText,
 			validate,
 			onKeyUp,
 			onBlur,
+			onFocus,
 			reset,
 			makePristine,
 		};

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/mixins';
+
 .farm-textfield {
 	height: 64px;
 
@@ -50,6 +52,10 @@
 	.farm-caption {
 		line-height: 12px;
 	}
+
+	&__hint-text {
+		@include hintText;
+	}
 }
 
 .farm-textfield--touched.farm-textfield--validatable {

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

@@ -133,6 +133,17 @@ export const HintText = () => ({
 	</div>`,
 });
 
+export const PersistentHintText = () => ({
+	data() {
+		return {
+			v: 'input text',
+		};
+	},
+	template: `<div style="width: 480px; display: flex;">
+		<farm-textfield-v2 v-model="v" hint="Hint text" persistent-hint />
+	</div>`,
+});
+
 export const UpdateValue = () => ({
 	data() {
 		return {

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -36,6 +36,8 @@
 				@click="$emit('click')"
 				@keyup="onKeyUp"
 				@blur="onBlur"
+				@focusin="onFocus(true)"
+				@focusout="onFocus(false)"
 			/>
 			<button
 				type="button"
@@ -50,6 +52,10 @@
 		</farm-caption>
 		<farm-caption
 			v-if="!hideDetails && hint && !showErrorText"
+			class="farm-textfield__hint-text"
+			:class="{
+				'farm-textfield__hint-text--show': persistentHint || isFocus,
+			}"
 			color="gray"
 			variation="regular"
 		>
@@ -92,6 +98,13 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		/**
+		 * Always show hint text
+		 */
+		persistentHint: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * Disabled the input
 		 */
@@ -160,6 +173,7 @@ export default Vue.extend({
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
 		const isBlured = ref(false);
+		const isFocus = ref(false);
 		const isUppercase = ref(props.uppercase);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
@@ -218,6 +232,10 @@ export default Vue.extend({
 			emit('blur', event);
 		};
 
+		const onFocus = (focus: boolean) => {
+			isFocus.value = focus;
+		};
+
 		const reset = () => {
 			innerValue.value = '';
 			isTouched.value = true;
@@ -239,10 +257,12 @@ export default Vue.extend({
 			isTouched,
 			isBlured,
 			isUppercase,
+			isFocus,
 			showErrorText,
 			validate,
 			onKeyUp,
 			onBlur,
+			onFocus,
 			reset,
 			makePristine,
 		};

package/src/components/Tooltip/Tooltip.stories.js

@@ -78,9 +78,9 @@ export const Visibility = () => ({
 			some <em>sample</em> text<br />
 			some <em>sample</em> text<br />
             <template v-slot:activator="{ on, attrs }">
-			<v-btn @click="show = !show">
+			<farm-btn @click="show = !show">
 				toggle me
-			</v-btn>
+			</farm-btn>
             </template>
         </farm-tooltip>
 	</div>`,

package/src/components/layout/Col/Col.scss

@@ -24,13 +24,19 @@
         flex: 0 0 (100/12 * $i)+#{"%"};
         max-width: (100/12 * $i)+#{"%"};
     }
-}
 
-@for $i from 1 through 12 {
     .farm-col--xs-#{$i * 1} {
         flex: 0 0 (100/12 * $i)+#{"%"};
         max-width: (100/12 * $i)+#{"%"};
     }
+
+    .farm-col--offset-#{$i * 1} {
+        margin-left: (100/12 * $i)+#{"%"};
+    }
+}
+
+.farm-col--offset-0 {
+    margin-left: 0%;
 }
 
 @include fromXs {
@@ -39,6 +45,14 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-sm-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+    }
+
+    .farm-col--offset-sm-0 {
+        margin-left: 0%;
     }
 }
 
@@ -48,7 +62,17 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-md-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+
+    }
+
+    .farm-col--offset-md-0 {
+        margin-left: 0%;
     }
+
 }
 
 @include fromMd {
@@ -57,6 +81,14 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-lg-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+    }
+
+    .farm-col--offset-lg-0 {
+        margin-left: 0%;
     }
 }
 
@@ -66,5 +98,13 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-xl-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+    }
+
+    .farm-col--offset-xl-0 {
+        margin-left: 0%;
     }
 }

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

@@ -121,29 +121,6 @@ export const TagP = () => ({
 	template: '<farm-col tag="p">col</farm-col>',
 });
 
-export const CompareToVCol = () => ({
-	data() {
-		return {
-			style,
-		};
-	},
-	template: `<div>
-
-		<h4>LG 3</h4>
-		<farm-col lg="3" :style="style">farm</farm-col>
-		<v-col lg="3" :style="style">v-col</v-col>
-
-		<h4>MD 3</h4>
-		<farm-col md="3" :style="style">farm</farm-col>
-		<v-col md="3" :style="style">v-col</v-col>
-
-
-		<h4>SM 3</h4>
-		<farm-col sm="3" :style="style">farm</farm-col>
-		<v-col sm="3" :style="style">v-col</v-col>
-		</div>`,
-});
-
 export const NoGutters = () => ({
 	data() {
 		return {
@@ -164,4 +141,34 @@ export const AlignSelf = () => ({
 		<farm-row style="height: 150px">
 			<farm-col :style="style" v-for="align in aligns" :key="align" :align-self="align">{{ align }}</farm-col>
 	</farm-row>`,
+});
+
+export const Offsets = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-box>
+		<farm-row>
+			<farm-col :style="style" md="1" offset-md="3">offset-md 3</farm-col>
+			<farm-col :style="style" md="1" offset-md="1">offset-md 1</farm-col>
+		</farm-row>
+		<br />
+		<farm-row>
+			<farm-col :style="style" md="1" offset-sm="1">offset-sm 1</farm-col>
+			<farm-col :style="style" md="1" offset-sm="4">offset-sm 4</farm-col>
+			<farm-col :style="style" md="1" offset-sm="2">offset-sm 2</farm-col>
+		</farm-row>
+		<br />
+		<farm-row>
+			<farm-col :style="style" md="1" offset-sm="1" offset-md="3">offset-sm 1 md 3</farm-col>
+		</farm-row>
+		<br />
+		<farm-row>
+			<farm-col :style="style" md="1" offset="1">offset 1</farm-col>
+			<farm-col :style="style" md="1" offset="1" offset-md="0">offset md 0</farm-col>
+		</farm-row>
+	</farm-box>`,
 });

package/src/components/layout/Col/Col.vue

@@ -11,6 +11,11 @@
 			[`farm-col--xs-${xs}`]: xs,
 			[`farm-col--cols-${cols}`]: cols,
 			'farm-col--no-gutters': noGutters,
+			[`farm-col--offset-${offset}`]: offset,
+			[`farm-col--offset-xl-${offsetXl}`]: offsetXl,
+			[`farm-col--offset-lg-${offsetLg}`]: offsetLg,
+			[`farm-col--offset-md-${offsetMd}`]: offsetMd,
+			[`farm-col--offset-sm-${offsetSm}`]: offsetSm,
 		}"
 	>
 		<slot></slot>
@@ -82,6 +87,51 @@ export default Vue.extend({
 			type: String as PropType<'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'>,
 			default: '',
 		},
+		/**
+		 * Sets the default offset for the column.
+		 */
+		offset: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on extra large and greater breakpoints.
+		 */
+		offsetXl: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on large and greater breakpoints.
+		 */
+		offsetLg: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on medium and greater breakpoints.
+		 */
+		offsetMd: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on small and greater breakpoints.
+		 */
+		offsetSm: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
 	},
 	inheritAttrs: true,
 });

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

@@ -21,4 +21,9 @@ export const Primary = () => ({
 	template: '<farm-container-footer>Footer content</farm-container-footer>',
 });
 
+export const noTop = () => ({
+	components: { 'farm-container-footer': ContainerFooter },
+	template: '<farm-container-footer noTop>Footer content</farm-container-footer>',
+});
+
 Primary.storyName = 'Basic';

package/src/components/layout/ContainerFooter/ContainerFooter.scss

@@ -1,9 +1,13 @@
 @import '../../../configurations/functions';
 
 .farm-container-footer {
-    width: 100%;
-    padding: gutter('lg');
-    padding-bottom: 0;
-    border-top: 1px solid var(--farm-stroke-base);
-    margin-top: gutter('lg');
-}
+	width: 100%;
+	padding: gutter('lg');
+	padding-bottom: 0;
+	border-top: 1px solid var(--farm-stroke-base);
+	margin-top: gutter('lg');
+
+	&.farm-container-footer--notop {
+		margin-top: gutter('none');
+	}
+}

package/src/components/layout/ContainerFooter/ContainerFooter.vue

@@ -1,5 +1,10 @@
 <template>
-	<footer class="farm-container-footer">
+	<footer
+		:class="{
+			'farm-container-footer': true,
+			'farm-container-footer--notop': noTop,
+		}"
+	>
 		<slot></slot>
 	</footer>
 </template>
@@ -8,6 +13,12 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'farm-container-footer',
+	props: {
+		noTop: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	inheritAttrs: true,
 });
 </script>