@farm-investimentos/front-mfe-components 11.9.1 → 11.10.1

package/package.json

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

package/src/components/Typography/Typography.scss

@@ -31,6 +31,12 @@
 		color: var(--farm-text-secondary);
 	}
 
+	&.farm-typography--ellipsis {
+		overflow: hidden;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
 	@each $k in $theme-colors-list {
 		&#{'[color=' + $k + ']'} {
 			color: var(--farm-#{$k}-base);

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

@@ -178,3 +178,9 @@ export const LineHeight = () => ({
 		</farm-typography>
 	</div>`,
 });
+
+export const Ellipsis = () => ({
+	template: `<div style="width: 100px;">
+		<farm-typography ellipsis>sample text for css text ellipsis</farm-typography>
+	</div>`,
+});

package/src/components/Typography/Typography.vue

@@ -7,6 +7,7 @@
 			['farm-typography--weight-' + weight]: weight !== undefined,
 			'farm-typography--lighten': colorVariation === 'lighten',
 			'farm-typography--darken': colorVariation === 'darken',
+			'farm-typography--ellipsis': ellipsis,
 		}"
 		:style="style"
 		:color="color"
@@ -76,6 +77,13 @@ export default Vue.extend({
 			type: String,
 			default: '',
 		},
+		/**
+		 * Add css ellipsis
+		 */
+		ellipsis: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	setup(props) {
 		const { size, lineHeight } = toRefs(props);

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,33 @@
+import { withDesign } from 'storybook-addon-designs';
+import ValueCaption from '.';
+
+export default {
+	title: 'Display/ValueCaption',
+	component: ValueCaption,
+	decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Value Caption<br />
+				selector: <em>farm-valuecaption</em>
+				`,
+			},
+		},
+		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>
+    `,
+});

package/src/components/ValueCaption/ValueCaption.vue

@@ -0,0 +1,60 @@
+<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 Vue, { computed, PropType } from 'vue';
+export default Vue.extend({
+	name: 'farm-valuecaption',
+	props: {
+		/**
+		 * Icon (from Material Icons)
+		 * Example: chart-bar
+		 */
+		icon: {
+			type: String,
+		},
+		/**
+		 * IconBox Color
+		 */
+		iconBoxColor: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| '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/main.ts

@@ -91,6 +91,7 @@ export * from './components/TextField';
 export * from './components/TextFieldV2';
 export * from './components/Tooltip';
 export * from './components/Typography';
+export * from './components/ValueCaption';
 
 export * from './components/layout/Box';
 export * from './components/layout/Col';