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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.12.1",
+	"version": "12.0.0",
 	"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/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);
+	}
+}