@farm-investimentos/front-mfe-components 11.3.1 → 11.4.0

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

@@ -1,4 +1,5 @@
 import Col from './Col.vue';
+import { aligns } from '../../../configurations/flexVariables';
 
 export default {
 	title: 'Layout/Col',
@@ -7,36 +8,151 @@ export default {
 		docs: {
 			description: {
 				component: `Col<br />
-				selector: <em>farm-col</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
-				`,
+					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)',
+};
+
 export const Primary = () => ({
-	template: '<farm-col>col</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: '<farm-col :style="style">col</farm-col>',
 });
 export const Xl = () => ({
-	template: '<farm-col xl="3">xl: 3</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+				<farm-col xl="4" :style="style">4</farm-col>
+				<farm-col xl="6" :style="style">6</farm-col>
+				<farm-col xl="12" :style="style">12</farm-col>
+				<farm-col xl="2" :style="style">2</farm-col>
+			</farm-row>`,
 });
 export const Lg = () => ({
-	template: '<farm-col lg="4">lg: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col lg="4" :style="style">4</farm-col>
+		<farm-col lg="6" :style="style">6</farm-col>
+		<farm-col lg="12" :style="style">12</farm-col>
+		<farm-col lg="2" :style="style">2</farm-col>
+	</farm-row>`,
 });
 export const Md = () => ({
-	template: '<farm-col md="6">md: 6</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col md="4" :style="style">4</farm-col>
+		<farm-col md="6" :style="style">6</farm-col>
+		<farm-col md="12" :style="style">12</farm-col>
+		<farm-col md="2" :style="style">2</farm-col>
+		</farm-row>`,
 });
+
 export const Sm = () => ({
-	template: '<farm-col sm="4">sm: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+			<farm-col sm="4" :style="style">4</farm-col>
+			<farm-col sm="6" :style="style">6</farm-col>
+			<farm-col sm="12" :style="style">12</farm-col>
+			<farm-col sm="2" :style="style">2</farm-col>
+		</farm-row>`,
 });
+
 export const Xs = () => ({
-	template: '<farm-col xs="4">xs: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<farm-row>
+		<farm-col xs="4" :style="style">4</farm-col>
+		<farm-col xs="6" :style="style">6</farm-col>
+		<farm-col xs="12" :style="style">12</farm-col>
+		<farm-col xs="2" :style="style">2</farm-col>
+	</farm-row>`,
 });
+
 export const Combination = () => ({
-	template: '<farm-col xl="3" xs="4">xl: 3 - xs: 4</farm-col>',
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<div>
+		<farm-col 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 CompareToVCol = () => ({
+	data() {
+		return {
+			style,
+		};
+	},
+	template: `<div>
+
+		<h4>LG 3</h4>
+		<farm-col lg="3" :style="style">farm</farm-col>
+		<v-col lg="3" :style="style">v-col</v-col>
+
+		<h4>MD 3</h4>
+		<farm-col md="3" :style="style">farm</farm-col>
+		<v-col md="3" :style="style">v-col</v-col>
+
+
+		<h4>SM 3</h4>
+		<farm-col sm="3" :style="style">farm</farm-col>
+		<v-col sm="3" :style="style">v-col</v-col>
+		</div>`,
+});
+
+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>`,
 });

package/src/components/layout/Col/Col.vue

@@ -3,11 +3,13 @@
 		: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--no-gutters': noGutters,
 		}"
 	>
 		<slot></slot>
@@ -23,36 +25,55 @@ export default Vue.extend({
 		 * Html tag
 		 */
 		tag: { type: String, default: 'div' },
+		/**
+		 * Extra-large breakpoint
+		 */
 		xl: {
-			type: [String, Number, Boolean] as PropType<
-				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-			>,
-			default: false,
+			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, Boolean] as PropType<
-				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-			>,
-			default: false,
+			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, Boolean] as PropType<
-				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-			>,
-			default: false,
+			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, Boolean] as PropType<
-				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-			>,
-			default: false,
+			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, Boolean] as PropType<
-				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
-			>,
+			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: '',
+		},
 	},
 	inheritAttrs: true,
 });

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

@@ -4,6 +4,8 @@ import { Meta } from '@storybook/addon-docs';
 
 # Display Breakpoints
 
+<farm-col>aaa</farm-col>
+
 <table width="100%">
 	<thead>
 		<tr>

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/Row/Row.scss

@@ -6,27 +6,33 @@
     display: flex;
     flex-wrap: wrap;
     flex: 1 1 auto;
-    margin: 0 calc(#{gutter('lg')} * -1);
+    
+    margin: 0 -#{gutter('vuetify')};
 
     @each $k in $aligns {
         &#{'--align-' + $k} {
-            align-items: $k  !important;
+            align-items: $k!important;
         }
     }
 
     @each $k in $align-contents {
         &#{'--align-content-' + $k} {
-            align-content: $k  !important;
+            align-content: $k!important;
         }
     }
 
     @each $k in $justifications {
         &#{'--justify-' + $k} {
-            justify-content: $k  !important;
+            justify-content: $k!important;
         }
     }
 
-    &--no-gutters {
+    &--no-default-gutters {
         margin: 0;
     }
+
+    &--extra-decrease {
+        margin: 0 -#{2 * gutter('vuetify')};
+    }
+
 }

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

@@ -29,10 +29,10 @@ export const Align = () => ({
 	},
 	template: `<div>
 		<farm-row :align="align" v-for="align in aligns" :key="'align_' + align">
-			<v-col md="6">
+			<farm-col md="6">
 				row align
 				{{ align }}
-			</v-col>
+			</farm-col>
 		</farm-row>
 	</div>`,
 });
@@ -45,10 +45,10 @@ export const AlignContent = () => ({
 	},
 	template: `<div>
 		<farm-row :align-content="align" v-for="align in aligns" :key="'align-content-_' + align">
-			<v-col md="6">
+			<farm-col md="6">
 				row align-content
 				{{ align }}
-			</v-col>
+			</farm-col>
 		</farm-row>
 	</div>`,
 });
@@ -61,13 +61,13 @@ export const Justify = () => ({
 	},
 	template: `<div>
 		<farm-row :justify="k" v-for="k in justifications" :key="'justify-_' + k">
-			<v-col md="6">
+			<farm-col md="6">
 				row justify {{ k }}
-			</v-col>
+			</farm-col>
 		</farm-row>
 	</div>`,
 });
 
-export const NoGutters = () => ({
-	template: '<farm-row :no-gutters="true">no gutters</farm-row>',
+export const NoDefaultGutters = () => ({
+	template: '<farm-row :no-default-gutters="true">no gutters</farm-row>',
 });

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

@@ -6,7 +6,8 @@
 			[`farm-row--align-${align}`]: align,
 			[`farm-row--align-content-${alignContent}`]: alignContent,
 			[`farm-row--justify-${justify}`]: justify,
-			'farm-row--no-gutters': noGutters,
+			'farm-row--no-default-gutters': noDefaultGutters,
+			'farm-row--extra-decrease': extraDecrease,
 		}"
 	>
 		<slot></slot>
@@ -48,7 +49,14 @@ export default Vue.extend({
 		/**
 		 * Remove default gutters
 		 */
-		noGutters: {
+		noDefaultGutters: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Extra decrease margin
+		 */
+		extraDecrease: {
 			type: Boolean,
 			default: false,
 		},

package/src/configurations/_mixins.scss

@@ -16,6 +16,12 @@
     }
 }
 
+@mixin fromXs {
+    @media (min-width: 600px) {
+        @content;
+    }
+}
+
 @mixin fromSm {
     @media (min-width: 960px) {
         @content;
@@ -36,4 +42,44 @@
 
 @mixin addShadow {
     box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.16);
+}
+
+@mixin buildCol($code) {
+    @for $i from 1 through 12 {
+        .farm-col--#{$code}-#{$i * 1} {
+            flex: 0 0 (100/12 * $i)+#{"%"};
+            max-width: (100/12 * $i)+#{"%"};
+        }
+    }
+}
+
+@mixin rippleStyles {
+    .farm-ripple {
+        border-radius: 50%;
+        cursor: pointer;
+        position: absolute;
+        transition: all 0.4s;
+        z-index: 1;
+
+        &:before {
+            transition: all 0.2s;
+            border-radius: inherit;
+            bottom: 0;
+            content: "";
+            position: absolute;
+            opacity: 0;
+            left: 0;
+            right: 0;
+            top: 0;
+            transform-origin: center center;
+            background-color: var(--farm-stroke-base);
+        }
+    }
+}
+@mixin activateRipple {
+    &:hover {
+        .farm-ripple:before {
+            opacity: 0.3;
+        }
+    }
 }

package/src/configurations/_variables.scss

@@ -28,7 +28,7 @@ $fontSizes: (
 
 $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;
+$aligns: start,center,end,auto,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

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

package/src/main.ts

@@ -49,6 +49,7 @@ export {
 	IdCaption,
 };
 
+export * from './components/AlertBox';
 export * from './components/AlertReload';
 export * from './components/ButtonToggle';
 export * from './components/Buttons/DefaultButton';