@farm-investimentos/front-mfe-components 11.0.0 → 11.0.2

package/package.json

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

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

@@ -144,7 +144,7 @@
                 color: var(--farm-#{$color}-base);
             }
 
-            i.mdi {
+            ::v-deep .farm-btn__content i.mdi {
                 color: var(--farm-#{$color}-base);
             }
         }

package/src/components/CardContext/CardContext.stories.js

@@ -64,3 +64,12 @@ export const NoIcon = () => ({
         </farm-card-context>
     `,
 });
+
+export const TooltipText = () => ({
+	template: `
+        <farm-card-context tooltipText="Lorem Ipsum is simply dummy text of the printing and typesetting industry" icon="mdi-currency-usd" title="Titulo do Card">
+            <p>Conteúdo do Card</p>
+        </farm-card-context>
+    `,
+});
+

package/src/components/CardContext/CardContext.vue

@@ -9,9 +9,22 @@
 		<div class="card-context-header" v-if="isSuccess && title">
 			<farm-icon-box v-if="icon" :icon="icon" />
 			<div class="card-context-content">
-				<p :class="{ 'card-context-title': true, 'card-context-content--bold': bold }">
-					{{ title }}
-				</p>
+				<div class="d-flex align-center">
+					<p :class="{ 
+						'mr-2': true, 
+						'mb-1': true, 
+						'card-context-title': true, 
+						'card-context-content--bold': bold }"
+					>
+						{{ title }}
+					</p>
+					<farm-tooltip v-if="tooltipText !== null">
+						{{ tooltipText }}
+						<template v-slot:activator="{}">
+							<farm-icon size="sm" color="gray">help-circle</farm-icon>
+						</template>
+					</farm-tooltip>
+				</div>
 			</div>
 		</div>
 		<div class="card-context-body" v-if="isSuccess">
@@ -93,6 +106,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Show Tooltip and help text
+		 */
+		tooltipText: {
+			type: String,
+			default: null,
+		}
 	},
 	computed: {
 		isSuccess() {

package/src/components/Chip/Chip.scss

@@ -34,7 +34,10 @@
             &.farm-chip--lighten {
                 background-color: themeColor($color, 'lighten');
                 border-color: themeColor($color, 'lighten');
-                color: themeColor($color, 'darken');
+
+                span {
+                    color: themeColor($color, 'darken');
+                }
             }
 
             &.farm-chip--darken {
@@ -45,18 +48,21 @@
     }
 
     &[color='neutral'] {
-        color: themeColor('secondary');
+        span {
+            color: themeColor('secondary');
+        }
 
-        &.farm-chip--lighten {
+        &.farm-chip--lighten span {
             color: themeColor('secondary');
         }
-        &.farm-chip--darken {
+
+        &.farm-chip--darken span {
             color: white;
         }
     }
 
     &[color='secondary'] {
-        &.farm-chip--lighten {
+        &.farm-chip--lighten span {
             color: white;
         }
     }
@@ -65,26 +71,37 @@
         @each $color in $theme-colors-list {
             &#{'[color=' + $color + ']'} {
                 background-color: transparent;
-                color: themeColor($color);
+
+                span {
+                    color: themeColor($color);
+                }
 
                 &.farm-chip--lighten {
                     background-color: transparent;
                     border-color: themeColor($color, 'lighten');
-                    color: themeColor($color);
+
+                    span {
+                        color: themeColor($color);
+                    }
                 }
 
                 &.farm-chip--darken {
                     background-color: transparent;
                     border-color: themeColor($color, 'darken');
-                    color: themeColor($color, 'darken');
+
+                    span {
+                        color: themeColor($color, 'darken');
+                    }
                 }
             }
         }
 
         &[color='neutral'] {
-            color: themeColor('secondary');
+            span {
+                color: themeColor('secondary');
+            }
 
-            &.farm-chip--lighten {
+            &.farm-chip--lighten span {
                 color: themeColor('secondary');
             }
         }

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

@@ -42,8 +42,7 @@ export const Colors = () => ({
 		};
 	},
 	template: `
-	<div>
-		<h3>Colors & variations</h3>
+	<div class="grid">
 		<div class="chips-container" v-for="color in colors">
 			<h4>{{ color }}</h4>
 			<farm-chip 
@@ -66,8 +65,7 @@ export const ColorsOutlined = () => ({
 		};
 	},
 	template: `
-	<div>
-		<h3>Outlined</h3>
+	<div class="grid">
 		<div class="chips-container" v-for="color in colors">
 			<h4>{{ color }}</h4>
 			<farm-chip 

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

@@ -13,4 +13,16 @@
             margin-bottom: 0;
         }
     }
+}
+
+.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

@@ -8,7 +8,7 @@
 			'farm-chip--darken': variation === 'darken',
 		}"
 	>
-		<farm-typography tag="span" size="sm"> <slot></slot> </farm-typography>
+		<farm-typography tag="span" size="sm" color="white"> <slot></slot> </farm-typography>
 	</span>
 </template>
 <script lang="ts">

package/src/components/DialogHeader/DialogHeader.scss

@@ -1,8 +1,10 @@
 .farm-dialog-header__close {
     position: absolute;
-    right: 1rem;
-    margin-top: 4px;
-    font-size: 1rem;
+    right: 16px;
+    margin-top: 0;
+    font-size: 16px;
+
+    transition: all 0.4s;
 
     &:hover {
         opacity: 0.8;
@@ -18,4 +20,5 @@ header {
     border-bottom: 1px solid var(--farm-stroke-divider);
     display: flex;
     justify-content: flex-start;
+    align-items: center;
 }

package/src/components/DialogHeader/DialogHeader.vue

@@ -1,7 +1,7 @@
 <template>
 	<header>
-		<farm-icon v-if="iconTitle" size="16px" color="secondary">{{ iconTitle }}</farm-icon>
-		<farm-caption v-if="title" variation="regular" bold>
+		<farm-icon v-if="iconTitle" size="16px" color="primary">{{ iconTitle }}</farm-icon>
+		<farm-caption v-if="title" variation="regular" color="primary" bold>
 			{{ title }}
 		</farm-caption>
 

package/src/components/Modal/Modal.scss

@@ -26,7 +26,7 @@
     &--container {
         background-color: white;
         border-radius: 8px;
-        max-height: calc(100vh - 64px);
+        max-height: calc(100vh - 48px);
         position: relative;
         overflow: hidden;
         z-index: 102;
@@ -34,12 +34,21 @@
     }
 
     &--content {
-        max-height: calc(100vh - 64px);
-        overflow-y: auto;
+        max-height: calc(100vh - 48px);
+        //overflow-y: auto;
         width: 100%;
-        padding: 0 16px;
+        padding: 0;
+
+        >div {
+            //max-height: calc(100vh - 176px);
+            //max-height: calc(100vh - 64px);
+            overflow-y: auto;
+            padding: 0 16px;
+        }
     }
 
+
+
     &--header {
         position: absolute;
         top: 0;

package/src/components/Modal/Modal.stories.js

@@ -24,7 +24,7 @@ export const Primary = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value">
 		<template v-slot:content>
 			<div v-html="text" />
@@ -33,6 +33,22 @@ export const Primary = () => ({
 	</div>`,
 });
 
+export const SmallContent = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	template: `<div>
+	<farm-btn @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value">
+		<template v-slot:content>
+			small content
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
 export const HeaderAndBottomFromDS = () => ({
 	data() {
 		return {
@@ -41,7 +57,7 @@ export const HeaderAndBottomFromDS = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="68">
 		<template v-slot:header>
 			<farm-dialog-header title="Título" @onClose="() => value = false" />
@@ -65,7 +81,7 @@ export const SizeMD = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" size="md">
 		<template v-slot:content>
 			<div v-html="text" />
@@ -82,7 +98,7 @@ export const SizeSmall = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" size="sm">
 		<template v-slot:content>
 			<div v-html="text" />
@@ -99,7 +115,7 @@ export const SizeXs = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" size="xs">
 		<template v-slot:content>
 			<div v-html="text" />
@@ -116,7 +132,7 @@ export const HeaderAndBottom = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="68">
 		<template v-slot:header>
 			Header
@@ -139,7 +155,7 @@ export const HorizontalScroll = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" size="md" :offsetBottom="68">
 		<template v-slot:content>
 			<div style="width: 800px;">
@@ -161,7 +177,7 @@ export const CustomHeader = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="68">
 		<template v-slot:header>
 		<farm-dialog-header>
@@ -187,7 +203,7 @@ export const Persistent = () => ({
 		};
 	},
 	template: `<div>
-	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-btn @click="value = true">abrir</farm-btn>
 	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="64" :persistent="true">
 		<template v-slot:header>
 			<farm-dialog-header title="Título" @onClose="() => value = false" />
@@ -245,4 +261,39 @@ teste!<br />
 teste!<br />
 teste!<br />
 teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 1!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste 2!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
+teste!<br />
 teste 3!`;

package/src/components/Modal/Modal.vue

@@ -3,12 +3,17 @@
 		<div :class="{ 'farm-modal': true, ['farm-modal--size-' + size]: true }" v-if="inputValue">
 			<div class="farm-modal--container">
 				<div class="farm-modal--header">
+					<!-- @slot header -->
 					<slot name="header"></slot>
 				</div>
-				<div class="farm-modal--content" :style="styles">
-					<slot name="content"></slot>
+				<div class="farm-modal--content">
+					<div :style="styles">
+						<!-- @slot main content -->
+						<slot name="content"></slot>
+					</div>
 				</div>
 				<div class="farm-modal--footer">
+					<!-- @slot footer -->
 					<slot name="footer"></slot>
 				</div>
 			</div>
@@ -55,6 +60,7 @@ export default Vue.extend({
 		const styles = {
 			marginTop: offsetTop.value + 'px',
 			marginBottom: offsetBottom.value + 'px',
+			maxHeight: `calc(100vh - ${offsetTop.value + offsetBottom.value + 48}px)`,
 		};
 
 		const close = () => {

package/src/components/Typography/Typography.scss

@@ -1,5 +1,6 @@
 @import '../../configurations/variables';
 @import '../../configurations/mixins';
+@import '../../configurations/theme-colors';
 
 .farm-typography {
 	font-size: 16px;
@@ -24,13 +25,20 @@
 		margin-bottom: auto;
 	}
 
-	@each $k in $colors {
+	color: var(--farm-text-primary);
+
+	@each $k in $theme-colors-list {
 		&#{'[color=' + $k + ']'} {
-			color: var(--v-#{$k}-base);
+			color: var(--farm-#{$k}-base);
 		}
 	}
 
-	@each $s, $val in $fontSizes {
+	&[color=white] {
+		color: white;
+	}
+
+	@each $s,
+	$val in $fontSizes {
 		&--#{$s} {
 			font-size: $val;
 		}
@@ -44,9 +52,11 @@
 }
 
 @include upToSm {
-	@each $s, $val in $fontSizes {
+
+	@each $s,
+	$val in $fontSizes {
 		.farm-typography--#{$s} {
 			font-size: calc(#{$val} - 2px);
 		}
 	}
-}
+}

package/src/components/Typography/Typography.stories.js

@@ -1,6 +1,8 @@
 import Typography from './Typography';
 import sizes from '../../configurations/sizes';
-import colors from '../../configurations/colors';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Typography/Atom',
@@ -8,7 +10,9 @@ export default {
 	parameters: {
 		docs: {
 			description: {
-				component: `Typography<br />selector: <em>farm-typography</em>`,
+				component: `Typography<br />
+					selector: <em>farm-typography</em><br />
+					<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 
@@ -17,32 +21,26 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-typography': Typography },
 	template: '<farm-typography type="legenda">Typography</farm-typography>',
 });
 
 export const Bold = () => ({
-	components: { 'farm-typography': Typography },
 	template: '<farm-typography bold>Typography</farm-typography>',
 });
 
 export const Italic = () => ({
-	components: { 'farm-typography': Typography },
 	template: '<farm-typography italic>Typography</farm-typography>',
 });
 
 export const Underline = () => ({
-	components: { 'farm-typography': Typography },
 	template: '<farm-typography underline>Typography</farm-typography>',
 });
 
 export const LineThrough = () => ({
-	components: { 'farm-typography': Typography },
 	template: '<farm-typography line-through>Typography</farm-typography>',
 });
 
 export const Weight = () => ({
-	components: { 'farm-typography': Typography },
 	data() {
 		return {
 			weights: [100, 200, 300, 400, 500, 600, 700],
@@ -57,7 +55,6 @@ const newSizes = [...sizes];
 newSizes.splice(3, 0, 'default');
 
 export const Sizes = () => ({
-	components: { 'farm-typography': Typography },
 	data() {
 		return {
 			sizes: newSizes,
@@ -75,7 +72,6 @@ export const Sizes = () => ({
 });
 
 export const CustomSizes = () => ({
-	components: { 'farm-typography': Typography },
 	data() {
 		return {
 			sizes: ['11px', '1.12876rem', '48px'],
@@ -93,10 +89,9 @@ export const CustomSizes = () => ({
 });
 
 export const Colors = () => ({
-	components: { 'farm-typography': Typography },
 	data() {
 		return {
-			colors,
+			colors: ['default', ...colors, 'white'],
 		};
 	},
 	template: `<div>
@@ -111,7 +106,6 @@ export const Colors = () => ({
 });
 
 export const Tags = () => ({
-	components: { 'farm-typography': Typography },
 	data() {
 		return {
 			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],
@@ -129,7 +123,6 @@ export const Tags = () => ({
 });
 
 export const LineHeight = () => ({
-	components: { 'farm-typography': Typography },
 	data() {
 		return {
 			heights: ['12px', '16px', '20px', '24px', '32px', '40px'],

package/src/components/Typography/Typography.vue

@@ -7,6 +7,7 @@
 			['farm-typography--weight-' + weight]: weight !== undefined,
 		}"
 		:style="style"
+		:color="color"
 	>
 		<slot></slot>
 	</component>
@@ -33,9 +34,25 @@ export default Vue.extend({
 			type: String,
 		},
 		weight: {
-			type: Number as PropType<
-				100 | 200 | 300 | 400 | 500 | 600 | 700
-			>
+			type: Number as PropType<100 | 200 | 300 | 400 | 500 | 600 | 700>,
+		},
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'default',
 		},
 	},
 	setup(props) {

package/src/components/layout/Box/Box.scss

@@ -12,25 +12,4 @@
         position: relative;
     }
 
-    @each $k in $justifications {
-        &#{'--justify-' + $k} {
-            >div {
-                justify-content: $k;
-            }
-        }
-    }
-
-    @each $k in $directions {
-        &#{'--direction-' + $k} {
-            >div {
-                flex-direction: $k;
-            }
-        }
-    }
-
-    @each $k in map-keys($gutters) {
-        &#{'[gutter=' + $k + ']'} {
-            padding: map-get($gutters, $k);
-        }
-    }
 }

package/src/components/layout/Box/Box.stories.js

@@ -1,5 +1,4 @@
 import Box from './Box.vue';
-import { directions, justifications } from '../../../configurations/flexVariables';
 import gutters from '../../../configurations/gutters';
 
 export default {
@@ -30,42 +29,6 @@ export const Tag = () => ({
 	</div>`,
 });
 
-export const Justify = () => ({
-	data() {
-		return {
-			justifications,
-		};
-	},
-	template: `<div>
-		<farm-box :justify="k" v-for="k in justifications" :key="'justify-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
-			<div>
-				justify {{ k }}
-			</div>
-			<div>
-				another div
-			</div>
-		</farm-box>
-	</div>`,
-});
-
-export const Directions = () => ({
-	data() {
-		return {
-			directions,
-		};
-	},
-	template: `<div>
-		<farm-box :direction="k" v-for="k in directions" :key="'direction-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
-			<div>
-			direction {{ k }}
-			</div>
-			<div>
-				another div
-			</div>
-		</farm-box>
-	</div>`,
-});
-
 export const Gutters = () => ({
 	data() {
 		return { gutters };