@farm-investimentos/front-mfe-components 5.2.2 → 6.1.0

package/package.json

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

package/src/components/RadioButton/RadioButton.scss

@@ -0,0 +1,11 @@
+::v-deep{
+	.v-label {
+		margin-left: 10px;
+		color: #000;
+		text-transform: capitalize;
+		font-weight: bold;
+	}
+	.v-icon {
+		color: var(--v-secondary-base);
+	}
+}

package/src/components/RadioButton/RadioButton.stories.js

@@ -0,0 +1,52 @@
+import RadioButton from './RadioButton.vue';
+
+export default {
+	title: 'API/RadioButton',
+	component: RadioButton,
+};
+
+export const Primary = () => ({
+	components: { RadioButton },
+	data() {
+		return {
+			value: null,
+			label: ['teste', 'teste']
+		};
+	},
+	template: `<div>
+			<RadioButton v-model="value" :labels="label">
+			</RadioButton>
+		</div>`,
+});
+
+export const Secondary = () => ({
+	components: { RadioButton },
+	data() {
+		return {
+			value: 2,
+			label: ['teste', 'teste', 'teste', 'teste']
+		};
+	},
+	template: `<div>
+			<RadioButton v-model="value" :labels="label">
+			</RadioButton>
+		</div>`,
+});
+
+export const Tertiary = () => ({
+	components: { RadioButton },
+	data() {
+		return {
+			value: 2,
+			label: ['teste', 'teste', 'teste', 'teste']
+		};
+	},
+	template: `<div>
+			<RadioButton v-model="value" isBlock :labels="label">
+			</RadioButton>
+		</div>`,
+});
+
+Primary.storyName = 'Basic';
+Secondary.storyName = 'Selected Horizontal';
+Tertiary.storyName = 'Selected Vertical';

package/src/components/RadioButton/RadioButton.vue

@@ -0,0 +1,61 @@
+<template>
+	<v-radio-group v-model="selectedVal" :column="isBlock">
+		<v-radio
+			color="secondary"
+			v-for="(item, index) in labels"
+			:class="{ 'ml-3': isBlock, 'mr-3': isBlock }"
+			:key="index"
+			:label="item"
+		>
+		</v-radio>
+	</v-radio-group>
+</template>
+
+<script>
+import Vue from 'vue';
+import { VRadioGroup, VRadio } from 'vuetify/lib/components/VRadioGroup';
+
+export default Vue.extend({
+	name: 'farm-radio-button',
+	components: {
+		VRadioGroup,
+		VRadio,
+	},
+	props: {
+		/**
+		 * Value to change with v-model, if has some value it'ill be the *     initial selected value
+		 *  */
+		value: {
+			require: true,
+		},
+		/**
+		 * Labels to show aside radio buttons
+		 */
+		labels: {
+			type: Array,
+			require: true,
+		},
+		/**
+		 * To change if is vertical or horizontal view
+		 */
+		isBlock: {
+			type: Boolean,
+			default: false,
+		},
+	},
+	computed: {
+		selectedVal: {
+			get() {
+				return this.value;
+			},
+			set(val) {
+				this.$emit('input', val);
+			},
+		},
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import './RadioButton.scss';
+</style>

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

@@ -0,0 +1,20 @@
+import { shallowMount } from '@vue/test-utils';
+import RadioButton from '../RadioButton.vue';
+
+describe('RadioButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(RadioButton, {
+			propsData: {
+				value: 2,
+				label: ['teste', 'teste', 'teste', 'teste'],
+				isBlock: true,
+			},
+		});
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/RadioButton/index.ts

@@ -0,0 +1,3 @@
+import RadioButton from './RadioButton.vue';
+
+export default RadioButton;

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

@@ -42,6 +42,12 @@ $step-height: 64px;
 			@include stepperHeaderStepColor(var(--v-error-base));
 		}
 
+		&.stepper__header-step--next {
+			i.mdi {
+				color: var(--v-gray-lighten1);
+			}
+		}
+
 		span {
 			margin-top: 8px;
 			text-align: center;
@@ -110,19 +116,15 @@ $step-height: 64px;
 			}
 
 			&.stepper__divider--previous-to-current {
-				background: linear-gradient(
-					to bottom,
-					var(--v-secondary-base),
-					var(--v-accent-base)
-				);
+				background: linear-gradient(to bottom,
+						var(--v-secondary-base),
+						var(--v-accent-base));
 			}
 
 			&.stepper__divider--previous-to-error {
-				background: linear-gradient(
-					to bottom,
-					var(--v-secondary-base),
-					var(--v-error-base)
-				);
+				background: linear-gradient(to bottom,
+						var(--v-secondary-base),
+						var(--v-error-base));
 			}
 		}
 	}
@@ -133,14 +135,15 @@ i.mdi {
 	border-radius: 50%;
 	width: 32px;
 	height: 32px;
-	display: block;
 
 	display: flex;
 	align-items: center;
 	justify-content: center;
+	color: white;
+	font-style: normal;
 
 	&:before {
 		font-size: 16px;
 		color: var(--v-gray-lighten1);
 	}
-}
+}

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

@@ -8,6 +8,7 @@
 						'stepper__header-step--current': isStepCurrent(index),
 						'stepper__header-step--previous': isStepPrevious(index),
 						'stepper__header-step--error': isStepError(index),
+						'stepper__header-step--next': isStepNext(index),
 					}"
 					:key="step.label"
 				>
@@ -16,8 +17,9 @@
 							mdi: true,
 							['mdi-' + step.icon]: true,
 						}"
-						v-if="step.icon"
-					/>
+					>
+						{{ step.icon ? '' : index + 1 }}
+					</i>
 					<span>
 						{{ step.label }}
 					</span>
@@ -89,6 +91,9 @@ export default Vue.extend({
 				this.isStepError(index + 1)
 			);
 		},
+		isStepNext(index: number): boolean {
+			return index + 1 > this.currentStep;
+		},
 	},
 });
 </script>

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

@@ -43,5 +43,12 @@ describe('StepperHeader component', () => {
 			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();
+		});
+
+		
 	});
 });

package/src/examples/Buttons.stories.js

@@ -1,5 +1,6 @@
 import { withDesign } from 'storybook-addon-designs';
 import { DefaultButton } from '../main';
+import('./Buttons.stories.scss');
 
 export default {
 	title: 'Examples/Buttons',
@@ -14,7 +15,7 @@ export default {
 	},
 };
 
-const colors = ['primary', 'secondary', 'error', 'extra', 'gray', 'accent', 'yellow'];
+const colors = ['primary', 'secondary', 'error', 'gray', 'accent', 'yellow'];
 
 export const ActiveButtons = () => ({
 	components: {
@@ -25,8 +26,8 @@ export const ActiveButtons = () => ({
 			colors,
 		};
 	},
-	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
-        <DefaultButton v-for="color of colors":key="color" :color="color" style="margin-bottom: 1rem;">
+	template: `<div class="buttons-container">
+        <DefaultButton v-for="color of colors":key="color" :color="color">
             {{ color }}
         </DefaultButton>
 	</div>`,
@@ -41,8 +42,8 @@ export const OutlinedButtons = () => ({
 			colors,
 		};
 	},
-	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
-        <DefaultButton v-for="color of colors":key="color" :color="color" style="margin-bottom: 1rem;" outlined>
+	template: `<div class="buttons-container">
+        <DefaultButton v-for="color of colors":key="color" :color="color"outlined>
             {{ color }}
         </DefaultButton>
 	</div>`,
@@ -57,8 +58,24 @@ export const DisabledButtons = () => ({
 			colors,
 		};
 	},
-	template: `<div style="display: flex; flex-direction: column; max-width: 160px; width: 100%;">
-        <DefaultButton v-for="color of colors":key="color" :color="color" style="margin-bottom: 1rem;" disabled>
+	template: `<div class="buttons-container">
+        <DefaultButton v-for="color of colors":key="color" :color="color" disabled>
+            {{ color }}
+        </DefaultButton>
+	</div>`,
+});
+
+export const Plain = () => ({
+	components: {
+		DefaultButton,
+	},
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="buttons-container">
+        <DefaultButton v-for="color of colors":key="color" :color="color" plain>
             {{ color }}
         </DefaultButton>
 	</div>`,
@@ -73,3 +90,6 @@ OutlinedButtons.story = {
 DisabledButtons.story = {
 	name: 'Disabled',
 };
+Plain.story = {
+	name: 'Plain',
+};

package/src/examples/Buttons.stories.scss

@@ -0,0 +1,10 @@
+.buttons-container {
+    display: flex;
+    flex-direction: column;
+    max-width: 160px;
+    width: 100%;
+
+    >button {
+        margin-bottom: 1rem;
+    }
+}

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

@@ -62,7 +62,24 @@ export const VerticalError = () => ({
 			currentStep: 3,
 		};
 	},
-	template: '<StepperHeader :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
+	template:
+		'<StepperHeader :steps="steps" :currentStep="currentStep" vertical :errorCurrentStepStatus="true" />',
+});
+
+export const Numbers = () => ({
+	components: { StepperHeader },
+	data() {
+		return {
+			steps: [
+				{ label: 'Solicitação de limite' },
+				{ label: 'Lista impeditiva' },
+				{ label: 'Lista pré-elegíveis' },
+				{ label: 'Fila de compliance' },
+			],
+			currentStep: 2,
+		};
+	},
+	template: '<StepperHeader :steps="steps" :currentStep="currentStep" />',
 });
 
 Primary.story = {
@@ -77,3 +94,6 @@ Error.story = {
 VerticalError.story = {
 	name: 'Vertical Error',
 };
+Numbers.story = {
+	name: 'Numbers',
+};

package/src/scss/ButtonOverrides.scss

@@ -1,17 +1,19 @@
-
 .v-btn {
-    
+
     .v-btn__content {
         text-transform: none;
         letter-spacing: 0;
         font-weight: 700;
     }
+
     &.v-size--default {
         font-size: 0.75rem !important;
+
         .v-icon {
             font-size: 1rem;
         }
     }
+
     &.v-btn-outlined-noborder {
         border: 0;
     }
@@ -31,19 +33,34 @@
     &:hover {
         opacity: 0.8;
     }
+
     &:before {
         opacity: 0 !important;
     }
+
     .v-ripple__container {
         opacity: 0 !important;
     }
 }
 
 
+.v-btn--plain {
+    &:not(.v-btn--active):not(.v-btn--loading):not(:focus):not(:hover) {
+        .v-btn__content {
+            opacity: 1;
+        }
+    }
+    &:hover {
+        opacity: 0.62;
+    }
+}
+
+
 @media screen and (max-width: 600px) {
+
     .v-btn.v-btn-responsive,
     .v-btn.v-btn--responsive {
         width: 100%;
         margin: 0;
     }
-}
+}