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

package/src/components/Icon/Icon.stories.js

@@ -0,0 +1,156 @@
+// import { withDesign } from 'storybook-addon-designs';
+import Icon from './Icon.vue';
+import sizes from '../../configurations/sizes';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+import bwThemeColors from '../../configurations/_theme-colors-bw.module.scss';
+import iconsList from './icons_list';
+const colors = Object.keys(baseThemeColors);
+
+import('./Icons.stories.scss');
+
+export default {
+	title: 'Display/Icons',
+	// decorators: [withDesign],
+	component: Icon,
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Icon<br />
+                selector: <em>farm-icon<em><br />
+                <span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Atom = () => ({
+	template: `<div class="icons-container">
+        <farm-icon color="primary">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors: [...colors, 'white'],
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors" :key="color" :color="color">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const ColorsLighten = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors" :key="color" :color="color" variation="lighten">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors: [...colors],
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon v-for="color of colors" :key="color" :color="color" variation="darken">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const ColorsBlack = () => ({
+	data() {
+		return {
+			bwColors: Object.keys(bwThemeColors),
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon 
+			v-for="bw in bwColors"
+			:key="bw.split('-')[0]" 
+			:color="bw.split('-')[0]"
+			:variation="bw.split('-')[1]">
+            book
+        </farm-icon>
+	</div>`,
+});
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+		};
+	},
+	template: `<div class="icons-container">
+        <div v-for="size of sizes">
+            <farm-icon :key="size" :size="size">
+                book
+            </farm-icon>
+            {{ size }}
+        </div>
+        <div>
+            <farm-icon size="1.5rem">
+                book
+            </farm-icon>
+            Custom: 1.5rem
+        </div>
+        <div>
+            <farm-icon size="0.5rem">
+                book
+            </farm-icon>
+            Custom: 0.5rem
+        </div>
+        <div>
+            <farm-icon size="14px">
+                book
+            </farm-icon>
+            Custom: 14px
+        </div>
+		<div>
+            <farm-icon size="14">
+                book
+            </farm-icon>
+            Custom: 14 (no unit, use px)
+        </div>
+	</div>`,
+});
+
+export const ListOfIcons = () => ({
+	data() {
+		return {
+			iconsList: [...iconsList],
+			filterKey: '',
+		};
+	},
+	watch: {
+		filterKey(newValue) {
+			this.iconsList = [...iconsList].filter(
+				item => item.toLowerCase().indexOf(newValue.toLowerCase()) >= 0
+			);
+		},
+	},
+	template: `<div>
+        <farm-textfield-v2 v-model="filterKey" style="margin: 0 auto; width: 240px;" />
+        <div class="icons-container__list">
+            <div v-for="icon of iconsList" :key="'icon_' + icon">
+                <farm-icon>
+                    {{ icon }}
+                </farm-icon>
+                <span>{{ icon }}</span>
+            </div>
+        </div>
+    </div>`,
+});

package/src/components/Icon/Icon.vue

@@ -0,0 +1,100 @@
+<template>
+	<i v-bind="$attrs" :class="classes" :size="$props.size" ref="el" />
+</template>
+<script lang="ts">
+import { computed, onMounted, PropType, ref, toRefs, watch } from 'vue';
+
+const breakPoints = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+export default {
+	name: 'farm-icon',
+	inheritAttrs: true,
+
+	props: {
+		/**
+		 * 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: 'primary',
+		},
+		size: {
+			type: String as
+				| PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'other (examples: 12px, 3rem)'>
+				| any,
+			default: 'default',
+		},
+		variation: {
+			type: String as PropType<
+				'lighten' | 'base' | 'darken' | '80' | '50' | '40' | '30' | '10' | '5'
+			>,
+			default: 'base',
+		},
+	},
+
+	setup(props, { slots }) {
+		const icon = ref('');
+		const { color, variation, size } = toRefs(props);
+		const el = ref(null);
+
+		const classes = computed(() => {
+			return {
+				'farm-icon': true,
+				['farm-icon--' + color.value]: true,
+				mdi: true,
+				['mdi-' + icon.value]: true,
+				'farm-icon--lighten': variation.value === 'lighten',
+				'farm-icon--darken': variation.value === 'darken',
+				['farm-icon--black-' + variation.value]: color.value === 'black',
+			};
+		});
+
+		const fontSize = computed(() => {
+			return isNaN(size.value) ? size.value : `${size.value}px`;
+		});
+
+		const slotDefault = computed(() => slots.default());
+
+		watch(slotDefault, () => {
+			checkForSlotContent();
+		});
+
+		onMounted(() => {
+			if (size.value !== 'default' && !breakPoints.includes(size.value)) {
+				el.value.style.fontSize = fontSize.value;
+			}
+			checkForSlotContent();
+		});
+
+		const checkForSlotContent = () => {
+			icon.value = !slotDefault.value ? '' : (slotDefault.value[0].children! as string).trim();
+		};
+
+		return {
+			el,
+			icon,
+			classes,
+			fontSize,
+			checkForSlotContent,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Icon.scss';
+</style>

package/src/components/Icon/Icons.stories.scss

@@ -0,0 +1,31 @@
+.icons-container {
+    display: flex;
+    flex-direction: row;
+    > i {
+        margin-right: 1rem;
+    }
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        margin-right: 1rem;
+        align-items: center;
+    }
+}
+
+.icons-container__list {
+    display: flex;
+  flex-wrap: wrap;
+    
+
+    > div {
+        display: flex;
+        flex-direction: column;
+        width: 120px;
+        height: 100px;
+        text-align: center;
+        span {
+            font-size: 12px;
+        }
+    }
+}

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

@@ -0,0 +1,34 @@
+import { shallowMount } from '@vue/test-utils';
+import Icon from '../Icon';
+
+describe('Icon component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Icon, {
+			slots: {
+				default: '  book ',
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('computed properties', () => {
+		it('get classes', () => {
+			expect(component.classes).toBeDefined();
+		});
+
+		it('get icon', () => {
+			expect(component.icon).toEqual('book');
+		});
+
+		it('get fontSize', () => {
+			expect(component.fontSize).toEqual('default');
+		});
+	});
+});