@farm-investimentos/front-mfe-components 13.0.2 → 13.0.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "13.0.2",
+	"version": "13.0.4",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -14,7 +14,8 @@
 		"storybook": "start-storybook -p 6006",
 		"build-storybook": "build-storybook",
 		"test:unit": "jest --updateSnapshot",
-		"test:coverage": "jest --updateSnapshot --coverage"
+		"test:coverage": "jest --updateSnapshot --coverage",
+		"prepare": "husky install"
 	},
 	"files": [
 		"dist/*",
@@ -52,7 +53,8 @@
 		"text-mask-addons": "^3.8.0",
 		"typescript": "~4.1.5",
 		"v-mask": "2.3.0",
-		"vue-template-compiler": "2.7.10"
+		"vue-template-compiler": "2.7.10",
+		"husky": "^8.0.0"
 	},
 	"browserslist": [
 		"> 1%",

package/src/components/AlertBox/AlertBox.vue

@@ -11,8 +11,9 @@
 				variation="darken"
 				size="md"
 				:color="color"
-				>{{ icon }}</farm-icon
 			>
+				{{ icon }}
+			</farm-icon>
 			<div
 				:class="{
 					'farm-alert-box__content': true,
@@ -22,9 +23,11 @@
 				<farm-bodytext
 					variation="regular"
 					color-variation="darken"
+					:tag="tag"
 					:type="1"
 					:color="color"
 				>
+					<!-- @slot default -->
 					<slot></slot>
 				</farm-bodytext>
 			</div>
@@ -92,6 +95,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * Html tag (will be forwarded to farm-typography)
+		 */
+		tag: {
+			type: String,
+			default: 'p',
+		},
 	},
 	setup(props, { emit }) {
 		const visible = ref(true);
@@ -109,8 +119,6 @@ export default Vue.extend({
 		};
 	},
 });
-
-
 </script>
 <style lang="scss" scoped>
 @import './AlertBox';

package/src/components/Logger/Logger.scss

@@ -17,7 +17,7 @@
 	}
 
 	&.logger__divider--info-to-info {
-		background: var(--farm-error-base);
+		background: var(--farm-info-base);
 	}
 
 	&.logger__divider--success-to-error {

package/src/components/Logger/Logger.stories.js

@@ -54,7 +54,7 @@ export const Primary = () => ({
 					message: 'Recusado entre as pré elegíveis',
 					userName: 'Cleyton Rasta',
 					formattedDate: '13/06/2022  20:40',
-					status: 'success',
+					status: 'info',
 				},
 				{
 					message: 'Info',

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

@@ -2,7 +2,7 @@ import { withDesign } from 'storybook-addon-designs';
 import Select from './Select.vue';
 
 export default {
-	title: 'Form/SelectV2',
+	title: 'Form/Select',
 	component: Select,
 	decorators: [withDesign],
 	parameters: {
@@ -10,7 +10,7 @@ export default {
 			description: {
 				component: `Select<br />
 				selector: <em>farm-select</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -250,3 +250,29 @@ export const MultipleInitValue = () => ({
 		</farm-btn>
 	</div>`,
 });
+
+export const ChangeEvennt = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: 0, text: 'value 0' },
+				{ value: 1, text: 'value 1' },
+				{ value: 2, text: 'value 2' },
+				{ value: 3, text: 'value 3' },
+			],
+		};
+	},
+	methods: {
+		onChange(value) {
+			alert('Selected value: ' + value);
+		},
+	},
+	template: `<div style="width: 120px;">
+		<farm-label for="select_id">
+			label
+		</farm-label>
+		<farm-select id="select_id" v-model="v" :items="items" @change="onChange" />
+
+	</div>`,
+});

package/src/components/Select/Select.vue

@@ -160,6 +160,42 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		/**
+		 * The updated bound model<br />
+		 * _event_
+		 */
+		input: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number, Array<any>]) => {},
+		},
+		/**
+		 * Emitted when the select is changed by user interaction<br />
+		 * _event_
+		 */
+		change: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number, Array<any>]) => {}, 
+		},
+		/**
+		 * Emitted when any key is pressed<br />
+		 * _event_
+		 */
+		keyup: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => {},
+		},
+		/**
+		 * Emitted when the select is blurred<br />
+		 * _event_
+		 */
+		blur: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (event: Event) => {},
+		},
 	},
 	setup(props, { emit }) {
 		const { rules, items, itemText, itemValue, disabled, multiple } = toRefs(props);
@@ -193,7 +229,6 @@ export default Vue.extend({
 				validate(newValue);
 				updateSelectedTextValue();
 				emit('input', newValue);
-				emit('change', newValue);
 			}
 		);
 

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -17,11 +17,11 @@
 		margin-bottom: 4px;
 		background-color: white;
 
-		>button {
+		> button {
 			display: flex;
 		}
 
-		&>input {
+		& > input {
 			flex: 1;
 			outline: none;
 			color: var(--farm-text-primary);
@@ -30,12 +30,11 @@
 			max-width: 100%;
 		}
 
-		&--iconed>input {
+		&--iconed > input {
 			max-width: calc(100% - 32px);
 		}
 
 		width: 100%;
-
 	}
 
 	&--disabled {
@@ -59,7 +58,7 @@
 			&--input {
 				border-color: var(--farm-error-base);
 
-				&>input {
+				& > input {
 					color: var(--farm-neutral-darken);
 				}
 
@@ -75,7 +74,7 @@
 	.farm-textfield--input {
 		border-color: var(--farm-primary-base);
 
-		&>input {
+		& > input {
 			color: var(--farm-neutral-darken);
 		}
 
@@ -83,4 +82,8 @@
 			color: var(--farm-primary-base);
 		}
 	}
-}
+}
+
+.farm-textfield--uppercase input {
+	text-transform: uppercase;
+}

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

@@ -233,3 +233,17 @@ export const ToggleVisibility = () => ({
 		<farm-textfield-v2 v-model="v" :type="visible ? 'text' : 'password'"  :icon="visible ? 'eye-off' : 'eye'" @onClickIcon="toggle" />
 	</div>`,
 });
+
+export const Uppercase = () => ({
+	data() {
+		return {
+			v: 'value',
+		};
+	},
+	template: `<div style="width: 480px;">
+		<farm-label for="select_label">
+			label
+		</farm-label>
+		<farm-textfield-v2 id="select_label" v-model="v" uppercase/>
+	</div>`,
+});

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -9,6 +9,7 @@
 			'farm-textfield--error': hasError,
 			'farm-textfield--disabled': disabled,
 			'farm-textfield--hiddendetails': hideDetails,
+			'farm-textfield--uppercase': isUppercase,
 		}"
 		:id="customId"
 	>
@@ -135,12 +136,22 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+
+		/**
+		 * uppercase
+		 * leaves only the text in the input in uppercase does not affect the value of the v-model
+		 */
+		uppercase: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props, { emit }) {
 		const { rules } = toRefs(props);
 		const innerValue = ref(props.value);
 		const isTouched = ref(false);
 		const isBlured = ref(false);
+		const isUppercase = ref(props.uppercase);
 
 		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
@@ -215,6 +226,7 @@ export default Vue.extend({
 			customId,
 			isTouched,
 			isBlured,
+			isUppercase,
 			showErrorText,
 			validate,
 			onKeyUp,

package/src/components/Typography/Typography.vue

@@ -29,7 +29,18 @@ export default Vue.extend({
 		 */
 		tag: {
 			type: String as PropType<
-				'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'legend' | 'label' | 'li'
+				| 'p'
+				| 'span'
+				| 'h1'
+				| 'h2'
+				| 'h3'
+				| 'h4'
+				| 'h5'
+				| 'h6'
+				| 'legend'
+				| 'label'
+				| 'li'
+				| 'div'
 			>,
 			default: 'p',
 		},

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

@@ -51,7 +51,7 @@ describe('Typography component', () => {
 		it('Should not allow invalid html tag', async () => {
 			const wrapperTest = shallowMount(Typography, {
 				propsData: {
-					tag: 'div',
+					tag: 'section',
 				},
 			});
 			expect(wrapperTest.vm.tag).toEqual('p');

package/src/configurations/typographyHtmlTags.ts

@@ -1 +1 @@
-export default ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'];
+export default ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li', 'div'];