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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "9.2.5",
+	"version": "9.3.1",
 	"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

@@ -1,3 +1,5 @@
+@import '../../configurations/theme-colors';
+
 .farm-checkbox__container {
     display: flex;
     flex-direction: row;
@@ -5,6 +7,29 @@
     .farm-label {
         margin-left: 8px;
     }
+
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            .farm-checkbox--checked {
+                background-color: themeColor($color);
+                border-color: themeColor($color);
+
+                &.farm-checkbox--lighten {
+                    background-color: themeColor($color, 'lighten');
+                    border-color: themeColor($color, 'lighten');
+
+                    .farm-icon {
+                        color: themeColor($color, 'darken');
+                    }
+                }
+
+                &.farm-checkbox--darken {
+                    background-color: themeColor($color, 'darken');
+                    border-color: themeColor($color, 'darken');
+                }
+            }
+        }
+    }
 }
 
 .farm-checkbox {
@@ -18,12 +43,17 @@
     line-height: 0;
     transition: all 0.4s;
 
-    &--checked {
-        background-color: var(--v-secondary-base);
-        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

@@ -1,4 +1,8 @@
 import Checkbox from './Checkbox';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
 
 export default {
 	title: 'Form/Checkbox',
@@ -47,3 +51,43 @@ 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>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			isChecked: true,
+			colors,
+			variations,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+	<div v-for="color in colors" style="width: 33.3%;">
+		<h4>{{ color }}</h4>
+		<div
+			style="display: flex; flex-direction: column;"
+			v-for="variation in variations"
+			:key="color + '_' + variation"
+		>
+			<farm-checkbox
+				v-model="isChecked"
+				:color="color"
+				:variation="variation"
+				:label="variation || 'Base'"			
+			/>
+			</div>
+		</div>
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -1,18 +1,24 @@
 <template>
-	<div class="farm-checkbox__container">
+	<div class="farm-checkbox__container" :color="$props.color">
 		<span
-			:class="{ 'farm-checkbox': true, 'farm-checkbox--checked': innerValue }"
+			:class="{
+				'farm-checkbox': true,
+				'farm-checkbox--checked': innerValue,
+				'farm-checkbox--disabled': disabled,
+				'farm-checkbox--lighten': variation === 'lighten',
+				'farm-checkbox--darken': variation === 'darken',
+			}"
 			@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, watch } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-checkbox',
@@ -25,19 +31,42 @@ export default Vue.extend({
 		 * Label
 		 */
 		label: { type: String, default: null },
+		/**
+		 * disabled
+		 */
+		disabled: { type: Boolean, default: false },
+		variation: {
+			type: String,
+			default: '',
+		},
+		color: {
+			type: String,
+			default: 'primary',
+		},
 	},
 	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);
 		};
 
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+			}
+		);
+
 		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,54 @@
     @each $color in $theme-colors-list {
         &#{'[color=' + $color + ']'} {
             background-color: themeColor($color);
+            border-color: themeColor($color);
 
-            &[variation='lighten'] {
+            &.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');
+            }
+        }
+    }
+
+    &[color='neutral'] {
+        color: themeColor('secondary');
+
+        &.farm-chip--lighten {
+            color: themeColor('secondary');
+        }
+    }
+
+    &--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');
+                }
+            }
+        }
+
+        &[color='neutral'] {
+            color: themeColor('secondary');
+
+            &.farm-chip--lighten {
+                color: themeColor('secondary');
             }
         }
     }

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

@@ -1,8 +1,9 @@
 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'];
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
 
 export default {
 	title: 'Display/Chips',
@@ -10,14 +11,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 +27,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 +56,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,22 +116,68 @@ 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 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>`,
 });
 
-<<<<<<< HEAD
 export const Persistent = () => ({
 	data() {
 		return {
@@ -156,8 +202,6 @@ export const Persistent = () => ({
 	</div>`,
 });
 
-=======
->>>>>>> develop
 const text = `inicio!<br />
 teste!<br />
 teste!<br />

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