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

package/src/components/Icon/index.ts

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

package/src/components/IconBox/IconBox.scss

@@ -0,0 +1,42 @@
+@import '../../configurations/variables';
+@import '../../configurations/theme-colors';
+
+.farm-icon-box {
+	width: 48px;
+	height: 48px;
+	border-radius: 8px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	@each $color in $theme-colors-list {
+		&#{'--' + $color} {
+			background: var(--farm-#{$color}-lighten);
+		}
+	}
+
+	&--neutral .farm-icon.farm-icon {
+		color: var(--farm-neutral-darken);
+	}
+	&--secondary .farm-icon.farm-icon,
+	&--gray .farm-icon.farm-icon {
+		color: white;
+	}
+}
+
+.farm-icon-box--inverted.farm-icon-box {
+	@each $color in $theme-colors-list {
+		&#{'--' + $color} {
+			background: var(--farm-#{$color}-base);
+		}
+	}
+
+	.farm-icon.farm-icon--white {
+		color: white;
+	}
+
+	&--neutral .farm-icon.farm-icon--white {
+		color: var(--farm-neutral-darken);
+	}
+
+}

package/src/components/IconBox/IconBox.stories.js

@@ -0,0 +1,92 @@
+// import { withDesign } from 'storybook-addon-designs';
+import IconBox from './IconBox';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+import sizes from '../../configurations/sizes';
+import('../Icon/Icons.stories.scss');
+
+export default {
+	title: 'Display/IconBox',
+	component: IconBox,
+	// decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `IconBox<br />
+				selector: <em>farm-icon-box</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	template: `<div class="icons-container">
+        <farm-icon-box
+			icon="book" />
+	</div>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon-box
+			v-for="color of colors"
+			:key="color"
+			:color="color"
+			icon="book" />
+	</div>`,
+});
+
+export const ColorsDarken = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon-box
+			v-for="color of colors"
+			:key="color"
+			:color="color"
+			variation="darken"
+			icon="book" />
+	</div>`,
+});
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+		};
+	},
+	template: `<div class="icons-container">
+        <div v-for="size of sizes" :key="size">
+            <farm-icon-box icon="book" :key="size" :size="size" />
+			{{ size }}
+        </div>
+       
+	</div>`,
+});
+
+export const Inverted = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon-box
+			v-for="color of colors"
+			:key="'inverted_' + color"
+			:color="color"
+			:inverted="true"
+			icon="book"
+			 />
+	</div>`,
+});

package/src/components/IconBox/IconBox.vue

@@ -0,0 +1,78 @@
+<template>
+	<div
+		:class="{
+			'farm-icon-box': true,
+			[cssColorClass]: true,
+			'farm-icon-box--inverted': inverted,
+		}"
+		:size="size"
+	>
+		<farm-icon :color="inverted ? 'white' : color" :variation="variation" :size="size">
+			{{ iconParsed }}
+		</farm-icon>
+	</div>
+</template>
+
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-icon-box',
+	props: {
+		/**
+		 * Icon
+		 */
+		icon: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
+		variation: {
+			type: String as PropType<'base' | 'darken'>,
+			default: 'base',
+		},
+		size: {
+			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
+			default: 'md',
+		},
+		/**
+		 * Inverted
+		 */
+		inverted: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		iconParsed() {
+			return this.icon.indexOf('mdi-') === 0 ? this.icon.split('mdi-')[1] : this.icon;
+		},
+		cssColorClass() {
+			return `farm-icon-box--${this.color}`;
+		},
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './IconBox.scss';
+</style>

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

@@ -0,0 +1,37 @@
+import { shallowMount } from '@vue/test-utils';
+import IconBox from '../IconBox';
+
+describe('IconBox component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(IconBox, {
+			propsData: {
+				icon: 'mdi-book',
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+
+	describe('computed properties', () => {
+		it('get iconParsed', () => {
+			expect(component.iconParsed).toBeDefined();
+			expect(component.iconParsed).toEqual('book');
+		});
+
+		it('get cssColorClass', () => {
+			expect(component.cssColorClass).toEqual('farm-icon-box--primary');
+		});
+	});
+});

package/src/components/IconBox/index.ts

@@ -0,0 +1,3 @@
+import IconBox from './IconBox.vue';
+
+export default IconBox;

package/src/components/IdCaption/IdCaption.scss

@@ -0,0 +1,51 @@
+@import '../../configurations/mixins';
+
+.idcaption {
+	display: flex;
+	min-height: 48px;
+	max-width: 100%;
+
+	.farm-icon-box {
+		margin-right: 8px;
+	}
+
+	&.farm-idcaption--noicon .idcaption__body {
+		max-width: 100%;
+	}
+
+	&__body {
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-content: flex-start;
+		max-width: calc(100% - 48px);
+
+		&--single {
+			justify-content: center;
+		}
+
+		.farm-typography {
+
+			margin-bottom: 0;
+			display: flex;
+			flex: none;
+			position: relative;
+			align-items: center;
+			height: 18px;
+
+			>span {
+				max-width: 100%;
+				@include ellipsis;
+			}
+		}
+
+		.farm-tooltip {
+			padding-right: 1px;
+		}
+	}
+
+	&.farm-idcaption--noheight {
+		min-height: auto;
+	}
+}

package/src/components/IdCaption/IdCaption.stories.js

@@ -0,0 +1,224 @@
+// import { withDesign } from 'storybook-addon-designs';
+import IdCaption from './';
+
+export default {
+	title: 'Display/IdCaption',
+	component: IdCaption,
+	// decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Id Caption<br />
+				selector: <em>farm-idcaption</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=4087%3A6463',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+    methods: {
+        onLinkClick() {
+            alert('onLinkClick');
+        }
+    },
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    @onLinkClick="onLinkClick"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const Linkless = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    
+    `,
+});
+
+export const Iconless = () => ({
+	template: `
+    <farm-idcaption 
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoUpperText = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    >
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoBottomText = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline" 
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoTextToCopy = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText=""
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const IconBoxCustomColor = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    iconBoxColor="error"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const CustomTag = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const CustomSuccessMessageAfterCopyToClipboard = () => ({
+	template: `
+    <farm-idcaption 
+        icon="account-box-outline"
+        copy-text="Custom Success Message to be copied"
+        success-message="Custom Success Message"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const CustomColors = () => ({
+	template: `
+    <farm-idcaption 
+        icon="account-box-outline"
+        copy-text="Custom Success Message to be copied"
+        buttons-color="extra-1"
+        tooltip-color="info"
+    >
+        <template v-slot:title>
+            <b>Upper Line Text</b>
+        </template>
+        <template v-slot:subtitle>
+            <b>Lower:</b> Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const LongTitles = () => ({
+	template: `
+    <farm-col sm="3">
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text Line
+        </template>
+    </farm-idcaption>
+    </farm-col>`,
+});
+
+export const NoHeight = () => ({
+	template: `
+    <farm-col sm="3">
+    <farm-idcaption 
+    copyText=""
+    :noHeight="true"
+    >
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text Line
+        </template>
+    </farm-idcaption>
+    </farm-col>`,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -0,0 +1,168 @@
+<template>
+	<div
+		:class="{
+			idcaption: true,
+			'farm-idcaption': true,
+			'farm-idcaption--noicon': !icon,
+			'farm-idcaption--noheight': noHeight,
+		}"
+	>
+		<farm-icon-box
+			v-if="icon"
+			:icon="icon"
+			:color="iconBoxColor"
+			variation="darken"
+			size="md"
+		/>
+		<div
+			:class="{
+				idcaption__body: true,
+				'idcaption__body--single': !hasTitle || !hasSubtitle,
+			}"
+		>
+			<farm-caption variation="semiBold" v-if="hasTitle">
+				<span>
+					<slot name="title"></slot>
+				</span>
+				<farm-btn
+					v-if="link"
+					icon
+					class="farm-btn--clickable"
+					title="Ver mais"
+					:color="buttonsColor"
+					@click="$emit('onLinkClick')"
+				>
+					<farm-icon size="16px">open-in-new</farm-icon>
+				</farm-btn>
+			</farm-caption>
+
+			<farm-caption variation="regular" color="black" colorVariation="50" v-if="hasSubtitle">
+				<span>
+					<slot name="subtitle"></slot>
+				</span>
+				<farm-copytoclipboard
+					v-if="copyText"
+					sizeIcon="16px"
+					:toCopy="copyText"
+					:successMessage="successMessage"
+					:buttonColor="buttonsColor"
+					:tooltipColor="tooltipColor || buttonsColor"
+				/>
+			</farm-caption>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import { computed, PropType } from 'vue';
+export default {
+	name: 'farm-idcaption',
+	props: {
+		/**
+		 * Icon (from Material Icons)
+		 * Example: chart-bar
+		 */
+		icon: {
+			type: String,
+		},
+		/**
+		 * IconBox Color
+		 */
+		iconBoxColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'secondary-golden',
+		},
+		/**
+		 * Buttons Color (change from link and copy to clipboard)
+		 */
+		buttonsColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'secondary'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Text to be copied to clipboard
+		 */
+		copyText: {
+			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
+		},
+		/**
+		 * Has link?
+		 */
+		link: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Success message content after copy
+		 */
+		successMessage: {
+			type: String,
+			default: 'Conteúdo copiado para a área de trabalho',
+		},
+		/**
+		 * Tooltip color
+		 */
+		tooltipColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * noHeight remove min-height of 48px
+		 */
+		noHeight: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup(_, { slots }) {
+		const hasTitle = computed(() => slots.title);
+		const hasSubtitle = computed(() => slots.subtitle);
+
+		return { hasSubtitle, hasTitle };
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './IdCaption';
+</style>