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

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: var(--farm-extra-1-base);">development</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,19 @@
 <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 { PropType } from 'vue/types/v3-component-props';
 
 export default Vue.extend({
 	name: 'farm-row',
@@ -13,6 +22,20 @@ export default Vue.extend({
 		 * Html tag
 		 */
 		tag: { type: String, default: 'div' },
+		align: {
+			type: String as PropType<'start' | 'center' | 'end' | 'baseline' | 'stretch'>,
+			default: '',
+		},
+		alignContent: {
+			type: String as PropType<
+				'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'stretch'
+			>,
+			default: '',
+		},
+		justify: {
+			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
+			default: '',
+		},
 	},
 	inheritAttrs: true,
 });

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/examples/Container/Basic.stories.js

@@ -17,10 +17,26 @@ export const Primary = () => ({
 export const Secondary = () => ({
 	template: `
 	<farm-container>
-		Content
-		<farm-container-footer>
-			Footer content
-		</farm-container-footer>
+		<div>
+			Content<br />
+			Content<br />
+			Content<br />
+			Content<br />
+			Content<br />
+		</div>
+		<farm-row>
+			<v-col md="6">
+				coluna 1
+			</v-col>
+			<v-col md="6">
+				coluna 2
+			</v-col>
+		</farm-row>
+		<farm-row>
+			<farm-container-footer>
+				Footer content
+			</farm-container-footer>
+		</farm-row>
 	</farm-container>
 `,
 });

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';
+