@farm-investimentos/front-mfe-components 9.0.0 → 9.1.2

package/package.json

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

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

@@ -36,7 +36,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
-    
+
         ::v-deep i.mdi {
             font-size: 1rem;
         }
@@ -83,7 +83,6 @@
     }
 
     &:not(.farm-btn--plain):not(.farm-btn--disabled):active {
-        box-shadow: 0px 5px 5px -3px rgb(0 0 0 / 20%), 0px 8px 10px 1px rgb(0 0 0 / 14%), 0px 3px 14px 2px rgb(0 0 0 / 12%);
 
         &:before {
             opacity: 0.16;
@@ -214,6 +213,16 @@
 
 }
 
+.farm-btn--outlined.farm-btn--disabled {
+    border: 1px solid #D6D6D6;
+    color: #D6D6D6;
+    background-color: white;
+
+    i.mdi.farm-icon {
+        color: white;
+    }
+}
+
 .farm-btn--elevated {
     box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -15,6 +15,10 @@ export default {
 				selector: <em>farm-btn</em>
 				`,
 			},
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=2491%3A4486',
+			},
 		},
 		viewMode: 'docs',
 	},
@@ -224,3 +228,7 @@ export const Sizes = () => ({
         </div>
 	</div>`,
 });
+
+export const Elevated = () => ({
+	template: '<farm-btn :elevated="true">Elevated</farm-btn>',
+});

package/src/components/Buttons/DefaultButton/DefaultButton.vue

@@ -48,10 +48,23 @@ export default Vue.extend({
 		 * Outlined
 		 */
 		outlined: { type: Boolean, default: false },
+		/**
+		 * Is plain
+		 */
 		plain: { type: Boolean, default: false },
+		/**
+		 * Is disabled
+		 */
 		disabled: { type: Boolean, default: false },
+		/**
+		 * Is rounded
+		 */
 		rounded: { type: Boolean, default: false },
 		icon: { type: Boolean, default: false },
+		/**
+		 * Has elevation
+		 */
+		elevated: { type: Boolean, default: false },
 		type: {
 			type: String,
 			default: 'button',
@@ -61,9 +74,7 @@ export default Vue.extend({
 			default: null,
 		},
 		size: {
-			type: String as PropType<
-				'xs' | 'sm' | 'md' | 'lg' | 'xl'
-			>,
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'default',
 		},
 	},
@@ -78,7 +89,7 @@ export default Vue.extend({
 				});
 			return {
 				'farm-btn': true,
-				'farm-btn--elevated': this.isElevated,
+				'farm-btn--elevated': this.elevated,
 				'farm-btn--round': this.isRound,
 				'farm-btn--rounded': this.rounded,
 				'farm-btn--icon': this.icon,
@@ -89,17 +100,6 @@ export default Vue.extend({
 		isRound(): boolean {
 			return Boolean(this.icon || this.fab);
 		},
-		isElevated(): boolean {
-			return Boolean(
-				!this.icon &&
-					!this.text &&
-					!this.outlined &&
-					!this.depressed &&
-					!this.disabled &&
-					!this.plain &&
-					(this.elevation == null || Number(this.elevation) > 0)
-			);
-		},
 	},
 });
 </script>

package/src/components/Buttons/DefaultButton/__tests__/DefaultButton.spec.js

@@ -24,10 +24,6 @@ describe('DefaultButton component', () => {
 			expect(component.isRound).toBeTruthy();
 		});
 
-		it('get isElevated false', () => {
-			expect(component.isElevated).toBeTruthy();
-		});
-
 		it('get classes', () => {
 			expect(component.classes).toBeDefined();
 		});

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

@@ -53,4 +53,4 @@ export const Variations = () => ({
 			</farm-chip>
 		</div>
 	</div>`,
-});
+});

package/src/components/DataTableHeader/DataTableHeader.scss

@@ -1,13 +1,15 @@
 .header-text {
 	position: relative;
-	i {
+	color: var(--v-primary-base);
+	font-size: 12px;
+	.farm-icon {
 		position: absolute;
 		right: -20px;
 		top: -1px;
 	}
 
-	.v-icon {
-		&.v-icon--asc {
+	.farm-icon {
+		&.farm-icon--asc {
 			transform: rotateX(180deg);
 		}
 	}

package/src/components/DataTableHeader/DataTableHeader.vue

@@ -21,15 +21,16 @@
 				<span class="header-text" v-if="!isTHDataTableSelect(item)">
 					{{ item.text }}
 
-					<v-icon
+					<farm-icon
 						v-if="item.sortable && sortClick[$index].show"
 						v-bind:class="[
-							sortClick[$index][item.value] ? 'v-icon--desc' : 'v-icon--asc',
+							sortClick[$index][item.value] ? 'farm-icon--desc' : 'farm-icon--asc',
 						]"
-						small
+						size="sm"
+						color="gray"
 					>
-						mdi-sort-descending
-					</v-icon>
+						sort-descending
+					</farm-icon>
 				</span>
 
 				<span v-if="isTHDataTableSelect(item) && showCheckbox">
@@ -47,13 +48,11 @@
 <script>
 /* eslint-disable */
 import Vue from 'vue';
-import VIcon from 'vuetify/lib/components/VIcon';
 import VSimpleCheckbox from 'vuetify/lib/components/VCheckbox/VSimpleCheckbox';
 
 export default Vue.extend({
 	name: 'farm-datatable-header',
 	components: {
-		VIcon,
 		VSimpleCheckbox,
 	},
 	props: {

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -38,7 +38,7 @@ export const Primary = () => ({
 
 export const Secondary = () => ({
 	components: { DataTablePaginator },
-	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="19" :page="1" />',
+	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({

package/src/components/DatePicker/DatePicker.vue

@@ -136,7 +136,9 @@ export default Vue.extend({
 					timeZone: 'America/Sao_Paulo',
 				});
 
-				return this.min && locatedSelectedDate < locatedMinDate
+				console.log(this.getUniversalDate(locatedSelectedDate), this.getUniversalDate(locatedMinDate));
+
+				return this.min && this.getUniversalDate(locatedSelectedDate) < this.getUniversalDate(locatedMinDate)
 					? 'A data está fora do período permitido'
 					: true;
 			},
@@ -174,6 +176,11 @@ export default Vue.extend({
 				this.save();
 			}
 		},
+		getUniversalDate(d) {
+			const onlyDMY = d.split(' ')[0];
+			const arr = onlyDMY.split('/');
+			return new Date(arr[2], arr[1] -1, arr[0]);
+		},
 	},
 	computed: {
 		inputVal: {

package/src/components/IconBox/IconBox.scss

@@ -9,9 +9,21 @@
 	align-items: center;
 
 	@each $color in $colors {
-        &#{'--' + $color} {
-            background: var(--v-#{$color}-lighten5);
-        }
-    }
-
+		&#{'--' + $color} {
+			background: var(--v-#{$color}-lighten5);
+		}
+	}
 }
+
+.farm-icon-box--inverted.farm-icon-box {
+	@each $color in $colors {
+		&#{'--' + $color} {
+			background: var(--v-#{$color}-base);
+		}
+	}
+
+	.farm-icon.farm-icon--white {
+		color: white;
+	}
+
+}

package/src/components/IconBox/IconBox.stories.js

@@ -25,7 +25,7 @@ export const Primary = () => ({
 	</div>`,
 });
 
-export const IconBoxes = () => ({
+export const Colors = () => ({
 	data() {
 		return {
 			colors,
@@ -54,3 +54,20 @@ export const Sizes = () => ({
        
 	</div>`,
 });
+
+export const Inverted = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon-box
+			v-for="color of colors"
+			:key="'inverted_' + color"
+			:color="color"
+			:inverted="true"
+			icon="book"
+			 />
+	</div>`,
+});

package/src/components/IconBox/IconBox.vue

@@ -1,6 +1,15 @@
 <template>
-	<div :class="{ 'farm-icon-box': true, [cssColorClass]: true }" :size="size">
-		<farm-icon :color="color" :size="size">{{ iconParsed }}</farm-icon>
+	<div
+		:class="{
+			'farm-icon-box': true,
+			[cssColorClass]: true,
+			'farm-icon-box--inverted': inverted,
+		}"
+		:size="size"
+	>
+		<farm-icon :color="inverted ? 'white' : color" :size="size">{{
+			iconParsed
+		}}</farm-icon>
 	</div>
 </template>
 
@@ -28,6 +37,13 @@ export default Vue.extend({
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'md',
 		},
+		/**
+		 * INverted
+		 */
+		inverted: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		iconParsed() {

package/src/components/IdCaption/IdCaption.scss

@@ -0,0 +1,36 @@
+.idcaption {
+	display: flex;
+	
+	.farm-icon-box {
+		margin-right: 8px;
+	}
+
+	&__body {
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-content: flex-start;
+
+		&--single {
+			justify-content: center;
+		}
+
+		.farm-typography {
+			
+			margin-bottom: 0;
+			display: flex;
+			flex: none;
+			> span {
+				position: relative;
+			}
+		}
+
+		.farm-btn,
+		.farm-tooltip {
+			position: absolute;
+			right: -30px;
+			top: -8px;
+		}
+	}
+}

package/src/components/IdCaption/IdCaption.stories.js

@@ -0,0 +1,116 @@
+import { withDesign } from 'storybook-addon-designs';
+import IdCaption from './';
+
+export default {
+	title: 'Display/IdCaption',
+	component: IdCaption,
+    decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Id Caption<br />
+				selector: <em>farm-idcaption</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=4087%3A6463',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const Linkless = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    
+    `,
+});
+
+export const Iconless = () => ({
+	template: `
+    <farm-idcaption 
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoUpperText = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoBottomText = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline" 
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoTextToClip = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline" 
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="idcaption">
+		<farm-icon-box v-if="icon" :icon="icon" color="secondary" size="md" />
+		<div
+			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
+		>
+			<farm-caption bold variation="medium" v-if="hasTitle">
+				<span>
+					{{ $slots.title ? $slots.title[0].text : null }}
+					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">
+						<farm-icon size="xs">open-in-new</farm-icon>
+					</farm-btn>
+				</span>
+			</farm-caption>
+
+			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
+				<span>
+					{{ $slots.subtitle ? $slots.subtitle[0].text : null }}
+					<farm-copytoclipboard v-if="copyText" :toCopy="copyText" />
+				</span>
+			</farm-caption>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { computed } from 'vue';
+export default Vue.extend({
+	name: 'farm-idcaption',
+	props: {
+		/**
+		 * Icon
+		 */
+		icon: {
+			type: String,
+		},
+		/**
+		 * copy to clipboard
+		 */
+		copyText: {
+			type: String,
+		},
+		/**
+		 * Has link?
+		 */
+		link: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup(_, { slots }) {
+		const hasTitle = computed(() => slots.title);
+		const hasSubtitle = computed(() => slots.subtitle);
+
+		return { hasSubtitle, hasTitle };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import './IdCaption.scss';
+</style>

package/src/components/IdCaption/__tests__/IdCaption.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import IdCaption from '../IdCaption.vue';
+
+describe('FilePicker component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(IdCaption);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/IdCaption/index.ts

@@ -0,0 +1,3 @@
+import IdCaption from './IdCaption.vue';
+
+export default IdCaption;

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

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

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

@@ -0,0 +1,9 @@
+@import './theme-colors';
+
+:export {
+    @each $name,
+    $color in $theme-colors {
+        #{$name + "-lighten"}: themeColor($name, "lighten");
+        #{$name + "-darken"}: themeColor($name, "darken");
+    }
+}

package/src/examples/Colors.stories.js

@@ -0,0 +1,28 @@
+import baseThemeColors from '../configurations/_theme-colors-base.scss';
+import variationThemeColors from '../configurations/_theme-colors-variations.scss';
+import('./Colors.stories.scss');
+
+export default {
+	title: 'Colors/Pallete',
+};
+
+export const NamesAndValues = () => ({
+	data() {
+		return {
+			baseThemeColors: { ...baseThemeColors },
+			keys: Object.keys(baseThemeColors),
+			variationThemeColors: { ...variationThemeColors },
+		};
+	},
+	template: `<div class="palette-container">
+        <div
+            v-for="key in keys"
+            :key="key"
+        >
+            <farm-heading :type="5">{{ key }}</farm-heading>
+            <span :style="{ backgroundColor: baseThemeColors[key] }">Base {{ baseThemeColors[key] }}</span>
+            <span :style="{ backgroundColor: variationThemeColors[key + '-lighten'] }">Lighten: {{ variationThemeColors[key + '-lighten'] }}</span>
+            <span :style="{ backgroundColor: variationThemeColors[key + '-darken'], color: 'white' }">Darken: {{ variationThemeColors[key + '-darken'] }}</span>
+        </div>
+	</div>`,
+});

package/src/examples/Colors.stories.scss

@@ -0,0 +1,15 @@
+.palette-container {
+    display: flex;
+    flex-direction: row;
+
+    >div {
+        display: flex;
+        flex-direction: column;
+        width: calc(25% - 32px);
+        margin: auto 16px;
+
+        span {
+            padding: 4px 8px;
+        }
+    }
+}

package/src/main.ts

@@ -22,6 +22,7 @@ import CardContext from './components/CardContext';
 
 import DefaultButton from './components/Buttons/DefaultButton';
 import Collapsible from './components/Collapsible';
+import IdCaption from './components/IdCaption';
 
 export {
 	DataTableEmptyWrapper,
@@ -45,6 +46,7 @@ export {
 	IconBox,
 	CardContext,
 	Collapsible,
+	IdCaption,
 };
 
 export * from './components/AlertReload';

package/src/scss/Sticky-table.scss

@@ -10,7 +10,7 @@ $defaultLefts: 0, 4rem, 4rem;
 		tr td {
 			background-color: white;
 		}
-		tr th {
+		.v-data-table-header tr th {
 			color: var(--v-primary-base);
 			text-transform: uppercase;
 			font-weight: bold;