@farm-investimentos/front-mfe-components 10.1.1 → 10.1.3

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "10.1.1",
+	"version": "10.1.3",
 	"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/Form/__tests__/Form.spec.js

@@ -6,7 +6,6 @@ describe('Form component', () => {
 
 	beforeEach(() => {
 		wrapper = shallowMount(Form);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

package/src/components/MainFilter/MainFilter.vue

@@ -7,7 +7,7 @@
 					<farm-caption>
 						{{ tooltip }}
 					</farm-caption>
-					<template v-slot:activator="">
+					<template v-slot:activator="{}">
 						<farm-icon size="sm" color="gray">help-circle</farm-icon>
 					</template>
 				</farm-tooltip>

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

@@ -6,15 +6,31 @@
     max-width: 100%;
     transition: .2s cubic-bezier(.4, 0, .2, 1);
 
+    >div {
+        flex: 1 1 auto;
+        max-width: 100%;
+        position: relative;
+    }
+
     @each $k in $justifications {
         &#{'--justify-' + $k} {
-            justify-content: $k;
+            >div {
+                justify-content: $k;
+            }
         }
     }
 
     @each $k in $directions {
         &#{'--direction-' + $k} {
-            flex-direction: $k;
+            >div {
+                flex-direction: $k;
+            }
+        }
+    }
+
+    @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,8 +6,11 @@
 			[`farm-box--justify-${justify}`]: justify,
 			[`farm-box--direction-${direction}`]: direction,
 		}"
+		:gutter="gutter"
 	>
-		<slot></slot>
+		<div>
+			<slot></slot>
+		</div>
 	</component>
 </template>
 <script lang="ts">
@@ -34,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/Box/__tests__/Box.spec.js

@@ -6,7 +6,6 @@ describe('Box component', () => {
 
 	beforeEach(() => {
 		wrapper = shallowMount(Box);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

package/src/components/layout/Col/__tests__/Col.spec.js

@@ -6,7 +6,6 @@ describe('Col component', () => {
 
 	beforeEach(() => {
 		wrapper = shallowMount(Col);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

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/components/layout/Row/__tests__/Row.spec.js

@@ -6,7 +6,6 @@ describe('Row component', () => {
 
 	beforeEach(() => {
 		wrapper = shallowMount(Row);
-		component = wrapper.vm;
 	});
 
 	test('Created hook', () => {

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'];