@farm-investimentos/front-mfe-components 9.4.1 → 10.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "9.4.1",
+	"version": "10.0.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -29,10 +29,10 @@
 	"devDependencies": {
 		"@farm-investimentos/front-mfe-libs-ts": "^1.0.9",
 		"@socheatsok78/storybook-addon-vuetify": "^0.1.9",
-		"@storybook/addon-actions": "^6.5.8",
-		"@storybook/addon-essentials": "^6.5.8",
-		"@storybook/addon-links": "^6.5.8",
-		"@storybook/vue": "^6.5.8",
+		"@storybook/addon-actions": "6.5.8",
+		"@storybook/addon-essentials": "6.5.8",
+		"@storybook/addon-links": "6.5.8",
+		"@storybook/vue": "6.5.8",
 		"@types/jest": "^24.9.1",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",

package/src/components/Card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-	<component class="farm-card" v-bind:is="tag">
+	<component class="farm-card" :is="tag">
 		<slot></slot>
 	</component>
 </template>

package/src/components/Card/CardContent/CardContent.vue

@@ -1,5 +1,5 @@
 <template>
-	<component v-bind:is="tag" class="farm-card__content" :gutter="gutter">
+	<component :is="tag" class="farm-card__content" :gutter="gutter">
 		<slot></slot>
 	</component>
 </template>

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

@@ -5,7 +5,11 @@ describe('CopyToClipboard component', () => {
 	let wrapper;
 
 	beforeEach(() => {
-		wrapper = shallowMount(CopyToClipboard);
+		wrapper = shallowMount(CopyToClipboard, {
+			propsData: {
+				toCopy: 'test',
+			},
+		});
 	});
 
 	test('Created hook', () => {

package/src/components/DatePicker/DatePicker.vue

@@ -136,8 +136,6 @@ export default Vue.extend({
 					timeZone: 'America/Sao_Paulo',
 				});
 
-				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;

package/src/components/Form/Form.stories.js

@@ -144,3 +144,28 @@ export const InitInvalid = () => ({
         </farm-form>
     `,
 });
+
+export const RadioGroupReset = () => ({
+	data() {
+		return {
+			checkedValue: 1,
+			buttons: [
+				{ label: 'Button 1', id: 1 },
+				{ label: 'Button 2', id: 2 },
+				{ label: 'Button 3', id: 3 },
+			],
+			validForm: false,
+			styles,
+		};
+	},
+	template: `
+        <farm-form v-model="validForm" :style="[styles.vForm]" ref="form">
+			<farm-radio-group v-model="checkedValue" column :buttons="buttons" />
+
+            <div class="footer" :style="[styles.footer]">
+				<farm-btn color="secondary" outlined @click="$refs.form.reset()" class="mr-3">Reset</farm-btn>
+				<farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
+            </div>
+        </farm-form>
+    `,
+});

package/src/components/List/List.stories.js

@@ -0,0 +1,29 @@
+import { withDesign } from 'storybook-addon-designs';
+import List from './List.vue';
+
+export default {
+	title: 'Display/List/List',
+	component: List,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+
+		docs: {
+			description: {
+				component: `List<br />
+				selector: <em>farm-list</em>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: `<farm-list>
+		<farm-listitem clickable hoverColor="primary">primary</farm-listitem>
+		<farm-listitem clickable hoverColor="extra-1" hoverColorVariation="lighten">extra 1 lighten</farm-listitem>
+		<farm-listitem clickable hoverColor="error" hoverColorVariation="lighten">
+			<farm-icon size="sm" color="error">trash-can</farm-icon>
+			<farm-typography color="error" tag="span">Error</farm-typography>
+		</farm-listitem>
+	</farm-list>`,
+});

package/src/components/List/List.vue

@@ -0,0 +1,16 @@
+<template>
+	<ul>
+		<slot></slot>
+	</ul>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-list',
+	setup() {},
+});
+</script>
+<style lang="scss" scoped>
+@import './List';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import List from '../List';
+
+describe('List component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(List);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/List/index.ts

@@ -0,0 +1,4 @@
+import List from './List.vue';
+
+export { List };
+export default List;

package/src/components/ListItem/ListItem.scss

@@ -0,0 +1,37 @@
+@import '../../configurations/theme-colors';
+
+.farm-listitem {
+    list-style-type: none;
+    transition: background-color 300ms linear;
+    padding: 8px;
+    height: 36px;
+    display: flex;
+    align-items: center;
+
+    &--clickable {
+        cursor: pointer;
+    }
+
+    >a {
+        text-decoration: none;
+    }
+
+    &:hover {
+
+        @each $color in $theme-colors-list {
+
+            &#{'.farm-listitem--' + $color + '-base'} {
+                background-color: themeColor($color);
+            }
+
+            &#{'.farm-listitem--' + $color + '-lighten'} {
+                background-color: themeColor($color, 'lighten');
+            }
+
+            &#{'.farm-listitem--' + $color + '-darken'} {
+                background-color: themeColor($color, 'darken');
+            }
+        }
+    }
+
+}

package/src/components/ListItem/ListItem.stories.js

@@ -0,0 +1,70 @@
+import { withDesign } from 'storybook-addon-designs';
+import ListItem from './ListItem.vue';
+
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+
+const colors = Object.keys(baseThemeColors);
+const variations = ['base', 'darken', 'lighten'];
+
+export default {
+	title: 'Display/List/ListItem',
+	component: ListItem,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+
+		docs: {
+			description: {
+				component: `ListItem<br />
+				selector: <em>farm-listitem</em>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-listitem>aaa</farm-listitem>',
+});
+
+export const HoverColors = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+		<div class="chips-container" v-for="color in colors" :key="color" style="width: 33.3%; margin-bottom: 32px;">
+			<h4>{{ color }}</h4>
+			<farm-listitem
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:hoverColor="color"
+				:hoverColorVariation="variation"
+				>
+				{{ color }} {{ variation }}
+			</farm-listitem>
+		</div>
+	</div>`,
+});
+
+export const ClickableCursor = () => ({
+	template: '<farm-listitem clickable>Clickable cursor</farm-listitem>',
+});
+
+export const ClickListener = () => ({
+	methods: {
+		onClick() {
+			alert('Clicked')
+		}
+	},
+	template:
+		`<farm-listitem
+			clickable
+			hoverColor="error"
+			hoverColorVariation="lighten"
+			@click="onClick"
+		>
+			try me
+		</farm-listitem>`,
+});

package/src/components/ListItem/ListItem.vue

@@ -0,0 +1,82 @@
+<template>
+	<li
+		@click="onClick"
+		:class="{
+			'farm-listitem': true,
+			[cssColorWithVariation]: cssColorWithVariation,
+			'farm-listitem--clickable': clickable || to,
+		}"
+	>
+		<router-link :to="to" v-if="to">
+			<slot></slot>
+		</router-link>
+		<template v-else>
+			<slot></slot>
+		</template>
+	</li>
+</template>
+<script lang="ts">
+import Vue, { computed, PropType, toRefs } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-listitem',
+	props: {
+		to: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Color on hover
+		 */
+		hoverColor: {
+			type: [String, null] as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'neutral'
+				| 'error'
+				| 'warning'
+				| 'info'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: null,
+		},
+		/**
+		 * Color variation on hover
+		 */
+		hoverColorVariation: {
+			type: [String, null] as PropType<'base' | 'lighten' | 'darken'>,
+			default: 'base',
+		},
+		/**
+		 * Is clickable
+		 */
+		clickable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const { hoverColor, hoverColorVariation } = toRefs(props);
+
+		const cssColorWithVariation = computed((): String => {
+			if (!hoverColor.value) {
+				return null;
+			}
+			return `farm-listitem--${hoverColor.value}-${hoverColorVariation.value}`;
+		});
+
+		const onClick = () => {
+			emit('click');
+		};
+
+		return {
+			cssColorWithVariation,
+			onClick,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './ListItem';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import ListItem from '../ListItem';
+
+describe('ListItem component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ListItem);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/ListItem/index.ts

@@ -0,0 +1,4 @@
+import ListItem from './ListItem.vue';
+
+export { ListItem };
+export default ListItem;

package/src/components/Logger/Logger.vue

@@ -1,9 +1,11 @@
 <template>
 	<section class="logger">
 		<template v-for="(item, index) in items">
-			<LoggerItem :item="item" :key="index" />
+			<farm-logger-item :item="item" :key="`logger_item_${index}`" />
 			<div
+				v-if="hasDivider(index)"
 				:class="{
+					'logger__divider': true,
 					'logger__divider--success': isPreviousLogAndCurrentLogSuccess(index),
 					'logger__divider--error': isPreviousLogAndCurrentLogError(index),
 					'logger__divider--success-to-error':
@@ -11,8 +13,6 @@
 					'logger__divider--error-to-success':
 						isPreviousLogSuccessAndCurrentLogError(index),
 				}"
-				v-if="hasDivider(index)"
-				class="logger__divider"
 				:key="'divider_' + index"
 			></div>
 		</template>
@@ -21,11 +21,9 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import ILoggerItem from './LoggerItem/ILoggerItem';
-import LoggerItem from './LoggerItem/';
 
 export default Vue.extend({
 	name: 'farm-logger',
-	components: { LoggerItem },
 	props: {
 		/*
 		 * List of logger items
@@ -57,6 +55,6 @@ export default Vue.extend({
 	},
 });
 </script>
-<style lang="sass" scoped>
-@import './Logger.scss'
+<style lang="scss" scoped>
+@import './Logger';
 </style>

package/src/components/Modal/Modal.scss

@@ -36,6 +36,7 @@
         max-height: calc(100vh - 64px);
         overflow-y: auto;
         width: 100%;
+        padding: 0 16px;
     }
 
     &--header {

package/src/components/ModalPromptUser/ModalPromptUser.scss

@@ -0,0 +1,3 @@
+section.modal-content {
+    margin: 32px 0 16px;
+}

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -10,7 +10,8 @@ export default {
 		docs: {
 			description: {
 				component: `Modal Prompt User to Confirm<br />
-				selector: <em>farm-prompt-user</em>`,
+				selector: <em>farm-prompt-user</em><br />
+				<span style="color: green;">ready for use</span>`,
 			},
 		},
 		design: {
@@ -28,10 +29,10 @@ export const Primary = () => ({
 	},
 	template: `<div>
 		<farm-prompt-user match="CONFIRMAR" title="Título" subtitle="Digite CONFIRMAR para habilitar" v-model="showPrompt" />
-		click:		
-		<v-btn color="secondary" @click="showPrompt = true;">
+			click:
+			<farm-btn color="primary" @click="showPrompt = true;">
 			reabrir
-			</v-btn>
+			</farm-btn>
 		</div>`,
 });
 export const Error = () => ({
@@ -42,8 +43,8 @@ export const Error = () => ({
 	},
 	template: `<div>
 		<farm-prompt-user match="REMOVER" title="Título" subtitle="Digite REMOVER para habilitar" v-model="showPrompt" confirmColor="error" confirmLabel="Remover" />
-			<v-btn color="secondary" @click="showPrompt = true;">
+			<farm-btn color="primary" @click="showPrompt = true;">
 			reabrir
-			</v-btn>
+			</farm-btn>
 		</div>`,
 });

package/src/components/ModalPromptUser/ModalPromptUser.vue

@@ -1,37 +1,35 @@
 <template>
-	<v-dialog content-class="modal-default modal-default-small" v-model="inputVal">
-		<DialogHeader :title="title" @onClose="close" />
-
-		<v-main>
-			<section class="mt-9">
-				<PromptUserToConfirm
+	<farm-modal v-model="inputVal" size="sm" :offsetTop="48" :offsetBottom="68">
+		<template v-slot:header>
+			<DialogHeader :title="title" @onClose="close" />
+		</template>
+		<template v-slot:content>
+			<section class="modal-content">
+				<farm-promptusertoconfirm
 					v-if="inputVal"
-					:match="match"
 					v-model="canConfirm"
+					:match="match"
 					:title="subtitle"
 				/>
 			</section>
+		</template>
+
+		<template v-slot:footer>
 			<DialogFooter
-				@onClose="close"
 				:confirmColor="confirmColor"
 				:confirmLabel="confirmLabel"
-				@onConfirm="confirm"
 				:isConfirmDisabled="!canConfirm"
+				@onConfirm="confirm"
+				@onClose="close"
 			/>
-		</v-main>
-	</v-dialog>
+		</template>
+	</farm-modal>
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import { VDialog } from 'vuetify/lib/components/VDialog';
-import { VMain } from 'vuetify/lib/components/VMain';
 
 export default Vue.extend({
 	name: 'farm-prompt-user',
-	components: {
-		VDialog,
-		VMain,
-	},
 	props: {
 		/**
 		 * Habilita/desabilita o modal
@@ -101,3 +99,6 @@ export default Vue.extend({
 	},
 });
 </script>
+<style lang="scss" scoped>
+@import './ModalPromptUser';
+</style>

package/src/components/PromptUserToConfirm/PromptUserToConfirm.vue

@@ -1,12 +1,12 @@
 <template>
 	<v-form v-model="formVal" autocomplete="off">
-		<div v-html="title"></div>
+		<farm-caption v-html="title" color="gray" />
 		<v-row>
 			<v-col cols="12" sm="12" class="mt-3 v-col-fieldset-default">
 				<v-text-field
+					v-model="matchInput"
 					id="form-confirm-remove"
 					color="secondary"
-					v-model="matchInput"
 					outlined
 					dense
 					:rules="[rules.checkRemove]"

package/src/components/RadioGroup/RadioGroup.scss

@@ -1,35 +1,65 @@
+@import '../../configurations/theme-colors';
+
 .farm-radio-group {
     border: none;
     cursor: default;
     display: flex;
     width: 100%;
+
     &__item {
         font-size: 16px;
-        line-height: 1.1;
+        line-height: 18px;
         cursor: pointer;
         display: grid;
         grid-template-columns: 16px auto;
-        gap: 8px;
-        color: rgba(0,0,0,.6);
-        margin-top: 16px;
-        margin-right: 16px;
+        gap: 0;
+        color: rgba(0, 0, 0, .6);
+        margin-right: 32px;
+    }
+
+    label {
+        cursor: pointer;
+    }
+
+    input[type="radio"].checked {
+        border: 1.5px solid black;
     }
-}
 
-.farm-radio-group--column {
-    flex-direction: column;
+    &--vertical {
+        flex-direction: column;
+        .farm-radio-group__item {
+            margin-right: 24px;
+            margin-top: 16px;
+            &:first-of-type {
+                margin-top: 0;
+            }
+        }
+    }
+
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            input[type="radio"]::before {
+                box-shadow: inset 16px 16px themeColor($color);
+            }
+
+            input[type="radio"].checked {
+                border-color: themeColor($color);
+            }
+        }
+    }
 }
 
+
 input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
     background-color: #ffffff;
     margin: 0;
     font: inherit;
-    color: rgba(0,0,0,.6);
+    color: rgba(0, 0, 0, .6);
     width: 18px;
     height: 18px;
-    border: 1.5px solid rgba(0,0,0,.6);
+    border: 1.5px solid rgba(0, 0, 0, .6);
     border-radius: 50%;
     transform: translate(-12px);
     display: grid;
@@ -44,11 +74,10 @@ input[type="radio"]::before {
     border-radius: 50%;
     transform: scale(0);
     transition: 120ms transform ease-in-out;
-    box-shadow: inset 16px 16px var(--radio-group-color);
     background-color: CanvasText;
 }
 
-input[type="radio"]:checked::before {
+input[type="radio"].checked::before {
     transform: scale(1);
 }
 
@@ -57,13 +86,9 @@ input[type="radio"]:focus {
     outline-offset: none;
 }
 
-input[type="radio"]:checked {
-    border: 1.5px solid var(--radio-group-color);
-}
-
 input[type='radio']:hover {
-    box-shadow: 0px 0px 0px 8px  rgba(0, 0, 0, 0.1);
-    background-color:  rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.1);
     border-radius: 50%;
     opacity: 1;
 }
@@ -74,9 +99,10 @@ input[type='radio']:active {
 
 @keyframes pulse {
     from {
-      box-shadow:  0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
     }
+
     to {
-      box-shadow:  0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
     }
 }