@farm-investimentos/front-mfe-components 11.11.3 → 11.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@farm-investimentos/front-mfe-components",
-	"version": "11.11.3",
+	"version": "11.11.4",
 	"author": "farm investimentos",
 	"private": false,
 	"main": "./dist/front-mfe-components.common.js",

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

@@ -6,7 +6,11 @@ describe('DataTablePaginator component', () => {
 	let component;
 
 	beforeEach(() => {
-		wrapper = shallowMount(DataTablePaginator);
+		wrapper = shallowMount(DataTablePaginator, {
+			propsData: {
+				title: '',
+			},
+		});
 		component = wrapper.vm;
 	});
 

package/src/components/Radio/Radio.scss

@@ -1,3 +1,5 @@
+@import '../../configurations/variables';
+
 input[type="radio"] {
     -webkit-appearance: none;
     appearance: none;
@@ -5,8 +7,6 @@ input[type="radio"] {
     margin: 0;
     font: inherit;
     color: rgba(0, 0, 0, .6);
-    width: 24px;
-    height: 24px;
     border: 1.5px solid rgba(0, 0, 0, .6);
     border-radius: 50%;
     display: grid;
@@ -15,8 +15,6 @@ input[type="radio"] {
 
     &::before {
         content: "";
-        width: 10px;
-        height: 10px;
         border-radius: 50%;
         transform: scale(0);
         transition: 120ms transform ease-in-out;
@@ -47,4 +45,19 @@ input[type="radio"] {
     &:active {
         animation: pulse 0.2s 1 ease-out;
     }
+}
+
+
+@each $size,
+$value in $sizes {
+    #{'input[type="radio"][size=' + $size +']'} {
+        width: $value;
+        height: $value;
+
+        &::before {
+            content: "";
+            width: $value / 2;
+            height: $value / 2;
+        }
+    }
 }

package/src/components/Radio/Radio.stories.js

@@ -1,5 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
 import Radio from './Radio.vue';
+import sizes from '../../configurations/sizes';
 
 export default {
 	title: 'Form/Radio',
@@ -10,7 +11,7 @@ export default {
 			description: {
 				component: `Radio<br />
 				selector: <em>farm-radio</em><br />
-				<span style="color: var(--farm-extra-1-base);">development</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 			design: {
@@ -81,3 +82,17 @@ export const Checked = () => ({
 		v-model: {{ v }}
 	</div>`,
 });
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<div v-for="size in sizes" :key="size" class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="size" :size="size"  />&nbsp;&nbsp;{{ size }}
+		</div>
+	</div>`,
+});

package/src/components/Radio/Radio.vue

@@ -5,13 +5,14 @@
 			'farm-radio--checked': isChecked,
 		}"
 		type="radio"
+		:size="$props.size"
 		:checked="isChecked"
 		:value="value"
 		@click="onClick"
 	/>
 </template>
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-radio',
@@ -27,6 +28,13 @@ export default Vue.extend({
 		 * Value to be set to v-model
 		 */
 		value: { type: [String, Number, Boolean], required: true },
+		/**
+		 * Size
+		 */
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+			default: 'md',
+		},
 	},
 	computed: {
 		isChecked() {

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

@@ -4,14 +4,24 @@ import Radio from '../Radio.vue';
 
 describe('Radio component', () => {
 	let wrapper;
+	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Radio, {
-			propsData: {},
+			propsData: {
+				value: 1,
+			},
 		});
+		component = wrapper.vm;
 	});
 
 	test('Radio created', () => {
 		expect(wrapper).toBeDefined();
 	});
+
+	describe('computed properties', () => {
+		it('get isRound false', () => {
+			expect(component.isChecked).toBeFalsy();
+		});
+	});
 });

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

@@ -5,7 +5,11 @@ describe('RadioGroup component', () => {
 	let wrapper;
 
 	beforeEach(() => {
-		wrapper = shallowMount(RadioGroup, {});
+		wrapper = shallowMount(RadioGroup, {
+			propsData: {
+				value: 1,
+			},
+		});
 	});
 
 	test('Created hook', () => {