@farm-investimentos/front-mfe-components 15.3.3 → 15.3.4

package/package.json

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

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

@@ -26,7 +26,39 @@ export const Title = () => ({
 
 export const Icon = () => ({
 	template:
-		'<farm-collapsible icon="plus" title="With Icon">collapsible content</farm-collapsible>',
+		'<farm-collapsible icon="clipboard" title="With Icon">collapsible content</farm-collapsible>',
+});
+
+export const ColorIcons = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4"  v-for="color in colors" :key="'color_' + color">
+			<h4 style="margin:15px">{{ color }}</h4>
+			<farm-collapsible 
+				style="margin-top:15px"
+				icon="clipboard" 
+				title="color icon" 
+				:colorIcon="color"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const Export = () => ({
+	data() {
+		return {
+			clicked: false,
+		};
+	},
+	template: `<div>
+		clicked: {{clicked}} <farm-collapsible icon="clipboard" title="With Button" :hasButton="true" @onClick="value => clicked = !clicked" >collapsible content</farm-collapsible>
+		</div>`,
 });
 
 export const Opened = () => ({
@@ -110,7 +142,9 @@ export const Dense = () => ({
 Primary.storyName = 'Basic';
 Title.storyName = 'Title';
 Icon.storyName = 'Icon';
+Export.storyName = 'Export';
 Opened.storyName = 'Opened';
-ColorsChips.storyName = 'Colors';
+ColorIcons.storyName = 'Icon Colors';
+ColorsChips.storyName = 'Chip Colors';
 ColorsOutlinedChips.storyName = 'Outlined';
 Dense.storyName = 'Dense';

package/src/components/Collapsible/Collapsible.vue

@@ -4,13 +4,16 @@
 			<div class="collapsible__header" @click="onToggleCollapsible(status)">
 				<div class="collapsible__content-title">
 					<div class="collapsible__icon collapsible__icon--main" v-if="icon !== ''">
-						<farm-icon size="md" color="secondary-green">
+						<farm-icon size="md" :color="colorIcon">
 							{{ icon }}
 						</farm-icon>
 					</div>
 					<farm-heading type="6" color="black">
 						{{ title }}
 					</farm-heading>
+					<farm-btn outlined class="ml-6" v-if="hasButton" @click.stop="onClick()">
+						{{ labelButton }}
+					</farm-btn>
 				</div>
 				<div class="collapsible__content-right">
 					<div class="collapsible__icon" v-if="showChip">
@@ -82,6 +85,27 @@ export default defineComponent({
 			type: String,
 			default: '',
 		},
+		/**
+		 * has butotn
+		 */
+		hasButton: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * export button
+		 */
+		onExport: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * label button
+		 */
+		labelButton: {
+			type: String,
+			default: 'Exportar',
+		},
 		/**
 		 * color of Chip
 		 */
@@ -101,6 +125,25 @@ export default defineComponent({
 			>,
 			default: 'primary',
 		},
+		colorIcon: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'secondary-green',
+		},
+		/**
+		 * Is dense
+		 */
 		dense: {
 			type: Boolean,
 			default: false,
@@ -112,6 +155,9 @@ export default defineComponent({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Is variation
+		 */
 		variation: {
 			type: String,
 			default: 'base',
@@ -134,6 +180,9 @@ export default defineComponent({
 			this.status = !status;
 			this.$emit('open', this.status);
 		},
+		onClick(): void {
+			this.$emit('onClick');
+		},
 	},
 });
 </script>