@farm-investimentos/front-mfe-components-vue3 0.0.1

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

@@ -0,0 +1,41 @@
+import Box from './Box.vue';
+import gutters from '../../../configurations/gutters';
+
+export default {
+	title: 'Layout/Box',
+	component: Box,
+	parameters: {
+		docs: {
+			description: {
+				component: `Box<br />
+				selector: <em>farm-box</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `<div>
+		<farm-box>box</farm-box>
+	</div>`,
+});
+
+export const Tag = () => ({
+	template: `<div>
+		<farm-box tag="section">tag: section</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

@@ -0,0 +1,37 @@
+<template>
+	<component
+		:is="tag"
+		:class="{
+			'farm-box': true,
+		}"
+		:gutter="gutter"
+	>
+		<div>
+			<slot></slot>
+		</div>
+	</component>
+</template>
+<script lang="ts">
+import {  PropType } from 'vue';
+
+export default {
+	name: 'farm-box',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+		/**
+		 * Add gutter
+		 */
+		gutter: {
+			type: String as PropType<'none' | 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl' | 'ds'>,
+			default: 'none',
+		},
+	},
+	inheritAttrs: true,
+};
+</script>
+<style lang="scss" scoped>
+@import 'Box';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import Box from '../Box';
+
+describe('Box component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Box);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/layout/Box/index.ts

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

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

@@ -0,0 +1,110 @@
+@import '../../../configurations/mixins.scss';
+@import '../../../configurations/functions.scss';
+
+.farm-col {
+    padding: 0 gutter('vuetify');
+    flex-basis: 0;
+    flex-grow: 1;
+    max-width: 100%;
+    width: 100%;
+
+    &--no-gutters {
+        padding: 0;
+    }
+
+    @each $k in $aligns {
+        &#{'--align-' + $k} {
+            align-self: $k !important;
+        }
+    }
+}
+
+@for $i from 1 through 12 {
+    .farm-col--cols-#{$i * 1} {
+        flex: 0 0 (100/12 * $i)+#{"%"};
+        max-width: (100/12 * $i)+#{"%"};
+    }
+
+    .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 {
+    @for $i from 1 through 12 {
+        .farm-col--sm-#{$i * 1} {
+            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%;
+    }
+}
+
+@include fromSm {
+    @for $i from 1 through 12 {
+        .farm-col--md-#{$i * 1} {
+            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 {
+    @for $i from 1 through 12 {
+        .farm-col--lg-#{$i * 1} {
+            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%;
+    }
+}
+
+@include fromLg {
+    @for $i from 1 through 12 {
+        .farm-col--xl-#{$i * 1} {
+            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

@@ -0,0 +1,174 @@
+import Col from './Col.vue';
+import { aligns } from '../../../configurations/flexVariables';
+
+export default {
+	title: 'Layout/Col',
+	component: Col,
+	parameters: {
+		docs: {
+			description: {
+				component: `Col<br />
+					selector: <em>farm-col</em><br />
+					<span style="color: var(--farm-primary-base);">ready for use</span>
+`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+const style = {
+	border: '1px solid var(--farm-extra-1-darken)',
+	backgroundColor: 'var(--farm-extra-1-lighten)',
+};
+
+const items = Array.from(Array(12).keys());
+
+export const Primary = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-col>
+	<farm-col :style="style">col</farm-col>
+	</farm-col>`,
+});
+
+export const Cols = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-row>
+				<farm-col v-for="item in items" :key="'col_' + item" :cols="item + 1" :style="style">{{item + 1}}</farm-col>
+			</farm-row>`,
+});
+
+export const Xl = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-row>
+			<farm-col v-for="item in items" :key="'xl_' + item" :xl="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
+});
+
+export const Lg = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-row>
+			<farm-col v-for="item in items" :key="'lg_' + item" :lg="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
+});
+
+export const Md = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-row>
+			<farm-col v-for="item in items" :key="'md_' + item" :md="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
+});
+
+export const Sm = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-row>
+			<farm-col v-for="item in items" :key="'sm_' + item" :sm="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
+});
+
+export const Xs = () => ({
+	data() {
+		return {
+			style,
+			items
+		};
+	},
+	template: `<farm-row>
+			<farm-col v-for="item in items" :key="'xs_' + item" :xs="item + 1" :style="style">{{item + 1}}</farm-col>
+		</farm-row>`,
+});
+
+export const Combination = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<div>
+		<farm-col cols="9" lg="5" md="4" sm="3" :style="style">lg: 5 - md: 4 - sm: 3</farm-col>
+	</div>`,
+});
+export const TagP = () => ({
+	template: '<farm-col tag="p">col</farm-col>',
+});
+
+export const NoGutters = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: '<farm-col :no-gutters="true" :style="style">col</farm-col>',
+});
+
+export const AlignSelf = () => ({
+	data() {
+		return {
+			style,
+			aligns,
+		};
+	},
+	template: `
+		<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

@@ -0,0 +1,141 @@
+<template>
+	<component
+		:is="tag"
+		:class="{
+			'farm-col': true,
+			[`farm-col--align-${alignSelf}`]: alignSelf,
+			[`farm-col--xl-${xl}`]: xl,
+			[`farm-col--lg-${lg}`]: lg,
+			[`farm-col--md-${md}`]: md,
+			[`farm-col--sm-${sm}`]: sm,
+			[`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>
+	</component>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-col',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+		/**
+		 * Sets the default number of columns the component extends
+		 */
+		cols: {
+			type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
+			default: null,
+		},
+		/**
+		 * Extra-large breakpoint
+		 */
+		xl: {
+			type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
+			default: null,
+		},
+		/**
+		 * Large breakpoint
+		 */
+		lg: {
+			type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
+			default: null,
+		},
+		/**
+		 * Medium breakpoint
+		 */
+		md: {
+			type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
+			default: null,
+		},
+		/**
+		 * Small breakpoint
+		 */
+		sm: {
+			type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
+			default: null,
+		},
+		/**
+		 * Extra-small breakpoint
+		 */
+		xs: {
+			type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12>,
+			default: null,
+		},
+		/**
+		 * Remove default gutters
+		 */
+		noGutters: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Applies the align-items css property.
+		 */
+		alignSelf: {
+			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,
+};
+</script>
+<style lang="scss" scoped>
+@import 'Col';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import Col from '../Col';
+
+describe('Col component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Col);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/layout/Col/index.ts

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

package/src/components/layout/Container/Container.scss

@@ -0,0 +1,35 @@
+@import '../../../configurations/functions';
+@import '../../../configurations/_mixins';
+
+.farm-container {
+    width: 100%;
+    padding: 0;
+    margin-right: auto;
+    margin-left: auto;
+    max-width: 100%;
+
+    >div {
+        border-top: 1px solid var(--farm-stroke-base);
+        background-color: white;
+        border-radius: 8px;
+        max-width: 100%;
+        margin: 40px;
+        padding: gutter('lg');
+        box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%) !important;
+        overflow: hidden;
+
+        // deprecated
+        .container-main__footer-buttons-right {
+            margin: 0;
+            margin-top: 1rem;
+            padding: 0;
+            justify-content: flex-end;
+
+            .v-btn {
+                margin-left: 1rem;
+            }
+        }
+
+        min-height: 128px;
+    }
+}

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

@@ -0,0 +1,23 @@
+import Container from './Container.vue';
+
+export default {
+	title: 'Layout/Container',
+	component: Container,
+	parameters: {
+		docs: {
+			description: {
+				component: `Container<br />
+				selector: <em>farm-container</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-container>content</farm-container>',
+});
+
+Primary.storyName = 'Basic';

package/src/components/layout/Container/Container.vue

@@ -0,0 +1,18 @@
+<template>
+	<section class="farm-container">
+		<div>
+			<slot></slot>
+		</div>
+	</section>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-container',
+	inheritAttrs: true,
+};
+</script>
+<style lang="scss" scoped>
+@import 'Container.scss';
+</style>

package/src/components/layout/Container/index.ts

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

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

@@ -0,0 +1,29 @@
+import ContainerFooter from './ContainerFooter.vue';
+
+export default {
+	title: 'Layout/ContainerFooter',
+	component: ContainerFooter,
+	parameters: {
+		docs: {
+			description: {
+				component: `Container Footer<br />
+				selector: <em>farm-container-footer</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-container-footer': ContainerFooter },
+	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

@@ -0,0 +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');
+
+	&.farm-container-footer--notop {
+		margin-top: gutter('none');
+	}
+}