@farm-investimentos/front-mfe-components 11.3.2 → 11.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.3.2",
+	"version": "11.4.1",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",
@@ -22,7 +22,7 @@
 	],
 	"dependencies": {
 		"core-js": "^3.8.3",
-		"vue": "^2.7.0",
+		"vue": "2.7.10",
 		"vuetify": "^2.4.5",
 		"vuetify-dialog": "^2.0.17"
 	},
@@ -51,7 +51,7 @@
 		"storybook-addon-designs": "^6.2.1",
 		"typescript": "~4.1.5",
 		"v-mask": "^2.3.0",
-		"vue-template-compiler": "^2.7.0"
+		"vue-template-compiler": "2.7.10"
 	},
 	"browserslist": [
 		"> 1%",

package/src/components/AlertBox/AlertBox.stories.js

@@ -0,0 +1,21 @@
+import AlertBox from './AlertBox.vue';
+
+export default {
+	title: 'Feedback/AlertBox',
+	component: AlertBox,
+	parameters: {
+		docs: {
+			description: {
+				component: `Alert Box<br />
+					selector: <em>farm-alertbox</em><br />
+					<span style="color: var(--farm-extra-1-base);">development</span>
+`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-alertbox>alert box</farm-alertbox>',
+});

package/src/components/AlertBox/AlertBox.vue

@@ -0,0 +1,16 @@
+<template>
+	<div>alertbox</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-alertbox',
+	props: {},
+	setup() {},
+});
+</script>
+<style lang="scss" scoped>
+@import './AlertBox';
+</style>

package/src/components/AlertBox/__tests__/AlertBox.spec.js

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

package/src/components/AlertBox/index.ts

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

package/src/components/ChipInviteStatus/__tests__/ChipInviteStatus.spec.js

@@ -2,7 +2,6 @@ import { shallowMount } from '@vue/test-utils';
 import ChipInviteStatus from '../ChipInviteStatus.vue';
 describe('ChipInviteStatus component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(ChipInviteStatus, {
@@ -10,7 +9,6 @@ describe('ChipInviteStatus component', () => {
 				status: 10,
 			},
 		});
-		component = wrapper.vm;
 	});
 	test('ChipInviteStatus created', () => {
 		expect(wrapper).toBeDefined();

package/src/components/Typography/Typography.scss

@@ -30,6 +30,14 @@
 	@each $k in $theme-colors-list {
 		&#{'[color=' + $k + ']'} {
 			color: var(--farm-#{$k}-base);
+
+			&.farm-typography--lighten {
+				color: var(--farm-#{$k}-lighten);
+			}
+
+			&.farm-typography--darken {
+				color: var(--farm-#{$k}-darken);
+			}
 		}
 	}
 
@@ -59,5 +67,4 @@
 			font-size: calc(#{$val} - 2px);
 		}
 	}
-}
-
+}

package/src/components/Typography/Typography.stories.js

@@ -105,6 +105,42 @@ export const Colors = () => ({
 	</div>`,
 });
 
+export const ColorsLighten = () => ({
+	data() {
+		return {
+			colors: [ ...colors, 'white'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			color-variation="lighten"
+			:color="color"
+			:key="'lighten' + color"
+		>
+			Typography - color {{ color }} lighten
+		</farm-typography>
+	</div>`,
+});
+
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors: [...colors, 'white'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			color-variation="darken"
+			:color="color"
+			:key="'darken' + color"
+		>
+			Typography - color {{ color }} darken
+		</farm-typography>
+	</div>`,
+});
+
 export const Tags = () => ({
 	data() {
 		return {

package/src/components/Typography/Typography.vue

@@ -5,6 +5,8 @@
 			'farm-typography': true,
 			['farm-typography--' + $props.size]: isSizeFromBreakpoints,
 			['farm-typography--weight-' + weight]: weight !== undefined,
+			'farm-typography--lighten': colorVariation === 'lighten',
+			'farm-typography--darken': colorVariation === 'darken',
 		}"
 		:style="style"
 		:color="color"
@@ -54,6 +56,13 @@ export default Vue.extend({
 			>,
 			default: 'default',
 		},
+		/**
+		 * Color variation
+		 */
+		colorVariation: {
+			type: String,
+			default: '',
+		},
 	},
 	setup(props) {
 		const { size, lineHeight } = toRefs(props);

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

@@ -17,6 +17,14 @@ export const Primary = () => ({
 export const Structure = () => ({
 	template: `
 	<farm-container>
+		<farm-row>
+			<farm-col md="6" xs="12">
+				Main Filter
+			</farm-col>
+			<farm-col md="6" xs="12">
+				Botoes laterais
+			</farm-col>
+		</farm-row>
 		<farm-box>
 			Content<br />
 			Content<br />
@@ -25,20 +33,20 @@ export const Structure = () => ({
 			Content<br />
 		</farm-box>
 		<farm-row>
-			<v-col md="6" lg="3">
+			<farm-col md="6" lg="3">
 				coluna 1
-			</v-col>
-			<v-col md="6" lg="3">
+			</farm-col>›
+			<farm-col md="6" lg="3">
 				coluna 2
-			</v-col>
-			<v-col md="6" lg="3">
+			</farm-col>
+			<farm-col md="6" lg="3">
 				coluna 3
-			</v-col>
-			<v-col md="6" lg="3">
+			</farm-col>
+			<farm-col md="6" lg="3">
 				coluna 4
-			</v-col>
+			</farm-col>
 		</farm-row>
-		<farm-row>
+		<farm-row :extra-decrease="true">
 			<farm-container-footer>
 				Footer content
 			</farm-container-footer>

package/src/components/layout/Col/Col.scss

@@ -1,13 +1,21 @@
 @import '../../../configurations/mixins.scss';
+@import '../../../configurations/functions.scss';
 
 .farm-col {
-    flex: 0 0 100%;
+    padding: 0 gutter('vuetify');
+    flex-basis: 0;
+    flex-grow: 1;
     max-width: 100%;
-    padding: 0 24px;
 
     &--no-gutters {
         padding: 0;
     }
+
+    @each $k in $aligns {
+        &#{'--align-' + $k} {
+            align-self: $k!important;
+        }
+    }
 }
 
 @for $i from 1 through 12 {

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',
@@ -8,7 +9,7 @@ export default {
 			description: {
 				component: `Col<br />
 					selector: <em>farm-col</em><br />
-					<span style="color: var(--farm-extra-1-base);">development</span>
+					<span style="color: var(--farm-primary-base);">ready for use</span>
 `,
 			},
 		},
@@ -142,3 +143,16 @@ export const NoGutters = () => ({
 	},
 	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,6 +3,7 @@
 		: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,
@@ -66,6 +67,13 @@ export default Vue.extend({
 			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/Row/Row.scss

@@ -6,27 +6,33 @@
     display: flex;
     flex-wrap: wrap;
     flex: 1 1 auto;
-    margin-inline: -12px;
+    
+    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/_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';