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

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

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import IdCaption from '../IdCaption.vue';
+
+describe('FilePicker component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(IdCaption);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/IdCaption/index.ts

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

package/src/components/Label/Label.scss

@@ -0,0 +1,33 @@
+.farm-label {
+    font-weight: bold;
+    display: block;
+    font-size: 12px;
+    margin-bottom: 8px;
+    line-height: 24px;
+    color: var(--farm-bw-black-50);
+    font-weight: 600;
+
+    &.farm-label--required:not(:has(.farm-tooltip)) {
+        &::after {
+            content: '*';
+            margin-left: 2px;
+            color: var(--farm-error-base);
+        }
+    }
+
+    &:has(.farm-tooltip) {
+        :deep(.farm-tooltip::before) {
+            content: '*';
+            margin-left: 1px;
+            margin-right: 2px;
+            color: var(--farm-error-base);
+        }
+    }
+
+    &:has(.farm-tooltip):not(.farm-label--required) {
+        :deep(.farm-tooltip::before) {
+            content: '';
+            margin-left: 2px;
+        }
+    }
+}

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

@@ -0,0 +1,60 @@
+// import { withDesign } from 'storybook-addon-designs';
+import Label from './Label.vue';
+
+export default {
+	title: 'Form/Label',
+	component: Label,
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
+		},
+		docs: {
+			description: {
+				component: `Label<br />
+				selector: <em>farm-label</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-label>Label</farm-label>',
+});
+
+export const Required = () => ({
+	template: `<div>
+		<farm-label required>Label</farm-label>
+	</div>`,
+});
+
+export const Tooltip = () => ({
+	template: `<div class="pt-9">
+		<farm-label>
+			Label with tooltip
+			<farm-tooltip>
+				this is the tooltip!
+				<template v-slot:activator="{ on, attrs }">
+					<farm-icon size="sm" color="gray">help-circle</farm-icon>
+				</template>
+			</farm-tooltip>
+		</farm-label>
+	</div>`,
+});
+
+export const TooltipWithRequired = () => ({
+	template: `<div class="pt-9">
+		<farm-label required>
+			Label with tooltip
+			<farm-tooltip>
+				this is the tooltip!
+				<template v-slot:activator="{ on, attrs }">
+					<farm-icon size="sm" color="gray">help-circle</farm-icon>
+				</template>
+			</farm-tooltip>
+		</farm-label>
+	</div>`,
+});

package/src/components/Label/Label.vue

@@ -0,0 +1,27 @@
+<template>
+	<label
+		:class="{ 'farm-label': true, 'farm-label--required': required }"
+		v-bind="$attrs"
+	>
+		<slot></slot>
+	</label>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-label',
+	props: {
+		/**
+		 * Show required indicator
+		 */
+		required: {
+			type: Boolean,
+			default: false,
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Label';
+</style>

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

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

package/src/components/Label/index.ts

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

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

@@ -0,0 +1,30 @@
+// import { withDesign } from 'storybook-addon-designs';
+import List from './List.vue';
+
+export default {
+	title: 'Display/List/List',
+	component: List,
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+
+		docs: {
+			description: {
+				component: `List<br />
+				selector: <em>farm-list</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: `<farm-list>
+		<farm-listitem clickable hoverColor="primary">primary</farm-listitem>
+		<farm-listitem clickable hoverColor="extra-1" hoverColorVariation="lighten">extra 1 lighten</farm-listitem>
+		<farm-listitem clickable hoverColor="error" hoverColorVariation="lighten">
+			<farm-icon size="sm" color="error">trash-can</farm-icon>
+			<farm-typography color="error" tag="span">Error</farm-typography>
+		</farm-listitem>
+	</farm-list>`,
+});

package/src/components/List/List.vue

@@ -0,0 +1,75 @@
+<template>
+	<ul ref="contentRef" @focusin="onFocusin" @focusout="onFocusout" @focus="onFocus">
+		<slot></slot>
+	</ul>
+</template>
+<script lang="ts">
+import {  onMounted, onUnmounted, ref } from 'vue';
+import { useFocus } from './composition';
+
+export default {
+	name: 'farm-list',
+	setup(_, { emit }) {
+		const contentRef = ref<HTMLElement>();
+		const isFocused = ref(false);
+		const { focus } = useFocus(contentRef);
+
+		onMounted(() => {
+			contentRef.value.querySelectorAll('[tabindex]:not([tabindex="-1"]), li').forEach(tag =>
+				tag.addEventListener('keydown', (e: KeyboardEvent) => {
+					e.preventDefault();
+					if (isFocused.value) {
+						emit('keydown', e);
+					}
+				})
+			);
+		});
+
+		onUnmounted(() => {
+			if (contentRef.value) {
+				contentRef.value
+					.querySelectorAll('[tabindex]:not([tabindex="-1"]), li')
+					.forEach(tag =>
+						tag.removeEventListener('keydown', (e: KeyboardEvent) => {
+							e.preventDefault();
+							if (isFocused.value) {
+								emit('keydown', e);
+							}
+						})
+					);
+			}
+		});
+
+		function onFocusin() {
+			isFocused.value = true;
+		}
+
+		function onFocusout() {
+			isFocused.value = false;
+		}
+
+		function onFocus(e: FocusEvent) {
+			if (
+				!(
+					isFocused.value ||
+					(e.relatedTarget && contentRef.value.contains(e.relatedTarget as Node))
+				)
+			) {
+				focus();
+			}
+		}
+
+		return {
+			contentRef,
+			focus,
+			onFocus,
+			onFocusin,
+			onFocusout,
+			isFocused,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './List';
+</style>

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

@@ -0,0 +1,33 @@
+import { shallowMount } from '@vue/test-utils';
+import List from '../List';
+
+describe('List component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(List);
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+	describe('Methods', () => {
+		it('should isFocused be true when call onFocusin', () => {
+			component.onFocusin();
+			expect(component.isFocused).toBeTruthy();
+		});
+
+		it('should isFocused be false when call onFocusout', () => {
+			component.onFocusout();
+			expect(component.isFocused).toBeFalsy();
+		});
+	});
+});

package/src/components/List/composition/index.ts

@@ -0,0 +1,3 @@
+import useFocus from './useFocus';
+
+export { useFocus };

package/src/components/List/composition/useFocus.ts

@@ -0,0 +1,49 @@
+import { Ref } from 'vue';
+
+type UseFocusReturn = {
+	focus: (location?: 'next' | 'prev' | 'first' | 'last') => void;
+};
+
+export default function useFocus(contentRef: Ref<HTMLElement>): UseFocusReturn {
+	function focus(location?: 'next' | 'prev' | 'first' | 'last') {
+		if (!contentRef.value) return;
+
+		const focusable = [
+			...contentRef.value.querySelectorAll('[tabindex]:not([tabindex="-1"]), li'),
+		].filter(el => !el.hasAttribute('disabled')) as HTMLElement[];
+
+		const idx = focusable.indexOf(document.activeElement as HTMLElement);
+
+		if (!location) {
+			if (!contentRef.value.contains(document.activeElement)) {
+				focusable[0].focus();
+			}
+		} else if (location === 'first') {
+			const savedTabIndex = focusable[0].getAttribute('tabindex');
+
+			focusable[0].setAttribute('tabindex', '-1');
+			focusable[0].focus();
+			focusable[0].setAttribute('tabindex', savedTabIndex);
+		} else if (location === 'last') {
+			focusable[focusable.length - 1].focus();
+		} else {
+			let el;
+			let idxx = idx;
+			const inc = location === 'next' ? 1 : -1;
+
+			do {
+				idxx += inc;
+				el = focusable[idxx];
+			} while ((!el || el.offsetParent == null) && idxx < focusable.length && idxx >= 0);
+			if (el) {
+				el.focus();
+			} else {
+				focus(location === 'next' ? 'first' : 'last');
+			}
+		}
+	}
+
+	return {
+		focus,
+	};
+}

package/src/components/List/index.ts

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

package/src/components/ListItem/ListItem.scss

@@ -0,0 +1,37 @@
+@import '../../configurations/theme-colors';
+
+.farm-listitem {
+	list-style-type: none;
+	transition: background-color 300ms linear;
+	padding: 8px;
+	height: 36px;
+	display: flex;
+	align-items: center;
+
+	&--clickable {
+		cursor: pointer;
+	}
+
+	> a {
+		text-decoration: none;
+	}
+
+	&:hover,
+	&:focus {
+		border-radius: 5px;
+
+		@each $color in $theme-colors-list {
+			&#{'.farm-listitem--' + $color + '-base'} {
+				background-color: rgba(themeColor($color), 0.27);
+			}
+
+			&#{'.farm-listitem--' + $color + '-lighten'} {
+				background-color: rgba(themeColor($color, 'lighten'), 0.27);
+			}
+
+			&#{'.farm-listitem--' + $color + '-darken'} {
+				background-color: rgba(themeColor($color, 'darken'), 0.27);
+			}
+		}
+	}
+}

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

@@ -0,0 +1,81 @@
+// import { withDesign } from 'storybook-addon-designs';
+import ListItem from './ListItem.vue';
+
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+
+const colors = Object.keys(baseThemeColors);
+const variations = ['base', 'darken', 'lighten'];
+
+export default {
+	title: 'Display/List/ListItem',
+	component: ListItem,
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `ListItem<br />
+				selector: <em>farm-listitem</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: `<farm-listitem>
+	Item
+	</farm-listitem>`,
+});
+
+export const HoverColors = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	methods: {
+		getIconVariation(variation) {
+			if (variation === 'base' || variation === 'lighten') {
+				return 'darken';
+			}
+			return 'base';
+		},
+	},
+	template: `<farm-row>
+		<farm-col v-for="color in colors" :key="color" cols="12" md="4" class="mb-4">
+			<h4>{{ color }}</h4>
+			<farm-listitem
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:hoverColor="color"
+				:hoverColorVariation="variation"
+				>
+				<farm-icon
+					:color="color"
+					:variation="getIconVariation(variation)"
+				>
+					book
+				</farm-icon>
+				{{ color }} {{ variation }}
+			</farm-listitem>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const Clickable = () => ({
+	methods: {
+		onClick() {
+			alert('Clicked');
+		},
+	},
+	template: `<farm-listitem
+			clickable
+			hoverColor="error"
+			hoverColorVariation="lighten"
+			@click="onClick"
+		>
+			try me
+		</farm-listitem>`,
+});

package/src/components/ListItem/ListItem.vue

@@ -0,0 +1,76 @@
+<template>
+	<li @click="onClick" :class="{
+		'farm-listitem': true,
+		[cssColorWithVariation]: cssColorWithVariation,
+		'farm-listitem--clickable': clickable || to,
+	}">
+		<slot></slot>
+	</li>
+</template>
+<script lang="ts">
+import { computed, PropType, toRefs } from 'vue';
+
+export default {
+	name: 'farm-listitem',
+	props: {
+		to: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Color on hover
+		 */
+		hoverColor: {
+			type: [String, null] as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'error'
+				| 'warning'
+				| 'info'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: null,
+		},
+		/**
+		 * Color variation on hover
+		 */
+		hoverColorVariation: {
+			type: [String, null] as PropType<'base' | 'lighten' | 'darken'>,
+			default: 'base',
+		},
+		/**
+		 * Is clickable
+		 */
+		clickable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const { hoverColor, hoverColorVariation } = toRefs(props);
+
+		const cssColorWithVariation = computed((): String => {
+			if (!hoverColor.value) {
+				return null;
+			}
+			return `farm-listitem--${hoverColor.value}-${hoverColorVariation.value}`;
+		});
+
+		const onClick = () => {
+			emit('click:item');
+		};
+
+		return {
+			cssColorWithVariation,
+			onClick,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './ListItem';
+</style>

package/src/components/ListItem/ListItem.vue.bkpv2

@@ -0,0 +1,84 @@
+<template>
+	<li
+		@click="onClick"
+		:class="{
+			'farm-listitem': true,
+			[cssColorWithVariation]: cssColorWithVariation,
+			'farm-listitem--clickable': clickable || to,
+		}"
+	>
+		<router-link :to="to" v-if="to">
+			<slot></slot>
+		</router-link>
+		<template v-else>
+			<slot></slot>
+		</template>
+	</li>
+</template>
+<script lang="ts">
+import {  computed, PropType, toRefs } from 'vue';
+
+export default {
+	name: 'farm-listitem',
+	props: {
+		to: {
+			type: String,
+			default: null,
+		},
+		/**
+		 * Color on hover
+		 */
+		hoverColor: {
+			type: [String, null] as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'error'
+				| 'warning'
+				| 'info'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: null,
+		},
+		/**
+		 * Color variation on hover
+		 */
+		hoverColorVariation: {
+			type: [String, null] as PropType<'base' | 'lighten' | 'darken'>,
+			default: 'base',
+		},
+		/**
+		 * Is clickable
+		 */
+		clickable: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props, { emit }) {
+		const { hoverColor, hoverColorVariation } = toRefs(props);
+
+		const cssColorWithVariation = computed((): String => {
+			if (!hoverColor.value) {
+				return null;
+			}
+			return `farm-listitem--${hoverColor.value}-${hoverColorVariation.value}`;
+		});
+
+		const onClick = () => {
+			emit('click');
+		};
+
+		return {
+			cssColorWithVariation,
+			onClick,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './ListItem';
+</style>

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

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

package/src/components/ListItem/index.ts

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