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

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

@@ -0,0 +1,38 @@
+import { shallowMount } from '@vue/test-utils';
+import Heading from '../Heading.vue';
+
+describe('Heading component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Heading, {});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+			expect(component.tag).toEqual('h1');
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should return tag', async () => {
+			await wrapper.setProps({
+				type: 5,
+			});
+			expect(component.tag).toEqual('h5');
+		});
+		it('Should return size', async () => {
+			await wrapper.setProps({
+				type: 5,
+			});
+			expect(component.size).toEqual('xl');
+		});
+	});
+});

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

@@ -0,0 +1,10 @@
+const Keys = {
+	1: { weight: 200, size: '60px' },
+	2: { weight: 300, size: '52px' },
+	3: { weight: 600, size: '44px' },
+	4: { weight: 500, size: '32px' },
+	5: { weight: 600, size: 'xl' },
+	6: { weight: 500, size: 'lg' },
+};
+
+export { Keys };

package/src/components/Typography/OverlayText/OverlayText.scss

@@ -0,0 +1,3 @@
+.farm-overlaytext {
+    letter-spacing: 1.5px;
+}

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

@@ -0,0 +1,25 @@
+import OverlayText from './OverlayText.vue';
+
+export default {
+	title: 'Typography/OverlayText',
+	component: OverlayText,
+	parameters: {
+		docs: {
+			description: {
+				component: `OverlayText<br />
+				selector: <em>farm-overlaytext</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `<farm-overlaytext>
+		FARM OVERLAYTEXT
+	</farm-overlaytext>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/Typography/OverlayText/OverlayText.vue

@@ -0,0 +1,22 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		
+		size="10px"
+		class="farm-overlaytext"
+		:weight="400"
+	>
+		<slot></slot>
+	</farm-typography>
+</template>
+<script lang="ts">
+
+
+export default {
+	inheritAttrs: true,
+	name: 'farm-overlaytext',
+};
+</script>
+<style lang="scss" scoped>
+@import 'OverlayText';
+</style>

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

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

package/src/components/Typography/Small/Small.scss

@@ -0,0 +1,3 @@
+.farm-small {
+	letter-spacing: 0.5px;
+}

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

@@ -0,0 +1,34 @@
+import Small from './Small';
+
+export default {
+	title: 'Typography/Small',
+	component: Small,
+	parameters: {
+		docs: {
+			description: {
+				component: `Small<br />
+				selector: <em>farm-bodysmall</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			variations: ['regular', 'medium', 'bold'],
+		};
+	},
+	template: `<div >
+        <div v-for="variation in variations" :key="variation">
+            <farm-bodysmall  :variation="variation">
+                Small {{ variation }}
+            </farm-bodysmall>
+        </div>
+	</div>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/Typography/Small/Small.vue

@@ -0,0 +1,47 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		
+		:weight="weight"
+		:size="size"
+		:key="key"
+		:class="{ 'farm-small': true, [`farm-small--${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-bodysmall',
+	props: {
+		/**
+		 * Variation of the small
+		 */
+		variation: { type: String as PropType<'regular' | 'medium' | 'bold'>, 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 'Small';
+</style>

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

@@ -0,0 +1,31 @@
+import { shallowMount } from '@vue/test-utils';
+import Small from '../Small.vue';
+
+describe('Small component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Small, {});
+		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 500', async () => {
+			await wrapper.setProps({
+				variation: 'medium',
+			});
+			expect(component.weight).toEqual(500);
+		});
+	});
+});

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

@@ -0,0 +1,7 @@
+const Keys = {
+	regular: { weight: 400, size: '10px' },
+	medium: { weight: 500, size: '10px' },
+	bold: { weight: 700, size: '10px' },
+};
+
+export { Keys };

package/src/components/Typography/Subtitle/Subtitle.scss

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

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

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

package/src/components/Typography/Subtitle/Subtitle.vue

@@ -0,0 +1,52 @@
+<template>
+	<farm-typography
+		v-bind="$attrs"
+		
+		:weight="weight"
+		:size="size"
+		:key="key"
+		:class="{ [`farm-subtitle--${type}`]: true, [`farm-subtitle--${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-subtitle',
+	props: {
+		/**
+		 * Type of the subtitle
+		 */
+		type: { type: [Number, String] as PropType<1 | 2>, default: 1 },
+		/**
+		 * Variation of the subtitle
+		 */
+		variation: { type: String as PropType<'regular' | 'medium'>, 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 'Subtitle';
+</style>

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

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

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

package/src/components/Typography/Typography.scss

@@ -0,0 +1,87 @@
+@import '../../configurations/variables';
+@import '../../configurations/mixins';
+@import '../../configurations/theme-colors';
+
+.farm-typography {
+	font-size: 16px;
+	color: var(--farm-text-primary);
+
+	&[bold] {
+		font-weight: bold;
+	}
+
+	&[italic] {
+		font-style: italic;
+	}
+
+	&[underline] {
+		text-decoration: underline;
+	}
+
+	&[line-through] {
+		text-decoration: line-through;
+	}
+
+	&:is(p) {
+		margin-bottom: auto;
+	}
+
+	&--lighten {
+		color: var(--farm-text-secondary);
+	}
+
+	&.farm-typography--ellipsis {
+		@include ellipsis;
+	}
+
+	@each $k in $theme-colors-list {
+		&#{'[color=' + $k + ']'} {
+			color: var(--farm-#{$k}-base);
+
+			&.farm-typography--lighten {
+				color: var(--farm-#{$k}-lighten);
+			}
+
+			&.farm-typography--darken {
+				color: var(--farm-#{$k}-darken);
+			}
+		}
+	}
+
+	&[color=white] {
+		color: white;
+	}
+
+	@each $s,
+	$val in $fontSizes {
+		&--#{$s} {
+			font-size: $val;
+		}
+	}
+
+	@each $w in $fontWeights {
+		&--weight-#{$w} {
+			font-weight: $w;
+		}
+	}
+
+}
+
+.farm-typography[color=black] {
+	color: var(--farm-bw-black);
+	@each $v in $bwVariations {
+		&.farm-typography--black-#{$v} {
+			color: var(--farm-bw-black-#{$v});
+		}
+	}
+}
+
+@include upToSm {
+
+	@each $s,
+	$val in $fontSizes {
+		.farm-typography--#{$s} {
+			font-size: calc(#{$val} - 2px);
+		}
+	}
+}