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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "14.2.2",
+	"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;
@@ -93,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;
 			}
 		}
 	}
@@ -125,7 +142,6 @@ $butonSizes: (
 }
 
 .farm-btn.farm-btn--icon {
-	border: none;
 	background: transparent !important;
 	border: transparent !important;
 	transition: color 0.5s ease;
@@ -195,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 {
@@ -216,6 +235,7 @@ $butonSizes: (
 			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);
@@ -275,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;

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>',
 });

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'

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%;
-    }
-}

package/src/components/Chip/Chip.vue

@@ -1,23 +1,45 @@
 <template>
 	<span
+		v-bind="$props"
+		v-on="$listeners"
 		:class="{
 			'farm-chip': true,
 			'farm-chip--dense': dense,
 			'farm-chip--outlined': outlined,
+			'farm-chip--base': variation === 'base' || !variation,
 			'farm-chip--lighten': variation === 'lighten',
 			'farm-chip--darken': variation === 'darken',
 		}"
 	>
-		<farm-typography tag="span" size="sm" color="white" ellipsis> <slot></slot> </farm-typography>
+		<farm-caption tag="span" color="white" ellipsis> <slot></slot> </farm-caption>
 	</span>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-chip',
 	inheritAttrs: true,
 	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
 		/**
 		 * Is dense (not 100% width)?
 		 */
@@ -34,7 +56,7 @@ export default Vue.extend({
 		},
 		variation: {
 			type: String,
-			default: '',
+			default: 'base',
 		},
 	},
 });

package/src/components/Collapsible/Collapsible.scss

@@ -1,6 +1,6 @@
 .collapsible {
 	width: 100%;
-	
+
 	&__header {
 		width: 100%;
 		display: flex;
@@ -15,8 +15,13 @@
 		justify-content: flex-start;
 	}
 
-	&__icon {
+	&__content-right {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
 
+	&__icon {
 		&--main {
 			margin-right: 0.5rem;
 		}
@@ -40,4 +45,4 @@
 .fade-enter,
 .fade-leave-to {
 	opacity: 0;
-}
+}

package/src/components/Collapsible/Collapsible.stories.js

@@ -1,4 +1,7 @@
 import Collapsible from './Collapsible';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
 
 export default {
 	title: 'Surfaces/Collapsible',
@@ -22,7 +25,8 @@ export const Title = () => ({
 });
 
 export const Icon = () => ({
-	template: '<farm-collapsible icon="book" title="With Icon">collapsible content</farm-collapsible>',
+	template:
+		'<farm-collapsible icon="plus" title="With Icon">collapsible content</farm-collapsible>',
 });
 
 export const Opened = () => ({
@@ -43,7 +47,70 @@ export const Opened = () => ({
     </div>`,
 });
 
+export const ColorsChips = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin:15px">{{ color }}</h4>
+			<farm-collapsible 
+				style="margin-top:15px"
+				v-for="variation in variations"
+				icon="plus" 
+				textChip="chip"
+				title="color chip" 
+				:key="color + '_' + variation"
+				:showChip="true" 
+				:colorChip="color"
+				:variation="variation"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const ColorsOutlinedChips = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin:15px">{{ color }}</h4>
+			<farm-collapsible 
+				style="margin-top:15px"
+				v-for="variation in variations"
+				icon="plus" 
+				textChip="chip"
+				title="color chip" 
+				:key="color + '_' + variation"
+				:showChip="true"
+				:outlined="true"
+				:colorChip="color"
+				:variation="variation"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const Dense = () => ({
+	template:
+		'<farm-collapsible icon="plus" title="With Icon" textChip="chip" dense showChip>collapsible content</farm-collapsible>',
+});
+
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';
 Opened.storyName = 'Opened';
+ColorsChips.storyName = 'Colors';
+ColorsOutlinedChips.storyName = 'Outlined';
+Dense.storyName = 'Dense';