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

package/package.json

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

package/src/components/AlertBox/AlertBox.scss

@@ -0,0 +1,45 @@
+@import '../../configurations/theme-colors';
+
+.farm-alert-box {
+	background-color: themeColor('primary', 'lighten');
+	border-radius: 5px;
+	color: themeColor('primary', 'darken');
+	display: flex;
+	padding: 8px 16px;
+	position: relative;
+	min-height: 40px;
+
+	&__content {
+		flex: 1;
+
+		&--with-dismissable {
+			margin-right: 40px;
+		}
+	}
+
+	&__icon {
+		align-items: center;
+		display: flex;
+		margin-right: 16px;
+	}
+
+	&__close {
+		position: absolute;
+		right: 8px;
+		bottom: 50%;
+		transform: translateY(50%);
+	}
+
+	&--dense {
+		display: inline-flex;
+	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.3s;
+}
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}

package/src/components/AlertBox/AlertBox.stories.js

@@ -18,4 +18,33 @@ export default {
 
 export const Primary = () => ({
 	template: '<farm-alertbox>alert box</farm-alertbox>',
-});
+});
+
+export const withIcon = () => ({
+	template: '<farm-alertbox icon="book">alert box</farm-alertbox>',
+});
+
+export const withDismissable = () => ({
+	template: '<farm-alertbox dismissable>alert box</farm-alertbox>',
+});
+
+export const dense = () => ({
+	template: '<farm-alertbox dismissable dense>alert box</farm-alertbox>',
+});
+
+export const full = () => ({
+	template: '<farm-alertbox icon="book" dismissable>alert box</farm-alertbox>',
+});
+
+export const moreThanOneLine = () => ({
+	data() {
+		return {
+			text: `lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu lorem ipsu lorem ipsu
+		lorem ipsu lorem ipsu lorem ipsu`,
+		};
+	},
+	template: '<farm-alertbox icon="book" dismissable>{{text}}</farm-alertbox>',
+});

package/src/components/AlertBox/AlertBox.vue

@@ -1,19 +1,76 @@
 <template>
-	<div>
-		<!--
-			@slot Use this slot for the content
-		-->
-		<slot></slot>
-	</div>
+	<transition name="fade">
+		<div v-if="visible" :class="{ 'farm-alert-box': true, 'farm-alert-box--dense': dense }">
+			<farm-icon
+				v-if="icon"
+				class="farm-alert-box__icon"
+				color="primary"
+				variation="darken"
+				size="md"
+				>{{ icon }}</farm-icon
+			>
+			<div
+				:class="{
+					'farm-alert-box__content': true,
+					'farm-alert-box__content--with-dismissable': dismissable,
+				}"
+			>
+				<farm-bodytext
+					:type="1"
+					variation="regular"
+					color="primary"
+					color-variation="darken"
+				>
+					<slot></slot>
+				</farm-bodytext>
+			</div>
+			<farm-btn class="farm-alert-box__close" v-if="dismissable" icon size="md">
+				<farm-icon color="primary" variation="darken" size="md">close</farm-icon>
+			</farm-btn>
+		</div>
+	</transition>
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { ref } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-alertbox',
-	props: {},
-	setup() {},
+	props: {
+		/**
+		 * Left Icon?
+		 */
+		icon: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Close icon and option to close AlertBox?
+		 */
+		dismissable: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Dense?
+		 */
+		dense: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup() {
+		const visible = ref(true);
+
+		function close() {
+			visible.value = false;
+		}
+
+		return {
+			visible,
+			close,
+		};
+	},
 });
 </script>
 <style lang="scss" scoped>

package/src/components/DialogHeader/DialogHeader.scss

@@ -13,7 +13,7 @@
 
 header {
     font-size: 12px;
-    padding: 16px;
+    padding: 6px 16px;
     background-color: #fff;
     font-weight: 700;
     color: var(--farm-primary-base);
@@ -21,4 +21,10 @@ header {
     display: flex;
     justify-content: flex-start;
     align-items: center;
+
+    >.farm-typography.farm-caption {
+        align-items: center;
+        width: 100%;
+        margin-bottom: 0;
+    }
 }

package/src/components/Form/Form.stories.js

@@ -296,4 +296,38 @@ export const MigrateTextVieldV2 = () => ({
 			form: {{ form }}
         </farm-form>
     `,
-});
+});
+
+export const MigrateSelectV2 = () => ({
+	data() {
+		return {
+			form: {
+				document: '',
+			},
+			validForm: false,
+			rules: {
+				required: value => !!value || 'Campo obrigatório',
+			},
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: 'label 1' },
+				{ value: 2, text: 'label 2' },
+			],
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<div>
+				<farm-label :required="true">Documento</farm-label>
+				<farm-select v-model="form.document" :items="items" :rules="[rules.required]" />
+			</div>
+			
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn :disabled="!validForm">Salvar</farm-btn>
+            </div>
+			form: {{ form }}
+        </farm-form>
+    `,
+});

package/src/components/Form/Form.vue

@@ -7,6 +7,7 @@ import Vue, { onMounted, reactive, ref, getCurrentInstance } from 'vue';
 type ErrorsBag = Record<number, boolean>;
 
 export default Vue.extend({
+	name: 'farm-form',
 	props: {
 		value: { type: [Boolean] },
 	},
@@ -27,7 +28,6 @@ export default Vue.extend({
 			field.$watch(
 				'hasError',
 				() => {
-					console.log(field.valid);
 					errorsBag[field._uid] = field.valid;
 					dispatchError();
 				},

package/src/components/Icon/Icon.scss

@@ -2,25 +2,32 @@
 @import '../../configurations/theme-colors';
 
 .farm-icon {
-    align-items: center;
-    display: inline-flex;
-    font-size: 24px;
-    justify-content: center;
-    letter-spacing: normal;
-    line-height: 1;
-    position: relative;
-    text-indent: 0;
+	align-items: center;
+	display: inline-flex;
+	font-size: 24px;
+	justify-content: center;
+	letter-spacing: normal;
+	line-height: 1;
+	position: relative;
+	text-indent: 0;
 
-    @each $color in $theme-colors-list {
-        &#{'--' + $color} {
-            color: var(--farm-#{$color}-base);
-        }
-    }
+	@each $color in $theme-colors-list {
+		&#{'--' + $color} {
+			color: var(--farm-#{$color}-base);
 
-    @each $size,
-    $value in $sizes {
-        &#{'.farm-icon[size=' + $size +']'} {
-            font-size: $value;
-        }
-    }
-}
+			&.farm-icon--lighten {
+				color: var(--farm-#{$color}-lighten);
+			}
+
+			&.farm-icon--darken {
+				color: var(--farm-#{$color}-darken);
+			}
+		}
+	}
+
+	@each $size, $value in $sizes {
+		&#{'.farm-icon[size=' + $size + ']'} {
+			font-size: $value;
+		}
+	}
+}

package/src/components/Icon/Icon.stories.js

@@ -44,6 +44,32 @@ export const Colors = () => ({
 	</div>`,
 });
 
+export const ColorsLighten = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors":key="color" :color="color" variation="lighten">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors":key="color" :color="color" variation="darken">
+            book
+        </farm-icon>
+	</div>`,
+});
+
 export const Sizes = () => ({
 	data() {
 		return {

package/src/components/Icon/Icon.vue

@@ -36,6 +36,10 @@ export default Vue.extend({
 			>,
 			default: 'default',
 		},
+		variation: {
+			type: String as PropType<'lighten' | 'base' | 'darken'>,
+			default: 'base',
+		},
 	},
 
 	data() {
@@ -52,6 +56,8 @@ export default Vue.extend({
 				['farm-icon--' + this.color]: true,
 				mdi: true,
 				['mdi-' + this.icon]: true,
+				'farm-icon--lighten': this.variation === 'lighten',
+				'farm-icon--darken': this.variation === 'darken',
 				...obj,
 			};
 		},

package/src/components/Modal/Modal.scss

@@ -34,20 +34,14 @@
 
     &--content {
         max-height: calc(100vh - 48px);
-        //overflow-y: auto;
         width: 100%;
         padding: 0;
-
         >div {
-            //max-height: calc(100vh - 176px);
-            //max-height: calc(100vh - 64px);
             overflow-y: auto;
             padding: 0 16px;
         }
     }
 
-
-
     &--header {
         position: absolute;
         top: 0;

package/src/components/Select/Select.scss

@@ -0,0 +1,13 @@
+@import '../TextFieldV2/TextFieldV2.scss';
+
+.farm-listitem--selected {
+	background-color: var(--farm-neutral-lighten);
+}
+
+.farm-icon {
+	transition: all ease 0.3s;
+	cursor: pointer;
+	&--rotate {
+		transform: rotate(180deg);
+	}
+}

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

@@ -0,0 +1,142 @@
+import { withDesign } from 'storybook-addon-designs';
+import Select from './Select.vue';
+
+export default {
+	title: 'Form/SelectV2',
+	component: Select,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Select<br />
+				selector: <em>farm-select</em><br />
+				<span style="color: var(--farm-extra-1-base);">development</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/jnZXo2e0nRJ3fVXl4Et8t4/%E2%9C%8D-Design-System-%7C-BACKUP-(10%2F10%2F2022)?node-id=2491%3A4487',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: null,
+			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" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const InitialValue = () => ({
+	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" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Readonly = () => ({
+	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" readonly />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Disabled = () => ({
+	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" disabled />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Validate = () => ({
+	data() {
+		return {
+			v: null,
+			items: [
+				{ value: null, text: '' },
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-label required>Required</farm-label>
+		<farm-select v-model="v" :items="items" :rules="[rules.required]" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: 1,
+			items: [
+				{ value: 1, text: ' value 1' },
+				{ value: 2, text: ' value 2' },
+				{ value: 3, text: ' value 3' },
+			],
+			rules: {
+				required: value => !!value || 'Required field',
+			},
+		};
+	},
+	methods: {
+		click() {
+			this.$refs.select.reset();
+		}
+	},
+	template: `<div style="width: 480px">
+		<farm-select v-model="v" :items="items" ref="select" :rules="[rules.required]" />
+		v-model: {{ v }}
+		<farm-btn @click="click">
+			reset
+		</farm-btn>
+	</div>`,
+});