@farm-investimentos/front-mfe-components 9.2.5 → 9.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "9.2.5",
+	"version": "9.3.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -64,5 +64,8 @@
 	},
 	"publishConfig": {
 		"@farm-investimentos:registry": "https://registry.npmjs.org"
+	},
+	"engines": {
+		"node": ">=14.0.0 <15.0.0"
 	}
 }

package/src/components/Checkbox/Checkbox.scss

@@ -23,6 +23,15 @@
         border-color: var(--v-secondary-base);
     }
 
+    &--disabled {
+        border-color: #dadada;
+        cursor: default;
+
+        &.farm-checkbox--checked {
+            background-color: #dadada;
+        }
+    }
+
     .farm-icon {
         color: white;
     }

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

@@ -47,3 +47,16 @@ export const WithLabel = () => ({
 		<farm-checkbox v-model="isChecked" label="custom label" />
 	</div>`,
 });
+
+export const Disabled = () => ({
+	data() {
+		return {
+			isChecked: true,
+			notIsChecked: false,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" :disabled="true" /><br />
+		<farm-checkbox v-model="notIsChecked" :disabled="true" />
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -1,18 +1,18 @@
 <template>
 	<div class="farm-checkbox__container">
 		<span
-			:class="{ 'farm-checkbox': true, 'farm-checkbox--checked': innerValue }"
+			:class="{ 'farm-checkbox': true, 'farm-checkbox--checked': innerValue, 'farm-checkbox--disabled': disabled }"
 			@click="toggleValue"
 		>
 			<farm-icon size="sm" v-if="innerValue">check</farm-icon>
 		</span>
 		<farm-label v-if="label">
-            {{ label }}
-        </farm-label>
+			{{ label }}
+		</farm-label>
 	</div>
 </template>
 <script lang="ts">
-import Vue, { ref } from 'vue';
+import Vue, { ref, toRefs } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-checkbox',
@@ -25,12 +25,19 @@ export default Vue.extend({
 		 * Label
 		 */
 		label: { type: String, default: null },
+		/**
+		 * disabled
+		 */
+		disabled: { type: Boolean, default: false },
 	},
 	setup(props, { emit }) {
 		const innerValue = ref(props.value);
-		const { label } = props;
+		const { label, disabled } = toRefs(props);
 
 		const toggleValue = () => {
+			if(disabled.value) {
+				return false;
+			}
 			innerValue.value = !innerValue.value;
 			emit('input', innerValue.value);
 		};
@@ -38,6 +45,7 @@ export default Vue.extend({
 		return {
 			innerValue,
 			label,
+			disabled,
 			toggleValue,
 		};
 	},

package/src/components/Chip/Chip.scss

@@ -3,8 +3,8 @@
 .farm-chip {
     display: inline-flex;
     padding: 0 8px;
-    border-radius: 8px;
-    background-color: themeColor('secondary');
+    border-radius: 16px;
+    background-color: themeColor('primary');
     height: 24px;
     min-width: 80px;
     max-width: 100%;
@@ -13,6 +13,9 @@
     align-items: center;
     color: white;
     width: 100%;
+    border:1px solid themeColor('primary');
+    font-size: 12px;
+    font-weight: 500;
 
     &--dense {
         min-width: auto;
@@ -26,14 +29,38 @@
     @each $color in $theme-colors-list {
         &#{'[color=' + $color + ']'} {
             background-color: themeColor($color);
-
-            &[variation='lighten'] {
+            border-color: themeColor($color);
+            
+            &.farm-chip--lighten {
                 background-color: themeColor($color, 'lighten');
-                color: black;
+                border-color: themeColor($color, 'lighten');
+                color: themeColor($color, 'darken');
             }
 
-            &[variation='darken'] {
+            &.farm-chip--darken {
                 background-color: themeColor($color, 'darken');
+                border-color: themeColor($color, 'darken');
+            }
+        }
+    }
+
+    &--outlined {
+        @each $color in $theme-colors-list {
+            &#{'[color=' + $color + ']'} {
+                background-color: transparent;
+                color: themeColor($color);
+    
+                &.farm-chip--lighten {
+                    background-color: transparent;
+                    border-color: themeColor($color, 'lighten');
+                    color: themeColor($color);
+                }
+    
+                &.farm-chip--darken {
+                    background-color: transparent;
+                    border-color: themeColor($color, 'darken');
+                    color: themeColor($color, 'darken');
+                }
             }
         }
     }

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

@@ -1,8 +1,11 @@
 import Chip from './Chip.vue';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
 import('./Chip.stories.scss');
 
-const colors = ['secondary', 'info', 'error'];
-const variations = ['darken', 'lighten'];
+console.log(baseThemeColors);
+
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
 
 export default {
 	title: 'Display/Chips',
@@ -10,14 +13,14 @@ export default {
 };
 
 export const Primary = () => ({
-	template: `<div class="chips-container">
-		<farm-chip color="info">Chip (100% width)</farm-chip>
+	template: `<div class="chips-container chips-container-full-example">
+		<farm-chip color="primary">Chip (100% width)</farm-chip>
 	</div>`,
 });
 
 export const Dense = () => ({
 	template: `<div class="chips-container">
-		<farm-chip color="info" :dense="true">prop</farm-chip>
+		<farm-chip color="primary" :dense="true">prop</farm-chip>
 		<farm-chip color="secondary" dense>attribute</farm-chip>
 	</div>`,
 });
@@ -26,20 +29,27 @@ export const Colors = () => ({
 	data() {
 		return {
 			colors,
+			variations,
 		};
 	},
-	template: `<div class="chips-container">
-		<h3>Base Colors</h3>
-		<farm-chip 
-			v-for="color in colors"
-			:key="color"
-			:color="color">
-				{{ color }}
-		</farm-chip>
+	template: `
+	<div>
+		<h3>Colors & variations</h3>
+		<div class="chips-container" v-for="color in colors">
+			<h4>{{ color }}</h4>
+			<farm-chip 
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:color="color"
+				:variation="variation">
+					{{ variation || 'base' }}
+			</farm-chip>
+		</div>
+
 	</div>`,
 });
 
-export const Variations = () => ({
+export const ColorsOutlined = () => ({
 	data() {
 		return {
 			colors,
@@ -48,16 +58,26 @@ export const Variations = () => ({
 	},
 	template: `
 	<div>
-		<h3>Variations</h3>
+		<h3>Outlined</h3>
 		<div class="chips-container" v-for="color in colors">
 			<h4>{{ color }}</h4>
 			<farm-chip 
 				v-for="variation in variations"
 				:key="color + '_' + variation"
 				:color="color"
+				:outlined="true"
 				:variation="variation">
-					{{ variation }}
+					{{ variation || 'base' }}
 			</farm-chip>
 		</div>
+
+	</div>`,
+});
+
+export const CustomTypography = () => ({
+	template: `<div class="chips-container">
+		<farm-chip color="primary">
+			<farm-bodytext :type="2">BodyText 2</farm-bodytext>
+		</farm-chip>
 	</div>`,
 });

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

@@ -1,9 +1,16 @@
 .chips-container {
     display: flex;
     flex-direction: column;
-    max-width: 320px;
+    max-width: 160px;
 
     > .farm-chip {
         margin-bottom: 16px;
     }
+
+    &-full-example {
+        border:1px solid black;
+        > .farm-chip {
+            margin-bottom: 0;
+        }
+    }
 }

package/src/components/Chip/Chip.vue

@@ -1,5 +1,13 @@
 <template>
-	<span :class="{ 'farm-chip': true, 'farm-chip--dense': dense }">
+	<span
+		:class="{
+			'farm-chip': true,
+			'farm-chip--dense': dense,
+			'farm-chip--outlined': outlined,
+			'farm-chip--lighten': variation === 'lighten',
+			'farm-chip--darken': variation === 'darken',
+		}"
+	>
 		<farm-typography tag="span" size="sm"> <slot></slot> </farm-typography>
 	</span>
 </template>
@@ -17,6 +25,17 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Is outlined
+		 */
+		outlined: {
+			type: Boolean,
+			default: false,
+		},
+		variation: {
+			type: String,
+			default: '',
+		},
 	},
 });
 </script>

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -17,7 +17,6 @@ export const Secondary = () => ({
 	</div>`,
 });
 
-
 export const CustomIcon = () => ({
 	template: `
 		<div style="max-width: 480px; position: relative;">
@@ -42,4 +41,12 @@ export const NoCloseIcon = () => ({
 		<div style="max-width: 480px; position: relative;">
 			<farm-dialog-header title="Título do header" :hasCloseIcon="false" />
 		</div>`,
-});
+});
+
+export const TemplateSlot = () => ({
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header>
+			Template Slot <farm-chip :dense="true">chip</farm-chip>
+		</farm-dialog-header>
+	</div>`,
+});

package/src/components/DialogHeader/DialogHeader.vue

@@ -3,6 +3,8 @@
 		<farm-icon v-if="iconTitle" size="16px" color="secondary">{{ iconTitle }}</farm-icon>
 		{{ title }}
 
+		<slot></slot>
+
 		<farm-icon
 			v-if="hasCloseIcon"
 			role="button"
@@ -30,7 +32,6 @@ export default Vue.extend({
 		title: {
 			type: String,
 			default: '',
-			required: true,
 		},
 		/**
 		 * Ícone - usa os do material icons
@@ -38,7 +39,6 @@ export default Vue.extend({
 		iconTitle: {
 			type: String,
 			default: null,
-			required: false,
 		},
 		/**
 		 * Ícone - se possui o ícone de fechar
@@ -46,7 +46,6 @@ export default Vue.extend({
 		hasCloseIcon: {
 			type: Boolean,
 			default: true,
-			required: false,
 		},
 	},
 	components: {

package/src/components/Modal/Modal.scss

@@ -32,34 +32,6 @@
         @include addShadow;
     }
 
-    &--size-default {
-        .farm-modal--container {
-            width: 960px;
-            max-width: 960px;
-        }
-    }
-
-    &--size-md {
-        .farm-modal--container {
-            width: 568px;
-            max-width: 568px;
-        }
-    }
-
-    &--size-sm {
-        .farm-modal--container {
-            width: 448px;
-            max-width: 448px;
-        }
-    }
-
-    &--size-xs {
-        .farm-modal--container {
-            width: 360px;
-            max-width: 360px;
-        }
-    }
-
     &--content {
         max-height: calc(100vh - 64px);
         overflow-y: auto;
@@ -99,4 +71,36 @@
             max-width: calc(100vw - 32px);
         }
     }
+}
+
+@include fromSm {
+    .farm-modal {
+        &--size-default {
+            .farm-modal--container {
+                width: 960px;
+                max-width: 960px;
+            }
+        }
+
+        &--size-md {
+            .farm-modal--container {
+                width: 568px;
+                max-width: 568px;
+            }
+        }
+
+        &--size-sm {
+            .farm-modal--container {
+                width: 448px;
+                max-width: 448px;
+            }
+        }
+
+        &--size-xs {
+            .farm-modal--container {
+                width: 360px;
+                max-width: 360px;
+            }
+        }
+    }
 }

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

@@ -41,7 +41,7 @@ export const HeaderAndBottomFromDS = () => ({
 	},
 	template: `<div>
 	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
-	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="64">
+	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="68">
 		<template v-slot:header>
 			<farm-dialog-header title="Título" @onClose="() => value = false" />
 		</template>
@@ -116,16 +116,87 @@ export const HeaderAndBottom = () => ({
 	},
 	template: `<div>
 	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
-	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="64">
+	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="68">
 		<template v-slot:header>
-			header vai aqui
+			Header
 		</template>
 		<template v-slot:content>
 		<div v-html="text" />
 		</template>
 		
 		<template v-slot:footer>
-			footer vai aqui
+			Footer
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const Persistent = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="48" :offsetBottom="68" :persistent="true">
+		<template v-slot:header>
+			<farm-dialog-header title="Título" @onClose="() => value = false" />
+		</template>
+		<template v-slot:content>
+		<br />persistent modal<br />
+		</template>
+		
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const HorizontalScroll = () => ({
+	data() {
+		return {
+			value: false,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" size="md" :offsetBottom="68">
+		<template v-slot:content>
+			<div style="width: 800px;">
+			horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll horizontal scroll
+			</div>
+		</template>
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
+		</template>
+	</farm-modal>
+	</div>`,
+});
+
+export const CustomHeader = () => ({
+	data() {
+		return {
+			value: false,
+			text,
+		};
+	},
+	template: `<div>
+	<farm-btn color="secondary" @click="value = true">abrir</farm-btn>
+	<farm-modal v-model="value" :offsetTop="24" :offsetBottom="68">
+		<template v-slot:header>
+		<farm-dialog-header>
+			Template Slot <farm-chip :dense="true">chip</farm-chip>
+		</farm-dialog-header>
+		</template>
+		<template v-slot:content>
+		<div v-html="text" />
+		</template>
+		
+		<template v-slot:footer>
+			<farm-dialog-footer @onConfirm="() => value = false" @onClose="() => value = false" />
 		</template>
 	</farm-modal>
 	</div>`,

package/src/components/Modal/Modal.vue

@@ -53,8 +53,8 @@ export default Vue.extend({
 		const { offsetTop, offsetBottom, persistent, size } = toRefs(props);
 		const inputValue = ref(props.value);
 		const styles = {
-			paddingTop: offsetTop.value + 'px',
-			paddingBottom: offsetBottom.value + 'px',
+			marginTop: offsetTop.value + 'px',
+			marginBottom: offsetBottom.value + 'px',
 		};
 
 		const close = () => {

package/src/configurations/_mixins.scss

@@ -17,7 +17,7 @@
 }
 
 @mixin fromSm {
-    @media (min-width: 960) {
+    @media (min-width: 960px) {
         @content;
     }
 }

package/src/configurations/_theme-colors-base.scss

@@ -1,8 +1,10 @@
 @import './theme-colors';
 
 :export {
+
     @each $name,
     $color in $theme-colors {
         #{$name}: themeColor($name);
     }
-}
+
+}

package/src/configurations/_theme-colors-stroke.scss

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $stroke-colors {
+        #{'stroke-' + $name}: $color;
+    }
+
+}

package/src/configurations/_theme-colors-text.scss

@@ -0,0 +1,10 @@
+@import './theme-colors';
+
+:export {
+
+    @each $name,
+    $color in $text-colors {
+        #{'text-' + $name}: $color;
+    }
+
+}

package/src/configurations/_theme-colors.scss

@@ -1,25 +1,79 @@
+$primary: (
+    base: #00CCA7,
+    lighten: #EBFFFB,
+    darken: #00B493,
+);
+
 $secondary: (
-    base: #00B493,
-    lighten: #ADFFF0,
-    darken: #006653,
+    base: #5C5C5C,
+    lighten: #F5F5F5,
+    darken: #1A3738,
 );
 
-$info: (
-    base: #5089DE,
-    lighten: #95e8ff,
-    darken: #003784
+$neutral: (
+    base: #EEEEEE,
+    lighten: #F5F5F5,
+    darken: #E0E0E0,
 );
 
 $error: (
-    base: #ea5455,
-    lighten: #ff706d,
-    darken: #6f0000
+    base: #F44336,
+    lighten: #FFEBEE,
+    darken: #B71C1C,
+);
+
+$warning: (
+    base: #FF9800,
+    lighten: #FFF3E0,
+    darken: #FF6D00,
+);
+
+$info: (
+    base: #2196F3,
+    lighten: #E3F2FD,
+    darken: #0D47A1,
+);
+
+$success: (
+    base: #4CAF50,
+    lighten: #E8F5E9,
+    darken: #1B5E20,
+);
+
+$extra-1: (
+    base: #8E24AA,
+    lighten: #E8F5E9,
+    darken: #4A148C,
+);
+
+$extra-2: (
+    base: #EC407A,
+    lighten: #FCE4EC,
+    darken: #880E4F,
 );
 
 $theme-colors: (
+    "primary": $primary,
     "secondary": $secondary,
+    "neutral": $neutral,
     "info": $info,
-    "error": $error
+    "error": $error,
+    "warning": $warning,
+    "success": $success,
+    "extra-1": $extra-1,
+    "extra-2": $extra-2
+);
+
+$text-colors: (
+    "primary": #1C1C1C,
+    "secondary": #757575,
+    "disabled": #BDBDBD
+);
+
+$stroke-colors: (
+    "base": #E0E0E0,
+    "disabled": #BDBDBD,
+    "divider": #E0E0E0
 );
 
 $theme-colors-list: map-keys($theme-colors);