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

package/src/components/Switcher/Switcher.stories.js

@@ -1,4 +1,6 @@
 import Switch from './Switcher';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Form/Switcher',
@@ -58,3 +60,34 @@ export const OffDisabled = () => ({
 	<farm-switcher v-model="selectedValue" block :disabled="true" />
 	</div>`,
 });
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			selectedValue: true,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col
+			cols="12"
+			md="3"
+			v-for="color in colors"
+			:key="'color_' + color"
+		>
+			<farm-bodytext>{{ color }}</farm-bodytext>
+			<farm-switcher
+				v-model="selectedValue"
+				:color="color"
+			/>
+			<farm-caption>Desabilitado</farm-caption>
+			<farm-switcher
+				disabled
+				v-model="selectedValue"
+				:color="color"
+			/>
+		</farm-col>
+
+	</farm-row>`,
+});

package/src/components/Switcher/Switcher.vue

@@ -2,6 +2,7 @@
 	<div
 		:class="{ 'farm-switch': true }"
 		role="checkbox"
+		v-bind="$props"
 		@click="toggle"
 		@keydown.space.prevent="toggle"
 	>
@@ -10,11 +11,31 @@
 	</div>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-switcher',
 	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
 		/**
 		 * v-model binding
 		 */
@@ -37,8 +58,8 @@ export default Vue.extend({
 			return {
 				'farm-switch--selected': this.value && !this.isDisabled,
 				'farm-switch--idle': !this.value && !this.isDisabled,
-				'farm-switch--disabled-on': this.value && this.isDisabled,   
-				'farm-switch--disabled-off': !this.value && this.isDisabled,   
+				'farm-switch--disabled-on': this.value && this.isDisabled,
+				'farm-switch--disabled-off': !this.value && this.isDisabled,
 			};
 		},
 		indicatorStyles() {

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -3,12 +3,7 @@
 		pointer-events: none;
 	}
 }
-
-.farm-listitem {
-	padding: auto 8px;
-
-	.farm-icon {
-		vertical-align: sub;
-		margin-right: 8px;
-	}
-}
+:deep(.farm-listitem .farm-icon) {
+	vertical-align: sub;
+	margin-right: 8px;
+}

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -50,6 +50,8 @@ export const Multi = () => ({
 				{ label: 'Novo', icon: { type: 'open-in-new' } },
 				{ label: 'Editar', icon: { color: 'secondary', type: 'open-in-new' } },
 				{ label: 'Remover', icon: { color: 'error', type: 'delete' } },
+				{ label: 'Outro', icon: { color: 'black', type: 'cog' } },
+				{ label: 'Book', icon: { color: 'gray', type: 'book' } },
 			],
 		};
 	},

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -6,8 +6,8 @@
 		<template v-slot:activator>
 			<farm-btn
 				icon
-				title="Abrir opções"
-				color="secondary"
+				title="Ver opções"
+				color="secondary-green"
 				:disabled="disabled"
 				@click="toggleValue"
 			>
@@ -26,7 +26,7 @@
 				<farm-icon v-if="item.icon" size="sm" :color="item.icon.color || 'primary'">
 					{{ item.icon.type }}
 				</farm-icon>
-				<farm-caption bold tag="span">{{ item.label }}</farm-caption>
+				<farm-caption bold tag="span" :color="item.icon.color || 'primary'">{{ item.label }}</farm-caption>
 			</farm-listitem>
 		</farm-list>
 	</farm-contextmenu>

package/src/components/Tabs/Tabs.scss

@@ -1,15 +1,25 @@
+@import '../../configurations/theme-colors';
+
+.farm-tabs {
+	width: 100%;
+}
 .tabs {
 	display: flex;
+	margin-bottom: -1px;
 
 	&__tab {
-		border-bottom: 1px solid var(--farm-gray-lighten);
+		border-bottom: 1px solid var(--farm-primary-lighten);
 		cursor: pointer;
 		display: inline-flex;
-		padding: 16px 24px;
+		padding: 18px 24px 14px;
 		height: 54px;
-
+		transition: all 0.5s ease;
 		&:hover {
-			background-color: var(--farm-neutral-lighten);
+			background-color: transparentize(themeColor('primary', 'base'), 0.86);
+
+			div.rounded-circle {
+				opacity: 0.86;
+			}
 		}
 
 		span {
@@ -17,14 +27,11 @@
 		}
 
 		&--selected {
-			border-bottom: 4px solid var(--farm-primary-base);
-			transition: border-bottom 0.2s ease-in-out;
 
-			&:hover {
-				background-color: var(--farm-primary-lighten);
-			}
+			border-bottom: 4px solid var(--farm-primary-base);
 
 			span {
+				font-size: 14px;
 				font-weight: 500;
 			}
 		}
@@ -47,12 +54,19 @@
 	}
 }
 
+.farm-tabs {
+	border-bottom: 1px solid var(--farm-primary-lighten);
+}
+
+
 div.rounded-circle {
 	background-color: var(--farm-gray-lighten);
 	width: 24px;
 	height: 24px;
+	margin-top: -2px;
+	margin-left: -2px;
 
 	&.is-selected {
 		background-color: var(--farm-primary-base);
 	}
-}
+}

package/src/components/Tabs/Tabs.vue

@@ -1,34 +1,43 @@
 <template>
-	<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
-		<div
-			v-for="(tab, index) in tabs"
-			class="tabs__tab"
-			:key="index"
-			:class="{ hideCounter: !showCounter, 'tabs__tab--selected': isSelected(index) }"
-			@click="changeTab(tab, index)"
-		>
+	<div class="farm-tabs">
+		<div class="tabs" :class="{ 'tabs--disabled': !allowUserChange }">
 			<div
-				v-if="showCounter"
-				class="mr-2 rounded-circle d-inline-flex align-center justify-center white--text"
-				:class="{ 'is-selected': isSelected(index) }"
+				v-for="(tab, index) in tabs"
+				class="tabs__tab"
+				:key="index"
+				:class="{ hideCounter: !showCounter, 'tabs__tab--selected': isSelected(index) }"
+				@click="changeTab(tab, index)"
 			>
+				<div
+					v-if="showCounter"
+					class="
+						mr-2
+						rounded-circle
+						d-inline-flex
+						align-center
+						justify-center
+						white--text
+					"
+					:class="{ 'is-selected': isSelected(index) }"
+				>
+					<farm-subtitle
+						color="white"
+						tag="span"
+						:type="2"
+						:color-variation="isSelected(index) ? 'base' : 'darken'"
+					>
+						{{ index + 1 }}
+					</farm-subtitle>
+				</div>
 				<farm-subtitle
-					color="white"
 					tag="span"
 					:type="2"
+					:color="isSelected(index) ? 'primary' : 'gray'"
 					:color-variation="isSelected(index) ? 'base' : 'darken'"
 				>
-					{{ index + 1 }}
+					{{ forceUppercase ? tab.name.toUpperCase() : tab.name }}
 				</farm-subtitle>
 			</div>
-			<farm-subtitle
-				tag="span"
-				:type="2"
-				:color="isSelected(index) ? 'primary' : 'gray'"
-				:color-variation="isSelected(index) ? 'base' : 'darken'"
-			>
-				{{ tab.name }}
-			</farm-subtitle>
 		</div>
 	</div>
 </template>
@@ -37,9 +46,11 @@
 import Vue from 'vue';
 export default Vue.extend({
 	name: 'farm-tabs',
-	data: () => ({
-		selected: 0,
-	}),
+	data() {
+		return {
+			selected: 0,
+		};
+	},
 	props: {
 		tabs: {
 			type: Array,
@@ -58,6 +69,9 @@ export default Vue.extend({
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * Initial tab selected
+		 */
 		initialSelect: {
 			type: Number,
 			default: 0,
@@ -66,6 +80,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: true,
 		},
+		/**
+		 * Force uppercase in tab
+		 */
+		forceUppercase: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	methods: {
 		isSelected(index) {

package/src/components/TextArea/TextArea.scss

@@ -12,7 +12,7 @@
 		align-items: center;
 		gap: 8px;
 		border: 1px solid;
-		border-color: var(--farm-gray-lighten);
+		border-color: var(--farm-bw-black-10);
 		min-height: 36px;
 		border-radius: 5px;
 		padding: 8px 0 0 8px;
@@ -23,7 +23,7 @@
 		& > textarea {
 			flex: 1;
 			outline: none;
-			color: var(--farm-text-primary);
+			color: var(--farm-bw-black-50);
 			font-size: 12px;
 			font-weight: 400;
 			max-width: 100%;
@@ -31,9 +31,13 @@
 		}
 	}
 
+	&--focused .farm-textarea--textarea {
+		border-color: var(--farm-bw-black-30);
+	}
+
 	&--disabled {
 		textarea {
-			color: var(--farm-gray-base);
+			color: var(--farm-bw-black-30);
 		}
 	}
 

package/src/components/TextArea/TextArea.vue

@@ -9,6 +9,7 @@
 			'farm-textarea--error': hasError,
 			'farm-textarea--disabled': disabled,
 			'farm-textarea--hiddendetails': hideDetails,
+			'farm-textarea--focused': isFocus && !readonly,
 		}"
 	>
 		<div

package/src/components/TextFieldV2/TextFieldV2.scss

@@ -12,7 +12,7 @@
 		align-items: center;
 		gap: 8px;
 		border: 1px solid;
-		border-color: var(--farm-gray-lighten);
+		border-color: var(--farm-bw-black-10);
 		height: 36px;
 		border-radius: 5px;
 		padding: 8px;
@@ -26,7 +26,7 @@
 		& > input {
 			flex: 1;
 			outline: none;
-			color: var(--farm-text-primary);
+			color: var(--farm-bw-black-50);
 			font-size: 12px;
 			font-weight: 400;
 			max-width: 100%;
@@ -39,12 +39,16 @@
 		width: 100%;
 	}
 
+	&--focused .farm-textfield--input {
+		border-color: var(--farm-bw-black-30);
+	}
+
 	&--disabled {
 		input {
-			color: var(--farm-gray-base);
+			color: var(--farm-bw-black-30);
 		}
 		.farm-icon {
-			color: var(--farm-gray-lighten);
+			color: var(--farm-bw-black-30);
 			cursor: default;
 		}
 	}

package/src/components/TextFieldV2/TextFieldV2.vue

@@ -7,6 +7,7 @@
 			'farm-textfield--touched': isTouched,
 			'farm-textfield--blured': isBlured,
 			'farm-textfield--error': hasError,
+			'farm-textfield--focused': isFocus && !readonly,
 			'farm-textfield--disabled': disabled,
 			'farm-textfield--hiddendetails': hideDetails,
 			'farm-textfield--uppercase': isUppercase,

package/src/components/Tooltip/Tooltip.scss

@@ -8,14 +8,12 @@
 
 .farm-tooltip__popup {
 	background-color: rgba(themeColor('primary'), 0.95);
-
-	@each $color in $colors {
-		@each $color in $theme-colors-list {
-			&.farm-tooltip--#{$color} {
-				background-color: rgba(themeColor($color), 0.95);
-			}
+	@each $color in $theme-colors-list {
+		&.farm-tooltip--#{$color} {
+			background-color: rgba(themeColor($color), 0.95);
 		}
 	}
+
 }
 
 .farm-tooltip__popup {
@@ -26,10 +24,10 @@
 	width: 160px;
 	contain: content;
 	color: white;
-	background-color: themeColor('primary');
-	border-radius: 4px;
-	font-family: 'Montserrat', sans-serif !important;
-	font-size: 14px;
+	border-radius: 5px;
+	font-family: 'Manrope', sans-serif !important;
+	font-size: 12px;
+	font-weight: 500px;
 	padding: 8px 12px;
 	display: block;
 

package/src/components/Tooltip/Tooltip.vue

@@ -33,16 +33,18 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
 				| 'neutral'
 				| 'info'
 				| 'success'
 				| 'error'
 				| 'warning'
-				| 'success'
 				| 'extra-1'
 				| 'extra-2'
+				| 'gray'
 			>,
-			default: 'secondary',
+			default: 'gray',
 		},
 		/**
 		 * Control visibility

package/src/components/Typography/BodyText/BodyText.scss

@@ -1,8 +1,8 @@
 .farm-bodytext {
-    &--1 {
-        letter-spacing: 0.5px;
-    }
-    &--2 {
-        letter-spacing: 0.25px;
-    }
-}
+	&--1 {
+		letter-spacing: 0.5px;
+	}
+	&--2 {
+		letter-spacing: 0.5px;
+	}
+}

package/src/components/Typography/Caption/Caption.scss

@@ -1,8 +1,8 @@
 .farm-subtitle {
-    &--1 {
-        letter-spacing: 0.4px;
-    }
-    &--2 {
-        letter-spacing: 0.15px;
-    }
-}
+	&--1 {
+		letter-spacing: 0.5px;
+	}
+	&--2 {
+		letter-spacing: 0.5px;
+	}
+}

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

@@ -19,7 +19,7 @@ export default {
 export const Primary = () => ({
 	data() {
 		return {
-			variations: ['regular', 'medium'],
+			variations: ['regular', 'medium', 'semiBold'],
 		};
 	},
 	template: `<div>

package/src/components/Typography/Caption/Caption.vue

@@ -22,7 +22,10 @@ export default Vue.extend({
 		/**
 		 * Variation of the caption
 		 */
-		variation: { type: String as PropType<'regular' | 'medium'>, default: 'medium' },
+		variation: {
+			type: String as PropType<'regular' | 'medium' | 'semiBold'>,
+			default: 'medium',
+		},
 	},
 	setup(props) {
 		const { variation } = toRefs(props);

package/src/components/Typography/Caption/configurations.ts

@@ -1,6 +1,7 @@
 const Keys = {
-	'regular': { weight: 400, size: 'sm' },
-	'medium': { weight: 500, size: 'sm' },
+	regular: { weight: 400, size: 'sm' },
+	medium: { weight: 500, size: 'sm' },
+	semiBold: { weight: 600, size: 'sm' },
 };
 
 export { Keys };

package/src/components/Typography/Heading/Heading.scss

@@ -1,20 +1,20 @@
 .farm-heading-- {
-    &h1 {
-        letter-spacing: -1.5px;
-    }
-    &h2 {
-        letter-spacing: -0.5px;
-    }
-    &h3 {
-        letter-spacing: 0;
-    }
-    &h4 {
-        letter-spacing: 0.25px;
-    }
-    &h5 {
-        letter-spacing: 0;
-    }
-    &h6 {
-        letter-spacing: 0.15px;
-    }
-}
+	&h1 {
+		letter-spacing: 0.5px;
+	}
+	&h2 {
+		letter-spacing: 0.5px;
+	}
+	&h3 {
+		letter-spacing: 0.5px;
+	}
+	&h4 {
+		letter-spacing: 0.75px;
+	}
+	&h5 {
+		letter-spacing: 0.75px;
+	}
+	&h6 {
+		letter-spacing: 0.75px;
+	}
+}

package/src/components/Typography/Heading/configurations.ts

@@ -1,9 +1,9 @@
 const Keys = {
-	1: { weight: 300, size: '60px' },
-	2: { weight: 300, size: '56px' },
-	3: { weight: 400, size: '48px' },
-	4: { weight: 400, size: '32px' },
-	5: { weight: 400, size: 'xl' },
+	1: { weight: 200, size: '60px' },
+	2: { weight: 300, size: '52px' },
+	3: { weight: 600, size: '44px' },
+	4: { weight: 500, size: '32px' },
+	5: { weight: 600, size: 'xl' },
 	6: { weight: 500, size: 'lg' },
 };
 

package/src/components/Typography/Small/Small.scss

@@ -0,0 +1,3 @@
+.farm-small {
+	letter-spacing: 0.5px;
+}

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

@@ -0,0 +1,34 @@
+import Small from './Small';
+
+export default {
+	title: 'Typography/Small',
+	component: Small,
+	parameters: {
+		docs: {
+			description: {
+				component: `Small<br />
+				selector: <em>farm-bodysmall</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			variations: ['regular', 'medium', 'bold'],
+		};
+	},
+	template: `<div >
+        <div v-for="variation in variations" :key="variation">
+            <farm-bodysmall  :variation="variation">
+                Small {{ variation }}
+            </farm-bodysmall>
+        </div>
+	</div>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/Typography/Small/Small.vue

@@ -0,0 +1,47 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		v-on="$listeners"
+		:weight="weight"
+		:size="size"
+		:key="key"
+		:class="{ 'farm-small': true, [`farm-small--${variation}`]: true }"
+	>
+		<slot></slot>
+	</farm-typography>
+</template>
+<script lang="ts">
+import Vue, { computed, ref, watch, toRefs, PropType } from 'vue';
+
+import { Keys } from './configurations';
+
+export default Vue.extend({
+	inheritAttrs: true,
+	name: 'farm-bodysmall',
+	props: {
+		/**
+		 * Variation of the small
+		 */
+		variation: { type: String as PropType<'regular' | 'medium' | 'bold'>, default: 'medium' },
+	},
+	setup(props) {
+		const { variation } = toRefs(props);
+		const key = ref(variation.value);
+
+		watch(
+			() => props,
+			() => {
+				key.value = variation.value;
+			}
+		);
+
+		const config = computed(() => Keys[key.value]);
+		const weight = computed(() => config.value.weight);
+		const size = computed(() => config.value.size);
+		return { weight, size, key, variation };
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'Small';
+</style>