@farm-investimentos/front-mfe-components 10.0.0 → 10.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "10.0.0",
+	"version": "10.1.0",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -29,10 +29,10 @@
 	"devDependencies": {
 		"@farm-investimentos/front-mfe-libs-ts": "^1.0.9",
 		"@socheatsok78/storybook-addon-vuetify": "^0.1.9",
-		"@storybook/addon-actions": "^6.5.8",
-		"@storybook/addon-essentials": "^6.5.8",
-		"@storybook/addon-links": "^6.5.8",
-		"@storybook/vue": "^6.5.8",
+		"@storybook/addon-actions": "6.5.8",
+		"@storybook/addon-essentials": "6.5.8",
+		"@storybook/addon-links": "6.5.8",
+		"@storybook/vue": "6.5.8",
 		"@types/jest": "^24.9.1",
 		"@typescript-eslint/eslint-plugin": "^4.18.0",
 		"@typescript-eslint/parser": "^4.18.0",

package/src/components/Card/Card.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Card<br />
 				selector: <em>farm-card</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Checkbox/Checkbox.stories.js

@@ -12,7 +12,7 @@ export default {
 			description: {
 				component: `Checkbox<br />
 				selector: <em>farm-checkbox</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Chip/Chip.stories.js

@@ -13,7 +13,7 @@ export default {
 			description: {
 				component: `Chip<br />
 				selector: <em>farm-chip</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Form/Form.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Form<br />
 				selector: <em>farm-form</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Icon/Icon.stories.js

@@ -14,7 +14,7 @@ export default {
 			description: {
 				component: `Icon<br />
                 selector: <em>farm-icon<em><br />
-                <span style="color: green;">ready for use</span>`,
+                <span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/List/List.vue

@@ -8,7 +8,6 @@ import Vue from 'vue';
 
 export default Vue.extend({
 	name: 'farm-list',
-	props: {},
 	setup() {},
 });
 </script>

package/src/components/Loader/Loader.stories.ts

@@ -10,7 +10,7 @@ export default {
 			description: {
 				component: `Loader<br />
 				selector: <em>farm-loader</em><br />
-				<span style="color: green;">ready for use</span>`,
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/Logger/Logger.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Logger<br />
 				selector: <em>farm-logger</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Modal/Modal.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Modal<br />
 				selector: <em>farm-modal</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -11,7 +11,7 @@ export default {
 			description: {
 				component: `Modal Prompt User to Confirm<br />
 				selector: <em>farm-prompt-user</em><br />
-				<span style="color: green;">ready for use</span>`,
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 		design: {

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -11,7 +11,7 @@ export default {
 			description: {
 				component: `RadioGroup<br />
 				selector: <em>farm-radio-group</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 
 				`,
 			},

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -14,7 +14,7 @@ export default {
 			description: {
 				component: `TableContextMenu<br />
 				selector: <em>farm-context-menu</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/{examples/Container → components/layout}/Basic.stories.js

@@ -14,23 +14,29 @@ export const Primary = () => ({
 	template: '<farm-container>content</farm-container>',
 });
 
-export const Secondary = () => ({
+export const Structure = () => ({
 	template: `
 	<farm-container>
-		<div>
+		<farm-box>
 			Content<br />
 			Content<br />
 			Content<br />
 			Content<br />
 			Content<br />
-		</div>
+		</farm-box>
 		<farm-row>
-			<v-col md="6">
+			<v-col md="6" lg="3">
 				coluna 1
 			</v-col>
-			<v-col md="6">
+			<v-col md="6" lg="3">
 				coluna 2
 			</v-col>
+			<v-col md="6" lg="3">
+				coluna 3
+			</v-col>
+			<v-col md="6" lg="3">
+				coluna 4
+			</v-col>
 		</farm-row>
 		<farm-row>
 			<farm-container-footer>

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

@@ -0,0 +1,20 @@
+@import '../../../configurations/variables';
+
+.farm-box {
+    display: flex;
+    flex: 1 0 auto;
+    max-width: 100%;
+    transition: .2s cubic-bezier(.4, 0, .2, 1);
+
+    @each $k in $justifications {
+        &#{'--justify-' + $k} {
+            justify-content: $k;
+        }
+    }
+
+    @each $k in $directions {
+        &#{'--direction-' + $k} {
+            flex-direction: $k;
+        }
+    }
+}

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

@@ -0,0 +1,66 @@
+import Box from './Box.vue';
+import { directions, justifications } from '../../../configurations/flexVariables';
+
+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 Justify = () => ({
+	data() {
+		return {
+			justifications,
+		};
+	},
+	template: `<div>
+		<farm-box :justify="k" v-for="k in justifications" :key="'justify-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
+			<div>
+				justify {{ k }}
+			</div>
+			<div>
+				another div
+			</div>
+		</farm-box>
+	</div>`,
+});
+
+export const Directions = () => ({
+	data() {
+		return {
+			directions,
+		};
+	},
+	template: `<div>
+		<farm-box :direction="k" v-for="k in directions" :key="'direction-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
+			<div>
+			direction {{ k }}
+			</div>
+			<div>
+				another div
+			</div>
+		</farm-box>
+	</div>`,
+});

package/src/components/layout/Box/Box.vue

@@ -0,0 +1,43 @@
+<template>
+	<component
+		:is="tag"
+		:class="{
+			'farm-box': true,
+			[`farm-box--justify-${justify}`]: justify,
+			[`farm-box--direction-${direction}`]: direction,
+		}"
+	>
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-box',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+		/**
+		 * Applies the flex-direction css property
+		 */
+		direction: {
+			type: String as PropType<'row' | 'row-reverse' | 'column' | 'column-reverse'>,
+			default: 'row',
+		},
+		/**
+		 * Applies the justify-content css property
+		 */
+		justify: {
+			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
+			default: '',
+		},
+	},
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'Box';
+</style>

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

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils';
+import Box from '../Box';
+
+describe('Box component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Box);
+		component = wrapper.vm;
+	});
+
+	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/Container/Container.scss

@@ -3,18 +3,19 @@
 
 .farm-container {
     width: 100%;
-    padding: 12px;
+    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: calc(100% - 24px);
-        margin: gutter('lg') auto;
+        max-width: 100%;
+        margin: gutter('lg');
         padding: gutter('lg');
-        @include addShadow;
+        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;
 
         // deprecated
         .container-main__footer-buttons-right {

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

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Container<br />
 				selector: <em>farm-container</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

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

@@ -1,6 +1,6 @@
 <template>
 	<section class="farm-container">
-		<div class="elevation-2">
+		<div>
 			<slot></slot>
 		</div>
 	</section>

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

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Container Footer<br />
-				selector: <em>farm-container-footer</em>
+				selector: <em>farm-container-footer</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

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

@@ -0,0 +1,100 @@
+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.
+
+<code>
+@import '@farm-investimentos/front-mfe-components/src/configurations/_mixins.scss';
+
+@include fromSm { // min-width: 960px <br />
+    .product-limit {<br />
+        text-align: center;<br />
+    }<br />
+}
+</code>

package/src/components/layout/Row/Row.scss

@@ -1,7 +1,5 @@
 @import '../../../configurations/functions';
-$aligns: start, center, end, baseline, stretch;
-$align-contents: start, center, end, space-between, space-around, stretch;
-$justifications: start, center, end, space-between, space-around;
+@import '../../../configurations/variables';
 
 
 .farm-row {

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

@@ -1,4 +1,5 @@
 import Row from './Row.vue';
+import { justifications } from '../../../configurations/flexVariables';
 
 export default {
 	title: 'Layout/Row',
@@ -8,7 +9,7 @@ export default {
 			description: {
 				component: `Row<br />
 				selector: <em>farm-row</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
@@ -55,7 +56,7 @@ export const AlignContent = () => ({
 export const Justify = () => ({
 	data() {
 		return {
-			justifications: ['start', 'center', 'end', 'space-between', 'space-around'],
+			justifications,
 		};
 	},
 	template: `<div>

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

@@ -12,8 +12,7 @@
 	</component>
 </template>
 <script lang="ts">
-import Vue from 'vue';
-import { PropType } from 'vue/types/v3-component-props';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-row',
@@ -22,16 +21,25 @@ export default Vue.extend({
 		 * 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: '',

package/src/configurations/_mixins.scss

@@ -28,6 +28,12 @@
     }
 }
 
+@mixin fromLg {
+    @media (min-width: 1904px) {
+        @content;
+    }
+}
+
 @mixin addShadow {
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
 }

package/src/configurations/_variables.scss

@@ -25,4 +25,9 @@ $fontSizes: (
     "xl": 24px
 );
 
-$fontWeights: 100, 200, 300, 400, 500, 600, 700;
+$fontWeights: 100, 200, 300, 400, 500, 600, 700;
+
+$aligns: start, center, end, baseline, stretch;
+$align-contents: start, center, end, space-between, space-around, stretch;
+$justifications: start, center, end, space-between, space-around;
+$directions: row, row-reverse, column, column-reverse;

package/src/configurations/flexVariables.ts

@@ -0,0 +1,4 @@
+const directions = ['row', 'row-reverse', 'column', 'column-reverse'];
+const justifications = ['start', 'center', 'end', 'space-between', 'space-around'];
+
+export { directions, justifications };

package/src/main.ts

@@ -85,6 +85,7 @@ export * from './components/TextField';
 export * from './components/Tooltip';
 export * from './components/Typography';
 
+export * from './components/layout/Box';
 export * from './components/layout/Col';
 export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';