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

package/src/components/Stepper/StepperHeader/StepperHeader.stories.js

@@ -0,0 +1,89 @@
+import StepperHeader from './StepperHeader.vue';
+
+export default {
+	title: 'Navigation/StepperHeader',
+	component: StepperHeader,
+	parameters: {
+		docs: {
+			description: {
+				component: `Stepper Header<br />
+				selector: <em>farm-stepper-header</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/XDwOALFs1s9uXPFVE7BP9B/%E2%9C%8D---Cr%C3%A9dito?node-id=4029%3A28672',
+		},
+		viewMode: 'docs',
+	},
+};
+
+const steps = [
+	{ label: 'Solicitação de limite', icon: 'book' },
+	{ label: 'Lista impeditiva', icon: 'monitor' },
+	{ label: 'Lista pré-elegíveis', icon: 'book' },
+	{ label: 'Fila de compliance', icon: 'logout' },
+];
+
+export const Primary = () => ({
+	data() {
+		return {
+			steps: [
+				{ label: 'Step 1', icon: '' },
+				{ label: 'Step 2', icon: 'monitor' },
+				{ label: 'Step 3', icon: 'book' },
+				{ label: 'Step 4', icon: '' },
+			],
+			currentStep: 3,
+		};
+	},
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
+});
+
+export const Error = () => ({
+	data() {
+		return {
+			steps,
+			currentStep: 3,
+		};
+	},
+	template:
+		'<farm-stepper-header :steps="steps" :currentStep="currentStep" :errorCurrentStepStatus="true" />',
+});
+
+export const Vertical = () => ({
+	data() {
+		return {
+			steps,
+			currentStep: 3,
+		};
+	},
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" vertical />',
+});
+
+export const VerticalError = () => ({
+	data() {
+		return {
+			steps,
+			currentStep: 3,
+		};
+	},
+	template:
+		'<farm-stepper-header :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
+});
+
+export const Numbers = () => ({
+	data() {
+		return {
+			steps: [
+				{ label: 'Solicitação de limite' },
+				{ label: 'Lista impeditiva' },
+				{ label: 'Lista pré-elegíveis' },
+				{ label: 'Fila de compliance' },
+			],
+			currentStep: 2,
+		};
+	},
+	template: '<farm-stepper-header :steps="steps" :currentStep="currentStep" />',
+});

package/src/components/Stepper/StepperHeader/StepperHeader.vue

@@ -0,0 +1,106 @@
+<template>
+	<div class="horizontal-step-size">
+		<section :class="{ stepper__header: true, 'stepper__header--vertical': vertical }">
+			<div v-for="(step, index) in steps" :key="step.label">
+				<div
+					:class="{
+						'stepper__header-step': true,
+						'stepper__header-step--current': isStepCurrent(index),
+						'stepper__header-step--previous': isStepPrevious(index),
+						'stepper__header-step--error': isStepError(index),
+						'stepper__header-step--next': isStepNext(index),
+					}"
+				>
+					<farm-icon v-if="step.icon">
+						{{ step.icon }}
+					</farm-icon>
+					<farm-bodytext :type="2" variation="bold" v-else class="farm-icon__number">
+						{{ index + 1 }}
+					</farm-bodytext>
+					<farm-bodytext :type="2" variation="bold">
+						{{ step.label }}
+					</farm-bodytext>
+				</div>
+				<div
+					:class="{
+						'stepper__divider--horizontal': !vertical,
+						'stepper__divider--vertical': vertical,
+						'stepper__divider--previous': isStepPrevious(index),
+						'stepper__divider--previous-to-current': isStepPreviousToCurrent(index),
+						'stepper__divider--previous-to-error': isStepPreviousToError(index),
+						'stepper__divider--error-to-next': isStepErrorToNext(index),
+						'stepper__divider--current-to-next': isStepCurrentToNext(index),
+					}"
+					v-if="hasDivider(index)"
+					:key="'divider_' + step.label"
+				/>
+			</div>
+		</section>
+	</div>
+</template>
+<script lang="ts">
+import { PropType } from 'vue';
+import IStep from './IStep';
+
+export default {
+	name: 'farm-stepper-header',
+	props: {
+		/**
+		 * Steps
+		 * Implements IStep
+		 */
+		steps: Array as PropType<Array<IStep>>,
+		/**
+		 * Vertical or horizontal
+		 */
+		vertical: { type: Boolean, default: false },
+		/**
+		 * Current step
+		 */
+		currentStep: { type: Number },
+		/**
+		 * Is current step in error status?
+		 */
+		errorCurrentStepStatus: { type: Boolean, default: false },
+	},
+	setup(props) {
+		const isStepCurrent = (index: number) => props.currentStep === index + 1;
+
+		const isStepPrevious = (index: number) => props.currentStep > index + 1;
+
+		const isStepError = (index: number) =>
+			props.currentStep === index + 1 && props.errorCurrentStepStatus;
+
+		const hasDivider = (index: number) => index < props.steps.length - 1;
+
+		const isStepPreviousToCurrent = (index: number) =>
+			index + 2 === props.currentStep && isStepCurrent(index + 1) && !isStepError(index + 1);
+
+		const isStepPreviousToError = (index: number) =>
+			index + 2 === props.currentStep && isStepCurrent(index + 1) && isStepError(index + 1);
+
+		const isStepNext = (index: number) => index + 1 > props.currentStep;
+
+		const isStepErrorToNext = (index: number) =>
+			props.errorCurrentStepStatus && index + 1 === props.currentStep;
+
+		const isStepCurrentToNext = (index: number) =>
+			!props.errorCurrentStepStatus && index + 1 === props.currentStep;
+
+		return {
+			isStepCurrent,
+			isStepPrevious,
+			isStepError,
+			isStepPreviousToCurrent,
+			isStepPreviousToError,
+			isStepNext,
+			isStepErrorToNext,
+			isStepCurrentToNext,
+			hasDivider,
+		};
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import './StepperHeader.scss';
+</style>

package/src/components/Stepper/StepperHeader/__tests__/StepperHeader.spec.js

@@ -0,0 +1,63 @@
+import { shallowMount } from '@vue/test-utils';
+import StepperHeader from '../StepperHeader';
+
+describe('StepperHeader component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(StepperHeader, {
+			propsData: {
+				steps: [
+					{ label: 'Step 1', icon: '' },
+					{ label: 'Step 2', icon: 'monitor' },
+					{ label: 'Step 3', icon: 'book' },
+					{ label: 'Step 4', icon: '' },
+				],
+				currentStep: 3,
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('StepperHeader created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Methods', () => {
+		it('Should check if step is current', () => {
+			expect(component.isStepCurrent(1)).toBeFalsy();
+			expect(component.isStepCurrent(2)).toBeTruthy();
+		});
+
+		it('Should check if step is previous', () => {
+			expect(component.isStepPrevious(1)).toBeTruthy();
+			expect(component.isStepPrevious(3)).toBeFalsy();
+		});
+
+		it('Should check if step is error', () => {
+			expect(component.isStepError(1)).toBeFalsy();
+		});
+
+		it('Should check if has divider', () => {
+			expect(component.hasDivider(4)).toBeFalsy();
+			expect(component.hasDivider(1)).toBeTruthy();
+		});
+
+		it('Should check if step is next', () => {
+			expect(component.isStepNext(4)).toBeTruthy();
+			expect(component.isStepNext(1)).toBeFalsy();
+		});
+
+		it('Should check if step is current error to next', () => {
+			expect(component.isStepErrorToNext(4)).toBeFalsy();
+			expect(component.isStepErrorToNext(1)).toBeFalsy();
+		});
+
+		it('Should check if step is current to next', () => {
+			expect(component.isStepCurrentToNext(4)).toBeFalsy();
+			expect(component.isStepCurrentToNext(1)).toBeFalsy();
+		});
+
+	});
+});

package/src/components/Stepper/StepperHeader/_mixins.scss

@@ -0,0 +1,46 @@
+@mixin stepperHeaderStepColor($color) {
+	.farm-icon,
+	.farm-icon__number {
+		background-color: $color;
+		border-color: $color;
+	}
+
+	.farm-icon:before,
+	.farm-icon__number {
+		color: white;
+	}
+
+	.farm-bodytext--2 {
+		color: $color;
+	}
+
+	.farm-bodytext--2.farm-icon__number {
+		color: white;
+	}
+}
+
+@mixin stepperDividerGradient($direction) {
+	&.stepper__divider--previous-to-current {
+		background: linear-gradient(to #{$direction}, var(--farm-primary-base), #5089de);
+	}
+
+	&.stepper__divider--previous-to-error {
+		background: linear-gradient(
+			to #{$direction},
+			var(--farm-primary-base),
+			var(--farm-error-base)
+		);
+	}
+
+	&.stepper__divider--error-to-next {
+		background: linear-gradient(
+			to #{$direction},
+			var(--farm-error-base),
+			var(--farm-gray-lighten)
+		);
+	}
+
+	&.stepper__divider--current-to-next {
+		background: linear-gradient(to #{$direction}, #5089de, var(--farm-gray-lighten));
+	}
+}

package/src/components/Stepper/StepperHeader/index.ts

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

package/src/components/Stepper/index.ts

@@ -0,0 +1,5 @@
+import StepperHeader from './StepperHeader/StepperHeader.vue';
+
+export { StepperHeader };
+
+

package/src/components/Switcher/Switcher.scss

@@ -0,0 +1,71 @@
+@import '../../configurations/theme-colors';
+
+
+
+.farm-switch {
+    @each $color in $theme-colors-list {
+        &#{'[color=' + $color + ']'} {
+            .farm-switch--selected {
+                background-color: themeColor($color);
+            }
+
+            .farm-switch--disabled-on {
+                background-color: rgba(themeColor($color), 0.27);
+            }
+        }
+    }
+}
+
+.farm-switch--idle {
+    background-color: var(--farm-neutral-base);
+}
+
+.farm-switch--disabled-off {
+    background-color: var(--farm-neutral-lighten);
+}
+
+.farm-switch {
+    display: inline-block;
+    position: relative;
+
+    width: 24px;
+    height: 16px;
+    border-radius: 9999px;
+
+    &:focus {
+        outline: 0;
+    }
+
+    &[block] {
+        display: block;
+    }
+
+    cursor: pointer;
+
+    &:has(.farm-switch--disabled-on),
+    &:has(.farm-switch--disabled-off) {
+        cursor: default;
+    }
+
+}
+
+.farm-switch__background {
+    display: block;
+    border-radius: 9999px;
+    margin-top: 0;
+    height: 12px;
+    width: 100%;
+    transition: background-color .4s ease;
+}
+
+.farm-switch__indicator {
+    position: absolute;
+    height: 16px;
+    width: 16px;
+    left: -4px;
+    top: -2px;
+    background-color: #ffffff;
+    border-radius: 9999px;
+    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.16);
+    transition: transform .4s ease;
+}

package/src/components/Switcher/Switcher.stories.js

@@ -0,0 +1,112 @@
+import Switch from './Switcher';
+import baseThemeColors from '../../configurations/_theme-colors-base.module.scss';
+const colors = Object.keys(baseThemeColors);
+
+export default {
+	title: 'Form/Switcher',
+	component: Switch,
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `Switcher<br />
+				selector: <em>farm-switcher</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
+			},
+		},
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			selectedValue: true,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block />
+	</div>`,
+});
+
+export const OnDisabled = () => ({
+	data() {
+		return {
+			selectedValue: true,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="true" />
+	</div>`,
+});
+
+export const Off = () => ({
+	data() {
+		return {
+			selectedValue: false,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="false" />
+	</div>`,
+});
+
+export const OffDisabled = () => ({
+	data() {
+		return {
+			selectedValue: false,
+		};
+	},
+	template: `<div>
+	<farm-switcher v-model="selectedValue" block :disabled="true" />
+	</div>`,
+});
+
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+			selectedValue: true,
+		};
+	},
+	template: `
+	<farm-row>
+		<farm-col
+			cols="12"
+			md="3"
+			v-for="color in colors"
+			:key="'color_' + color"
+		>
+			<farm-bodytext>{{ color }}</farm-bodytext>
+			<farm-switcher
+				v-model="selectedValue"
+				:color="color"
+			/>
+			<farm-caption>Desabilitado</farm-caption>
+			<farm-switcher
+				disabled
+				v-model="selectedValue"
+				:color="color"
+			/>
+		</farm-col>
+
+	</farm-row>`,
+});
+
+export const OutsideChangeVmodel = () => ({
+	data() {
+		return {
+			selectedValue: true,
+		};
+	},
+	methods: {
+		onClick() {
+			this.selectedValue = !this.selectedValue;
+		},
+	},
+	template: `<div>
+		<farm-switcher v-model="selectedValue" block />
+		<farm-btn @click="onClick">
+		toggle selection: {{ selectedValue }}
+		</farm-btn>
+	</div>`,
+});

package/src/components/Switcher/Switcher.vue

@@ -0,0 +1,94 @@
+<template>
+	<div
+		:class="{ 'farm-switch': true }"
+		role="checkbox"
+		v-bind="$props"
+		@click="toggle"
+		@keydown.space.prevent="toggle"
+	>
+		<span class="farm-switch__background" :class="backgroundStyles" />
+		<span class="farm-switch__indicator" :style="indicatorStyles" />
+	</div>
+</template>
+<script lang="ts">
+import {  PropType, computed, ref, watch } from 'vue';
+
+export default {
+	name: 'farm-switcher',
+	props: {
+		/**
+		 * Color
+		 */
+		color: {
+			type: String as PropType<
+				| 'primary'
+				| 'secondary'
+				| 'secondary-green'
+				| 'secondary-golden'
+				| 'neutral'
+				| 'info'
+				| 'success'
+				| 'error'
+				| 'warning'
+				| 'extra-1'
+				| 'extra-2'
+				| 'gray'
+			>,
+			default: 'primary',
+		},
+		/**
+		 * v-model binding
+		 */
+		value: {
+			type: Boolean,
+			required: true,
+		},
+		/**
+		 * Is disabled?
+		 */
+		disabled: { type: Boolean, default: false },
+		/**
+		 * The updated bound model<br />
+		 * _event_
+		 */
+		input: {
+			type: Function,
+			// eslint-disable-next-line
+			default: (value: [String, Number]) => {},
+		},
+	},
+	setup(props, { emit }) {
+		const isDisabled = ref(props.disabled);
+
+		const backgroundStyles = computed(() => ({
+			'farm-switch--selected': props.value && !isDisabled.value,
+			'farm-switch--idle': !props.value && !isDisabled.value,
+			'farm-switch--disabled-on': props.value && isDisabled.value,
+			'farm-switch--disabled-off': !props.value && isDisabled.value,
+		}));
+
+		const indicatorStyles = computed(() => ({
+			transform: props.value ? 'translateX(16px)' : 'translateX(0)',
+		}));
+
+		watch(
+			() => props.disabled,
+			newValue => {
+				isDisabled.value = newValue;
+			}
+		);
+
+		const toggle = () => {
+			if (isDisabled.value) {
+				return false;
+			}
+			emit('input', !props.value);
+		};
+
+		return { isDisabled, backgroundStyles, indicatorStyles, toggle };
+	},
+};
+</script>
+<style lang="scss" scoped>
+@import 'Switcher';
+</style>

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

@@ -0,0 +1,26 @@
+import { shallowMount } from '@vue/test-utils';
+import Switcher from '../Switcher';
+
+describe('Switcher component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(Switcher, {
+			propsData: {
+				value: false,
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Switch created', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	describe('Computed properties', () => {
+		it('Should check backgroundStyles', () => {
+			expect(component.backgroundStyles).toBeDefined();
+		});
+	});
+});

package/src/components/Switcher/index.ts

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

package/src/components/TableContextMenu/TableContextMenu.scss

@@ -0,0 +1,9 @@
+.farm-context-menu {
+	&--disabled {
+		pointer-events: none;
+	}
+}
+:deep(.farm-listitem .farm-icon) {
+	vertical-align: sub;
+	margin-right: 8px;
+}