@farm-investimentos/front-mfe-components 15.5.3 → 15.5.5

package/package.json

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

package/src/components/ChipInviteStatus/keys.ts

@@ -1,11 +1,11 @@
 export default {
-	10: { label: 'Convidar', color: 'primary' },
-	11: { label: 'Convidado', color: 'warning', outlined: true },
-	12: { label: 'Incompleto', color: 'warning', outlined: true },
-	13: { label: 'Concluído', color: 'primary', outlined: true },
-	14: { label: 'Falha/Erro', color: 'error', outlined: true },
-	15: { label: 'Em Análise', color: 'info', outlined: true },
-	16: { label: 'Em Andamento', color: 'secondary', variation: 'darken' },
-	17: { label: 'Em Espera', color: 'secondary' },
-	18: { label: 'Declinado', color: 'error', outlined: true },
+	10: { label: 'Convidar', color: 'success', variation: 'base' },
+	11: { label: 'Convidado', color: 'warning', variation: 'lighten' },
+	12: { label: 'Incompleto', color: 'error', variation: 'lighten' },
+	13: { label: 'Concluído', color: 'success', variation: 'lighten' },
+	14: { label: 'Falha/Erro', color: 'error', variation: 'base' },
+	15: { label: 'Em Análise', color: 'info', variation: 'base' },
+	16: { label: 'Em Andamento', color: 'secondary-golden', variation: 'darken' },
+	17: { label: 'Em Espera', color: 'info', variation: 'lighten' },
+	18: { label: 'Declinado', color: 'neutral', variation: 'base' },
 };

package/src/components/Collapsible/Collapsible.scss

@@ -7,6 +7,11 @@
 		align-items: center;
 		justify-content: space-between;
 		cursor: pointer;
+
+		&--custom {
+			position: relative;
+			cursor: pointer;
+		}
 	}
 
 	&__content-title {
@@ -19,6 +24,12 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+
+		&--custom {
+			position: absolute;
+			right: 0;
+			top: 3px;
+		}
 	}
 
 	&__icon {
@@ -37,6 +48,10 @@
 	}
 }
 
+.full-width {
+	width: 100%;
+}
+
 .fade-enter-active,
 .fade-leave-active {
 	transition: opacity 0.3s ease-in-out;

package/src/components/Collapsible/Collapsible.stories.js

@@ -152,20 +152,182 @@ export const Dense = () => ({
 
 export const Custom = () => ({
 	template: `
-		<farm-collapsible custom>
+		<farm-collapsible title="" custom open>
 		<template #custom>
+			<farm-row justify="space-between" align="center">
+			<farm-col md="6">
+			<farm-caption>caption</farm-caption>
+			</farm-col>
+			<farm-col md="6" justify="end"
+			align="end">
 			<farm-btn
-				v-bind="attrs"
-				v-on="on"
+				
 			>
 				custom
 			</farm-btn>
+			</farm-col>
+			</farm-row>
 		</template>
 		collapsible content		
 		</farm-collapsible>
 		`,
 });
 
+export const CustomHeaderContent = () => ({
+	template: `
+		<farm-collapsible title="" custom-header>
+		<template #header-content>
+			<farm-row>
+				<farm-col md="12">
+					<farm-bodytext color="success">initial text</farm-bodytext>
+				</farm-col>
+			</farm-row>
+
+			<farm-row class="pt-4">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+		</farm-row>
+		</template>
+	
+		<farm-bodytext >collapsible content</farm-bodytext>
+		</farm-collapsible>
+		`,
+});
+
+export const customBodyContent = () => ({
+	template: `
+		<farm-collapsible title="simple title"  custom-body>
+		<farm-row extraDecrease style="background-color:#f5f5f5;" class="px-4">
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold"
+				>text here</farm-caption
+			>
+			123455
+		</farm-col>
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold"
+				>label here</farm-caption
+			>
+
+			<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+		</farm-col>
+
+		<farm-col class="collapsible-stories-class-with-line">
+			<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+			<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+		</farm-col>
+
+		<farm-col>
+			<farm-caption variation="semiBold"
+				>Label here (text here)</farm-caption
+			>
+			<farm-caption variation="medium" class="my-1">value here</farm-caption>
+		</farm-col>
+		</farm-row>
+		</farm-collapsible>
+		`,
+});
+
+export const CustomHeaderAndBodyContent = () => ({
+	template: `
+		<farm-collapsible title="" custom-header custom-body>
+
+		<template #header-content>
+			<div class="mb-4">
+				<farm-row>
+					<farm-col md="12">
+						<farm-bodytext color="success">initial text</farm-bodytext>
+					</farm-col>
+				</farm-row>
+
+				<farm-row class="pt-4">
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold"
+							>text here</farm-caption
+						>
+						123455
+					</farm-col>
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold"
+							>label here</farm-caption
+						>
+
+						<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+					</farm-col>
+
+					<farm-col class="collapsible-stories-class-with-line">
+						<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+						<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+					</farm-col>
+
+					<farm-col>
+						<farm-caption variation="semiBold"
+							>Label here (text here)</farm-caption
+						>
+						<farm-caption variation="medium" class="my-1">value here</farm-caption>
+					</farm-col>
+				</farm-row>
+			</div>
+		</template>
+	
+			<farm-row extraDecrease style="background-color:#f5f5f5;" class="mt-5 px-2">
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>text here</farm-caption
+					>
+					123455
+				</farm-col>
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold"
+						>label here</farm-caption
+					>
+
+					<farm-caption variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col class="collapsible-stories-class-with-line">
+					<farm-caption variation="semiBold">LABEL HERE</farm-caption>
+
+					<farm-caption		 variation="medium" class="my-1">R$ 1000</farm-caption>
+				</farm-col>
+
+				<farm-col>
+					<farm-caption variation="semiBold"
+						>Label here (text here)</farm-caption
+					>
+					<farm-caption variation="medium" class="my-1">value here</farm-caption>
+				</farm-col>
+			</farm-row>
+		</farm-collapsible>
+		`,
+});
+
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';

package/src/components/Collapsible/Collapsible.vue

@@ -1,9 +1,19 @@
 <template>
 	<farm-card class="collapsible">
-		<farm-card-content gutter="md">
-			<div class="collapsible__header" @click="onToggleCollapsible(status)">
-				<div class="collapsible__content-title">
-					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== '' && !custom">
+		<farm-card-content gutter="md" :class="{ 'pb-0': customBody }">
+			<div
+				v-if="!customHeader"
+				class="collapsible__header"
+				@click="onToggleCollapsible(status)"
+			>
+				<div
+					class="collapsible__content-title"
+					:class="{ 'full-width': custom, 'pb-4': customBody }"
+				>
+					<div
+						class="collapsible__icon collapsible__icon--main"
+						v-if="icon !== '' && !custom"
+					>
 						<farm-icon size="md" :color="colorIcon">
 							{{ icon }}
 						</farm-icon>
@@ -40,7 +50,29 @@
 					</div>
 				</div>
 			</div>
-			<transition name="fade">
+
+			<div
+				v-if="customHeader"
+				class="collapsible__header--custom"
+				@click="onToggleCollapsible(status)"
+			>
+				<slot name="header-content"></slot>
+				<div class="collapsible__content-right--custom">
+					<div class="collapsible__icon collapsible__icon--arrow">
+						<farm-icon size="md" color="primary">
+							{{ arrowIcon }}
+						</farm-icon>
+					</div>
+				</div>
+			</div>
+
+			<transition v-if="customBody" name="fade">
+				<div v-show="status">
+					<slot></slot>
+				</div>
+			</transition>
+
+			<transition v-else name="fade">
 				<div class="collapsible__body" v-show="status">
 					<slot></slot>
 				</div>
@@ -180,6 +212,14 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		customBody: {
+			type: Boolean,
+			default: false,
+		},
+		customHeader: {
+			type: Boolean,
+			default: false,
+		},
 	},
 
 	data() {

package/src/scss/utils.scss

@@ -11,9 +11,8 @@ tr.v-data-table__empty-wrapper {
 	}
 }
 
-
 .mf-Containers.mf-Containers-authenticated {
-	>.mf-Container>div.v-application {
+	> .mf-Container > div.v-application {
 		padding-bottom: 2.625rem;
 	}
 }
@@ -37,8 +36,6 @@ body.body--has-footer {
 	.v-icon.v-icon {
 		font-size: 22px;
 		color: var(--farm-neutral-farken);
-		;
-
 		&.mdi-checkbox-marked,
 		&.mdi-minus-box {
 			color: var(--farm-primary-base);
@@ -48,4 +45,18 @@ body.body--has-footer {
 	.v-input--selection-controls__ripple {
 		display: none;
 	}
-}
+}
+
+.collapsible-stories-class-with-line {
+	position: relative;
+	padding-right: 20px;
+	&:after {
+		content: '';
+		position: absolute;
+		height: 80%;
+		width: 1px;
+		border-right: 1px solid var(--farm-stroke-base);
+		right: 10px;
+		top: 5%;
+	}
+}