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

package/src/components/RadioGroup/RadioGroup.scss

@@ -1,35 +1,65 @@
+@import '../../configurations/theme-colors';
+
 .farm-radio-group {
     border: none;
     cursor: default;
     display: flex;
     width: 100%;
+
     &__item {
         font-size: 16px;
-        line-height: 1.1;
+        line-height: 18px;
         cursor: pointer;
         display: grid;
         grid-template-columns: 16px auto;
-        gap: 8px;
-        color: rgba(0,0,0,.6);
-        margin-top: 16px;
-        margin-right: 16px;
+        gap: 0;
+        color: rgba(0, 0, 0, .6);
+        margin-right: 32px;
+    }
+
+    label {
+        cursor: pointer;
+    }
+
+    input[type="radio"].checked {
+        border: 1.5px solid black;
     }
-}
 
-.farm-radio-group--column {
-    flex-direction: column;
+    &--vertical {
+        flex-direction: column;
+        .farm-radio-group__item {
+            margin-right: 24px;
+            margin-top: 16px;
+            &:first-of-type {
+                margin-top: 0;
+            }
+        }
+    }
+
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            input[type="radio"]::before {
+                box-shadow: inset 16px 16px themeColor($color);
+            }
+
+            input[type="radio"].checked {
+                border-color: themeColor($color);
+            }
+        }
+    }
 }
 
+
 input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
     background-color: #ffffff;
     margin: 0;
     font: inherit;
-    color: rgba(0,0,0,.6);
+    color: rgba(0, 0, 0, .6);
     width: 18px;
     height: 18px;
-    border: 1.5px solid rgba(0,0,0,.6);
+    border: 1.5px solid rgba(0, 0, 0, .6);
     border-radius: 50%;
     transform: translate(-12px);
     display: grid;
@@ -44,11 +74,10 @@ input[type="radio"]::before {
     border-radius: 50%;
     transform: scale(0);
     transition: 120ms transform ease-in-out;
-    box-shadow: inset 16px 16px var(--radio-group-color);
     background-color: CanvasText;
 }
 
-input[type="radio"]:checked::before {
+input[type="radio"].checked::before {
     transform: scale(1);
 }
 
@@ -57,13 +86,9 @@ input[type="radio"]:focus {
     outline-offset: none;
 }
 
-input[type="radio"]:checked {
-    border: 1.5px solid var(--radio-group-color);
-}
-
 input[type='radio']:hover {
-    box-shadow: 0px 0px 0px 8px  rgba(0, 0, 0, 0.1);
-    background-color:  rgba(0, 0, 0, 0.1);
+    box-shadow: 0px 0px 0px 8px rgba(0, 0, 0, 0.1);
+    background-color: rgba(0, 0, 0, 0.1);
     border-radius: 50%;
     opacity: 1;
 }
@@ -74,9 +99,10 @@ input[type='radio']:active {
 
 @keyframes pulse {
     from {
-      box-shadow:  0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0.2), 0 0 0 0 rgba(0, 0, 0, 0.2);
     }
+
     to {
-      box-shadow:  0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
+        box-shadow: 0 0 0 8px rgba(0, 0, 0, 0.2), 0 0 0 8px rgba(0, 0, 0, 0.2);
     }
 }

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -1,4 +1,7 @@
 import RadioGroup from './RadioGroup';
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+
+const colors = Object.keys(baseThemeColors);
 
 export default {
 	title: 'Form/RadioGroup',
@@ -7,7 +10,9 @@ export default {
 		docs: {
 			description: {
 				component: `RadioGroup<br />
-				selector: <em>farm-radio-group</em>
+				selector: <em>farm-radio-group</em><br />
+				<span style="color: green;">ready for use</span>
+
 				`,
 			},
 		},
@@ -19,16 +24,72 @@ export const Primary = () => ({
 	data() {
 		return {
 			buttons: [
-                { label: 'Button 1', id: 1 }, 
-                { label: 'Button 2', id: 2 }, 
-                { label: 'Button 3', id: 3 }
-            ],
-			checkedValue: 1
+				{ label: 'Random text', id: 1 },
+				{ label: 'In', id: 2 },
+				{ label: 'Radio Group', id: 3 },
+			],
+			checkedValue: 1,
 		};
 	},
 	template: `<div>
-	    <farm-radio-group v-model="checkedValue" column :buttons="buttons" />
+	    <farm-radio-group v-model="checkedValue" :buttons="buttons" />
 	</div>`,
 });
 
-Primary.storyName = 'Basic';
+export const Reset = () => ({
+	data() {
+		return {
+			buttons: [
+				{ label: 'Button 1', id: 1 },
+				{ label: 'Button 2', id: 2 },
+				{ label: 'Button 3', id: 3 },
+			],
+			checkedValue: 1,
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.radiogroupreset.reset();
+		},
+	},
+	template: `<div>
+	    <farm-radio-group v-model="checkedValue" :buttons="buttons" ref="radiogroupreset" /><br />
+		<farm-btn @click="reset">Reset</farm-btn>
+	</div>`,
+});
+
+export const Vertical = () => ({
+	data() {
+		return {
+			buttons: [
+				{ label: 'Button 1', id: 1 },
+				{ label: 'Button 2', id: 2 },
+				{ label: 'Button 3', id: 3 },
+			],
+			checkedValue: 1,
+		};
+	},
+	template: `<div>
+	    <farm-radio-group v-model="checkedValue" vertical :buttons="buttons" />
+	</div>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			buttons: [
+				{ label: 'Button 1', id: 1 },
+				{ label: 'Button 2', id: 2 },
+				{ label: 'Button 3', id: 3 },
+			],
+			checkedValue: 1,
+			colors,
+		};
+	},
+	template: `<div style="display: flex; flex-direction: row; flex-wrap: wrap;">
+		<div v-for="color in colors" style="width: 33.3%; margin-bottom: 32px;">
+			<h4 style="margin-bottom: 16px">{{ color }}</h4>
+			<farm-radio-group v-model="checkedValue" vertical :color="color" :buttons="buttons" />
+		</div>
+	</div>`,
+});

package/src/components/RadioGroup/RadioGroup.vue

@@ -1,30 +1,32 @@
 <template>
-    <div 
-    :class="{
-        'farm-radio-group': true,
-        'farm-radio-group--column': $props.column,
-    }">
-        <div class="farm-radio-group__item"
-            v-for="(button, index) in buttons" 
-            :key="`farm-radio-group_` + index"
-            @click="clicked(button.id)"
-        >   
-            <input  
-                type="radio" 
-                name="radio" 
-                :checked="button.id === $props.value"
-                :id="`farm-radio-group_` + index"
-                :style="cssVars" 
-                :value="button.id"
-               >
-            <label>
-                {{button.label}}
-            </label>
-        </div>
-    </div>
+	<div
+		:class="{
+			'farm-radio-group': true,
+			'farm-radio-group--vertical': $props.vertical,
+		}"
+		:color="color"
+	>
+		<div
+			class="farm-radio-group__item"
+			v-for="(button, index) in buttons"
+			:key="`farm-radio-group_` + index"
+			@click="clicked(button.id)"
+		>
+			<input
+				type="radio"
+				name="radio"
+				:checked="button.id === innerValue"
+				:id="`farm-radio-group_` + index"
+				:value="button.id"
+				:class="{ checked: button.id === innerValue }"
+			/>
+			<label> {{ button.label }} </label>
+		</div>
+	</div>
 </template>
 <script lang="ts">
-import Vue, { PropType } from 'vue';
+import Vue, { PropType, ref, watch } from 'vue';
+import validateFormStateBuilder from '../../composition/validateFormStateBuilder';
 import IRadioGroup from './IRadioGroup';
 export default Vue.extend({
 	name: 'farm-radio-group',
@@ -34,36 +36,56 @@ export default Vue.extend({
 		 */
 		buttons: {
 			type: Array as PropType<Array<IRadioGroup>>,
-			default: () => [],
+			default: [],
 		},
-        /**
+		/**
 		 * v-model
 		 */
 		value: {
 			required: true,
 		},
-        column: {
-            type: Boolean,
-            default: false
-        },
-        color: {
-            type: String,
-			default: '#00B493',
-        }
+		/**
+		 * Is vertical?
+		 */
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
+		color: {
+			type: String,
+			default: 'primary',
+		},
 	},
-    methods: {
-        clicked(value) {
-            this.$emit('input', value);
-        }
-    },
-    computed: {
-        cssVars () {
-            return {
-                '--radio-group-color': this.color
-            };
-        }
-    }
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+		const { errorBucket, valid, validatable } = validateFormStateBuilder();
 
+		const reset = () => {
+			innerValue.value = false;
+			emit('input', innerValue.value);
+		};
+
+		watch(
+			() => props.value,
+			() => {
+				innerValue.value = props.value;
+			}
+		);
+
+		const clicked = value => {
+			innerValue.value = value;
+			emit('input', innerValue.value);
+		};
+
+		return {
+			innerValue,
+			errorBucket,
+			valid,
+			validatable,
+			reset,
+			clicked,
+		};
+	},
 });
 </script>
 <style lang="scss" scoped>

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -1,6 +1,9 @@
 [role='menuitem'] {
 	border-bottom: 1px solid var(--v-gray-lighten2);
 }
-.farm-btn__content i.mdi.farm-btn__icon {
-	font-size: 24px;
+.v-list-item__title {
+	.farm-icon {
+		vertical-align: sub;
+		margin-right: 8px;
+	}
 }

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -10,16 +10,31 @@ export default {
 			type: 'figma',
 			url: 'https://www.figma.com/file/rkkAsX4IP0tzv1udIDXlqe/%E2%9C%8D---Onboarding---PJ?node-id=3516%3A11516',
 		},
+		docs: {
+			description: {
+				component: `TableContextMenu<br />
+				selector: <em>farm-context-menu</em><br />
+				<span style="color: green;">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
 	},
 };
 
 export const Primary = () => ({
-	template: `<farm-context-menu :items="[{ label: 'Remover' }]" />`,
+	template: `<div>
+		<farm-context-menu :items="[{ label: 'Remover', icon: { color: 'error', type: 'open-in-new' } }]" />
+	</div>`,
 });
 
 export const Icons = () => ({
-	template: `<farm-context-menu
-		:items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]" />`,
+	template: `<div>
+		<farm-context-menu
+			ref="icons"
+			:items="[{ label: 'Remover', icon: { color: 'error', type: 'delete' } }]"
+		/>
+	</div>`,
 });
 
 export const Multi = () => ({
@@ -32,5 +47,7 @@ export const Multi = () => ({
 			],
 		};
 	},
-	template: `<farm-context-menu :items="items" />`,
+	template: `<div>
+		<farm-context-menu ref="multi" :items="items" />
+	</div>`,
 });

package/src/components/TableContextMenu/TableContextMenu.vue

@@ -2,7 +2,7 @@
 	<v-menu>
 		<template v-slot:activator="{ on, attrs }">
 			<farm-btn icon v-bind="attrs" v-on="on" title="Abrir opções">
-				<i class="farm-btn__icon mdi mdi-dots-horizontal"></i>
+				<farm-icon size="md">dots-horizontal</farm-icon>
 			</farm-btn>
 		</template>
 
@@ -15,12 +15,13 @@
 			>
 				<v-list-item-content>
 					<v-list-item-title>
-						<v-icon
+						<farm-icon
 							v-if="item.icon"
+							size="md"
 							:color="item.icon.color || 'secondary'"
-							class="mb-1"
-							>mdi-{{ item.icon.type }}</v-icon
 						>
+							{{ item.icon.type }}
+						</farm-icon>
 						{{ item.label }}
 					</v-list-item-title>
 				</v-list-item-content>
@@ -28,10 +29,9 @@
 		</v-list>
 	</v-menu>
 </template>
-<script>
+<script lang="ts">
 import Vue from 'vue';
 import { VMenu } from 'vuetify/lib/components/VMenu';
-import { VIcon } from 'vuetify/lib/components/VIcon';
 import { VList } from 'vuetify/lib/components/VList';
 import VListItem from 'vuetify/lib/components/VList/VListItem';
 import { VListItemContent, VListItemTitle } from 'vuetify/lib';
@@ -39,7 +39,6 @@ import { VListItemContent, VListItemTitle } from 'vuetify/lib';
 export default Vue.extend({
 	name: 'farm-context-menu',
 	components: {
-		VIcon,
 		VMenu,
 		VList,
 		VListItem,

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

@@ -0,0 +1,5 @@
+.farm-col {
+    width: 100%;
+    padding: 12px;
+    display: flex;
+}

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

@@ -0,0 +1,42 @@
+import Col from './Col.vue';
+
+export default {
+	title: 'Layout/Col',
+	component: Col,
+	parameters: {
+		docs: {
+			description: {
+				component: `Col<br />
+				selector: <em>farm-col</em><br />
+				<span style="color: var(--farm-extra-1-base);">development</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-col>col</farm-col>',
+});
+export const Xl = () => ({
+	template: '<farm-col xl="3">xl: 3</farm-col>',
+});
+export const Lg = () => ({
+	template: '<farm-col lg="4">lg: 4</farm-col>',
+});
+export const Md = () => ({
+	template: '<farm-col md="6">md: 6</farm-col>',
+});
+export const Sm = () => ({
+	template: '<farm-col sm="4">sm: 4</farm-col>',
+});
+export const Xs = () => ({
+	template: '<farm-col xs="4">xs: 4</farm-col>',
+});
+export const Combination = () => ({
+	template: '<farm-col xl="3" xs="4">xl: 3 - xs: 4</farm-col>',
+});
+export const TagP = () => ({
+	template: '<farm-col tag="p">col</farm-col>',
+});

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

@@ -0,0 +1,62 @@
+<template>
+	<component
+		:is="tag"
+		:class="{
+			'farm-col': true,
+			[`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,
+		}"
+	>
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-col',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+		xl: {
+			type: [String, Number, Boolean] as PropType<
+				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: false,
+		},
+		lg: {
+			type: [String, Number, Boolean] as PropType<
+				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: false,
+		},
+		md: {
+			type: [String, Number, Boolean] as PropType<
+				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: false,
+		},
+		sm: {
+			type: [String, Number, Boolean] as PropType<
+				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: false,
+		},
+		xs: {
+			type: [String, Number, Boolean] as PropType<
+				1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
+			>,
+			default: false,
+		},
+	},
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'Col';
+</style>

package/src/components/layout/Col/__tests__/Col.spec.js

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

package/src/components/layout/Col/index.ts

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

package/src/components/layout/Container/Container.scss

@@ -1,3 +1,6 @@
+@import '../../../configurations/functions';
+@import '../../../configurations/_mixins';
+
 .farm-container {
     width: 100%;
     padding: 12px;
@@ -8,9 +11,10 @@
     >div {
         background-color: white;
         border-radius: 8px;
-        max-width: calc(100% - 32px);
-        margin: 16px auto;
-        padding: 12px;
+        max-width: calc(100% - 24px);
+        margin: gutter('lg') auto;
+        padding: gutter('lg');
+        @include addShadow;
 
         // deprecated
         .container-main__footer-buttons-right {

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

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Container<br />
-				selector: <em>farm-container</em>
+				selector: <em>farm-container</em><br />
+				<span style="color: green;">ready for use</span>
 				`,
 			},
 		},

package/src/components/layout/ContainerFooter/ContainerFooter.scss

@@ -1,6 +1,9 @@
+@import '../../../configurations/functions';
+
 .farm-container-footer {
     width: 100%;
-    padding: 24px 32px;
-    border-top: 1px solid var(--v-gray-lighten2);
-    margin-top: 12px;
+    padding: gutter('lg');
+    padding-bottom: 0;
+    border-top: 1px solid var(--farm-stroke-base);
+    margin-top: gutter('lg');
 }

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