@farm-investimentos/front-mfe-components 7.0.2 → 7.3.0

package/package.json

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

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -22,6 +22,13 @@
     min-width: 64px;
     padding: 0 16px;
 
+    @each $size,
+    $value in $sizes {
+        &#{'.farm-btn[size=' + $size +']'} {
+            font-size: $value;
+        }
+    }
+
 
     &.farm-btn--disabled {
         background-color: #DADADA;
@@ -97,6 +104,21 @@
     .farm-btn__content i.mdi {
         color: gray;
     }
+    @each $size,
+    $value in $sizes {
+        &#{'.farm-btn[size=' + $size +']'} {
+            font-size: $value;
+        }
+    }
+
+    &[size='lg'] {
+        width: 48px;
+        height: 48px;
+    }
+    &[size='xl'] {
+        width: 64px;
+        height: 64px;
+    }
 
     @each $color in $colors {
         &#{'.farm-btn--' + $color} {
@@ -133,12 +155,12 @@
         }
     }
 
-    :not(.farm-btn--disabled){
+    :not(.farm-btn--disabled) {
         &.farm-btn--outlined#{'.farm-btn--' + $color} {
             border: 1px solid var(--v-#{$color}-base);
             background: white;
             color: var(--v-#{$color}-base);
-    
+
             .farm-btn__content i.mdi {
                 color: var(--v-#{$color}-base);
             }
@@ -148,14 +170,14 @@
             border: none;
             background: white;
             color: var(--v-#{$color}-base);
-    
+
             .farm-btn__content i.mdi {
                 color: var(--v-#{$color}-base);
             }
         }
     }
 
-    
+
 }
 
 .farm-btn--elevated {

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -6,6 +6,7 @@
 		:disabled="disabled"
 		:type="type"
 		:class="classes"
+		:size="$props.size"
 	>
 		<span class="farm-btn__content">
 			<slot></slot>
@@ -18,19 +19,39 @@
 	</router-link>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-btn',
 	inheritAttrs: true,
 
 	props: {
-		color: { type: String, default: 'primary' },
-		outlined: Boolean,
-		plain: Boolean,
-		disabled: Boolean,
-		rounded: Boolean,
-		icon: Boolean,
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'error'
+				| 'extra'
+				| 'accent'
+				| 'info'
+				| 'success'
+				| 'gray'
+				| 'yellow'
+				| 'white'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Outlined
+		 */
+		outlined: { type: Boolean, default: false },
+		plain: { type: Boolean, default: false },
+		disabled: { type: Boolean, default: false },
+		rounded: { type: Boolean, default: false },
+		icon: { type: Boolean, default: false },
 		type: {
 			type: String,
 			default: 'button',
@@ -39,6 +60,12 @@ export default Vue.extend({
 			type: String,
 			default: null,
 		},
+		size: {
+			type: String as PropType<
+				'xs' | 'sm' | 'md' | 'lg' | 'xl'
+			>,
+			default: 'default',
+		},
 	},
 
 	computed: {

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -23,6 +23,7 @@ const StatusLabel = {
 	15: 'EM ANÁLISE',
 	16: 'EM ANDAMENTO',
 	17: 'EM ESPERA',
+	18: 'DECLINADO'
 };
 
 const StatusColor = {
@@ -34,6 +35,7 @@ const StatusColor = {
 	15: 'accent',
 	16: 'primary',
 	17: 'on-wait',
+	18: 'error',
 };
 
 import VChip from 'vuetify/lib/components/VChip/';

package/src/components/DefaultTextField/DefaultTextField.stories.js

@@ -33,10 +33,13 @@ export const Secondary = () => ({
 		return {
 			model: 'secondary',
 			item: { label: 'Nome do campo', key: 'key', md: 4 },
+			rules: {
+				required: val => !!val,
+			},
 		};
 	},
 	template: `<v-form>
-		<DefaultTextField :item="item" v-model="model" :required="true" />
+		<DefaultTextField :item="item" v-model="model" :required="true" :rules='[rules.required]' />
 	</v-form>`,
 });
 

package/src/components/DefaultTextField/DefaultTextField.vue

@@ -1,30 +1,32 @@
 <template>
 	<v-col cols="12" sm="12" :md="item.md ? item.md : 2" class="v-col-fieldset-default pl-0">
-		<label :for="inputId">
+		<farm-label :for="inputId" :required="required && !disabled">
 			{{ item.label }}
-			<span class="required" v-if="required && !disabled">*</span>
-		</label>
-		<v-text-field
-			color="secondary"
+		</farm-label>
+		<farm-textfield
 			v-model="inputVal"
-			outlined
-			dense
 			v-mask="`${mask ? mask : ''}`"
 			:placeholder="placeholder"
 			:id="inputId"
 			:rules="inputRules"
 			:disabled="disabled"
 			:readonly="readonly"
-		></v-text-field>
+		/>
 	</v-col>
 </template>
 <script>
 import Vue from 'vue';
-import { VTextField } from 'vuetify/lib/components/VTextField';
+import Label from '../Label';
+import TextField from '../TextField';
 import { VCol } from 'vuetify/lib/components/VGrid';
 
 export default Vue.extend({
 	name: 'farm-textfield-labelled',
+	components: {
+		'farm-label': Label,
+		'farm-textfield': TextField,
+		VCol,
+	},
 	props: {
 		item: {
 			type: Object,
@@ -83,10 +85,6 @@ export default Vue.extend({
 			default: null,
 		},
 	},
-	components: {
-		VCol,
-		VTextField,
-	},
 	computed: {
 		inputVal: {
 			get() {

package/src/components/Icon/Icon.scss

@@ -9,16 +9,17 @@
     line-height: 1;
     position: relative;
     text-indent: 0;
+
     @each $color in $colors {
         &#{'.farm-icon--' + $color} {
             color: var(--v-#{$color}-base);
         }
     }
 
-    @each $size, $value in $sizes {
+    @each $size,
+    $value in $sizes {
         &#{'.farm-icon[size=' + $size +']'} {
-            font-size: $value; 
+            font-size: $value;
         }
-        
     }
 }

package/src/components/Label/Label.scss

@@ -0,0 +1,13 @@
+.farm-label {
+    font-weight: bold;
+    display: block;
+    font-size: 12px;
+    margin-bottom: 8px;
+    line-height: 24px;
+
+    &.farm-label--required::after {
+        content: '*';
+        margin-left: 2px;
+        color: var(--v-error-base);
+    }
+}

package/src/components/Label/Label.stories.js

@@ -0,0 +1,38 @@
+import { withDesign } from 'storybook-addon-designs';
+import Label from './Label.vue';
+
+export default {
+	title: 'API/Form/Label',
+	component: Label,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+		},
+		docs: {
+			description: {
+				component: `Label<br />
+				selector: <em>farm-label</em>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-label': Label },
+	template: '<farm-label>Label</farm-label>',
+});
+
+const parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+	},
+};
+
+Primary.story = {
+	name: 'Basic',
+	parameters,
+};

package/src/components/Label/Label.vue

@@ -0,0 +1,24 @@
+<template>
+	<label :class="{ 'farm-label': true, 'farm-label--required': required }" v-bind="$attrs">
+		<slot></slot>
+	</label>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-label',
+	props: {
+		/**
+		 * Show required indicator
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'Label.scss';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import Label from '../Label';
+
+describe('Label component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Label);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/Label/index.ts

@@ -0,0 +1,4 @@
+import Label from './Label.vue';
+
+export { Label };
+export default Label;

package/src/components/Loader/Loader.vue

@@ -1,46 +1,46 @@
 <template>
-    <div>
-        <v-overlay opacity="0.3" v-if="mode === 'overlay'">
-            <v-progress-circular indeterminate :size="100" color="secondary"></v-progress-circular>
-        </v-overlay>
-        <v-progress-circular
-            v-else
-            :size="calculateSize"
-            :width="6"
-            color="secondary"
-            indeterminate
-        ></v-progress-circular>
-    </div>
+	<div>
+		<v-overlay opacity="0.3" v-if="mode === 'overlay'">
+			<v-progress-circular indeterminate :size="100" color="secondary"></v-progress-circular>
+		</v-overlay>
+		<v-progress-circular
+			v-else
+			:size="calculateSize"
+			:width="6"
+			color="secondary"
+			indeterminate
+		></v-progress-circular>
+	</div>
 </template>
-<script>
+<script lang="ts">
 import { VOverlay } from 'vuetify/lib/components/VOverlay';
 import { VProgressCircular } from 'vuetify/lib/components/VProgressCircular';
 export default {
-    name: 'farm-loader',
-    components: {
-        VOverlay,
-        VProgressCircular,
-    },
-    props: {
-        status: {
-            default: 'IDLE',
-        },
-        mode: {
-            type: String,
-            default: 'inline',
-        },
-        size: {
-            type: String,
-            default: 'normal',
-        },
-    },
-    computed: {
-        calculateSize() {
-            if (this.size === 'small') {
-                return 35;
-            }
-            return 70;
-        },
-    },
+	name: 'farm-loader',
+	components: {
+		VOverlay,
+		VProgressCircular,
+	},
+	props: {
+		status: {
+			default: 'IDLE',
+		},
+		mode: {
+			type: String,
+			default: 'inline',
+		},
+		size: {
+			type: String,
+			default: 'normal',
+		},
+	},
+	computed: {
+		calculateSize() {
+			if (this.size === 'small') {
+				return 35;
+			}
+			return 70;
+		},
+	},
 };
-</script>
+</script>

package/src/components/ProgressBar/ProgressBar.scss

@@ -0,0 +1,25 @@
+@import '../../configurations/variables';
+
+$radius: 5px;
+
+.farm-progressbar {
+    width: 100%;
+    height: 5px;
+    border-radius: $radius;
+
+    > div {
+        border-radius: $radius;
+        height: 100%;
+    }
+
+    @each $color in $colors {
+        &#{'.farm-progressbar--' + $color} {
+            background-color: var(--v-#{$color}-base);
+        }
+
+        &#{'.farm-progressbar--value-' + $color}>div {
+            background-color: var(--v-#{$color}-base);
+        }
+    }
+
+}

package/src/components/ProgressBar/ProgressBar.stories.js

@@ -0,0 +1,43 @@
+import { withDesign } from 'storybook-addon-designs';
+import ProgressBar from './ProgressBar.vue';
+
+export default {
+	title: 'API/ProgressBar',
+	component: ProgressBar,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+		},
+		docs: {
+			description: {
+				component: `ProgressBar<br />
+				selector: <em>farm-progressbar</em>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-progressbar': ProgressBar },
+	data() {
+		return {
+			val: 35,
+		};
+	},
+	template: '<farm-progressbar :value="val" />',
+});
+
+const parameters = {
+	design: {
+		type: 'figma',
+		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+	},
+};
+
+Primary.story = {
+	name: 'Basic',
+	parameters,
+};

package/src/components/ProgressBar/ProgressBar.vue

@@ -0,0 +1,67 @@
+<template>
+	<div :class="classes" :style="containerStyle">
+		<div :style="valueStyle"></div>
+	</div>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-progressbar',
+	props: {
+		/**
+		 * backgroundColor
+		 */
+		backgroundColor: { type: String, default: 'secondary' },
+		/**
+		 * color
+		 */
+		valueColor: { type: String, default: 'error' },
+		/**
+		 * Value (form 0 to 100)
+		 */
+		value: {
+			type: Number,
+			required: true,
+		},
+	},
+	computed: {
+		classes() {
+			const obj = {};
+
+			if (!this.backgroundColor.startsWith('#')) {
+				obj['farm-progressbar--' + this.backgroundColor] = true;
+			}
+			if (!this.valueColor.startsWith('#')) {
+				obj['farm-progressbar--value-' + this.valueColor] = true;
+			}
+
+			return {
+				'farm-progressbar': true,
+				...obj,
+			};
+		},
+		valueStyle() {
+			const obj = {
+				width: `${this.value}%`,
+			};
+			if (this.valueColor.startsWith('#')) {
+				obj['background-color'] = this.valueColor;
+			}
+			return obj;
+		},
+		containerStyle() {
+			const obj = {};
+
+			if (this.backgroundColor.startsWith('#')) {
+				obj['background-color'] = this.backgroundColor;
+			}
+
+			return obj;
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'ProgressBar.scss';
+</style>

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

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils';
+import ProgressBar from '../ProgressBar';
+
+describe('ProgressBar component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ProgressBar, {
+			propsData: { value: 40 },
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/ProgressBar/index.ts

@@ -0,0 +1,4 @@
+import ProgressBar from './ProgressBar.vue';
+
+export { ProgressBar };
+export default ProgressBar;

package/src/components/TextField/TextField.scss

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