@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/ProgressBar/ProgressBar.vue

@@ -0,0 +1,111 @@
+<template>
+	<div :class="classes" :style="containerStyle">
+		<div :style="valueStyle"></div>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, PropType, toRefs } from 'vue';
+
+export default {
+	name: 'farm-progressbar',
+	props: {
+		/**
+		 * backgroundColor
+		 */
+		backgroundColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| any
+			>,
+			default: 'primary',
+		},
+		/**
+		 * color
+		 */
+		valueColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| any
+			>,
+			default: 'error',
+		},
+		/**
+		 * Value (form 0 to 100)
+		 */
+		value: {
+			type: Number,
+			required: true,
+		},
+	},
+
+	setup(props) {
+		const { backgroundColor, valueColor, value } = toRefs(props);
+
+		const classes = computed(() => {
+			const obj = {};
+
+			if (!backgroundColor.value.startsWith('#')) {
+				obj['farm-progressbar--' + backgroundColor.value] = true;
+			}
+			if (!valueColor.value.startsWith('#')) {
+				obj['farm-progressbar--value-' + valueColor.value] = true;
+			}
+
+			return {
+				'farm-progressbar': true,
+				...obj,
+			};
+		});
+
+		const valueStyle = computed(() => {
+			const obj = {
+				width: `${value.value}%`,
+			};
+			if (valueColor.value.startsWith('#')) {
+				obj['background-color'] = valueColor.value;
+			}
+			return obj;
+		});
+
+		const containerStyle = computed(() => {
+			const obj = {};
+
+			if (backgroundColor.value.startsWith('#')) {
+				obj['background-color'] = backgroundColor.value;
+			}
+
+			return obj;
+		});
+
+		return { classes, valueStyle, containerStyle };
+	},
+};
+</script>
+
+
+<style lang="scss" scoped>
+@import 'ProgressBar.scss';
+</style>
+
+

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

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import ProgressBar from '../ProgressBar';
+
+describe('ProgressBar component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ProgressBar, {
+			propsData: { value: 40 },
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('computed properties', () => {
+		it('classes', () => {
+			expect(component.classes).toBeDefined();
+			expect(component.classes).toHaveProperty('farm-progressbar');
+		});
+	});
+});

package/src/components/ProgressBar/index.ts

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

package/src/components/PromptUserToConfirm/PromptUserToConfirm.stories.js

@@ -0,0 +1,51 @@
+import PromptUserToConfirm from './PromptUserToConfirm';
+
+export default {
+	title: 'Interactions/PromptUserToConfirm',
+	component: PromptUserToConfirm,
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Prompt User to Confirm<br />
+				selector: <em>farm-promptusertoconfirm</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			model: false,
+		};
+	},
+	template: `<div style="max-width: 320px"><farm-promptusertoconfirm v-model="model"/>
+	match: {{ model }}
+	</div>`,
+});
+
+export const CustomTitle = () => ({
+	data() {
+		return {
+			model: false,
+		};
+	},
+	template: '<div style="max-width: 320px"><farm-promptusertoconfirm title="Custom"  v-model="model" /></div>',
+});
+
+export const CustomMatchInput = () => ({
+	data() {
+		return {
+			model: false,
+		};
+	},
+	template: `<div style="max-width: 320px">
+		<farm-promptusertoconfirm
+			title="Custom match input: CONFIRMAR"
+			match="CONFIRMAR"
+			v-model="model" />
+		match: {{ model }}
+	</div>`,
+});

package/src/components/PromptUserToConfirm/PromptUserToConfirm.vue

@@ -0,0 +1,62 @@
+<template>
+	<farm-form v-model="formVal" autocomplete="off">
+		<farm-caption v-html="title" color="gray" />
+		<farm-textfield-v2
+			v-model="matchInput"
+			class="mt-3"
+			:rules="[rules.checkRemove]"
+		></farm-textfield-v2>
+	</farm-form>
+</template>
+<script lang="ts">
+
+export default {
+	name: 'farm-promptusertoconfirm',
+	props: {
+		/**
+		 * String to be matched with user prompt
+		 */
+		match: {
+			type: String,
+			default: 'EXCLUIR',
+		},
+		/**
+		 * Object to be used as value (or v-model)
+		 */
+		value: {
+			required: true,
+			type: Boolean,
+		},
+		/**
+		 * Title
+		 */
+		title: {
+			type: String,
+			default: 'Escreva no campo abaixo "EXCLUIR" para confirmar a exclusão.',
+		},
+	},
+	data() {
+		return {
+			rules: {
+				checkRemove: value => {
+					return value === this.match;
+				},
+			},
+			matchInput: null,
+		};
+	},
+	computed: {
+		formVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+	},
+	mounted() {
+		this.matchInput = null;
+	},
+};
+</script>

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

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

package/src/components/PromptUserToConfirm/index.ts

@@ -0,0 +1,3 @@
+import PromptUserToConfirm from './PromptUserToConfirm.vue';
+
+export default PromptUserToConfirm;

package/src/components/Radio/Radio.scss

@@ -0,0 +1,109 @@
+@import '../../configurations/variables';
+@import '../../configurations/theme-colors';
+
+.farm-radio-wrapper {
+	align-items: center;
+	display: flex;
+}
+
+input[type='radio'] {
+	-webkit-appearance: none;
+	appearance: none;
+	background-color: #ffffff;
+	margin: 0;
+	font: inherit;
+	color: rgba(0, 0, 0, 0.6);
+	border: 2.5px solid themeColor('neutral', 'darken');
+	border-radius: 50%;
+	display: grid;
+	place-content: center;
+	cursor: pointer;
+
+	&::before {
+		content: '';
+		border-radius: 50%;
+		transform: scale(0);
+		transition: 120ms transform ease-in-out;
+	}
+
+	&.farm-radio--checked::before {
+		transform: scale(1);
+	}
+
+	&: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;
+	}
+
+	@each $color in $theme-colors-list {
+		&#{'[color=' + $color + ']'} {
+			&.farm-radio--checked::before {
+				box-shadow: inset 16px 16px themeColor($color, 'base');
+			}
+
+			&.farm-radio--checked {
+				border-color: themeColor($color, 'base');
+			}
+		}
+	}
+
+	&: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 {
+	#{'input[type="radio"][custom-size=' + $size + ']'} {
+		width: $value;
+		height: $value;
+
+		&::before {
+			content: '';
+
+			@if $value == 14px {
+				width: 6px;
+				height: 6px;
+			}
+
+			@else {
+				width: $value / 2;
+				height: $value / 2;
+			}
+		}
+	}
+}
+
+.farm-label {
+	margin-left: 10px;
+	margin-bottom: 0;
+	cursor: pointer;
+}

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

@@ -0,0 +1,147 @@
+// import { withDesign } from 'storybook-addon-designs';
+import Radio from './Radio.vue';
+import sizes from '../../configurations/sizes';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+
+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-primary-base);">ready for use</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 by method</farm-btn>
+			<farm-btn @click="v = null">reset by value</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>`,
+});
+
+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" :id="size" :value="size" :size="size"  />&nbsp;&nbsp;<label  :for="size">{{ size }}</label>
+		</div>
+	</div>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			v: 1,
+		};
+	},
+	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" :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

@@ -0,0 +1,110 @@
+<template>
+	<div class="farm-radio-wrapper">
+		<input
+			:class="{
+				'farm-radio': true,
+				'farm-radio--checked': isChecked,
+			}"
+			:id="id"
+			type="radio"
+			:color="color"
+			:custom-size="$props.size"
+			:checked="isChecked"
+			:value="value"
+			v-bind="$attrs"
+			@click="onClick"
+		/>
+		<farm-label v-if="label" :for="id">
+			{{ label }}
+		</farm-label>
+	</div>
+</template>
+<script lang="ts">
+import { PropType, ref, watch } from 'vue';
+
+export default {
+	name: 'farm-radio',
+	model: {
+		prop: 'modelValue',
+	},
+	props: {
+		/**
+		 * v-model binding
+		 */
+		modelValue: { default: '' },
+		/**
+		 * 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: 'sm',
+		},
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Label
+		 */
+		label: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * ID
+		 */
+		id: {
+			type: String,
+			default: '',
+		},
+	},
+	setup(props, { emit }) {
+		const innerValue = ref(props.modelValue);
+		const value = ref(props.value);
+
+		const isChecked = ref<Boolean>(innerValue.value == value.value);
+
+		watch(
+			() => props.modelValue,
+			newValue => {
+				isChecked.value = newValue == value.value;
+			}
+		);
+
+		const onClick = event => {
+			emit('change', event.target.value);
+			emit('update:modelValue', event.target.value);
+		};
+
+		const reset = () => {
+			emit('update:modelValue', null);
+		};
+		const validate = () => {};
+
+		return { isChecked, onClick, reset, validate };
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Radio';
+</style>

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

@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils';
+
+import Radio from '../Radio.vue';
+
+describe('Radio component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Radio, {
+			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/Radio/index.ts

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