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

package/src/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,100 @@
+// import { withDesign } from 'storybook-addon-designs';
+import Tooltip from '.';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+
+export default {
+	title: 'Interactions/Tooltip',
+	component: Tooltip,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Tooltip<br />
+				selector: <em>farm-tooltip</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=3779%3A6131',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Tooltips = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div style="padding-left: 80px; padding-top: 80px;">
+        <farm-tooltip
+            v-for="color of colors"
+            :key="color"
+            :color="color"
+            style="margin-right: 4px"
+        >
+            <span>
+			this is the tooltip for {{ color }}
+			</span>
+            <template v-slot:activator="{ on, attrs }">
+                {{ color }}
+            </template>
+        </farm-tooltip>
+	</div>`,
+});
+
+export const Iconed = () => ({
+	template: `<div style="padding-left: 80px; padding-top: 80px;">
+        <farm-tooltip>
+            some <em>sample</em> text
+            <br />with line break
+            <br />and a long text that does not fit
+            <template v-slot:activator="{ on, attrs }">
+                <farm-icon size="sm" color="gray">help-circle</farm-icon>
+            </template>
+        </farm-tooltip>
+	</div>`,
+});
+
+export const Visibility = () => ({
+	data() {
+		return {
+			show: false,
+		};
+	},
+	template: `<div style="padding-left: 80px; padding-top: 80px;">
+        <farm-tooltip v-model="show">
+            some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+			some <em>sample</em> text<br />
+            <template v-slot:activator="{ on, attrs }">
+			<farm-btn @click="show = !show">
+				toggle me
+			</farm-btn>
+            </template>
+        </farm-tooltip>
+	</div>`,
+});
+
+export const InsideCard = () => ({
+	template: `<div style="padding-left: 80px; padding-top: 80px;">
+        <farm-card style="padding: 32px">
+			<farm-tooltip>
+				this is the tooltip!
+				<template v-slot:activator="{ on, attrs }">
+					<farm-btn style="height: 80px">try me</farm-btn>
+				</template>
+			</farm-tooltip>
+		</farm-card>
+	</div>`,
+});

package/src/components/Tooltip/Tooltip.vue

@@ -0,0 +1,125 @@
+<template>
+	<span :class="{ 'farm-tooltip': true }" ref="parent">
+		<span @mouseover="onOver" @mouseout="onOut" ref="activator">
+			<slot name="activator"></slot>
+		</span>
+
+		<span
+			ref="popup"
+			:class="{
+				'farm-tooltip__popup': true,
+				['farm-tooltip--' + color]: true,
+				'farm-tooltip__popup--visible':
+					(!externalControl && showOver) || (externalControl && toggleComponent),
+			}"
+			:style="styles"
+			@mouseout="onOut"
+		>
+			<slot></slot>
+		</span>
+	</span>
+</template>
+<script lang="ts">
+import { PropType, ref, computed, reactive, onBeforeUnmount } from 'vue';
+import { calculateMainZindex } from '../../helpers';
+
+export default {
+	name: 'farm-tooltip',
+	props: {
+		/*
+		 * Tooltip color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'gray',
+		},
+		/**
+		 * Control visibility
+		 * v-model bind
+		 */
+		value: {
+			type: Boolean,
+			default: undefined,
+		},
+	},
+	setup(props) {
+		const parent = ref(null);
+		const popup = ref(null);
+		const activator = ref(null);
+		const showOver = ref(false);
+		const styles = reactive({
+			left: '0',
+			top: '0',
+			zIndex: 1,
+		});
+
+		const toggleComponent = computed(() => props.value);
+		const externalControl = computed(() => props.value !== undefined);
+
+		let hasBeenBoostrapped = false;
+
+		const onOver = () => {
+			showOver.value = true;
+
+			if (!hasBeenBoostrapped) {
+				document.querySelector('body').appendChild(popup.value);
+				const parentBoundingClientRect = parent.value.getBoundingClientRect();
+				const activatorBoundingClientRect = activator.value.getBoundingClientRect();
+				const popupBoundingClientRect = popup.value.getBoundingClientRect();
+
+				styles.left =
+					parentBoundingClientRect.left +
+					window.scrollX -
+					(80 - activatorBoundingClientRect.width / 2) +
+					'px';
+				styles.top =
+					parentBoundingClientRect.top +
+					window.scrollY -
+					(popupBoundingClientRect.height + 8) +
+					'px';
+				styles.zIndex = calculateMainZindex();
+
+				hasBeenBoostrapped = true;
+			}
+		};
+		const onOut = (event: MouseEvent) => {
+			showOver.value = parent.value.contains(event.relatedTarget);
+		};
+
+		onBeforeUnmount(() => {
+			if (hasBeenBoostrapped) {
+				document.querySelector('body').removeChild(popup.value);
+			}
+		});
+
+		return {
+			parent,
+			popup,
+			activator,
+			showOver,
+			toggleComponent,
+			externalControl,
+			styles,
+			onOver,
+			onOut,
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './Tooltip';
+</style>

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

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

package/src/components/Tooltip/index.ts

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

package/src/components/Typography/BodyText/BodyText.scss

@@ -0,0 +1,8 @@
+.farm-bodytext {
+	&--1 {
+		letter-spacing: 0.5px;
+	}
+	&--2 {
+		letter-spacing: 0.5px;
+	}
+}

package/src/components/Typography/BodyText/BodyText.stories.js

@@ -0,0 +1,58 @@
+import BodyText from './BodyText';
+
+export default {
+	title: 'Typography/BodyText',
+	component: BodyText,
+	parameters: {
+		docs: {
+			description: {
+				component: `BodyText<br />
+				selector: <em>farm-bodytext</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-bodytext': BodyText },
+	data() {
+		return {
+			types: [1, 2],
+			variations: ['regular', 'medium', 'bold'],
+		};
+	},
+	template: `<div>
+	<div v-for="type in types" :key="type">
+		<farm-bodytext
+			v-for="variation in variations"
+			:key="variation"
+			:type="type"
+			:variation="variation">
+			BodyText {{ type }} {{ variation }}
+		</farm-bodytext>
+	</div>
+	</div>`,
+});
+
+export const CustomTag = () => ({
+	data() {
+		return {
+			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],
+		};
+	},
+	template: `<div>
+		<farm-bodytext
+			v-for="t in tags"
+			:tag="t"
+			:key="t"
+			:type="1"
+			variation="regular"
+			>
+			BodyText with {{ t }} tag
+		</farm-bodytext>
+	
+	</div>`,
+});

package/src/components/Typography/BodyText/BodyText.vue

@@ -0,0 +1,51 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		
+		:weight="weight"
+		:size="size"
+		:key="key"
+		:class="{ [`farm-bodytext--${type}`]: true, [`farm-bodytext--${variation}`]: true }"
+	>
+		<slot></slot>
+	</farm-typography>
+</template>
+<script lang="ts">
+import {  computed, ref, watch, toRefs, PropType } from 'vue';
+import { Keys } from './configurations';
+
+export default {
+	inheritAttrs: true,
+	name: 'farm-bodytext',
+	props: {
+		/**
+		 * Type of the bodytext
+		 */
+		type: { type: [Number, String] as PropType<1 | 2>, default: 1 },
+		/**
+		 * Variation of the bodytext
+		 */
+		variation: { type: String as PropType<'regular' | 'medium' | 'bold'>, default: 'medium' },
+	},
+	setup(props) {
+		const { type, variation } = toRefs(props);
+		const key = ref(type.value + '_' + variation.value);
+
+		watch(
+			() => props,
+			() => {
+				key.value = type.value + '_' + variation.value;
+			}
+		);
+
+		const config = computed(() => Keys[key.value]);
+		const weight = computed(() => config.value.weight);
+		const size = computed(() => config.value.size);
+
+		return { weight, size, key, type, variation };
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'BodyText';
+</style>

package/src/components/Typography/BodyText/__tests__/BodyText.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import BodyText from '../BodyText.vue';
+
+describe('BodyText component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(BodyText, {});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should return weight', async () => {
+			await wrapper.setProps({
+				type: 2,
+			});
+			expect(component.weight).toEqual(500);
+		});
+	});
+});

package/src/components/Typography/BodyText/configurations.ts

@@ -0,0 +1,10 @@
+const Keys = {
+	'1_regular': { weight: 400, size: 'default' },
+	'1_medium': { weight: 500, size: 'default' },
+	'1_bold': { weight: 700, size: 'default' },
+	'2_regular': { weight: 400, size: 'md' },
+	'2_medium': { weight: 500, size: 'md' },
+	'2_bold': { weight: 700, size: 'md' },
+};
+
+export { Keys };

package/src/components/Typography/Caption/Caption.scss

@@ -0,0 +1,8 @@
+.farm-subtitle {
+	&--1 {
+		letter-spacing: 0.5px;
+	}
+	&--2 {
+		letter-spacing: 0.5px;
+	}
+}

package/src/components/Typography/Caption/Caption.stories.js

@@ -0,0 +1,54 @@
+import Caption from './Caption';
+
+export default {
+	title: 'Typography/Caption',
+	component: Caption,
+	parameters: {
+		docs: {
+			description: {
+				component: `Caption<br />
+				selector: <em>farm-caption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			variations: ['regular', 'medium', 'semiBold'],
+		};
+	},
+	template: `<div>
+		<farm-caption
+			v-for="variation in variations"
+			:key="variation"
+			:variation="variation">
+			Caption {{ variation }}
+		</farm-caption>
+
+	</div>`,
+});
+
+export const CustomTag = () => ({
+	data() {
+		return {
+			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],
+		};
+	},
+	template: `<div>
+		<farm-caption
+			v-for="t in tags"
+			:tag="t"
+			:key="t"
+			:type="1"
+			variation="regular"
+			>
+			Caption with {{ t }} tag
+		</farm-caption>
+	
+	</div>`,
+});

package/src/components/Typography/Caption/Caption.vue

@@ -0,0 +1,51 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		
+		:weight="weight"
+		:size="size"
+		:key="key"
+		:class="{ 'farm-caption': true, [`farm-caption--${variation}`]: true }"
+	>
+		<slot></slot>
+	</farm-typography>
+</template>
+<script lang="ts">
+import {  computed, ref, watch, toRefs, PropType } from 'vue';
+
+import { Keys } from './configurations';
+
+export default {
+	inheritAttrs: true,
+	name: 'farm-caption',
+	props: {
+		/**
+		 * Variation of the caption
+		 */
+		variation: {
+			type: String as PropType<'regular' | 'medium' | 'semiBold'>,
+			default: 'medium',
+		},
+	},
+	setup(props) {
+		const { variation } = toRefs(props);
+		const key = ref(variation.value);
+
+		watch(
+			() => props,
+			() => {
+				key.value = variation.value;
+			}
+		);
+
+		const config = computed(() => Keys[key.value]);
+		const weight = computed(() => config.value.weight);
+		const size = computed(() => config.value.size);
+
+		return { weight, size, key, variation };
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Caption';
+</style>

package/src/components/Typography/Caption/__tests__/Caption.spec.js

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import Caption from '../Caption.vue';
+
+describe('Caption component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Caption, {});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should return weight', async () => {
+			await wrapper.setProps({
+				variation: 'medium',
+			});
+			expect(component.weight).toEqual(500);
+		});
+	});
+});

package/src/components/Typography/Caption/configurations.ts

@@ -0,0 +1,7 @@
+const Keys = {
+	regular: { weight: 400, size: 'sm' },
+	medium: { weight: 500, size: 'sm' },
+	semiBold: { weight: 600, size: 'sm' },
+};
+
+export { Keys };

package/src/components/Typography/Heading/Heading.scss

@@ -0,0 +1,20 @@
+.farm-heading-- {
+	&h1 {
+		letter-spacing: 0.5px;
+	}
+	&h2 {
+		letter-spacing: 0.5px;
+	}
+	&h3 {
+		letter-spacing: 0.5px;
+	}
+	&h4 {
+		letter-spacing: 0.75px;
+	}
+	&h5 {
+		letter-spacing: 0.75px;
+	}
+	&h6 {
+		letter-spacing: 0.75px;
+	}
+}

package/src/components/Typography/Heading/Heading.stories.js

@@ -0,0 +1,32 @@
+import Heading from './Heading';
+
+export default {
+	title: 'Typography/Heading',
+	component: Heading,
+	parameters: {
+		docs: {
+			description: {
+				component: `Heading<br />
+				selector: <em>farm-heading</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			types: [1, 2, 3, 4, 5, 6],
+		};
+	},
+	template: `<div>
+		<farm-heading v-for="type in types" :key="type" :type="type">
+		Heading {{ type }}
+	</farm-heading>
+	</div>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/Typography/Heading/Heading.vue

@@ -0,0 +1,50 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		
+		:weight="weight"
+		:size="size"
+		:tag="tag"
+		:key="key"
+		:class="{ ['farm-heading--' + tag]: true }"
+	>
+		<slot></slot>
+	</farm-typography>
+</template>
+<script lang="ts">
+import {  computed, ref, watch, toRefs, PropType } from 'vue';
+
+import { Keys } from './configurations';
+
+export default {
+	inheritAttrs: true,
+	name: 'farm-heading',
+	props: {
+		/**
+		 * Type of the heading
+		 */
+		type: { type: [String, Number] as PropType<1 | 2 | 3 | 4 | 5 | 6>, default: 1 },
+	},
+	setup(props) {
+		const { type } = toRefs(props);
+		const key = ref(+new Date());
+
+		watch(
+			() => props.type,
+			() => {
+				key.value = +new Date();
+			}
+		);
+
+		const config = computed(() => Keys[type.value]);
+		const tag = computed(() => `h${type.value}`);
+		const weight = computed(() => config.value.weight);
+		const size = computed(() => config.value.size);
+
+		return { weight, size, tag, config, key };
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Heading';
+</style>