@farm-investimentos/front-mfe-components 15.6.1 → 15.6.2

package/package.json

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

package/src/components/Collapsible/Collapsible.scss

@@ -12,6 +12,11 @@
 			position: relative;
 			cursor: pointer;
 		}
+
+		&--plain {
+			cursor: default;
+			pointer-events: none;
+		}
 	}
 
 	&__content-title {

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

@@ -39,10 +39,10 @@ export const ColorIcons = () => ({
 	<farm-row>
 		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
 			<h4 style="margin:15px">{{ color }}</h4>
-			<farm-collapsible 
+			<farm-collapsible
 				style="margin-top:15px"
-				icon="clipboard" 
-				title="color icon" 
+				icon="clipboard"
+				title="color icon"
 				:colorIcon="color"
 			>
 			</farm-collapsible>
@@ -101,14 +101,14 @@ export const ColorsChips = () => ({
 	<farm-row>
 		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
 			<h4 style="margin:15px">{{ color }}</h4>
-			<farm-collapsible 
+			<farm-collapsible
 				style="margin-top:15px"
 				v-for="variation in variations"
-				icon="plus" 
+				icon="plus"
 				textChip="chip"
-				title="color chip" 
+				title="color chip"
 				:key="color + '_' + variation"
-				:showChip="true" 
+				:showChip="true"
 				:colorChip="color"
 				:variation="variation"
 			>
@@ -128,12 +128,12 @@ export const ColorsOutlinedChips = () => ({
 	<farm-row>
 		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
 			<h4 style="margin:15px">{{ color }}</h4>
-			<farm-collapsible 
+			<farm-collapsible
 				style="margin-top:15px"
 				v-for="variation in variations"
-				icon="plus" 
+				icon="plus"
 				textChip="chip"
-				title="color chip" 
+				title="color chip"
 				:key="color + '_' + variation"
 				:showChip="true"
 				:outlined="true"
@@ -161,14 +161,14 @@ export const Custom = () => ({
 			<farm-col md="6" justify="end"
 			align="end">
 			<farm-btn
-				
+
 			>
 				custom
 			</farm-btn>
 			</farm-col>
 			</farm-row>
 		</template>
-		collapsible content		
+		collapsible content
 		</farm-collapsible>
 		`,
 });
@@ -212,7 +212,7 @@ export const CustomHeaderContent = () => ({
 				</farm-col>
 		</farm-row>
 		</template>
-	
+
 		<farm-bodytext >collapsible content</farm-bodytext>
 		</farm-collapsible>
 		`,
@@ -295,7 +295,7 @@ export const CustomHeaderAndBodyContent = () => ({
 				</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"
@@ -328,6 +328,51 @@ export const CustomHeaderAndBodyContent = () => ({
 		`,
 });
 
+export const Plain = () => ({
+	template: `
+		<farm-collapsible title="" custom-header plain>
+		<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>
+		`,
+});
+
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';

package/src/components/Collapsible/Collapsible.vue

@@ -54,10 +54,11 @@
 			<div
 				v-if="customHeader"
 				class="collapsible__header--custom"
+				:class="plain ? 'collapsible__header--plain' : ''"
 				@click="onToggleCollapsible(status)"
 			>
 				<slot name="header-content"></slot>
-				<div class="collapsible__content-right--custom">
+				<div v-if="!plain" class="collapsible__content-right--custom">
 					<div class="collapsible__icon collapsible__icon--arrow">
 						<farm-icon size="md" color="primary">
 							{{ arrowIcon }}
@@ -125,12 +126,19 @@ export default defineComponent({
 			default: '',
 		},
 		/**
-		 * has butotn
+		 * has button
 		 */
 		hasButton: {
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * plain layout
+		 */
+		plain: {
+			type: Boolean,
+			default: false,
+		},
 		/**
 		 * export button disabled toggle
 		 */