@farm-investimentos/front-mfe-components 9.3.0 → 9.3.2

package/src/components/RadioGroup/RadioGroup.vue

@@ -0,0 +1,71 @@
+<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>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import IRadioGroup from './IRadioGroup';
+export default Vue.extend({
+	name: 'farm-radio-group',
+	props: {
+		/**
+		 * Array of buttons
+		 */
+		buttons: {
+			type: Array as PropType<Array<IRadioGroup>>,
+			default: () => [],
+		},
+        /**
+		 * v-model
+		 */
+		value: {
+			required: true,
+		},
+        column: {
+            type: Boolean,
+            default: false
+        },
+        color: {
+            type: String,
+			default: '#00B493',
+        }
+	},
+    methods: {
+        clicked(value) {
+            this.$emit('input', value);
+        }
+    },
+    computed: {
+        cssVars () {
+            return {
+                '--radio-group-color': this.color
+            };
+        }
+    }
+
+});
+</script>
+<style lang="scss" scoped>
+@import './RadioGroup.scss';
+</style>

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

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

package/src/components/RadioGroup/index.ts

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

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

@@ -16,7 +16,6 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-container': Container },
 	template: '<farm-container>content</farm-container>',
 });
 

package/src/components/layout/Row/Row.scss

@@ -0,0 +1,6 @@
+.farm-row {
+    display: flex;
+    flex-wrap: wrap;
+    flex: 1 1 auto;
+    margin: -12px;
+}

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

@@ -0,0 +1,22 @@
+import Row from './Row.vue';
+
+export default {
+	title: 'Layout/Row',
+	component: Row,
+	parameters: {
+		docs: {
+			description: {
+				component: `Row<br />
+				selector: <em>farm-row</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-row>row content</farm-row>',
+});
+
+Primary.storyName = 'Basic';

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

@@ -0,0 +1,22 @@
+<template>
+	<component v-bind:is="tag" class="farm-row">
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-row',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+	},
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'Row.scss';
+</style>

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

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

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

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

package/src/configurations/_theme-colors.scss

@@ -1,19 +1,19 @@
 $primary: (
-    base: #00CCA7,
+    base: #00B493,
     lighten: #EBFFFB,
-    darken: #00B493,
+    darken: #099A82,
 );
 
 $secondary: (
-    base: #5C5C5C,
-    lighten: #F5F5F5,
-    darken: #1A3738,
+    base: #1A3738,
+    lighten: #467D7E,
+    darken: #0B1A1B,
 );
 
 $neutral: (
-    base: #EEEEEE,
+    base: #E0E0E0,
     lighten: #F5F5F5,
-    darken: #E0E0E0,
+    darken: #5C5C5C,
 );
 
 $error: (
@@ -42,7 +42,7 @@ $success: (
 
 $extra-1: (
     base: #8E24AA,
-    lighten: #E8F5E9,
+    lighten: #F3E5F5,
     darken: #4A148C,
 );
 

package/src/examples/Form/Full.stories.js

@@ -42,7 +42,7 @@ export const Primary = () => ({
                 <farm-textfield v-model="form.name" />
             </div>
             <div class="footer" :style="[styles.footer]">
-                <v-btn color="secondary" :disabled="!validForm">Salvar</v-btn>
+                <farm-btn color="secondary" :disabled="!validForm">Salvar</farm-btn>
             </div>
         </v-form>
     `,

package/src/main.ts

@@ -69,12 +69,14 @@ export * from './components/ResetTableRowSelection';
 export * from './components/MultipleSelectShortener';
 export * from './components/SelectModalOptions';
 export * from './components/ChipInviteStatus';
+export * from './components/Form';
 export * from './components/Label';
 export * from './components/Logger';
 export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
 export * from './components/Modal';
 export * from './components/ProgressBar';
+export * from './components/RadioGroup';
 export * from './components/Stepper';
 export * from './components/Switcher';
 export * from './components/TextField';
@@ -83,4 +85,5 @@ export * from './components/Typography';
 
 export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';
+export * from './components/layout/Row';
 export * from './components/layout/Line';