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

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,6 +1,30 @@
+@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;
+
+
 .farm-row {
     display: flex;
     flex-wrap: wrap;
     flex: 1 1 auto;
-    margin: -12px;
+    margin: 0 calc(#{gutter('lg')} * -1);
+
+    @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;
+        }
+    }
 }

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

@@ -7,8 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Row<br />
-				selector: <em>farm-row</em>
-				<span style="color: yellow;">wait</span>
+				selector: <em>farm-row</em><br />
+				<span style="color: green">ready for use</span>
 				`,
 			},
 		},
@@ -20,4 +20,49 @@ export const Primary = () => ({
 	template: '<farm-row>row content</farm-row>',
 });
 
-Primary.storyName = 'Basic';
+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">
+			<v-col md="6">
+				row align
+				{{ align }}
+			</v-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">
+			<v-col md="6">
+				row align-content
+				{{ align }}
+			</v-col>
+		</farm-row>
+	</div>`,
+});
+
+export const Justify = () => ({
+	data() {
+		return {
+			justifications: ['start', 'center', 'end', 'space-between', 'space-around'],
+		};
+	},
+	template: `<div>
+		<farm-row :justify="k" v-for="k in justifications" :key="'justify-_' + k">
+			<v-col md="6">
+				row justify {{ k }}
+			</v-col>
+		</farm-row>
+	</div>`,
+});

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

@@ -1,10 +1,18 @@
 <template>
-	<component v-bind:is="tag" class="farm-row">
+	<component
+		:is="tag"
+		:class="{
+			'farm-row': true,
+			[`farm-row--align-${align}`]: align,
+			[`farm-row--align-content-${alignContent}`]: alignContent,
+			[`farm-row--justify-${justify}`]: justify,
+		}"
+	>
 		<slot></slot>
 	</component>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-row',
@@ -13,6 +21,29 @@ 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: '',
+		},
 	},
 	inheritAttrs: true,
 });

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

@@ -12,8 +12,8 @@ $gutters: (
     'sm': 8px,
     "default": 12px,
     'md': 16px,
-    "lg": 36px,
-    "xl": 40px
+    "lg": 24px,
+    "xl": 32px
 );
 
 $fontSizes: (

package/src/main.ts

@@ -71,6 +71,8 @@ export * from './components/SelectModalOptions';
 export * from './components/ChipInviteStatus';
 export * from './components/Form';
 export * from './components/Label';
+export * from './components/List';
+export * from './components/ListItem';
 export * from './components/Logger';
 export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
@@ -83,7 +85,9 @@ export * from './components/TextField';
 export * from './components/Tooltip';
 export * from './components/Typography';
 
+export * from './components/layout/Col';
 export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
 export * from './components/layout/Row';
 export * from './components/layout/Line';
+