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

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

@@ -0,0 +1,210 @@
+import Typography from './Typography';
+import sizes from '../../configurations/sizes';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+import bwThemeColors from '../../configurations/_theme-colors-bw.module.scss';
+
+const colors = Object.keys(baseThemeColors);
+
+export default {
+	title: 'Typography/Atom',
+	component: Typography,
+	parameters: {
+		docs: {
+			description: {
+				component: `Typography<br />
+					selector: <em>farm-typography</em><br />
+					<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-typography type="legenda">Typography</farm-typography>',
+});
+
+export const Bold = () => ({
+	template: '<farm-typography bold>Typography</farm-typography>',
+});
+
+export const Italic = () => ({
+	template: '<farm-typography italic>Typography</farm-typography>',
+});
+
+export const Underline = () => ({
+	template: '<farm-typography underline>Typography</farm-typography>',
+});
+
+export const LineThrough = () => ({
+	template: '<farm-typography line-through>Typography</farm-typography>',
+});
+
+export const Weight = () => ({
+	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 = () => ({
+	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 = () => ({
+	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 = () => ({
+	data() {
+		return {
+			colors: ['default', ...colors],
+			bwColors: Object.keys(bwThemeColors),
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			:color="color"
+			:key="color"
+		>
+			Typography - color {{ color }}
+		</farm-typography>
+
+		<farm-typography
+			v-for="bw in bwColors"
+			:style="{ backgroundColor: bw === 'white' ? 'black' : 'white' }"
+			:color="bw.split('-')[0]"
+			:color-variation="bw.split('-')[1]"
+			:key="bw"
+		>
+			Typography - color {{ bw }}
+		</farm-typography>
+
+	</div>`,
+});
+
+export const ColorsLighten = () => ({
+	data() {
+		return {
+			colors: ['default', ...colors, 'white'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			color-variation="lighten"
+			:color="color"
+			:key="'lighten' + color"
+		>
+			Typography - color {{ color }} lighten
+		</farm-typography>
+	</div>`,
+});
+
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors: [...colors, 'white'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="color in colors"
+			color-variation="darken"
+			:color="color"
+			:key="'darken' + color"
+		>
+			Typography - color {{ color }} darken
+		</farm-typography>
+	</div>`,
+});
+
+export const Tags = () => ({
+	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>`,
+});
+
+export const LineHeight = () => ({
+	data() {
+		return {
+			heights: ['12px', '16px', '20px', '24px', '32px', '40px'],
+		};
+	},
+	template: `<div>
+		<farm-typography
+			v-for="h in heights"
+			tag="p"
+			:lineHeight="h"
+			:key="h"
+			style="border: 1px solid var(--farm-gray-base); padding: 8px;"
+		>
+			Typography - height {{ h }}<br />
+			Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+			sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+		</farm-typography>
+	</div>`,
+});
+
+export const Ellipsis = () => ({
+	template: `<div style="width: 100px;">
+		<farm-typography ellipsis>sample text for css text ellipsis</farm-typography>
+	</div>`,
+});
+
+export const Listener = () => ({
+	methods: {
+		handleEvent(event) {
+			alert(event);
+		},
+	},
+	template: `<farm-bodytext @click="handleEvent">
+		Click me
+	</farm-bodytext>`,
+});

package/src/components/Typography/Typography.vue

@@ -0,0 +1,132 @@
+<template>
+	<component
+		
+		:is="tag"
+		:class="{
+			'farm-typography': true,
+			['farm-typography--' + $props.size]: isSizeFromBreakpoints,
+			['farm-typography--weight-' + weight]: weight !== undefined,
+			'farm-typography--lighten': colorVariation === 'lighten',
+			'farm-typography--darken': colorVariation === 'darken',
+			['farm-typography--black-' + colorVariation]: color === 'black',
+			'farm-typography--ellipsis': ellipsis,
+		}"
+		:style="style"
+		:color="color"
+	>
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import {  computed, PropType, ref, toRefs } from 'vue';
+import breakPoints from '../../configurations/sizes';
+import typographyHtmlTags from '../../configurations/typographyHtmlTags';
+
+export default {
+	inheritAttrs: true,
+	name: 'farm-typography',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: {
+			type: String as PropType<
+				| 'p'
+				| 'span'
+				| 'h1'
+				| 'h2'
+				| 'h3'
+				| 'h4'
+				| 'h5'
+				| 'h6'
+				| 'legend'
+				| 'label'
+				| 'li'
+				| 'div'
+				| 'dd'
+				| 'dt'
+			>,
+			default: 'p',
+		},
+		/**
+		 * Size
+		 */
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+		},
+		/**
+		 * Line Height
+		 */
+		lineHeight: {
+			type: String,
+		},
+		/**
+		 * Font-weight
+		 */
+		weight: {
+			type: [Number, String] as PropType<100 | 200 | 300 | 400 | 500 | 600 | 700>,
+		},
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+				| 'black'
+				| 'white'
+			>,
+			default: '',
+		},
+		/**
+		 * Color variation
+		 */
+		colorVariation: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Add css ellipsis
+		 */
+		ellipsis: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	setup(props) {
+		const { size, lineHeight } = toRefs(props);
+
+		let style = ref({} as { fontSize: string; lineHeight: string });
+		let tag = ref(typographyHtmlTags.includes(props.tag) ? props.tag : 'p');
+
+		const isSizeFromBreakpoints = computed(() => breakPoints.includes(size.value));
+
+		if (size !== undefined && !isSizeFromBreakpoints.value) {
+			style.value.fontSize = size.value;
+		}
+		if (lineHeight !== undefined) {
+			style.value.lineHeight = lineHeight.value;
+		}
+
+		// eslint-disable-next-line
+		return {
+			style,
+			isSizeFromBreakpoints,
+			tag,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './Typography.scss';
+</style>

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

@@ -0,0 +1,60 @@
+import { shallowMount } from '@vue/test-utils';
+import Typography from '../Typography';
+
+describe('Typography component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Typography, {
+			propsData: {
+				tag: 'li',
+			},
+		});
+		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();
+		});
+
+		it('Should have style', () => {
+			expect(component.style).toBeDefined();
+		});
+	});
+
+	describe('Prop data', () => {
+		it('Should have li tag', async () => {
+			expect(component.tag).toEqual('li');
+		});
+
+		it('Should not allow invalid html tag', async () => {
+			const wrapperTest = shallowMount(Typography, {
+				propsData: {
+					tag: 'section',
+				},
+			});
+			expect(wrapperTest.vm.tag).toEqual('p');
+		});
+	});
+});

package/src/components/Typography/index.ts

@@ -0,0 +1,11 @@
+import Typography from './Typography.vue';
+
+import Heading from './Heading/Heading.vue';
+import Subtitle from './Subtitle/Subtitle.vue';
+import BodyText from './BodyText/BodyText.vue';
+import Caption from './Caption/Caption.vue';
+import OverlayText from './OverlayText/OverlayText.vue';
+import Small from './Small/Small.vue';
+
+export { Typography, Heading, Subtitle, BodyText, Caption, OverlayText, Small };
+export default Typography;

package/src/components/ValueCaption/ValueCaption.scss

@@ -0,0 +1,19 @@
+.farm-valuecaption {
+	display: flex;
+
+	.farm-icon-box {
+		margin-right: 8px;
+	}
+
+	div.farm-valuecaption__content {
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+
+		p {
+			margin-bottom: 0;
+			word-break: break-word;
+		}
+	}
+
+}

package/src/components/ValueCaption/ValueCaption.stories.js

@@ -0,0 +1,58 @@
+// import { withDesign } from 'storybook-addon-designs';
+import ValueCaption from '.';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+
+export default {
+	title: 'Display/ValueCaption',
+	component: ValueCaption,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Value Caption<br />
+				selector: <em>farm-valuecaption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `
+    <farm-valuecaption
+    icon="account-box-outline"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            R$ 1.000.000,00
+        </template>
+    </farm-valuecaption>
+    `,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="d-flex flex-column">
+       <farm-valuecaption
+			icon="account-box-outline"
+			v-for="color of colors" :key="color"
+			:iconBoxColor="color"
+			class="mb-3"
+		>
+			<template v-slot:title>
+				color: {{ color }}
+			</template>
+			<template v-slot:subtitle>
+				R$ 1.000,00
+			</template>
+		</farm-valuecaption>
+	</div>`,
+});

package/src/components/ValueCaption/ValueCaption.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="farm-valuecaption">
+		<farm-icon-box v-if="icon" :icon="icon" :color="iconBoxColor" size="md" />
+		<div class="farm-valuecaption__content">
+			<farm-caption variation="regular" color="gray" v-if="hasTitle">
+				<slot name="title"></slot>
+			</farm-caption>
+
+			<farm-bodytext bodytext type="1" variation="bold" v-if="hasSubtitle">
+				<slot name="subtitle"></slot>
+			</farm-bodytext>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, PropType } from 'vue';
+
+export default {
+	name: 'farm-valuecaption',
+	props: {
+		/**
+		 * Icon (from Material Icons)
+		 * Example: chart-bar
+		 */
+		icon: {
+			type: String,
+		},
+		/**
+		 * IconBox Color
+		 */
+		iconBoxColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
+	},
+
+	setup(_, { slots }) {
+		const hasTitle = computed(() => slots.title);
+		const hasSubtitle = computed(() => slots.subtitle);
+
+		return { hasSubtitle, hasTitle };
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './ValueCaption';
+</style>

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

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

package/src/components/ValueCaption/index.ts

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

package/src/components/layout/Basic.stories.js

@@ -0,0 +1,113 @@
+export default {
+	title: 'Layout/Container/Examples',
+	parameters: {
+		docs: {
+			description: {
+				component: `Full Container`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-container>content</farm-container>',
+});
+
+export const Structure = () => ({
+	template: `
+	<farm-container>
+		<farm-row>
+			<farm-col md="6" xs="12">
+				Main Filter
+			</farm-col>
+			<farm-col md="6" xs="12">
+				Botoes laterais
+			</farm-col>
+		</farm-row>
+		<farm-box>
+			Content<br />
+			Content<br />
+			Content<br />
+			Content<br />
+			Content<br />
+		</farm-box>
+		<farm-row>
+			<farm-col md="6" lg="3">
+				coluna 1
+			</farm-col>
+			<farm-col md="6" lg="3">
+				coluna 2
+			</farm-col>
+			<farm-col md="6" lg="3">
+				coluna 3
+			</farm-col>
+			<farm-col md="6" lg="3">
+				coluna 4
+			</farm-col>
+		</farm-row>
+
+		<farm-row>
+			<farm-col lg="2">
+				coluna 1
+			</farm-col>
+			<farm-col lg="2">
+				coluna 2
+			</farm-col>
+			<farm-col lg="2">
+				coluna 3
+			</farm-col>
+			<farm-col lg="2">
+				coluna 4
+			</farm-col>
+			<farm-col lg="2">
+				coluna 5
+			</farm-col>
+			<farm-col lg="2">
+				coluna 6
+			</farm-col>
+		</farm-row>
+
+		<farm-row :extra-decrease="true">
+			<farm-container-footer>
+				Footer content
+			</farm-container-footer>
+		</farm-row>
+	</farm-container>
+`,
+});
+
+export const Tertiary = () => ({
+	data() {
+		return {
+			steps: [
+				{ label: 'Step 1', icon: '' },
+				{ label: 'Step 2', icon: 'monitor' },
+				{ label: 'Step 3', icon: 'book' },
+				{ label: 'Step 4', icon: '' },
+			],
+			currentStep: 3,
+		};
+	},
+	template: `
+	<farm-container>
+		<farm-stepper-header :steps="steps" :currentStep="currentStep" />
+	</farm-container>
+`,
+});
+
+export const WithTabs = () => ({
+	data() {
+		return {
+			steps: [{ name: 'Step 1' }, { name: 'Step 2' }, { name: 'Step 3' }],
+			currentStep: 1,
+		};
+	},
+	template: `
+	<farm-container>
+		<farm-row extra-decrease>
+			<farm-tabs :tabs="steps" :showCounter="false" class="mt-n6" />
+		</farm-row>
+	</farm-container>
+`,
+});

package/src/components/layout/Box/Box.scss

@@ -0,0 +1,15 @@
+@import '../../../configurations/variables';
+
+.farm-box {
+    display: flex;
+    flex: 1 0 auto;
+    max-width: 100%;
+    transition: .2s cubic-bezier(.4, 0, .2, 1);
+
+    >div {
+        flex: 1 1 auto;
+        max-width: 100%;
+        position: relative;
+    }
+
+}