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

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

@@ -0,0 +1,27 @@
+<template>
+	<footer
+		:class="{
+			'farm-container-footer': true,
+			'farm-container-footer--notop': noTop,
+		}"
+	>
+		<slot></slot>
+	</footer>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-container-footer',
+	props: {
+		noTop: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	inheritAttrs: true,
+};
+</script>
+<style lang="scss" scoped>
+@import 'ContainerFooter.scss';
+</style>

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

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

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

@@ -0,0 +1,90 @@
+import { Meta } from '@storybook/addon-docs';
+
+<Meta title="Layout/Display Breakpoints" />
+
+# Display Breakpoints
+
+<table width="100%">
+	<thead>
+		<tr>
+			<th>Device</th>
+			<th>Code</th>
+			<th>Type</th>
+			<th>Range</th>
+		</tr>
+	</thead>
+	<tbody>
+		<tr>
+			<td>
+				<span>
+					<i className="mdi mdi-cellphone" />
+					&nbsp; Extra small
+				</span>
+			</td>
+			<td>
+				<strong>xs</strong>
+			</td>
+			<td>Small to large phone</td>
+			<td>&lt; 600px</td>
+		</tr>
+		<tr>
+			<td>
+				<i className="mdi mdi-tablet" />
+				&nbsp;
+				<span>Small</span>
+			</td>
+			<td>
+				<strong>sm</strong>
+			</td>
+			<td>Small to medium tablet</td>
+			<td>600px &gt; &lt; 960px</td>
+		</tr>
+		<tr>
+			<td>
+				<i className="mdi mdi-laptop" />
+				&nbsp;
+				<span>Medium</span>
+			</td>
+			<td>
+				<strong>md</strong>
+			</td>
+			<td>Large tablet to laptop</td>
+			<td>960px &gt; &lt; 1264px*</td>
+		</tr>
+		<tr>
+			<td>
+				<i className="mdi mdi-monitor" />
+				&nbsp;
+				<span>Large</span>
+			</td>
+			<td>
+				<strong>lg</strong>
+			</td>
+			<td>Desktop</td>
+			<td>1264px &gt; &lt; 1904px*</td>
+		</tr>
+		<tr>
+			<td>
+				<i className="mdi mdi-television" />
+				&nbsp;
+				<span>Extra large</span>
+			</td>
+			<td>
+				<strong>xl</strong>
+			</td>
+			<td>4k and ultra-wide</td>
+			<td>&gt; 1904px*</td>
+		</tr>
+	</tbody>
+	<tfoot>
+		<tr>
+			<td colSpan="4">
+				<em> * -16px on desktop for browser scrollbar</em>
+			</td>
+		</tr>
+	</tfoot>
+</table>
+
+## SCSS Helpers
+
+The _mixins.scss contains mixins for media query, to abstract the breakpoints and create queries for different breakpoints.

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

@@ -0,0 +1,138 @@
+export default {
+	title: 'Layout/Grid System',
+	parameters: {
+		docs: {
+			description: {
+				component: `Grid Syste<br />
+`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+const style = {
+	border: '1px solid var(--farm-extra-1-darken)',
+	backgroundColor: 'var(--farm-extra-1-lighten)',
+};
+
+export const MixBreakpoints = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<div>
+		<farm-col lg="9" md="6" sm="3" :style="style">lg: 9 - md: 6 - sm: 3</farm-col>
+	</div>`,
+});
+
+export const Xl = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+				<farm-col xl="4" :style="style">1 of 3</farm-col>
+				<farm-col xl="4" :style="style">2 of 3</farm-col>
+				<farm-col xl="4" :style="style">3 of 3</farm-col>
+				<farm-col xl="6" :style="style">1 of 2</farm-col>
+				<farm-col xl="6" :style="style">2 of 2</farm-col>
+				<farm-col xl="12" :style="style">1 of 1</farm-col>
+				<farm-col xl="2" :style="style">1 of 6</farm-col>
+				<farm-col xl="2" :style="style">2 of 6</farm-col>
+				<farm-col xl="2" :style="style">3 of 6</farm-col>
+				<farm-col xl="2" :style="style">4 of 6</farm-col>
+				<farm-col xl="2" :style="style">5 of 6</farm-col>
+				<farm-col xl="2" :style="style">6 of 6</farm-col>
+			</farm-row>`,
+});
+export const Lg = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col lg="4" :style="style">1 of 3</farm-col>
+		<farm-col lg="4" :style="style">2 of 3</farm-col>
+		<farm-col lg="4" :style="style">3 of 3</farm-col>
+		<farm-col lg="6" :style="style">1 of 2</farm-col>
+		<farm-col lg="6" :style="style">2 of 2</farm-col>
+		<farm-col lg="12" :style="style">1 of 1</farm-col>
+		<farm-col lg="2" :style="style">1 of 6</farm-col>
+		<farm-col lg="2" :style="style">2 of 6</farm-col>
+		<farm-col lg="2" :style="style">3 of 6</farm-col>
+		<farm-col lg="2" :style="style">4 of 6</farm-col>
+		<farm-col lg="2" :style="style">5 of 6</farm-col>
+		<farm-col lg="2" :style="style">6 of 6</farm-col>
+	</farm-row>`,
+});
+export const Md = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col md="4" :style="style">1 of 3</farm-col>
+		<farm-col md="4" :style="style">2 of 3</farm-col>
+		<farm-col md="4" :style="style">3 of 3</farm-col>
+		<farm-col md="6" :style="style">1 of 2</farm-col>
+		<farm-col md="6" :style="style">2 of 2</farm-col>
+		<farm-col md="12" :style="style">1 of 1</farm-col>
+		<farm-col md="2" :style="style">1 of 6</farm-col>
+		<farm-col md="2" :style="style">2 of 6</farm-col>
+		<farm-col md="2" :style="style">3 of 6</farm-col>
+		<farm-col md="2" :style="style">4 of 6</farm-col>
+		<farm-col md="2" :style="style">5 of 6</farm-col>
+		<farm-col md="2" :style="style">6 of 6</farm-col>
+		</farm-row>`,
+});
+
+export const Sm = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col sm="4" :style="style">1 of 3</farm-col>
+		<farm-col sm="4" :style="style">2 of 3</farm-col>
+		<farm-col sm="4" :style="style">3 of 3</farm-col>
+		<farm-col sm="6" :style="style">1 of 2</farm-col>
+		<farm-col sm="6" :style="style">2 of 2</farm-col>
+		<farm-col sm="12":style="style" >1 of 1</farm-col>
+		<farm-col sm="2" :style="style">1 of 6</farm-col>
+		<farm-col sm="2" :style="style">2 of 6</farm-col>
+		<farm-col sm="2" :style="style" >3 of 6</farm-col>
+		<farm-col sm="2" :style="style">4 of 6</farm-col>
+		<farm-col sm="2" :style="style">5 of 6</farm-col>
+		<farm-col sm="2" :style="style">6 of 6</farm-col>
+		</farm-row>`,
+});
+
+export const Xs = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col xs="4" :style="style">1 of 3</farm-col>
+		<farm-col xs="4" :style="style">2 of 3</farm-col>
+		<farm-col xs="4" :style="style">3 of 3</farm-col>
+		<farm-col xs="6" :style="style">1 of 2</farm-col>
+		<farm-col xs="6" :style="style">2 of 2</farm-col>
+		<farm-col xs="12":style="style" >1 of 1</farm-col>
+		<farm-col xs="2" :style="style">1 of 6</farm-col>
+		<farm-col xs="2" :style="style">2 of 6</farm-col>
+		<farm-col xs="2" :style="style">3 of 6</farm-col>
+		<farm-col xs="2" :style="style">4 of 6</farm-col>
+		<farm-col xs="2" :style="style">5 of 6</farm-col>
+		<farm-col xs="2" :style="style">6 of 6</farm-col>
+	</farm-row>`,
+});
+
+

package/src/components/layout/Line/Line.scss

@@ -0,0 +1,25 @@
+@import '../../../configurations/theme-colors';
+.farm-line {
+	width: 100%;
+	border: none;
+	border-bottom: 1px solid var(--farm-stroke-base);
+	height: 1px;
+	margin-top: 0;
+	&--spacing {
+		margin-top: 16px;
+	}
+
+	@each $color in $theme-colors-list {
+		&#{'.farm-line--' + $color} {
+			border-bottom-color: var(--farm-#{$color}-base);
+
+			&.farm-line--lighten {
+				border-bottom-color: themeColor($color, 'lighten');
+			}
+
+			&.farm-line--darken {
+				border-bottom-color: themeColor($color, 'darken');
+			}
+		}
+	}
+}

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

@@ -0,0 +1,53 @@
+import Line from './Line.vue';
+import baseThemeColors from '../../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+const variations = ['base', 'lighten', 'darken'];
+
+export default {
+	title: 'Layout/Line',
+	component: Line,
+	parameters: {
+		docs: {
+			description: {
+				component: `Line<br />
+				selector: <em>farm-line</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-line />',
+});
+
+export const NoSpacing = () => ({
+	template: '<farm-line :noSpacing="true" />',
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12">
+			<h4 style="margin-top:15px">Default</h4>
+			<farm-line />
+		</farm-col>
+		<farm-col cols="12" v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin-top:15px">{{ color }}</h4>
+			<farm-line 
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:color="color"
+				:variation="variation" 
+			/>
+		</farm-col>
+	</farm-row>`,
+});

package/src/components/layout/Line/Line.vue

@@ -0,0 +1,58 @@
+<template>
+	<hr
+		:class="{
+			'farm-line': true,
+			'farm-line--spacing': !noSpacing,
+			['farm-line--' + color]: !!color,
+			'farm-line--lighten': variation === 'lighten',
+			'farm-line--darken': variation === 'darken',
+		}"
+	/>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-line',
+	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'default',
+		},
+		/**
+		 * Variation Color
+		 */
+		variation: {
+			type: String,
+			default: 'base',
+		},
+		/**
+		 * Remove default margins
+		 */
+		noSpacing: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './Line';
+</style>

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

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

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

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

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

@@ -0,0 +1,42 @@
+@import '../../../configurations/functions';
+@import '../../../configurations/variables';
+
+
+.farm-row {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    
+    margin: 0 -#{gutter('vuetify')};
+
+    @each $k in $aligns {
+        &#{'--align-' + $k} {
+            align-items: $k!important;
+        }
+    }
+
+    @each $k in $align-contents {
+        &#{'--align-content-' + $k} {
+            align-content: $k!important;
+        }
+    }
+
+    @each $k in $justifications {
+        &#{'--justify-' + $k} {
+            justify-content: $k!important;
+        }
+    }
+
+    &--no-default-gutters {
+        margin: 0;
+    }
+
+    &--extra-decrease {
+        margin: 0 -#{2 * gutter('vuetify')};
+    }
+
+    &--y-grid-gutters > .farm-col {
+        margin-top: 12px;
+        margin-bottom: 12px;
+    }
+}

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

@@ -0,0 +1,112 @@
+import Row from './Row.vue';
+import { justifications } from '../../../configurations/flexVariables';
+
+export default {
+	title: 'Layout/Row',
+	component: Row,
+	parameters: {
+		docs: {
+			description: {
+				component: `Row<br />
+				selector: <em>farm-row</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-row>row content</farm-row>',
+});
+
+export const Align = () => ({
+	data() {
+		return {
+			aligns: ['start', 'center', 'end', 'baseline', 'stretch'],
+		};
+	},
+	template: `<div>
+		<farm-row :align="align" v-for="align in aligns" :key="'align_' + align">
+			<farm-col md="6">
+				row align
+				{{ align }}
+			</farm-col>
+		</farm-row>
+	</div>`,
+});
+
+export const AlignContent = () => ({
+	data() {
+		return {
+			aligns: ['start', 'center', 'end', 'space-between', 'space-around', 'stretch'],
+		};
+	},
+	template: `<div>
+		<farm-row :align-content="align" v-for="align in aligns" :key="'align-content-_' + align">
+			<farm-col md="6">
+				row align-content
+				{{ align }}
+			</farm-col>
+		</farm-row>
+	</div>`,
+});
+
+export const Justify = () => ({
+	data() {
+		return {
+			justifications,
+		};
+	},
+	template: `<div>
+		<farm-row :justify="k" v-for="k in justifications" :key="'justify-_' + k">
+			<farm-col md="6">
+				row justify {{ k }}
+			</farm-col>
+		</farm-row>
+	</div>`,
+});
+
+export const NoDefaultGutters = () => ({
+	template: '<farm-row :no-default-gutters="true">no gutters</farm-row>',
+});
+
+export const DefaultGrid = () => ({
+	template: `<div>
+		<farm-row>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 1</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 2</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 3</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 4</div>
+			</farm-col>
+		</farm-row>
+	</div>`,
+});
+
+
+export const yGridGutters = () => ({
+	template: `<div>
+		<farm-row y-grid-gutters>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 1</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 2</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 3</div>
+			</farm-col>
+			<farm-col md="6">
+				<div style="border:1px solid red;">col 4</div>
+			</farm-col>
+		</farm-row>
+	</div>`,
+});

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

@@ -0,0 +1,77 @@
+<template>
+	<component
+		:is="tag"
+		:class="{
+			'farm-row': true,
+			[`farm-row--align-${align}`]: align,
+			[`farm-row--align-content-${alignContent}`]: alignContent,
+			[`farm-row--justify-${justify}`]: justify,
+			'farm-row--no-default-gutters': noDefaultGutters,
+			'farm-row--extra-decrease': extraDecrease,
+			'farm-row--y-grid-gutters': yGridGutters,
+		}"
+	>
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-row',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+		/**
+		 * Applies the align-items css property.
+		 */
+		align: {
+			type: String as PropType<'start' | 'center' | 'end' | 'baseline' | 'stretch'>,
+			default: '',
+		},
+		/**
+		 * applies the align-content css property
+		 */
+		alignContent: {
+			type: String as PropType<
+				'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch'
+			>,
+			default: '',
+		},
+		/**
+		 * Applies the justify-content css property
+		 */
+		justify: {
+			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
+			default: '',
+		},
+		/**
+		 * Remove default gutters
+		 */
+		noDefaultGutters: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Extra decrease margin
+		 */
+		extraDecrease: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Add gutters to farm-cols in Y axis
+		 */
+		yGridGutters: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	inheritAttrs: true,
+};
+</script>
+<style lang="scss" scoped>
+@import 'Row';
+</style>