@farm-investimentos/front-mfe-components-vue3 0.0.1

package/src/components/Chip/Chip.stories.js

@@ -0,0 +1,96 @@
+import Chip from './Chip.vue';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+import('./Chip.stories.scss');
+
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
+
+export default {
+	title: 'Display/Chips',
+	component: Chip,
+	parameters: {
+		docs: {
+			description: {
+				component: `Chip<br />
+				selector: <em>farm-chip</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `<farm-box>
+		<farm-chip color="primary">Chip (100% width)</farm-chip>
+	</farm-box>`,
+});
+
+export const Dense = () => ({
+	template: `<div>
+		<farm-chip color="primary" :dense="true">prop</farm-chip>
+		<farm-chip color="secondary" dense>attribute</farm-chip>
+	</div>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4" class="chips-container" v-for="color in colors" :key="'color_' + color">
+			<h4>{{ color }}</h4>
+			<farm-chip 
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:color="color"
+				:variation="variation">
+					{{ variation || 'base' }}
+			</farm-chip>
+		</farm-col>
+
+	</farm-row>`,
+});
+
+export const ColorsOutlined = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col cols="12" md="4" class="chips-container" v-for="color in colors">
+			<h4>{{ color }}</h4>
+			<farm-chip 
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:color="color"
+				:outlined="true"
+				:variation="variation">
+					{{ variation || 'base' }}
+			</farm-chip>
+		</farm-col>
+
+	</farm-row>`,
+});
+
+export const CustomTypography = () => ({
+	template: `<div>
+		<farm-chip color="primary" dense>
+			<farm-bodytext :type="2">BodyText 2</farm-bodytext>
+		</farm-chip>
+	</div>`,
+});
+
+export const Ellipsis = () => ({
+	template: `<div style="width: 100px;">
+		<farm-chip color="primary">Very long text here</farm-chip>
+	</div>`,
+});

package/src/components/Chip/Chip.stories.scss

@@ -0,0 +1,13 @@
+.chips-container {
+   
+    > .farm-chip {
+        margin-bottom: 16px;
+    }
+
+    &-full-example {
+        border:1px solid black;
+        > .farm-chip {
+            margin-bottom: 0;
+        }
+    }
+}

package/src/components/Chip/Chip.vue

@@ -0,0 +1,66 @@
+<template>
+	<span
+		v-bind="$props"
+		
+		:class="{
+			'farm-chip': true,
+			'farm-chip--dense': dense,
+			'farm-chip--outlined': outlined,
+			'farm-chip--base': variation === 'base' || !variation,
+			'farm-chip--lighten': variation === 'lighten',
+			'farm-chip--darken': variation === 'darken',
+		}"
+	>
+		<farm-caption tag="span" color="white" ellipsis> <slot></slot> </farm-caption>
+	</span>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+
+export default {
+	name: 'farm-chip',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * Is dense (not 100% width)?
+		 */
+		dense: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Is outlined
+		 */
+		outlined: {
+			type: Boolean,
+			default: false,
+		},
+		variation: {
+			type: String,
+			default: 'base',
+		},
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './Chip.scss';
+</style>

package/src/components/Chip/__tests__/Chip.spec.js

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import Chip from '../Chip';
+
+describe('Chip component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Chip, {});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/Chip/index.ts

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

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

@@ -0,0 +1,30 @@
+import ChipInviteStatus from './ChipInviteStatus.vue';
+
+export default {
+	title: 'Display/Chips/Onboarding/InviteStatus',
+	component: ChipInviteStatus,
+	parameters: {
+		docs: {
+			description: {
+				component: `Chip Invite Status<br />
+					selector: <em>farm-chip-invite</em><br />
+					<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `<div style="width: 120px;">
+        <farm-chip-invite :status="10" />
+        <farm-chip-invite :status="11" />
+        <farm-chip-invite :status="12" />
+        <farm-chip-invite :status="13" />
+        <farm-chip-invite :status="14" />
+        <farm-chip-invite :status="15" />
+        <farm-chip-invite :status="16" />
+        <farm-chip-invite :status="17" />
+        <farm-chip-invite :status="18" />
+    </div>`,
+});

package/src/components/ChipInviteStatus/ChipInviteStatus.vue

@@ -0,0 +1,38 @@
+<template>
+	<farm-chip
+		:color="obj.color"
+		:outlined="obj.outlined"
+		:variation="obj.variation"
+		:dense="!isFull"
+	>
+		{{ obj.label }}
+	</farm-chip>
+</template>
+<script lang="ts">
+
+import keys from './keys';
+export default {
+	name: 'farm-chip-invite',
+	props: {
+		/**
+		 * Invite status
+		 */
+		status: {
+			type: Number,
+			default: 10,
+		},
+		/**
+		 * Full width (from parent)
+		 */
+		isFull: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		obj() {
+			return keys[this.status];
+		},
+	},
+};
+</script>

package/src/components/ChipInviteStatus/__tests__/ChipInviteStatus.spec.js

@@ -0,0 +1,22 @@
+import { shallowMount } from '@vue/test-utils';
+import ChipInviteStatus from '../ChipInviteStatus.vue';
+describe('ChipInviteStatus component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ChipInviteStatus, {
+			propsData: {
+				status: 10,
+			},
+		});
+	});
+	test('ChipInviteStatus created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('mount component', () => {
+		it('renders correctly', () => {
+			expect(wrapper.element).toMatchSnapshot();
+		});
+	});
+});

package/src/components/ChipInviteStatus/index.ts

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

package/src/components/ChipInviteStatus/keys.ts

@@ -0,0 +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 },
+};

package/src/components/Collapsible/Collapsible.scss

@@ -0,0 +1,48 @@
+.collapsible {
+	width: 100%;
+
+	&__header {
+		width: 100%;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		cursor: pointer;
+	}
+
+	&__content-title {
+		display: flex;
+		align-items: center;
+		justify-content: flex-start;
+	}
+
+	&__content-right {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+	}
+
+	&__icon {
+		&--main {
+			margin-right: 0.5rem;
+		}
+
+		&--arrow {
+			margin-left: 0.5rem;
+		}
+	}
+
+	&__body {
+		width: 100%;
+		margin-top: 1.5rem;
+	}
+}
+
+.fade-enter-active,
+.fade-leave-active {
+	transition: opacity 0.3s ease-in-out;
+}
+
+.fade-enter,
+.fade-leave-to {
+	opacity: 0;
+}

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

@@ -0,0 +1,150 @@
+import Collapsible from './Collapsible';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+const variations = ['', 'darken', 'lighten'];
+
+export default {
+	title: 'Surfaces/Collapsible',
+	components: Collapsible,
+	parameters: {
+		docs: {
+			description: {
+				component: `Collapsible<br />selector: <em>farm-collapsible</em>`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-collapsible title="">collapsible content</farm-collapsible>',
+});
+
+export const Title = () => ({
+	template: '<farm-collapsible title="Title">collapsible content</farm-collapsible>',
+});
+
+export const Icon = () => ({
+	template:
+		'<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 = () => ({
+	data() {
+		return {
+			isOpen: true,
+		};
+	},
+	template: `<div>
+        status: {{ isOpen }}
+        <farm-collapsible
+            title=""
+            :open="isOpen"
+            @open="value => isOpen = value"
+        >
+            collapsible content
+        </farm-collapsible>
+    </div>`,
+});
+
+export const ColorsChips = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	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"
+				v-for="variation in variations"
+				icon="plus" 
+				textChip="chip"
+				title="color chip" 
+				:key="color + '_' + variation"
+				:showChip="true" 
+				:colorChip="color"
+				:variation="variation"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const ColorsOutlinedChips = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	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"
+				v-for="variation in variations"
+				icon="plus" 
+				textChip="chip"
+				title="color chip" 
+				:key="color + '_' + variation"
+				:showChip="true"
+				:outlined="true"
+				:colorChip="color"
+				:variation="variation"
+			>
+			</farm-collapsible>
+		</farm-col>
+	</farm-row>`,
+});
+
+export const Dense = () => ({
+	template:
+		'<farm-collapsible icon="plus" title="With Icon" textChip="chip" dense showChip>collapsible content</farm-collapsible>',
+});
+
+Primary.storyName = 'Basic';
+Title.storyName = 'Title';
+Icon.storyName = 'Icon';
+Export.storyName = 'Export';
+Opened.storyName = 'Opened';
+ColorIcons.storyName = 'Icon Colors';
+ColorsChips.storyName = 'Chip Colors';
+ColorsOutlinedChips.storyName = 'Outlined';
+Dense.storyName = 'Dense';

package/src/components/Collapsible/Collapsible.vue

@@ -0,0 +1,189 @@
+<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 !== ''">
+						<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">
+						<farm-chip
+							:color="colorChip"
+							:dense="dense"
+							:variation="variation"
+							:outlined="outlined"
+						>
+							{{ textChip }}
+						</farm-chip>
+					</div>
+					<div class="collapsible__icon collapsible__icon--arrow">
+						<farm-icon size="md" color="primary">
+							{{ arrowIcon }}
+						</farm-icon>
+					</div>
+				</div>
+			</div>
+			<transition name="fade">
+				<div class="collapsible__body" v-show="status">
+					<slot></slot>
+				</div>
+			</transition>
+		</farm-card-content>
+	</farm-card>
+</template>
+
+<script lang="ts">
+import { computed, PropType, ref, toRefs } from 'vue';
+
+export default {
+	name: 'farm-collapsible',
+
+	props: {
+		/**
+		 * Title
+		 */
+		title: {
+			type: String,
+			required: true,
+		},
+		/**
+		 * Icon (from Material Icons)
+		 * Example: chart-bar
+		 */
+		icon: {
+			type: String,
+			default: '',
+		},
+		/**
+		 * Is open?
+		 */
+		open: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * show Chip
+		 */
+		showChip: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * text of Chip
+		 */
+		textChip: {
+			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
+		 */
+		colorChip: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+			>,
+			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,
+		},
+		/**
+		 * Is outlined
+		 */
+		outlined: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Is variation
+		 */
+		variation: {
+			type: String,
+			default: 'base',
+		},
+	},
+
+	setup(props, { emit }) {
+		const { open } = toRefs(props);
+		const status = ref(open.value);
+
+		const arrowIcon = computed(() => (status.value ? 'menu-up' : 'menu-down'));
+
+		function onToggleCollapsible(currentStatus: boolean): void {
+			status.value = !currentStatus;
+			emit('open', status.value);
+		}
+
+		return {
+			status,
+			arrowIcon,
+			onToggleCollapsible,
+		};
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+@import './Collapsible.scss';
+</style>