@farm-investimentos/front-mfe-components 14.2.1 → 15.0.0

package/package.json

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

package/src/components/AlertBox/AlertBox.scss

@@ -22,10 +22,11 @@
 		}
 	}
 
-	&__icon {
-		align-items: center;
+	&__icon.farm-icon {
+		align-items: self-start;
 		display: flex;
 		margin-right: 16px;
+		margin-top: 3px;
 	}
 
 	&__close {

package/src/components/AlertBox/AlertBox.vue

@@ -80,6 +80,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'

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

@@ -17,7 +17,7 @@ $butonSizes: (
 	display: inline-flex;
 	flex: 0 0 auto;
 	font-weight: 700;
-	letter-spacing: 1.25px;
+	letter-spacing: 0.5px;
 	justify-content: center;
 	outline: 0;
 	position: relative;
@@ -37,7 +37,8 @@ $butonSizes: (
 		width: 100%;
 	}
 
-	@each $size, $value in $sizes {
+	@each $size,
+	$value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
 			height: map-get($butonSizes, $size);
@@ -92,28 +93,45 @@ $butonSizes: (
 
 	&:not(.farm-btn--plain):hover {
 		&:before {
-			opacity: 0.08;
+			opacity: 0.14;
 		}
 	}
 
 	&:not(.farm-btn--plain):not(.farm-btn--disabled):active {
 		&:before {
-			opacity: 0.16;
+			opacity: 0.27;
 		}
 	}
 
 	&.farm-btn--plain {
 		background-color: transparent !important;
 
-		&:hover {
-			.farm-btn__content {
-				opacity: 0.68;
+		.farm-btn__content {
+			position: relative;
+
+			&:before {
+				content: '';
+				transition: all 0.28s ease;
+				background-color: currentColor;
+				top: 110%;
+				left: 0;
+				position: absolute;
+				width: 100%;
+				height: 1px;
+				opacity: 0;
+			}
+		}
+
+		&:hover:not(.farm-btn--disabled) {
+			.farm-btn__content,
+			.farm-btn__content:before {
+				opacity: 0.86;
 			}
 		}
 
 		&:active {
 			&:before {
-				opacity: 0.08;
+				opacity: 0.73;
 			}
 		}
 	}
@@ -124,8 +142,8 @@ $butonSizes: (
 }
 
 .farm-btn.farm-btn--icon {
-	border: none;
-	background: transparent;
+	background: transparent !important;
+	border: transparent !important;
 	transition: color 0.5s ease;
 
 	min-width: auto;
@@ -135,7 +153,8 @@ $butonSizes: (
 		color: gray;
 	}
 
-	@each $size, $value in $sizes {
+	@each $size,
+	$value in $sizes {
 		&#{'.farm-btn[size=' + $size + ']'} {
 			font-size: $value;
 		}
@@ -157,26 +176,26 @@ $butonSizes: (
 				color: var(--farm-#{$color}-base);
 			}
 
-			::v-deep .farm-btn__content i.mdi {
+			.farm-btn__content :deep(i.mdi) {
 				color: var(--farm-#{$color}-base);
 			}
 
-			&.lighten-variation-icon {
+			&.farm-btn--variation-lighten {
 				&:hover {
 					color: var(--farm-#{$color}-lighten);
 				}
 
-				::v-deep .farm-btn__content i.mdi {
+				.farm-btn__content :deep(i.mdi) {
 					color: var(--farm-#{$color}-lighten);
 				}
 			}
 
-			&.darken-variation-icon {
+			&.farm-btn--variation-darken {
 				&:hover {
 					color: var(--farm-#{$color}-darken);
 				}
 
-				::v-deep .farm-btn__content i.mdi {
+				.farm-btn__content :deep(i.mdi) {
 					color: var(--farm-#{$color}-darken);
 				}
 			}
@@ -192,10 +211,13 @@ $butonSizes: (
 
 @each $color in $theme-colors-list {
 	#{'.farm-btn--' + $color} {
-		border: 1px solid var(--farm-#{$color}-base);
 		background-color: var(--farm-#{$color}-base);
 		color: white;
 
+		&.farm-btn--outlined {
+			border: 1px solid var(--farm-#{$color}-base);
+		}
+
 		&:not(.farm-btn--outlined):not(.farm-btn--plain):not(.farm-btn--icon) {
 			::v-deep .farm-btn__content {
 				i.mdi {
@@ -207,6 +229,17 @@ $butonSizes: (
 				}
 			}
 		}
+
+		&.farm-btn--variation-lighten {
+			border: 1px solid var(--farm-#{$color}-lighten);
+			background-color: var(--farm-#{$color}-lighten);
+			color: var(--farm-text-primary);
+		}
+
+		&.farm-btn--variation-darken {
+			border: 1px solid var(--farm-#{$color}-darken);
+			background-color: var(--farm-#{$color}-darken);
+		}
 	}
 
 	.farm-btn--extra,
@@ -262,6 +295,12 @@ $butonSizes: (
 	}
 }
 
+.farm-btn--primary.farm-btn--disabled:not(.farm-btn--outlined) {
+	.farm-btn__content i.mdi {
+		color: rgba(0, 0, 0, 0.26) !important;
+	}
+}
+
 .farm-btn--plain.farm-btn--disabled {
 	background-color: transparent;
 	border: none;
@@ -286,4 +325,4 @@ $butonSizes: (
 		width: 100%;
 		margin: 0;
 	}
-}
+}

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -44,22 +44,22 @@ export const PrimaryInactive = () => ({
 	template:
 		'<farm-btn disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
 });
-export const SecondaryActive = () => ({
+export const OutlinedActive = () => ({
 	template:
 		'<farm-btn outlined> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
 });
 
-export const SecondaryInactive = () => ({
+export const OutlinedInactive = () => ({
 	template:
 		'<farm-btn outlined disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
 });
 
-export const TertiaryActive = () => ({
+export const PlainActive = () => ({
 	template:
 		'<farm-btn plain> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
 });
 
-export const TertiaryInactive = () => ({
+export const PlainInactive = () => ({
 	template:
 		'<farm-btn plain disabled> <farm-icon>plus</farm-icon> Pass text as slot <farm-icon>plus</farm-icon></farm-btn>',
 });
@@ -92,11 +92,31 @@ export const ActiveButtons = () => ({
 			colors,
 		};
 	},
-	template: `<div class="buttons-container">
-        <farm-btn v-for="color of colors":key="'random_9_' + color" :color="color">
-            {{ color }}
-        </farm-btn>
-	</div>`,
+	template: `<farm-box>
+		<farm-row>
+		
+		<farm-col cols="12" md="3" class="d-flex flex-column">
+			Base
+			<farm-btn v-for="color of colors":key="'random_9_' + color" :color="color" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+	
+		<farm-col cols="12" md="3"  class="d-flex flex-column">
+			Lighten
+			<farm-btn v-for="color of colors":key="'random_9_lighten_' + color" :color="color" variation="lighten" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+
+			<farm-col cols="12" md="3"  class="d-flex flex-column">
+			Darken
+			<farm-btn v-for="color of colors":key="'random_9_darken_' + color" :color="color" variation="darken" class="mb-2">
+				{{ color }}
+			</farm-btn>
+		</farm-col>
+		<farm-row>
+	</farm-box>`,
 });
 
 export const OutlinedButtons = () => ({
@@ -195,28 +215,41 @@ export const Iconed = () => ({
 			colors: [...colors, 'white'],
 		};
 	},
-	template: `<div class="buttons-container">
-		<h4>Icon</h4>
+	template: `<farm-box>
+	<farm-row>
+	
+	<farm-col cols="12" md="3" class="d-flex flex-column">
+		Base
         <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color">
             <farm-icon>book</farm-icon>
         </farm-btn>
+	</farm-col>
+	
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
 
-		<h4>Darken Icon</h4>
+		<h4>Darken</h4>
         <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="darken">
             <farm-icon>book</farm-icon>
         </farm-btn>
+		</farm-col>
+	
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
 
-		<h4>Lighten Icon</h4>
+		<h4>Lighten </h4>
         <farm-btn icon v-for="color of colors" :key="'random_2_' + color" :color="color" variation="lighten">
             <farm-icon>book</farm-icon>
         </farm-btn>
+	</farm-col>
+
+	<farm-col cols="12" md="3"  class="d-flex flex-column">
 
-		<h4>Disabled Icon</h4>
+		<h4>Disabled</h4>
         <farm-btn icon v-for="color of colors" :key="'disabled_random_2_' + color" :color="color" :disabled="true">
             <farm-icon>book</farm-icon>
         </farm-btn>
-
-	</div>`,
+		</farm-col>
+	</farm-row>
+	</farm-box>`,
 });
 
 export const Rounded = () => ({

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

@@ -33,6 +33,8 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
@@ -112,7 +114,7 @@ export default Vue.extend({
 				'farm-btn--icon': this.icon,
 				'farm-btn--full': this.full,
 				['farm-btn--' + this.color]: true,
-				[this.variation + '-variation-icon']: true,
+				['farm-btn--variation-' + this.variation]: true,
 				...obj,
 			};
 		},

package/src/components/Buttons/ExportButton/ExportButton.vue

@@ -72,8 +72,9 @@ export default Vue.extend({
 		onClick(key) {
 			this.$emit('onClick', key);
 		},
-		toggleValue() {
+		toggleValue(event: MouseEvent) {
 			this.value = !this.value;
+			event.stopPropagation();
 		},
 	},
 });

package/src/components/Card/Card.scss

@@ -3,7 +3,7 @@
 .farm-card {
 	width: 100%;
 	background: #ffffff;
-	border: 1px solid var(--farm-stroke-base);
+	border: 1px solid var(--farm-gray-lighten);
 	border-radius: 5px;
 	overflow: hidden;
 

package/src/components/Card/CardComposition.stories.ts

@@ -55,8 +55,14 @@ export const Shadow = () => ({
 export const BackgroundChildren = () => ({
 	template: `<div style="width: 480px;">
     <farm-card>
-		<farm-card-content style="background: #DADADA">
-			Content!
+	<farm-card-content background="lighten">
+			Lighten bg
+		</farm-card-content>
+		<farm-card-content>
+			No bg
+		</farm-card-content>
+		<farm-card-content background="base">
+			Base bg
 		</farm-card-content>
 	</farm-card>
     </div>`,

package/src/components/Card/CardContent/CardContent.scss

@@ -1,5 +1,6 @@
 @import '../../../configurations/variables';
 @import '../../../configurations/functions';
+@import '../../../configurations/_theme-colors';
 
 .farm-card__content {
     @each $k in map-keys($gutters) {
@@ -7,4 +8,14 @@
             padding: map-get($gutters, $k);
         }
     }
+
+
+}
+
+@each $k in map-keys($background-colors) {
+    @debug $k;
+
+    #{'.farm-card__content--' + $k} {
+        background-color: map-get($background-colors, $k);
+    }
 }

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

@@ -34,3 +34,14 @@ export const Gutters = () => ({
 		</farm-card-content>
     </div>`,
 });
+
+export const Background = () => ({
+	data() {
+		return { bgs: ['base', 'lighten', 'white'] };
+	},
+	template: `<div style="width: 480px;">
+		<farm-card-content v-for="bg in bgs" :key="bg" style="margin-bottom: 16px" :background="bg">
+			Content with {{ bg }} background
+		</farm-card-content>
+    </div>`,
+});

package/src/components/Card/CardContent/CardContent.vue

@@ -1,5 +1,9 @@
 <template>
-	<component :is="tag" class="farm-card__content" :gutter="gutter">
+	<component
+		:is="tag"
+		:class="{ 'farm-card__content': true, ['farm-card__content--' + background]: background }"
+		:gutter="gutter"
+	>
 		<slot></slot>
 	</component>
 </template>
@@ -21,6 +25,10 @@ export default Vue.extend({
 			type: String as PropType<'none' | 'xs' | 'sm' | 'vuetify' | 'md' | 'lg' | 'xl'>,
 			default: 'md',
 		},
+		background: {
+			type: String as PropType<'base' | 'lighten' | 'darken'> | null,
+			default: null,
+		},
 	},
 	inheritAttrs: true,
 });

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

@@ -6,7 +6,11 @@ describe('CardContext component', () => {
 	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(CardContext);
+		wrapper = shallowMount(CardContext, {
+			propsData: {
+				title: 'title',
+			},
+		});
 		component = wrapper.vm;
 	});
 
@@ -21,7 +25,6 @@ describe('CardContext component', () => {
 	});
 
 	describe('Computed properties', () => {
-
 		it('Should compute isLargeLoading for false', () => {
 			expect(component.isLargeLoading).toEqual('small');
 		});

package/src/components/Checkbox/Checkbox.scss

@@ -47,8 +47,8 @@
 .farm-checkbox {
 	display: flex;
 	justify-content: center;
-	border: 2px solid themeColor('neutral', 'darken');
-	border-radius: 2px;
+	border: 3px solid themeColor('neutral', 'darken');
+	border-radius: 4px;
 	cursor: pointer;
 	line-height: 0;
 	transition: all 0.4s;

package/src/components/Checkbox/Checkbox.vue

@@ -62,12 +62,13 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
 			>,

package/src/components/Chip/Chip.scss

@@ -2,20 +2,16 @@
 
 .farm-chip {
     display: inline-flex;
-    padding: 0 8px;
+    padding: 2px 8px 0;
     border-radius: 16px;
-    background-color: themeColor('primary');
     height: 24px;
     min-width: 80px;
     max-width: 100%;
-    vertical-align: middle;
     text-align: center;
     align-items: center;
     color: white;
     width: 100%;
     border: 1px solid themeColor('primary');
-    font-size: 12px;
-    font-weight: 500;
 
     &--dense {
         min-width: auto;
@@ -47,23 +43,27 @@
         }
     }
 
+
     &[color='neutral'] {
         span {
-            color: themeColor('secondary');
+            color: var(--farm-secondary-green-base);
         }
-
-        &.farm-chip--lighten span {
-            color: themeColor('secondary');
-        }
-
         &.farm-chip--darken span {
             color: white;
         }
     }
 
-    &[color='secondary'] {
+    &[color='secondary'],
+    &[color='secondary-golden'] {
+        &:not(.farm-chip--outlined).farm-chip--base span {
+            color: var(--farm-bw-black);
+        }
+    }
+
+
+    &[color='secondary-green'] {
         &.farm-chip--lighten span {
-            color: white;
+            color: var(--farm-bw-white);
         }
     }
 
@@ -98,11 +98,11 @@
 
         &[color='neutral'] {
             span {
-                color: themeColor('secondary');
+                color: themeColor('secondary-green');
             }
 
             &.farm-chip--lighten span {
-                color: themeColor('secondary');
+                color: themeColor('secondary-green');
             }
         }
     }

package/src/components/Chip/Chip.stories.js

@@ -22,13 +22,13 @@ export default {
 };
 
 export const Primary = () => ({
-	template: `<div class="chips-container chips-container-full-example">
+	template: `<farm-box>
 		<farm-chip color="primary">Chip (100% width)</farm-chip>
-	</div>`,
+	</farm-box>`,
 });
 
 export const Dense = () => ({
-	template: `<div class="chips-container">
+	template: `<div>
 		<farm-chip color="primary" :dense="true">prop</farm-chip>
 		<farm-chip color="secondary" dense>attribute</farm-chip>
 	</div>`,
@@ -42,8 +42,8 @@ export const Colors = () => ({
 		};
 	},
 	template: `
-	<div class="grid">
-		<div class="chips-container" v-for="color in colors">
+	<farm-row>
+		<farm-col cols="12" md="4" class="chips-container" v-for="color in colors" :key="'color_' + color">
 			<h4>{{ color }}</h4>
 			<farm-chip 
 				v-for="variation in variations"
@@ -52,9 +52,9 @@ export const Colors = () => ({
 				:variation="variation">
 					{{ variation || 'base' }}
 			</farm-chip>
-		</div>
+		</farm-col>
 
-	</div>`,
+	</farm-row>`,
 });
 
 export const ColorsOutlined = () => ({
@@ -65,8 +65,8 @@ export const ColorsOutlined = () => ({
 		};
 	},
 	template: `
-	<div class="grid">
-		<div class="chips-container" v-for="color in colors">
+	<farm-row>
+		<farm-col cols="12" md="4" class="chips-container" v-for="color in colors">
 			<h4>{{ color }}</h4>
 			<farm-chip 
 				v-for="variation in variations"
@@ -76,14 +76,14 @@ export const ColorsOutlined = () => ({
 				:variation="variation">
 					{{ variation || 'base' }}
 			</farm-chip>
-		</div>
+		</farm-col>
 
-	</div>`,
+	</arm-row>`,
 });
 
 export const CustomTypography = () => ({
-	template: `<div class="chips-container">
-		<farm-chip color="primary">
+	template: `<div>
+		<farm-chip color="primary" dense>
 			<farm-bodytext :type="2">BodyText 2</farm-bodytext>
 		</farm-chip>
 	</div>`,

package/src/components/Chip/Chip.stories.scss

@@ -1,8 +1,5 @@
 .chips-container {
-    display: flex;
-    flex-direction: column;
-    max-width: 160px;
-
+   
     > .farm-chip {
         margin-bottom: 16px;
     }
@@ -14,15 +11,3 @@
         }
     }
 }
-
-.grid {
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-
-    > div.chips-container {
-        width: calc(33% - 32px);
-        margin: 0 16px;
-        max-width: 33%;
-    }
-}