@farm-investimentos/front-mfe-components 10.1.2 → 10.1.4

package/package.json

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

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

@@ -11,6 +11,9 @@ export default Vue.extend({
 	name: 'farm-card-content',
 	props: {
 		tag: { type: String, default: 'div' },
+		/**
+		 * Add gutter
+		 */
 		gutter: {
 			type: String as PropType<'none' | 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl'>,
 			default: 'default',

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.scss

@@ -0,0 +1,20 @@
+div {
+    border-top: 1px solid var(--farm-stroke-divider);
+    padding: 64px 24px 32px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    text-align: center;
+
+    p:first-of-type {
+        margin: 24px auto 16px;
+    }
+
+    p:last-child {
+        color: var(--farm-text-secondary);
+    }
+
+    .farm-icon.farm-icon--primary {
+        color: var(--farm-text-disabled);
+    }
+}

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

@@ -3,13 +3,24 @@ import DataTableEmptyWrapper from './DataTableEmptyWrapper.vue';
 export default {
 	title: 'Display/Table/DataTableEmptyWrapper',
 	component: DataTableEmptyWrapper,
+	parameters: {
+		docs: {
+			description: {
+				component: `Message for empty list/data<br />
+				selector: <em>farm-emptywrapper</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
-	template: '<DataTableEmptyWrapper />',
+	template: '<farm-emptywrapper />',
 });
 
 export const CustomTitles = () => ({
 	template:
-		'<DataTableEmptyWrapper title="Título customizado" subtitle="Subtítulo customizado" />',
+		'<farm-emptywrapper title="Título customizado" subtitle="Subtítulo customizado" />',
 });

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.vue

@@ -1,27 +1,25 @@
 <template>
-	<div align="center">
-		<v-icon>mdi-magnify</v-icon>
-		<p>{{ title }}</p>
-		<p>{{ subtitle }}</p>
+	<div>
+		<farm-icon size="lg">magnify</farm-icon>
+		<farm-caption bold>{{ title }}</farm-caption>
+		<farm-caption variation="regular" v-if="subtitle">{{ subtitle }}</farm-caption>
 	</div>
 </template>
-<script>
-import { VIcon } from 'vuetify/lib/components/VIcon';
-/**
- * Componente de lista vazia
- */
-export default {
-	name: 'DataTableEmptyWrapper',
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-emptywrapper',
 	props: {
 		/**
-		 * Título
+		 * Title
 		 */
 		title: {
 			type: String,
 			default: 'Nenhuma informação para exibir aqui',
 		},
-        /**
-		 * Subtítulo
+		/**
+		 * Subtitle
 		 */
 		subtitle: {
 			type: String,
@@ -29,31 +27,8 @@ export default {
 				'Tente filtrar novamente sua pesquisa ou faça uma importação para ver mais resultados',
 		},
 	},
-	components: {
-		VIcon,
-	},
-};
+});
 </script>
 <style scoped lang="scss">
-div {
-	border-top: 1px solid var(--v-gray-lighten2);
-	padding: 3rem 1rem;
-	.v-icon {
-		margin-top: 1rem;
-		font-size: 2.625rem;
-		color: var(--v-gray-lighten2);
-	}
-	p:nth-child(2) {
-		color: var(--v-primary-base);
-		font-weight: 700;
-		font-size: 0.75rem;
-		margin-top: 1rem;
-	}
-	p:nth-child(3) {
-		color: var(--v-gray-base);
-		font-weight: 400;
-		font-size: 0.625rem;
-		margin-bottom: 1rem;
-	}
-}
+@import './DataTableEmptyWrapper';
 </style>

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

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `Paginator with items per page select<br />
-				selector: <em>farm-datatable-paginator</em>
+				selector: <em>farm-datatable-paginator</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -22,10 +23,9 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { DataTablePaginator },
 	data() {
 		return {
-			totalPages: 8
+			totalPages: 8,
 		};
 	},
 	template: '<DataTablePaginator :totalPages="totalPages" :page="1" />',
@@ -33,46 +33,18 @@ export const Primary = () => ({
 		setTimeout(() => {
 			this.totalPages = 0;
 		}, 1000);
-	}
+	},
 });
 
 export const Secondary = () => ({
-	components: { DataTablePaginator },
 	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({
-	components: { DataTablePaginator },
 	template: '<DataTablePaginator :disabled="true":totalPages="19" :page="1" />',
 });
 
 export const CustomPerPage = () => ({
-	components: { DataTablePaginator },
 	template:
 		'<DataTablePaginator :perPageOptions="[1, 2, 4, 12, 27]" :totalPages="19" :page="1" />',
 });
-
-const parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%8D---Design-System?node-id=1503%3A921',
-	},
-};
-
-Primary.story = {
-	name: 'Básico',
-	parameters,
-};
-Secondary.story = {
-	name: 'Sem limite por páginas',
-	parameters,
-};
-Disabled.story = {
-	name: 'Desabilitado',
-	parameters,
-};
-CustomPerPage.story = {
-	name: 'Lista de registros por página customizada',
-	parameters,
-};
-

package/src/components/IdCaption/IdCaption.vue

@@ -4,7 +4,7 @@
 		<div
 			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
 		>
-			<farm-caption bold variation="medium" v-if="hasTitle">
+			<farm-caption variation="medium" v-if="hasTitle">
 				<span>
 					{{ $slots.title ? $slots.title[0].text : null }}
 					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">

package/src/components/layout/Box/Box.scss

@@ -27,4 +27,10 @@
             }
         }
     }
+
+    @each $k in map-keys($gutters) {
+        &#{'[gutter=' + $k + ']'} {
+            padding: map-get($gutters, $k);
+        }
+    }
 }

package/src/components/layout/Box/Box.stories.js

@@ -1,5 +1,6 @@
 import Box from './Box.vue';
 import { directions, justifications } from '../../../configurations/flexVariables';
+import gutters from '../../../configurations/gutters';
 
 export default {
 	title: 'Layout/Box',
@@ -64,3 +65,14 @@ export const Directions = () => ({
 		</farm-box>
 	</div>`,
 });
+
+export const Gutters = () => ({
+	data() {
+		return { gutters };
+	},
+	template: `<div style="width: 480px;">
+		<farm-box v-for="gutter in gutters" :key="gutter" :gutter="gutter" style="margin-bottom: 16px">
+			box with gutter {{ gutter }}
+		</farm-box>
+    </div>`,
+});

package/src/components/layout/Box/Box.vue

@@ -6,6 +6,7 @@
 			[`farm-box--justify-${justify}`]: justify,
 			[`farm-box--direction-${direction}`]: direction,
 		}"
+		:gutter="gutter"
 	>
 		<div>
 			<slot></slot>
@@ -36,6 +37,13 @@ export default Vue.extend({
 			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
 			default: '',
 		},
+		/**
+		 * Add gutter
+		 */
+		gutter: {
+			type: String as PropType<'none' | 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'ds'>,
+			default: 'none',
+		},
 	},
 	inheritAttrs: true,
 });

package/src/components/layout/DisplayBreakpoints.stories.mdx

@@ -93,8 +93,8 @@ The _mixins.scss contains mixins for media query, to abstract the breakpoints an
 @import '@farm-investimentos/front-mfe-components/src/configurations/_mixins.scss';
 
 @include fromSm { // min-width: 960px <br />
-    .product-limit {<br />
-        text-align: center;<br />
-    }<br />
+&emsp;.product-limit {<br />
+&emsp;&emsp;text-align: center;<br />
+&emsp;}<br />
 }
 </code>

package/src/components/layout/PropsValues.stories.mdx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Layout/Props Values" />
+
+# About
+Many components have props that accepts strings as values instead of passa a numeric values.
+Example:
+<code>
+&#x3C;my-component some-prop=&#x22;md&#x22; /&#x3E;<br />
+//"md" will be used as 12px in the CSS
+</code>
+<br /><br />
+
+## Gutter
+* none: 0
+* xs: 4px
+* sm: 8px
+* vuetify: 12px
+* md: 16px
+* lg: 24px
+* xl: 32px
+* default: 24px
+
+## Font Size
+* xs: 8px
+* sm: 12px
+* md: 14px
+* default: 16px
+* lg: 20px
+* xl: 24px

package/src/components/layout/Row/Row.scss

@@ -25,4 +25,8 @@
             justify-content: $k  !important;
         }
     }
+
+    &--no-gutters {
+        margin: 0;
+    }
 }

package/src/components/layout/Row/Row.stories.js

@@ -67,3 +67,7 @@ export const Justify = () => ({
 		</farm-row>
 	</div>`,
 });
+
+export const NoGutters = () => ({
+	template: '<farm-row :no-gutters="true">no gutters</farm-row>',
+});

package/src/components/layout/Row/Row.vue

@@ -6,6 +6,7 @@
 			[`farm-row--align-${align}`]: align,
 			[`farm-row--align-content-${alignContent}`]: alignContent,
 			[`farm-row--justify-${justify}`]: justify,
+			'farm-row--no-gutters': noGutters,
 		}"
 	>
 		<slot></slot>
@@ -44,10 +45,17 @@ export default Vue.extend({
 			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
 			default: '',
 		},
+		/**
+		 * Remove default gutters
+		 */
+		noGutters: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	inheritAttrs: true,
 });
 </script>
 <style lang="scss" scoped>
-@import 'Row.scss';
+@import 'Row';
 </style>

package/src/configurations/_variables.scss

@@ -10,10 +10,11 @@ $gutters: (
     "none": 0,
     "xs": 4px,
     "sm": 8px,
-    "default": 12px,
+    "vuetify": 12px,
     "md": 16px,
     "lg": 24px,
-    "xl": 32px
+    "xl": 32px,
+    "default": 24px,
 );
 
 $fontSizes: (

package/src/configurations/gutters.ts

@@ -1 +1 @@
-export default ['none', 'xs', 'sm', 'md', 'lg', 'xl'];
+export default ['none', 'xs', 'sm', 'vuetify', 'md', 'lg', 'xl',  'default'];