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

package/package.json

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

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,11 +43,6 @@
     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;
@@ -35,4 +55,5 @@
     .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',
@@ -60,3 +64,30 @@ export const Disabled = () => ({
 		<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,7 +1,13 @@
 <template>
-	<div class="farm-checkbox__container">
+	<div class="farm-checkbox__container" :color="$props.color">
 		<span
-			:class="{ 'farm-checkbox': true, 'farm-checkbox--checked': innerValue, 'farm-checkbox--disabled': disabled }"
+			: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>
@@ -12,7 +18,7 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue, { ref, toRefs } from 'vue';
+import Vue, { ref, toRefs, watch } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-checkbox',
@@ -29,19 +35,34 @@ export default Vue.extend({
 		 * 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, disabled } = toRefs(props);
 
 		const toggleValue = () => {
-			if(disabled.value) {
+			if (disabled.value) {
 				return false;
 			}
 			innerValue.value = !innerValue.value;
 			emit('input', innerValue.value);
 		};
 
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+			}
+		);
+
 		return {
 			innerValue,
 			label,

package/src/components/Chip/Chip.scss

@@ -13,7 +13,7 @@
     align-items: center;
     color: white;
     width: 100%;
-    border:1px solid themeColor('primary');
+    border: 1px solid themeColor('primary');
     font-size: 12px;
     font-weight: 500;
 
@@ -30,7 +30,7 @@
         &#{'[color=' + $color + ']'} {
             background-color: themeColor($color);
             border-color: themeColor($color);
-            
+
             &.farm-chip--lighten {
                 background-color: themeColor($color, 'lighten');
                 border-color: themeColor($color, 'lighten');
@@ -44,18 +44,26 @@
         }
     }
 
+    &[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');
@@ -63,5 +71,13 @@
                 }
             }
         }
+
+        &[color='neutral'] {
+            color: themeColor('secondary');
+
+            &.farm-chip--lighten {
+                color: themeColor('secondary');
+            }
+        }
     }
 }

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

@@ -2,8 +2,6 @@ import Chip from './Chip.vue';
 import baseThemeColors from '../../configurations/_theme-colors-base.scss';
 import('./Chip.stories.scss');
 
-console.log(baseThemeColors);
-
 const colors = Object.keys(baseThemeColors);
 const variations = ['', 'darken', 'lighten'];
 

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

@@ -131,30 +131,6 @@ export const HeaderAndBottom = () => ({
 	</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 {
@@ -202,7 +178,6 @@ export const CustomHeader = () => ({
 	</div>`,
 });
 
-<<<<<<< HEAD
 export const Persistent = () => ({
 	data() {
 		return {
@@ -227,8 +202,6 @@ export const Persistent = () => ({
 	</div>`,
 });
 
-=======
->>>>>>> develop
 const text = `inicio!<br />
 teste!<br />
 teste!<br />

package/src/configurations/_theme-colors.scss

@@ -1,13 +1,13 @@
 $primary: (
-    base: #00CCA7,
+    base: #00B493,
     lighten: #EBFFFB,
-    darken: #00B493,
+    darken: #099A82,
 );
 
 $secondary: (
-    base: #5C5C5C,
-    lighten: #F5F5F5,
-    darken: #1A3738,
+    base: #1A3738,
+    lighten: #467D7E,
+    darken: #0B1A1B,
 );
 
 $neutral: (