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

package/package.json

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

package/src/components/AlertReload/AlertReload.scss

@@ -0,0 +1,33 @@
+@import '../../configurations/functions';
+
+.farm-alert-reload {
+    border: 1px solid var(--v-error-base);
+    border-radius: 8px;
+    padding: gutter('sm') gutter('md');
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    &__label {
+        padding: 0 gutter('sm');
+    }
+
+    >div {
+        display: flex;
+    }
+
+    &--vertical {
+        flex-direction: column;
+
+        >div {
+            margin-bottom: gutter('sm');
+        }
+    }
+}
+
+.farm-btn {
+    .farm-icon {
+        margin-right: gutter('sm');
+    }
+}
+

package/src/components/AlertReload/AlertReload.stories.js

@@ -1,13 +1,15 @@
 import AlertReload from './AlertReload.vue';
 
 export default {
-    title: 'API/AlertReload',
-    component: AlertReload,
+	title: 'API/AlertReload',
+	component: AlertReload,
 };
 
 export const Primary = () => ({
-    components: { AlertReload },
-    template: '<AlertReload label="Ocorreu um erro ao carregar as informações" />',
+	components: { AlertReload },
+	template: `<div style="width: 480px;">
+    <AlertReload label="Text" />
+    </div>`,
 });
 
 Primary.storyName = 'Básico';

package/src/components/AlertReload/AlertReload.vue

@@ -1,30 +1,33 @@
 <template>
-	<v-alert dense outlined type="error" class="farm-alert-reload">
-		<v-row align="center">
-			<v-col class="grow">
+	<div
+		:class="{
+			'farm-alert-reload': true,
+			'farm-alert-reload--vertical': $props.vertical,
+		}"
+	>
+		<div>
+			<farm-icon color="error">alert</farm-icon>
+			<farm-typography tag="span" color="error" class="farm-alert-reload__label">
 				{{ label }}
-			</v-col>
-			<v-col class="shrink">
-				<farm-btn color="secondary" class="ml-3" alt="Recarregar" @click="$emit('onClick')">
-					<i class="mdi mdi-refresh farm-icon"></i>
-					Recarregar
-				</farm-btn>
-			</v-col>
-		</v-row>
-	</v-alert>
+			</farm-typography>
+		</div>
+		<farm-btn color="secondary" alt="Recarregar" @click="$emit('onClick')">
+			<farm-icon>refresh</farm-icon>
+			Recarregar
+		</farm-btn>
+	</div>
 </template>
-<script>
-import VAlert from 'vuetify/lib/components/VAlert';
-import { VRow, VCol } from 'vuetify/lib/components/VGrid';
+<script lang="ts">
 import DefaultButton from '../Buttons/DefaultButton';
+import Icon from '../Icon';
+import Typography from '../Typography';
 
 export default {
 	name: 'farm-alert-reload',
 	components: {
-		VAlert,
-		VRow,
-		VCol,
 		'farm-btn': DefaultButton,
+		'farm-icon': Icon,
+		'farm-typography': Typography,
 	},
 	props: {
 		/**
@@ -34,14 +37,17 @@ export default {
 			type: String,
 			default: '',
 		},
+		/**
+		 * Vertical?
+		 */
+		vertical: {
+			type: Boolean,
+			default: false,
+		},
 	},
 };
 </script>
 
 <style lang="scss" scoped>
-.farm-btn {
-	.farm-icon {
-		margin-right: 1rem;
-	}
-}
+@import 'AlertReload';
 </style>

package/src/components/AlertReload/index.ts

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

package/src/components/Buttons/DefaultButton/DefaultButton.scss

@@ -1,4 +1,5 @@
 @import '../../../configurations/variables';
+@import '../../../configurations/mixins';
 
 .farm-btn {
     font-size: 0.75rem;
@@ -17,7 +18,7 @@
     user-select: none;
     vertical-align: middle;
     white-space: nowrap;
-    line-height: 1rem;
+    line-height: 16px;
     height: 36px;
     min-width: 64px;
     padding: 0 16px;
@@ -213,11 +214,17 @@
     box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%), 0px 1px 5px 0px rgb(0 0 0 / 12%);
 }
 
-@media screen and (max-width: 600px) {
+@include upToSm {
+    .farm-btn {
+        padding: 0 12px;
+        line-height: 12px;
+        min-width: 48px;
+    }
+}
 
+@media screen and (max-width: 600px) {
     .farm-btn.farm-btn--responsive {
         width: 100%;
         margin: 0;
     }
-
 }

package/src/components/DialogFooter/DialogFooter.scss

@@ -14,7 +14,7 @@
     margin-top: 0;
 }
 
-@include for-sm-breakpoint {
+@include forXsOnly {
     .farm-btn {
         margin-left: 0;
         margin-top: gutter();

package/src/components/Typography/Typography.scss

@@ -0,0 +1,35 @@
+@import '../../configurations/variables';
+@import '../../configurations/mixins';
+
+.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;
+        }
+    }
+}
+
+@include upToSm {
+    @each $s, $val in $fontSizes {
+        .farm-typography--#{$s} {
+            font-size: calc(#{$val} - 2px);
+        }
+    }
+}

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,59 @@
+<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';
+import breakPoints from '../../configurations/sizes';
+import typographyHtmlTags from '../../configurations/typographyHtmlTags';
+
+export default Vue.extend({
+	inheritAttrs: true,
+	name: 'farm-typography',
+	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) {
+
+		const { weight } = context.attrs;
+		const { size } = props;
+
+		let style = ref({});
+		let tag = ref(typographyHtmlTags.includes(props.tag) ? props.tag : 'p');
+
+		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,
+			tag,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './Typography.scss';
+</style>

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

@@ -0,0 +1,57 @@
+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();
+		});
+	});
+
+	describe('Prop data', () => {
+
+		it('Should have li tag', async () => {
+			expect(wrapper.vm.tag).toEqual('li');
+		});
+
+		it('Should not allow invalid html tag', async () => {
+			const wrapperTest = shallowMount(Typography, {
+				propsData: {
+					tag: 'div',
+				},
+			});
+			expect(wrapperTest.vm.tag).toEqual('p');
+		});
+	});
+});

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/_mixins.scss

@@ -1,5 +1,25 @@
-@mixin for-sm-breakpoint {
+@mixin forXsOnly {
     @media (max-width: 599px) {
         @content;
     }
+}
+@mixin upToSm {
+    @media (max-width: 959px) {
+        @content;
+    }
+}
+@mixin upToMd {
+    @media (max-width: 1263px) {
+        @content;
+    }
+}
+@mixin fromSm {
+    @media (min-width: 960) {
+        @content;
+    }
+}
+@mixin fromMd {
+    @media (min-width: 1264px) {
+        @content;
+    }
 }

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/configurations/colors.ts

@@ -2,7 +2,6 @@ export default [
 	'primary',
 	'secondary',
 	'error',
-	'extra',
 	'accent',
 	'info',
 	'success',

package/src/configurations/typographyHtmlTags.ts

@@ -0,0 +1 @@
+export default ['p', 'span', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend', 'label', 'li'];

package/src/examples/AlertReload.stories.ts

@@ -0,0 +1,33 @@
+import { withDesign } from 'storybook-addon-designs';
+import { AlertReload } from '../main';
+
+export default {
+	title: 'Examples/AlertReload',
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `AlertReload`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	components: {
+		'farm-alert-reload': AlertReload,
+	},
+	template: `<div style="width: 480px;">
+    <farm-alert-reload label="Text" />
+    </div>`,
+});
+
+export const Vertical = () => ({
+	components: {
+		'farm-alert-reload': AlertReload,
+	},
+	template: `<div style="width: 480px;">
+    <farm-alert-reload label="Text" vertical />
+    </div>`,
+});

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

@@ -2,7 +2,6 @@ import DataTableEmptyWrapper from './components/DataTableEmptyWrapper';
 
 import DataTablePaginator from './components/DataTablePaginator';
 import DataTableHeader from './components/DataTableHeader';
-import AlertReload from './components/AlertReload';
 import MainFilter from './components/MainFilter';
 import Loader from './components/Loader';
 import FilePicker from './components/FilePicker';
@@ -33,7 +32,6 @@ export {
 	Tabs,
 	DialogHeader,
 	DialogFooter,
-	AlertReload,
 	DefaultTextField,
 	RangeDatePicker,
 	DatePicker,
@@ -47,6 +45,7 @@ export {
 	Collapsible,
 };
 
+export * from './components/AlertReload';
 export * from './components/Buttons/DefaultButton';
 export * from './components/Buttons/DangerButton';
 export * from './components/Buttons/ConfirmButton';
@@ -70,6 +69,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';