@farm-investimentos/front-mfe-components 11.8.2 → 11.8.4

package/package.json

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

package/src/components/DialogHeader/DialogHeader.scss

@@ -1,6 +1,5 @@
 .farm-dialog-header__close {
     position: absolute;
-    right: 16px;
     margin-top: 0;
     font-size: 16px;
 

package/src/components/DialogHeader/DialogHeader.vue

@@ -15,7 +15,7 @@
 			title="Fechar"
 			@click="onClose"
 		>
-			<farm-icon role="button"> close-thick </farm-icon>
+			<farm-icon role="button" size="md"> window-close </farm-icon>
 		</farm-btn>
 	</header>
 </template>

package/src/components/MainFilter/MainFilter.vue

@@ -4,10 +4,10 @@
 			<farm-label :for="elementId">
 				{{ label }}
 				<farm-tooltip v-if="tooltip">
-					<farm-caption>
+					<farm-caption color="white">
 						{{ tooltip }}
 					</farm-caption>
-					<template v-slot:activator="{}">
+					<template v-slot:activator>
 						<farm-icon size="sm" color="gray">help-circle</farm-icon>
 					</template>
 				</farm-tooltip>

package/src/components/Radio/Radio.scss

@@ -0,0 +1,50 @@
+input[type="radio"] {
+    -webkit-appearance: none;
+    appearance: none;
+    background-color: #ffffff;
+    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;
+    place-content: center;
+    cursor: pointer;
+
+    &::before {
+        content: "";
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        transform: scale(0);
+        transition: 120ms transform ease-in-out;
+        background-color: CanvasText;
+    }
+
+    &.farm-radio--checked::before {
+        transform: scale(1);
+        box-shadow: inset 16px 16px var(--farm-primary-base);
+    }
+
+    &.farm-radio--checked {
+        border-color: var(--farm-primary-base);
+    }
+
+    &:focus {
+        outline: none;
+        outline-offset: none;
+    }
+
+    &:hover {
+        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;
+    }
+
+    &:active {
+        animation: pulse 0.2s 1 ease-out;
+    }
+}

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

@@ -0,0 +1,83 @@
+import { withDesign } from 'storybook-addon-designs';
+import Radio from './Radio.vue';
+
+export default {
+	title: 'Form/Radio',
+	component: Radio,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Radio<br />
+				selector: <em>farm-radio</em><br />
+				<span style="color: var(--farm-extra-1-base);">development</span>
+				`,
+			},
+			design: {
+				type: 'figma',
+				url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=4913%3A20222&t=RIUg7AZerUGMSaM9-0',
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			v: null,
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-radio v-model="v" value="1" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Group = () => ({
+	data() {
+		return {
+			v: null,
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-radio v-model="v" value="1" />
+		<farm-radio v-model="v" value="2" />
+		<farm-radio v-model="v" value="3" />
+		v-model: {{ v }}
+	</div>`,
+});
+
+export const Reset = () => ({
+	data() {
+		return {
+			v: null,
+		};
+	},
+	methods: {
+		reset() {
+			this.$refs.form.reset();
+		},
+	},
+	template: `<div style="width: 480px">
+		<farm-form ref="form">
+			<farm-radio v-model="v" value="1" />
+			<farm-radio v-model="v" value="2" />
+			<farm-radio v-model="v" value="3" />
+			v-model: {{ v }}
+			<farm-btn @click="reset">reset</farm-btn>
+		</farm-form>
+	</div>`,
+});
+
+export const Checked = () => ({
+	data() {
+		return {
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<farm-radio v-model="v" value="1" />
+		v-model: {{ v }}
+	</div>`,
+});

package/src/components/Radio/Radio.vue

@@ -0,0 +1,52 @@
+<template>
+	<input
+		:class="{
+			'farm-radio': true,
+			'farm-radio--checked': isChecked,
+		}"
+		type="radio"
+		:checked="isChecked"
+		:value="value"
+		@click="onClick"
+	/>
+</template>
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	name: 'farm-radio',
+	model: {
+		prop: 'modelValue',
+	},
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: { default: '' },
+		/**
+		 * Value to be set to v-model
+		 */
+		value: { type: [String, Number, Boolean], default: undefined },
+	},
+	computed: {
+		isChecked() {
+			return this.modelValue == this.value;
+		},
+	},
+	setup(_, { emit }) {
+		const onClick = event => {
+			emit('change', event.target.value);
+			emit('input', event.target.value);
+		};
+
+		const reset = () => {
+			emit('input', null);
+		};
+		const validate = () => {};
+		return { onClick, reset, validate };
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import 'Radio';
+</style>

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

@@ -0,0 +1,17 @@
+import { shallowMount } from '@vue/test-utils';
+
+import Radio from '../Radio.vue';
+
+describe('Radio component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Radio, {
+			propsData: {},
+		});
+	});
+
+	test('Radio created', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Radio/index.ts

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

package/src/components/Select/Select.stories.js

@@ -33,7 +33,7 @@ export const Primary = () => ({
 			],
 		};
 	},
-	template: `<div style="width: 480px">
+	template: `<div style="width: 120px">
 		<farm-select v-model="v" :items="items" />
 		v-model: {{ v }}
 	</div>`,

package/src/components/Select/Select.vue

@@ -26,7 +26,7 @@
 				</farm-listitem>
 			</farm-list>
 			<template v-slot:activator="{}">
-				<div class="farm-textfield--input">
+				<div class="farm-textfield--input farm-textfield--input--iconed">
 					<input
 						v-model="selectedText"
 						:disabled="disabled"
@@ -165,7 +165,7 @@ export default Vue.extend({
 
 		onBeforeMount(() => {
 			validate(innerValue.value);
-			
+
 			const selectedItem = items.value.find(
 				item => item[itemValue.value] === innerValue.value
 			);

package/src/main.ts

@@ -82,6 +82,7 @@ export * from './components/Logger/LoggerItem';
 export * from './components/Icon';
 export * from './components/Modal';
 export * from './components/ProgressBar';
+export * from './components/Radio';
 export * from './components/RadioGroup';
 export * from './components/Select';
 export * from './components/Stepper';