@farm-investimentos/front-mfe-components 9.1.1 → 9.2.1

package/package.json

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

package/src/components/ButtonToggle/ButtonToggle.scss

@@ -0,0 +1,14 @@
+.farm-button-toggle {
+    .farm-btn {
+        border-radius: 0;
+    }
+    > .farm-btn:first-of-type {
+        border-radius: 4px 0 0 4px;
+    }
+    > .farm-btn:last-child {
+        border-radius: 0 4px 4px 0;
+    }
+    > .farm-btn:not(:last-child) {
+        border-right: 0;
+    }
+}

package/src/components/ButtonToggle/ButtonToggle.stories.js

@@ -0,0 +1,49 @@
+import ButtonToggle from './ButtonToggle.vue';
+
+export default {
+	title: 'Interactions/Button Toggle',
+	component: ButtonToggle,
+	parameters: {
+		docs: {
+			description: {
+				component: `Button Toggle<br />
+				selector: <em>farm-button-toggle</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3772%3A5973',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			buttons: [{ label: 'label 1' }, { label: 'label 2' }, { label: 'label 3' }],
+		};
+	},
+	template: `
+    <div>
+        <farm-button-toggle :buttons="buttons" />
+    </div>`,
+});
+
+export const BindModel = () => ({
+	data() {
+		return {
+			buttons: [{ label: 'label 1' }, { label: 'label 2' }, { label: 'label 3' }],
+			currentItem: 1,
+		};
+	},
+	template: `
+    <div>
+        <farm-button-toggle
+            v-model="currentItem"
+            :buttons="buttons"
+        />
+        selected item: {{ currentItem }}
+    </div>`,
+});

package/src/components/ButtonToggle/ButtonToggle.vue

@@ -0,0 +1,52 @@
+<template>
+	<div class="farm-button-toggle">
+		<farm-btn
+			v-for="(button, index) in buttons"
+			:key="`button_toggle_` + index"
+			:color="isSelected(index) ? 'secondary' : 'gray'"
+			:outlined="!isSelected(index)"
+			@click="setValue(index)"
+		>
+			{{ button.label }}
+		</farm-btn>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { PropType, ref } from 'vue';
+import IButtonToggle from './IButtonToggle';
+export default Vue.extend({
+	name: 'farm-button-toggle',
+	props: {
+		/**
+		 * Array of buttons
+		 */
+		buttons: {
+			type: Array as PropType<Array<IButtonToggle>>,
+			default: () => [],
+		},
+		/**
+		 * v-model binding
+		 */
+		value: { default: null },
+	},
+	setup(props, { emit }) {
+		const inputVal = ref(props.value);
+
+		const setValue = (index: number) => {
+			inputVal.value = index;
+			emit('input', inputVal.value);
+		};
+
+		const isSelected = (index: number) => index === inputVal.value;
+
+		return {
+			inputVal,
+			setValue,
+			isSelected,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './ButtonToggle';
+</style>

package/src/components/ButtonToggle/IButtonToggle.ts

@@ -0,0 +1,5 @@
+interface IButtonToggle {
+	label: String;
+}
+
+export default IButtonToggle;

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

@@ -0,0 +1,18 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonToggle from '../ButtonToggle.vue';
+
+describe('ButtonToggle component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ButtonToggle, {
+			propsData: {
+				buttons: [],
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/ButtonToggle/index.ts

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

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.scss

@@ -55,9 +55,13 @@ ul.farm-paginator {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    margin: 1rem 1.5rem 0;
+    margin: 0;
 
     &.hidden-perpageoptions {
         justify-content: flex-end;
     }
+}
+
+.farm-paginator--gutter {
+    margin: 1rem 1.5rem 0;
 }

package/src/components/DataTablePaginator/DataTablePaginator.vue

@@ -1,7 +1,10 @@
 <template>
 	<section
-		class="v-data-table-custom-footer"
-		:class="{ 'hidden-perpageoptions': hidePerPageOptions }"
+		:class="{
+			'v-data-table-custom-footer': true,
+			'hidden-perpageoptions': hidePerPageOptions,
+			'farm-paginator--gutter': hasGutter,
+		}"
 	>
 		<div v-if="!hidePerPageOptions">
 			<v-select
@@ -34,7 +37,7 @@
 			</li>
 
 			<li>
-				<button :disabled="currentPage === totalPages || disabled"  @click="nextPage">
+				<button :disabled="currentPage === totalPages || disabled" @click="nextPage">
 					<farm-icon color="gray" size="sm">chevron-right</farm-icon>
 				</button>
 			</li>
@@ -89,6 +92,10 @@ export default Vue.extend({
 			type: Number,
 			default: 10,
 		},
+		hasGutter: {
+			type: Boolean,
+			default: true,
+		},
 	},
 	methods: {
 		range(from: number, to: number) {

package/src/components/Icon/Icon.scss

@@ -22,4 +22,4 @@
             font-size: $value;
         }
     }
-}
+}

package/src/components/Icon/Icon.stories.js

@@ -1,7 +1,7 @@
 import { withDesign } from 'storybook-addon-designs';
-import Icon from './Icon';
 import colors from '../../configurations/colors';
 import sizes from '../../configurations/sizes';
+import iconsList from './icons_list';
 
 import('./Icons.stories.scss');
 
@@ -26,10 +26,7 @@ export const Atom = () => ({
 	</div>`,
 });
 
-export const Icons = () => ({
-	components: {
-		'farm-icon': Icon,
-	},
+export const Colors = () => ({
 	data() {
 		return {
 			colors,
@@ -43,9 +40,6 @@ export const Icons = () => ({
 });
 
 export const Sizes = () => ({
-	components: {
-		'farm-icon': Icon,
-	},
 	data() {
 		return {
 			sizes,
@@ -85,9 +79,29 @@ export const Sizes = () => ({
 	</div>`,
 });
 
-Icons.story = {
-	name: 'Colors',
-};
-Sizes.story = {
-	name: 'Sizes',
-};
+export const ListOfIcons = () => ({
+	data() {
+		return {
+			iconsList: [...iconsList],
+			filterKey: '',
+		};
+	},
+	watch: {
+		filterKey(newValue) {
+			this.iconsList = [...iconsList].filter(
+				item => item.toLowerCase().indexOf(newValue.toLowerCase()) >= 0
+			);
+		},
+	},
+	template: `<div>
+        <farm-textfield v-model="filterKey" style="margin: 0 auto; width: 240px;" />
+        <div class="icons-container__list">
+            <div v-for="icon of iconsList" :key="'icon_' + icon">
+                <farm-icon>
+                    {{ icon }}
+                </farm-icon>
+                <span>{{ icon }}</span>
+            </div>
+        </div>
+    </div>`,
+});

package/src/components/Icon/Icons.stories.scss

@@ -11,4 +11,21 @@
         margin-right: 1rem;
         align-items: center;
     }
+}
+
+.icons-container__list {
+    display: flex;
+  flex-wrap: wrap;
+    
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        width: 120px;
+        height: 100px;
+        text-align: center;
+        span {
+            font-size: 12px;
+        }
+    }
 }