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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "10.0.0",
+	"version": "10.0.1",
 	"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/List/List.vue

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

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

@@ -14,7 +14,7 @@ export const Primary = () => ({
 	template: '<farm-container>content</farm-container>',
 });
 
-export const Secondary = () => ({
+export const Structure = () => ({
 	template: `
 	<farm-container>
 		<div>
@@ -25,12 +25,18 @@ export const Secondary = () => ({
 			Content<br />
 		</div>
 		<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/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.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: green">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.stories.js

@@ -8,7 +8,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: green">ready for use</span>
 				`,
 			},
 		},

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);
 }