@farm-investimentos/front-mfe-components 3.3.0 → 3.4.0

package/package.json

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

package/src/components/ChipInviteStatus/ChipInviteStatus.scss

@@ -0,0 +1,26 @@
+.status-chip--onboarding {
+	font-weight: bold;
+	.status-chip-yellow {
+		color: black;
+	}
+	&.status-chip.status-chip-accent {
+		color: var(--v-accent-base) !important;
+		border: 2px solid var(--v-accent-base) !important;
+		background-color: white !important;
+	}
+	&.status-chip.status-chip-yellow {
+		color: black !important;
+		border: 2px solid var(--v-yellow-lighten1) !important;
+		background-color: white !important;
+	}
+	&.status-chip.status-chip-error {
+		color: var(--v-error-base) !important;
+		border: 2px solid var(--v-error-base) !important;
+		background-color: white !important;
+	}
+	&.status-chip.status-chip-success {
+		color: var(--v-secondary-base) !important;
+		border: 2px solid var(--v-success-base) !important;
+		background-color: white !important;
+	}
+}

package/src/components/ChipInviteStatus/ChipInviteStatus.stories.js

@@ -0,0 +1,19 @@
+import ChipInviteStatus from './ChipInviteStatus.vue';
+
+export default {
+	title: 'Example/Onboarding/ChipInviteStatus',
+	component: ChipInviteStatus,
+};
+
+export const Primary = () => ({
+	components: { ChipInviteStatus },
+	template: `<div style="width: 120px;">
+        <ChipInviteStatus status="CONVIDAR" />
+        <ChipInviteStatus status="CONVIDADO" />
+        <ChipInviteStatus status="INCOMPLETO" />
+        <ChipInviteStatus status="CONCLUIDO" />
+        <ChipInviteStatus status="FALHA/ERRO" />
+    </div>`,
+});
+
+Primary.storyName = 'Básico';

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -0,0 +1,61 @@
+<template>
+	<v-chip
+		small
+		:class="
+			`status-chip ${
+				isFull ? 'status-chip--fullwidth' : ''
+			} status-chip-${color} status-chip--onboarding`
+		"
+	>
+		<span :class="`${textColor}--text`">
+			{{ label }}
+		</span>
+	</v-chip>
+</template>
+<script>
+import Vue from 'vue';
+const StatusColor = {
+	CONVIDAR: 'secondary',
+	CONVIDADO: 'yellow',
+	INCOMPLETO: 'yellow',
+	CONCLUIDO: 'success',
+	'FALHA/ERRO': 'error',
+};
+
+import VChip from 'vuetify/lib/components/VChip/';
+
+export default Vue.extend({
+	name: 'farm-chip-invite',
+	components: VChip,
+	props: {
+		/**
+		 * Invite status
+		 */
+		status: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Full width (from parent)
+		 */
+		isFull: {
+			type: Boolean,
+			default: true,
+		},
+	},
+	computed: {
+		textColor() {
+			return this.status === 'CONVIDAR' ? '' : StatusColor[this.status];
+		},
+		color() {
+			return !this.status ? '' : StatusColor[this.status];
+		},
+		label() {
+			return this.status;
+		},
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './ChipInviteStatus.scss';
+</style>

package/src/components/ChipInviteStatus/index.js

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

package/src/main.js

@@ -57,3 +57,4 @@ export * from './components/Logos/OriginatorLogo/';
 export * from './components/ResetTableRowSelection/';
 export * from './components/MultipleSelectShortener/';
 export * from './components/SelectModalOptions/';
+export * from './components/ChipInviteStatus/';

package/src/scss/Status-Chip.scss

@@ -24,7 +24,11 @@ $statusList: 'primary', 'secondary', 'accent', 'error', 'info', 'success', 'warn
     }
     &.status-chip-yellow {
         background-color: var(--v-yellow-base) !important;
-        color: var(--v-gray-lighten5);
+        color: var(--v-gray-lighten3) !important;
     }
 
+    &.status-chip--fullwidth {
+        width: 100%;
+        justify-content: center;
+    }
 }