@farm-investimentos/front-mfe-components 7.6.2 → 8.0.0

package/package.json

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

package/src/components/Typography/Typography.scss

@@ -0,0 +1,28 @@
+@import '../../configurations/variables';
+
+.farm-typography {
+    font-size: 1rem;
+
+    &[bold] {
+        font-weight: bold;
+    }
+
+    &[italic] {
+        font-style: italic;
+    }
+ 
+
+    @each $k in $colors {
+        &#{'[color=' + $k + ']'} {
+            color: var(--v-#{$k}-base);
+        }
+    }
+
+    @each $s, $val in $fontSizes {
+        &--#{$s} {
+            font-size: $val;
+        }
+    }
+    
+
+}

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

@@ -0,0 +1,25 @@
+import Typography from './Typography.vue';
+
+export default {
+	title: 'API/Typography',
+	component: Typography,
+	parameters: {
+		docs: {
+			description: {
+				component: `Typography<br />
+				selector: <em>farm-typography</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-typography': Typography },
+	template: `<farm-typography color="secondary">
+		farm typography
+	</farm-typography>`,
+});
+
+Primary.storyName = 'Basic';

package/src/components/Typography/Typography.vue

@@ -0,0 +1,66 @@
+<template>
+	<component
+		:is="tag"
+		:class="{
+			'farm-typography': true,
+			['farm-typography--' + $props.size]: isSizeFromBreakpoints,
+		}"
+		:style="style"
+	>
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import Vue, { computed, PropType, ref } from 'vue';
+
+const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+export default Vue.extend({
+	inheritAttrs: true,
+	props: {
+		tag: {
+			type: String as PropType<
+				| 'p'
+				| 'span'
+				| 'h1'
+				| 'h2'
+				| 'h3'
+				| 'h4'
+				| 'h5'
+				| 'h6'
+				| 'legend'
+				| 'label'
+				| 'li'
+			>,
+			default: 'p',
+		},
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+		},
+	},
+	setup(props, context) {
+		let style = ref({});
+
+		const { weight } = context.attrs;
+		const { size } = props;
+
+		const isSizeFromBreakpoints = computed(() => breakPoints.includes(size));
+
+		if (props.size !== undefined && !isSizeFromBreakpoints.value) {
+			style.value.fontSize = size;
+		}
+
+		if (weight) {
+			style.value.fontWeight = weight;
+		}
+
+		return {
+			style,
+			isSizeFromBreakpoints,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './Typography.scss';
+</style>

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

@@ -0,0 +1,38 @@
+import { shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Typography from '../Typography';
+
+describe('Typography component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Typography, {});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('Computed properties', () => {
+		it('Should have isSizeFromBreakpoints', () => {
+			expect(component.isSizeFromBreakpoints).toBeFalsy();
+		});
+
+		it('Should have isSizeFromBreakpoints truthy', async () => {
+			const wrapperTest = shallowMount(Typography, {
+				propsData: {
+					size: 'lg',
+				},
+			});
+			expect(wrapperTest.vm.isSizeFromBreakpoints).toBeTruthy();
+		});
+	});
+});

package/src/components/Typography/index.ts

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

package/src/configurations/_functions.scss

@@ -2,4 +2,8 @@
 
 @function gutter($key: 'default') {
     @return map-get($gutters, $key)
+}
+
+@function fontSize($key: 'default') {
+    @return map-get($fontSizes, $key)
 }

package/src/configurations/_variables.scss

@@ -1,4 +1,4 @@
-$colors: primary, secondary, error, extra, accent, info, success, warning, gray, yellow, white;
+$colors: primary, secondary, error, accent, info, success, warning, gray, yellow, white;
 $sizes: (
     "xs": 12px,
     "sm": 16px,
@@ -12,4 +12,14 @@ $gutters: (
     "default": 12px,
     'md': 16px,
     "lg": 36px,
-    "xl": 40px);
+    "xl": 40px
+);
+
+$fontSizes: (
+    "xs": 8px,
+    "sm": 12px,
+    "md": 14px,
+    "default": 16px,
+    "lg": 20px,
+    "xl": 24px
+);

package/src/examples/Typography.stories.js

@@ -0,0 +1,117 @@
+import { Typography } from '../main.ts';
+import sizes from '../configurations/sizes';
+import colors from '../configurations/colors';
+
+export default {
+	title: 'Examples/Typography',
+	parameters: {
+		docs: {
+			description: {
+				component: `Typography<br />selector: <em>farm-typography</em>`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { 'farm-typography': Typography },
+	template: '<farm-typography type="legenda">Typography</farm-typography>',
+});
+
+export const Bold = () => ({
+	components: { 'farm-typography': Typography },
+	template: '<farm-typography bold>Typography</farm-typography>',
+});
+
+export const Italic = () => ({
+	components: { 'farm-typography': Typography },
+	template: '<farm-typography italic>Typography</farm-typography>',
+});
+
+export const Weight = () => ({
+	components: { 'farm-typography': Typography },
+	data() {
+		return {
+			weights: [100, 200, 300, 400, 500, 600, 700],
+		};
+	},
+	template: `<div>
+		<farm-typography v-for="w in weights" :weight="w" :key="w">Typography - weight {{ w }}</farm-typography>
+	</div>`,
+});
+
+const newSizes = [...sizes];
+newSizes.splice(3, 0, 'default');
+
+export const Sizes = () => ({
+	components: { 'farm-typography': Typography },
+	data() {
+		return {
+			sizes: newSizes,
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="s in sizes"
+			:size="s"
+			:key="s"
+		>
+			Typography - size {{ s }}
+		</farm-typography>
+	</div>`,
+});
+
+export const CustomSizes = () => ({
+	components: { 'farm-typography': Typography },
+	data() {
+		return {
+			sizes: ['11px', '1.12876rem', '48px'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="s in sizes"
+			:size="s"
+			:key="s"
+		>
+			Typography - size {{ s }}
+		</farm-typography>
+	</div>`,
+});
+
+export const Colors = () => ({
+	components: { 'farm-typography': Typography },
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			:color="color"
+			:key="color"
+		>
+			Typography - color {{ color }}
+		</farm-typography>
+	</div>`,
+});
+
+export const Tags = () => ({
+	components: { 'farm-typography': Typography },
+	data() {
+		return {
+			tags: ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="t in tags"
+			:tag="t"
+			:key="t"
+		>
+			Typography - tag {{ t }}
+		</farm-typography>
+	</div>`,
+});

package/src/main.ts

@@ -70,6 +70,7 @@ export * from './components/Stepper';
 export * from './components/Switcher';
 export * from './components/TextField';
 export * from './components/Tooltip';
+export * from './components/Typography';
 
 export * from './components/layout/Container';
 export * from './components/layout/ContainerFooter';