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

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>