@farm-investimentos/front-mfe-components 11.12.1 → 12.0.1

package/package.json

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

package/src/components/AlertBox/AlertBox.scss

@@ -1,14 +1,19 @@
 @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;
 
+	@each $color in $theme-colors-list {
+		&#{'[color=' + $color + ']'} {
+			background-color: themeColor($color, 'lighten');
+			color: themeColor($color, 'darken');
+		}
+	}
+
 	&__content {
 		flex: 1;
 

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

@@ -1,4 +1,6 @@
 import AlertBox from './AlertBox.vue';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Feedback/AlertBox',
@@ -48,3 +50,15 @@ export const moreThanOneLine = () => ({
 	},
 	template: '<farm-alertbox icon="book" dismissable>{{text}}</farm-alertbox>',
 });
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `
+		<div>
+		<farm-alertbox class="mt-3" v-for="color of colors" :key="'random_10_' + color" :color="color" icon="book" dismissable>alert box</farm-alertbox>
+		</div> `,
+});

package/src/components/AlertBox/AlertBox.vue

@@ -1,12 +1,16 @@
 <template>
 	<transition name="fade">
-		<div v-if="visible" :class="{ 'farm-alert-box': true, 'farm-alert-box--dense': dense }">
+		<div
+			v-if="visible"
+			:color="color"
+			: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"
+				:color="color"
 				>{{ icon }}</farm-icon
 			>
 			<div
@@ -16,23 +20,30 @@
 				}"
 			>
 				<farm-bodytext
-					:type="1"
 					variation="regular"
-					color="primary"
 					color-variation="darken"
+					:type="1"
+					:color="color"
 				>
 					<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
+				class="farm-alert-box__close"
+				v-if="dismissable"
+				icon
+				size="md"
+				:color="color"
+				@click="close"
+			>
+				<farm-icon variation="darken" size="md" :color="color">close</farm-icon>
 			</farm-btn>
 		</div>
 	</transition>
 </template>
 
 <script lang="ts">
-import Vue, { ref } from 'vue';
+import Vue, { ref, PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-alertbox',
@@ -58,6 +69,24 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
 	},
 	setup() {
 		const visible = ref(true);

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

@@ -3,9 +3,11 @@ import AlertBox from '../AlertBox';
 
 describe('AlertBox component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(AlertBox, {});
+		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {
@@ -17,4 +19,14 @@ describe('AlertBox component', () => {
 			expect(wrapper.element).toMatchSnapshot();
 		});
 	});
+
+	describe('Methods', () => {
+		describe('close', () => {
+			it('should close the AlertBox', () => {
+				expect(component.visible).toBeTruthy();
+				component.close();
+				expect(component.visible).toBeFalsy();
+			});
+		});
+	});
 });

package/src/components/Card/Card.stories.js

@@ -24,4 +24,17 @@ export const Primary = () => ({
 	`,
 });
 
-
+export const Events = () => ({
+	methods: {
+		handleEvent(type) {
+			alert(type);
+		},
+	},
+	template: `
+		<farm-card
+			@click.stop="handleEvent('click')"
+		>
+		Card content
+		</farm-card>
+	`,
+});

package/src/components/Card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-	<component class="farm-card" :is="tag">
+	<component class="farm-card" :is="tag" v-on="$listeners">
 		<slot></slot>
 	</component>
 </template>

package/src/components/Checkbox/Checkbox.stories.js

@@ -42,15 +42,15 @@ export const Value = () => ({
 	},
 	template: `<div>
 	<div class="d-flex">
-	<farm-checkbox v-model="option1" value="1" class="mr-2" /> 
+	<farm-checkbox v-model="option1" value="option1" class="mr-2" /> 
 		option1 : {{option1}}
 	</div>
 	<div class="d-flex align-center">
-	<farm-checkbox v-model="option2" value="2" class="mr-2 my-2" /> 
+	<farm-checkbox v-model="option2" value="option2" class="mr-2 my-2" /> 
 		option2 : {{option2}}
 	</div>
 	<div class="d-flex">
-	<farm-checkbox v-model="option3" value="3" class="mr-2" /> 
+	<farm-checkbox v-model="option3" value="option3" class="mr-2" /> 
 		option3 : {{option3}}
 	</div>
 	</div>`,
@@ -145,3 +145,29 @@ export const Indeterminate = () => ({
 		<farm-checkbox :indeterminate="true" v-model="isChecked" :value="true"  />
 	</div>`,
 });
+
+export const ResetByValue = () => ({
+	data() {
+		return {
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :value="true" />
+		isChecked (value): {{ isChecked }}
+		<farm-btn @click="isChecked = null;">reset</farm-btn>
+	</div>`,
+});
+
+export const ResetByMethod = () => ({
+	data() {
+		return {
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :value="true" ref="checkbox" />
+		isChecked (value): {{ isChecked }}
+		<farm-btn @click="$refs.checkbox.reset()">reset</farm-btn>
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -1,18 +1,14 @@
 <template>
 	<div class="farm-checkbox__container" :color="$props.color">
-		<span
-			:class="{
-				'farm-checkbox': true,
-				'farm-checkbox--checked': isChecked,
-				'farm-checkbox--disabled': disabled,
-				'farm-checkbox--indeterminate': indeterminate,
-				'farm-checkbox--lighten': variation === 'lighten',
-				'farm-checkbox--darken': variation === 'darken',
-				'farm-checkbox--error': showError,
-			}"
-			:size="$props.size"
-			@click="toggleValue"
-		>
+		<span :class="{
+			'farm-checkbox': true,
+			'farm-checkbox--checked': isChecked,
+			'farm-checkbox--disabled': disabled,
+			'farm-checkbox--indeterminate': indeterminate,
+			'farm-checkbox--lighten': variation === 'lighten',
+			'farm-checkbox--darken': variation === 'darken',
+			'farm-checkbox--error': showError,
+		}" :size="$props.size" @click="toggleValue">
 			<farm-icon :size="$props.size" v-if="innerValue && !indeterminate">check</farm-icon>
 			<farm-icon :size="$props.size" v-if="indeterminate">minus</farm-icon>
 		</span>
@@ -123,14 +119,16 @@ export default Vue.extend({
 
 		const showError = computed(() => hasError.value && isTouched.value);
 
+		
 		watch(
-			() => props.value,
-			() => {
+			() => props.modelValue,
+			(newValue) => {
 				isTouched.value = true;
-				innerValue.value = props.value;
+				innerValue.value = newValue;
 				validate(innerValue.value);
 			}
 		);
+		
 
 		watch(
 			() => props.rules,

package/src/components/Icon/Icon.scss

@@ -31,3 +31,17 @@
 		}
 	}
 }
+
+@each $color in $theme-colors-list {
+	.farm-btn.farm-btn--icon.farm-btn--#{$color}:not(.farm-btn--disabled)
+		.farm-btn__content
+		i.mdi.farm-icon--darken {
+		color: var(--farm-#{$color}-darken);
+	}
+
+	.farm-btn.farm-btn--icon.farm-btn--#{$color}:not(.farm-btn--disabled)
+		.farm-btn__content
+		i.mdi.farm-icon--lighten {
+		color: var(--farm-#{$color}-lighten);
+	}
+}

package/src/components/IconBox/IconBox.scss

@@ -18,6 +18,10 @@
 	&--neutral .farm-icon.farm-icon {
 		color: var(--farm-neutral-darken);
 	}
+	&--secondary .farm-icon.farm-icon,
+	&--gray .farm-icon.farm-icon {
+		color: white;
+	}
 }
 
 .farm-icon-box--inverted.farm-icon-box {

package/src/components/IconBox/IconBox.vue

@@ -1,12 +1,9 @@
 <template>
-	<div
-		:class="{
-			'farm-icon-box': true,
-			[cssColorClass]: true,
-			'farm-icon-box--inverted': inverted,
-		}"
-		:size="size"
-	>
+	<div :class="{
+		'farm-icon-box': true,
+		[cssColorClass]: true,
+		'farm-icon-box--inverted': inverted,
+	}" :size="size">
 		<farm-icon :color="inverted ? 'white' : color" :size="size">{{ iconParsed }}</farm-icon>
 	</div>
 </template>
@@ -57,10 +54,7 @@ export default Vue.extend({
 	},
 	computed: {
 		iconParsed() {
-			if (this.icon.indexOf('mdi-') === 0) {
-				return this.icon.split('mdi-')[1];
-			}
-			return this.icon;
+			return this.icon.indexOf('mdi-') === 0 ? this.icon.split('mdi-')[1] : this.icon;
 		},
 		cssColorClass() {
 			return `farm-icon-box--${this.color}`;

package/src/components/MultipleFilePicker/MultipleFilePicker.stories.js

@@ -24,7 +24,10 @@ export const MaxFileSize = () => ({
 });
 
 export const MaxFilesNumber = () => ({
-	template: '<farm-multiple-filepicker :maxFileSize="5" :maxFilesNumber="1" />',
+	template: `<div>
+		<farm-multiple-filepicker :maxFileSize="5" :maxFilesNumber="2" />
+		max files allowed: 2
+	</div>`,
 });
 
 export const Download = () => ({

package/src/components/MultipleFilePicker/MultipleFilePicker.vue

@@ -79,16 +79,15 @@
 				</div>
 			</li>
 		</ul>
-
 		<farm-btn
-			v-if="hasFiles"
+			v-if="canAddMoreFiles && hasFiles"
 			outlined
-			title="Escolher Outro"
+			title="Escolher Arquivo"
 			class="farm-btn--responsive"
 			:disabled="disabledButton"
 			@click="addMoreFiles"
 		>
-			Escolher Outro
+			Escolher Arquivo
 		</farm-btn>
 	</section>
 </template>
@@ -145,6 +144,9 @@ export default Vue.extend({
 		hasFiles(): boolean {
 			return this.files.length > 0 || this.downloadFiles.length > 0;
 		},
+		canAddMoreFiles(): boolean {
+			return this.filesLength < this.maxFilesNumber;
+		},
 		filesLength(): number {
 			return this.files.length + this.downloadFiles.length;
 		},

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

@@ -143,6 +143,18 @@ describe('MultipleFilePicker component', () => {
 				expect(component.disabledButton).toBeTruthy();
 			});
 		});
+
+		describe('canAddMoreFiles', () => {
+			it('should return files and downloadFiles length', async () => {
+				await wrapper.setProps({
+					maxFilesNumber: 2,
+					downloadFiles: [new File([], 'test')],
+				});
+				component.files = [new File([], 'test2')];
+
+				expect(component.canAddMoreFiles).toBeFalsy();
+			});
+		});
 	});
 
 	describe('Watch', () => {

package/src/components/Radio/Radio.scss

@@ -1,63 +1,69 @@
 @import '../../configurations/variables';
+@import '../../configurations/theme-colors';
 
-input[type="radio"] {
-    -webkit-appearance: none;
-    appearance: none;
-    background-color: #ffffff;
-    margin: 0;
-    font: inherit;
-    color: rgba(0, 0, 0, .6);
-    border: 1.5px solid rgba(0, 0, 0, .6);
-    border-radius: 50%;
-    display: grid;
-    place-content: center;
-    cursor: pointer;
-
-    &::before {
-        content: "";
-        border-radius: 50%;
-        transform: scale(0);
-        transition: 120ms transform ease-in-out;
-        background-color: CanvasText;
-    }
-
-    &.farm-radio--checked::before {
-        transform: scale(1);
-        box-shadow: inset 16px 16px var(--farm-primary-base);
-    }
-
-    &.farm-radio--checked {
-        border-color: var(--farm-primary-base);
-    }
-
-    &:focus {
-        outline: none;
-        outline-offset: none;
-    }
-
-    &:hover {
-        box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);
-        background-color: rgba(0, 0, 0, 0.1);
-        border-radius: 50%;
-        opacity: 1;
-    }
-
-    &:active {
-        animation: pulse 0.2s 1 ease-out;
-    }
-}
+input[type='radio'] {
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: #ffffff;
+	margin: 0;
+	font: inherit;
+	color: rgba(0, 0, 0, 0.6);
+	border: 1.5px solid rgba(0, 0, 0, 0.6);
+	border-radius: 50%;
+	display: grid;
+	place-content: center;
+	cursor: pointer;
+
+	&::before {
+		content: '';
+		border-radius: 50%;
+		transform: scale(0);
+		transition: 120ms transform ease-in-out;
+		background-color: CanvasText;
+	}
+
+	&.farm-radio--checked::before {
+		transform: scale(1);
+	}
+
+	&:focus {
+		outline: none;
+		outline-offset: none;
+	}
+
+	&:hover {
+		box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);
+		background-color: rgba(0, 0, 0, 0.1);
+		border-radius: 50%;
+		opacity: 1;
+	}
 
+	&:active {
+		animation: pulse 0.2s 1 ease-out;
+	}
 
-@each $size,
-$value in $sizes {
-    #{'input[type="radio"][size=' + $size +']'} {
-        width: $value;
-        height: $value;
+	@each $color in $theme-colors-list {
+		&#{'[color=' + $color + ']'} {
+			&.farm-radio--checked::before {
+				box-shadow: inset 16px 16px themeColor($color, 'base');
+			}
 
-        &::before {
-            content: "";
-            width: $value / 2;
-            height: $value / 2;
-        }
-    }
-}
+			&.farm-radio--checked {
+				border-color: themeColor($color, 'base');
+			}
+		}
+	}
+}
+
+@each $size, $value in $sizes {
+	#{'input[type="radio"][size=' + $size + ']'} {
+		width: $value;
+		height: $value;
+
+		&::before {
+			content: '';
+			width: $value / 2;
+			height: $value / 2;
+		}
+	}
+}

package/src/components/Radio/Radio.stories.js

@@ -1,6 +1,8 @@
 import { withDesign } from 'storybook-addon-designs';
 import Radio from './Radio.vue';
 import sizes from '../../configurations/sizes';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Form/Radio',
@@ -96,3 +98,17 @@ export const Sizes = () => ({
 		</div>
 	</div>`,
 });
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<div v-for="color in colors" :key="color" class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="1" :color="color"  />&nbsp;&nbsp;{{ color }}
+		</div>
+	</div>`,
+});

package/src/components/Radio/Radio.vue

@@ -5,6 +5,7 @@
 			'farm-radio--checked': isChecked,
 		}"
 		type="radio"
+		:color="color"
 		:size="$props.size"
 		:checked="isChecked"
 		:value="value"
@@ -35,6 +36,24 @@ export default Vue.extend({
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'md',
 		},
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
 	},
 	computed: {
 		isChecked() {