@farm-investimentos/front-mfe-components 12.0.1 → 12.1.0

package/package.json

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

package/src/components/AlertBox/AlertBox.stories.js

@@ -10,7 +10,7 @@ export default {
 			description: {
 				component: `Alert Box<br />
 					selector: <em>farm-alertbox</em><br />
-					<span style="color: var(--farm-extra-1-base);">development</span>
+					<span style="color: var(--farm-primary-base);">ready for use</span>
 `,
 			},
 		},

package/src/components/ButtonToggle/ButtonToggle.stories.js

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Button Toggle<br />
-				selector: <em>farm-button-toggle</em>
+				selector: <em>farm-button-toggle</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Buttons/DefaultButton/DefaultButton.stories.js

@@ -13,7 +13,8 @@ export default {
 		docs: {
 			description: {
 				component: `Default button<br />
-				selector: <em>farm-btn</em>
+				selector: <em>farm-btn</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 			design: {

package/src/components/ChipInviteStatus/ChipInviteStatus.stories.js

@@ -3,6 +3,16 @@ import ChipInviteStatus from './ChipInviteStatus.vue';
 export default {
 	title: 'Display/Chips/Onboarding/InviteStatus',
 	component: ChipInviteStatus,
+	parameters: {
+		docs: {
+			description: {
+				component: `Chip Invite Status<br />
+					selector: <em>farm-chip-invite</em><br />
+					<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({

package/src/components/ContextMenu/ContextMenu.vue

@@ -4,14 +4,10 @@
 			<slot name="activator"></slot>
 		</span>
 
-		<div
-			ref="popup"
-			:class="{
-				'farm-contextmenu__popup': true,
-				'farm-contextmenu__popup--visible': inputValue,
-			}"
-			:style="styles"
-		>
+		<div ref="popup" :class="{
+			'farm-contextmenu__popup': true,
+			'farm-contextmenu__popup--visible': inputValue,
+		}" :style="styles">
 			<slot></slot>
 		</div>
 	</div>

package/src/components/IconBox/IconBox.stories.js

@@ -13,7 +13,9 @@ export default {
 		viewMode: 'docs',
 		docs: {
 			description: {
-				component: `IconBox`,
+				component: `IconBox<br />
+				selector: <em>farm-icon-box</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/IdCaption/IdCaption.stories.js

@@ -9,7 +9,8 @@ export default {
 		docs: {
 			description: {
 				component: `Id Caption<br />
-				selector: <em>farm-idcaption</em>
+				selector: <em>farm-idcaption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Label/Label.stories.js

@@ -14,7 +14,8 @@ export default {
 		docs: {
 			description: {
 				component: `Label<br />
-				selector: <em>farm-label</em>`,
+				selector: <em>farm-label</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/List/List.stories.js

@@ -11,7 +11,8 @@ export default {
 		docs: {
 			description: {
 				component: `List<br />
-				selector: <em>farm-list</em>`,
+				selector: <em>farm-list</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/ListItem/ListItem.stories.js

@@ -12,11 +12,11 @@ export default {
 	decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
-
 		docs: {
 			description: {
 				component: `ListItem<br />
-				selector: <em>farm-listitem</em>`,
+				selector: <em>farm-listitem</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/Radio/Radio.scss

@@ -1,6 +1,11 @@
 @import '../../configurations/variables';
 @import '../../configurations/theme-colors';
 
+.farm-radio-wrapper {
+	align-items: baseline;
+	display: flex;
+}
+
 input[type='radio'] {
 	-webkit-appearance: none;
 	appearance: none;
@@ -8,7 +13,7 @@ input[type='radio'] {
 	margin: 0;
 	font: inherit;
 	color: rgba(0, 0, 0, 0.6);
-	border: 1.5px solid rgba(0, 0, 0, 0.6);
+	border: 2.5px solid themeColor('neutral', 'darken');
 	border-radius: 50%;
 	display: grid;
 	place-content: center;
@@ -19,7 +24,6 @@ input[type='radio'] {
 		border-radius: 50%;
 		transform: scale(0);
 		transition: 120ms transform ease-in-out;
-		background-color: CanvasText;
 	}
 
 	&.farm-radio--checked::before {
@@ -53,6 +57,27 @@ input[type='radio'] {
 			}
 		}
 	}
+
+	&:disabled {
+		border: 2.5px solid themeColor('neutral', 'base');
+		cursor: auto;
+
+		&.farm-radio--checked::before {
+			box-shadow: inset 16px 16px themeColor('neutral', 'base');
+		}
+
+		&.farm-radio--checked {
+			border-color: themeColor('neutral', 'base');
+		}
+
+		&:hover,
+		&.farm-radio--checked:hover {
+			box-shadow: none;
+			background-color: transparent;
+			border-radius: 50%;
+			opacity: 1;
+		}
+	}
 }
 
 @each $size, $value in $sizes {

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

@@ -94,7 +94,7 @@ export const Sizes = () => ({
 	},
 	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 }}
+			<farm-radio v-model="v" :id="size" :value="size" :size="size"  />&nbsp;&nbsp;<label  :for="size">{{ size }}</label>
 		</div>
 	</div>`,
 });
@@ -108,7 +108,39 @@ export const Colors = () => ({
 	},
 	template: `<div style="width: 480px">
 		<div v-for="color in colors" :key="color" class="d-flex flex-row align-center mb-3">
-			<farm-radio v-model="v" :value="1" :color="color"  />&nbsp;&nbsp;{{ color }}
+			<farm-radio v-model="v" :id="color" :value="1" :color="color" :label="color" />
+		</div>
+	</div>`,
+});
+
+export const Disabled = () => ({
+	data() {
+		return {
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="2" disabled label="Disabled" />
+		</div>
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="1" disabled label="Checked and Disabled" />
+		</div>
+	</div>`,
+});
+
+export const Label = () => ({
+	data() {
+		return {
+			v: 1,
+		};
+	},
+	template: `<div style="width: 480px">
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="2" id="option1" label="Option 1" />
+		</div>
+		<div class="d-flex flex-row align-center mb-3">
+			<farm-radio v-model="v" :value="1" id="option2" label="Option 2" />
 		</div>
 	</div>`,
 });

package/src/components/Radio/Radio.vue

@@ -1,16 +1,23 @@
 <template>
-	<input
-		:class="{
-			'farm-radio': true,
-			'farm-radio--checked': isChecked,
-		}"
-		type="radio"
-		:color="color"
-		:size="$props.size"
-		:checked="isChecked"
-		:value="value"
-		@click="onClick"
-	/>
+	<div class="farm-radio-wrapper">
+		<input
+			:class="{
+				'farm-radio': true,
+				'farm-radio--checked': isChecked,
+			}"
+			:id="id"
+			type="radio"
+			:color="color"
+			:size="$props.size"
+			:checked="isChecked"
+			:value="value"
+			v-bind="$attrs"
+			@click="onClick"
+		/>
+		<farm-label v-if="label" class="ml-2" :for="id">
+			{{ label }}
+		</farm-label>
+	</div>
 </template>
 <script lang="ts">
 import Vue, { PropType } from 'vue';
@@ -34,7 +41,7 @@ export default Vue.extend({
 		 */
 		size: {
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
-			default: 'md',
+			default: 'sm',
 		},
 		/**
 		 * Color
@@ -54,6 +61,20 @@ export default Vue.extend({
 			>,
 			default: 'primary',
 		},
+		/**
+		 * Label
+		 */
+		label: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * ID
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
 	},
 	computed: {
 		isChecked() {

package/src/components/Select/Select.vue

@@ -211,6 +211,7 @@ export default Vue.extend({
 		const selectItem = item => {
 			selectedText.value = item[itemText.value];
 			innerValue.value = item[itemValue.value];
+			isVisible.value = false;
 		};
 
 		const clickInput = () => {

package/src/components/Switcher/Switcher.stories.js

@@ -3,6 +3,16 @@ import Switch from './Switcher';
 export default {
 	title: 'Form/Switcher',
 	component: Switch,
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Switcher<br />
+				selector: <em>farm-switcher</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
 };
 
 export const Primary = () => ({

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -11,8 +11,8 @@ export default {
 		docs: {
 			description: {
 				component: `Value Caption<br />
-				selector: <em>farm-valuecaption</em>
-				`,
+				selector: <em>farm-valuecaption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 		viewMode: 'docs',

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

@@ -7,7 +7,8 @@ export default {
 		docs: {
 			description: {
 				component: `Line<br />
-				selector: <em>farm-line</em>
+				selector: <em>farm-line</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},