@farm-investimentos/front-mfe-components 14.0.0 → 14.0.1

package/package.json

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

package/src/components/layout/Col/Col.scss

@@ -24,13 +24,19 @@
         flex: 0 0 (100/12 * $i)+#{"%"};
         max-width: (100/12 * $i)+#{"%"};
     }
-}
 
-@for $i from 1 through 12 {
     .farm-col--xs-#{$i * 1} {
         flex: 0 0 (100/12 * $i)+#{"%"};
         max-width: (100/12 * $i)+#{"%"};
     }
+
+    .farm-col--offset-#{$i * 1} {
+        margin-left: (100/12 * $i)+#{"%"};
+    }
+}
+
+.farm-col--offset-0 {
+    margin-left: 0%;
 }
 
 @include fromXs {
@@ -39,6 +45,14 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-sm-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+    }
+
+    .farm-col--offset-sm-0 {
+        margin-left: 0%;
     }
 }
 
@@ -48,7 +62,17 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-md-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+
+    }
+
+    .farm-col--offset-md-0 {
+        margin-left: 0%;
     }
+
 }
 
 @include fromMd {
@@ -57,6 +81,14 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-lg-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+    }
+
+    .farm-col--offset-lg-0 {
+        margin-left: 0%;
     }
 }
 
@@ -66,5 +98,13 @@
             flex: 0 0 (100/12 * $i)+#{"%"};
             max-width: (100/12 * $i)+#{"%"};
         }
+
+        .farm-col--offset-xl-#{$i * 1} {
+            margin-left: (100/12 * $i)+#{"%"};
+        }
+    }
+
+    .farm-col--offset-xl-0 {
+        margin-left: 0%;
     }
 }

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

@@ -141,4 +141,34 @@ export const AlignSelf = () => ({
 		<farm-row style="height: 150px">
 			<farm-col :style="style" v-for="align in aligns" :key="align" :align-self="align">{{ align }}</farm-col>
 	</farm-row>`,
+});
+
+export const Offsets = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-box>
+		<farm-row>
+			<farm-col :style="style" md="1" offset-md="3">offset-md 3</farm-col>
+			<farm-col :style="style" md="1" offset-md="1">offset-md 1</farm-col>
+		</farm-row>
+		<br />
+		<farm-row>
+			<farm-col :style="style" md="1" offset-sm="1">offset-sm 1</farm-col>
+			<farm-col :style="style" md="1" offset-sm="4">offset-sm 4</farm-col>
+			<farm-col :style="style" md="1" offset-sm="2">offset-sm 2</farm-col>
+		</farm-row>
+		<br />
+		<farm-row>
+			<farm-col :style="style" md="1" offset-sm="1" offset-md="3">offset-sm 1 md 3</farm-col>
+		</farm-row>
+		<br />
+		<farm-row>
+			<farm-col :style="style" md="1" offset="1">offset 1</farm-col>
+			<farm-col :style="style" md="1" offset="1" offset-md="0">offset md 0</farm-col>
+		</farm-row>
+	</farm-box>`,
 });

package/src/components/layout/Col/Col.vue

@@ -11,6 +11,11 @@
 			[`farm-col--xs-${xs}`]: xs,
 			[`farm-col--cols-${cols}`]: cols,
 			'farm-col--no-gutters': noGutters,
+			[`farm-col--offset-${offset}`]: offset,
+			[`farm-col--offset-xl-${offsetXl}`]: offsetXl,
+			[`farm-col--offset-lg-${offsetLg}`]: offsetLg,
+			[`farm-col--offset-md-${offsetMd}`]: offsetMd,
+			[`farm-col--offset-sm-${offsetSm}`]: offsetSm,
 		}"
 	>
 		<slot></slot>
@@ -82,6 +87,51 @@ export default Vue.extend({
 			type: String as PropType<'start' | 'center' | 'end' | 'auto' | 'baseline' | 'stretch'>,
 			default: '',
 		},
+		/**
+		 * Sets the default offset for the column.
+		 */
+		offset: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on extra large and greater breakpoints.
+		 */
+		offsetXl: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on large and greater breakpoints.
+		 */
+		offsetLg: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on medium and greater breakpoints.
+		 */
+		offsetMd: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
+		/**
+		 * Changes the offset of the component on small and greater breakpoints.
+		 */
+		offsetSm: {
+			type: [String, Number] as PropType<
+				0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: null,
+		},
 	},
 	inheritAttrs: true,
 });

package/src/components/layout/ContainerFooter/Container.stories.js

@@ -21,4 +21,9 @@ export const Primary = () => ({
 	template: '<farm-container-footer>Footer content</farm-container-footer>',
 });
 
+export const noTop = () => ({
+	components: { 'farm-container-footer': ContainerFooter },
+	template: '<farm-container-footer noTop>Footer content</farm-container-footer>',
+});
+
 Primary.storyName = 'Basic';

package/src/components/layout/ContainerFooter/ContainerFooter.scss

@@ -1,9 +1,13 @@
 @import '../../../configurations/functions';
 
 .farm-container-footer {
-    width: 100%;
-    padding: gutter('lg');
-    padding-bottom: 0;
-    border-top: 1px solid var(--farm-stroke-base);
-    margin-top: gutter('lg');
-}
+	width: 100%;
+	padding: gutter('lg');
+	padding-bottom: 0;
+	border-top: 1px solid var(--farm-stroke-base);
+	margin-top: gutter('lg');
+
+	&.farm-container-footer--notop {
+		margin-top: gutter('none');
+	}
+}

package/src/components/layout/ContainerFooter/ContainerFooter.vue

@@ -1,5 +1,10 @@
 <template>
-	<footer class="farm-container-footer">
+	<footer
+		:class="{
+			'farm-container-footer': true,
+			'farm-container-footer--notop': noTop,
+		}"
+	>
 		<slot></slot>
 	</footer>
 </template>
@@ -8,6 +13,12 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'farm-container-footer',
+	props: {
+		noTop: {
+			type: Boolean,
+			default: false,
+		},
+	},
 	inheritAttrs: true,
 });
 </script>