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

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

@@ -0,0 +1,35 @@
+import { shallowMount } from '@vue/test-utils';
+import ButtonToggle from '../ButtonToggle.vue';
+
+describe('ButtonToggle component', () => {
+	let wrapper;
+	let component;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ButtonToggle, {
+			propsData: {
+				buttons: [],
+			},
+		});
+		component = wrapper.vm;
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+
+	test('Default buttons value', () => {
+		const wrapper1 = shallowMount(ButtonToggle, {});
+		expect(wrapper1.vm.buttons.length).toEqual(0);
+	});
+
+	describe('Methods', () => {
+		describe('setValue', () => {
+			it('Should set value', () => {
+				component.setValue(3);
+				expect(component.inputVal).toEqual(3);
+				expect(wrapper.emitted('input')[0]).toEqual([3]);
+			});
+		});
+	});
+});

package/src/components/ButtonToggle/index.ts

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

package/src/components/Buttons/ConfirmButton/ConfirmButton.stories.js

@@ -0,0 +1,50 @@
+import ConfirmButton from './ConfirmButton.vue';
+
+export default {
+	title: 'Buttons/Confirm',
+	component: ConfirmButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `Confirm button<br />
+				selector: <em>farm-btn-confirm</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<ConfirmButton>Confirm Button</ConfirmButton>',
+});
+
+export const HtmlMarkup = () => ({
+	template: '<ConfirmButton><em>I am italic</strong></em></ConfirmButton>',
+});
+
+export const Props = () => ({
+	template: '<ConfirmButton title="custom title">custom title (hover me)</ConfirmButton>',
+});
+
+export const Listener = () => ({
+	data() {
+		return {
+			x: 1,
+		};
+	},
+	template: `
+		<ConfirmButton color="error" @click="x = x + 1">click me to change: {{ x }}</ConfirmButton>
+	`,
+});
+
+export const Iconed = () => ({
+	components: { ConfirmButton },
+	template: `<div>
+		<ConfirmButton :icon="true">default icon</ConfirmButton>
+		<ConfirmButton :icon="true" customIcon="information-outline">information-outline</ConfirmButton>
+		<ConfirmButton :icon="true" customIcon="account-search">account-search</ConfirmButton>
+		<ConfirmButton :icon="true" customIcon="account-search" disabled>account-search</ConfirmButton>
+	</div>`,
+});

package/src/components/Buttons/ConfirmButton/ConfirmButton.vue

@@ -0,0 +1,33 @@
+<template>
+	<farm-btn v-bind="$attrs" >
+		<farm-icon v-if="icon" class="'mr-3">
+			{{ customIcon }}
+		</farm-icon>
+		<slot></slot>
+	</farm-btn>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-btn-confirm',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * Show icon
+		 */
+		icon: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Custom icon
+		 */
+		customIcon: {
+			type: String,
+			default: 'check',
+		},
+	},
+};
+</script>
+

package/src/components/Buttons/ConfirmButton/__tests__/ConfirmButton.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import ConfirmButton from '../ConfirmButton';
+
+describe('ConfirmButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(ConfirmButton);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/ConfirmButton/index.ts

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

package/src/components/Buttons/DangerButton/DangerButton.stories.js

@@ -0,0 +1,49 @@
+import DangerButton from './DangerButton.vue';
+
+export default {
+	title: 'Buttons/DangerButton',
+	component: DangerButton,
+	parameters: {
+		docs: {
+			description: {
+				component: `Danger button<br />
+				selector: <em>farm-btn-fanger</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: '<farm-btn-danger>Danger Button</farm-btn-danger>',
+});
+
+export const HtmlMarkup = () => ({
+	template: '<farm-btn-danger><em>I am italic</strong></em></farm-btn-danger>',
+});
+
+export const Props = () => ({
+	template: '<farm-btn-danger title="custom title">custom title (hover me)</farm-btn-danger>',
+});
+
+export const Listener = () => ({
+	data() {
+		return {
+			x: 1,
+		};
+	},
+	template: `
+		<farm-btn-danger color="error" @click="x = 2">click me to change: {{ x }}</farm-btn-danger>
+	`,
+});
+
+export const Iconed = () => ({
+	template: `<div>
+		<farm-btn-danger :icon="true">default icon</farm-btn-danger>
+		<farm-btn-danger :icon="true" customIcon="information-outline">information-outline</farm-btn-danger>
+		<farm-btn-danger :icon="true" customIcon="account-search">account-search</farm-btn-danger>
+		<farm-btn-danger :icon="true" customIcon="account-search" disabled>account-search</farm-btn-danger>
+	</div>`,
+});

package/src/components/Buttons/DangerButton/DangerButton.vue

@@ -0,0 +1,32 @@
+<template>
+	<farm-btn v-bind="$attrs"  color="error">
+		<farm-icon v-if="icon" class="'mr-3">
+			{{ customIcon }}
+		</farm-icon>
+		<slot></slot>
+	</farm-btn>
+</template>
+<script lang="ts">
+
+
+export default {
+	name: 'farm-btn-danger',
+	inheritAttrs: true,
+	props: {
+		/**
+		 * Show icon
+		 */
+		icon: {
+			type: Boolean,
+			default: false,
+		},
+		/**
+		 * Custom icon
+		 */
+		customIcon: {
+			type: String,
+			default: '',
+		},
+	},
+};
+</script>

package/src/components/Buttons/DangerButton/__tests__/DangerButton.spec.js

@@ -0,0 +1,14 @@
+import { shallowMount } from '@vue/test-utils';
+import DangerButton from '../DangerButton';
+
+describe('DangerButton component', () => {
+	let wrapper;
+
+	beforeEach(() => {
+		wrapper = shallowMount(DangerButton);
+	});
+
+	test('Created hook', () => {
+		expect(wrapper).toBeDefined();
+	});
+});

package/src/components/Buttons/DangerButton/index.ts

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

package/src/components/Buttons/DefaultButton/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/components/Buttons/DefaultButton/DefaultButton.scss

@@ -0,0 +1,328 @@
+@import '../../../configurations/variables';
+@import '../../../configurations/mixins';
+@import '../../../configurations/theme-colors';
+$butonSizes: (
+	'xs': 20px,
+	'sm': 28px,
+	'md': 32px,
+	'lg': 48px,
+	'xl': 56px,
+	'default': 36px,
+);
+
+.farm-btn {
+	font-size: 14px;
+	align-items: center;
+	border-radius: 6px;
+	display: inline-flex;
+	flex: 0 0 auto;
+	font-weight: 700;
+	letter-spacing: 0.5px;
+	justify-content: center;
+	outline: 0;
+	position: relative;
+	text-decoration: none;
+	transition-duration: 0.28s;
+	transition-property: box-shadow, transform, opacity;
+	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+	user-select: none;
+	vertical-align: middle;
+	white-space: nowrap;
+	line-height: 16px;
+	height: 36px;
+	min-width: 64px;
+	padding: 0 16px;
+
+	&.farm-btn--full {
+		width: 100%;
+	}
+
+	@each $size,
+	$value in $sizes {
+		&#{'.farm-btn[size=' + $size + ']'} {
+			font-size: $value;
+			height: map-get($butonSizes, $size);
+		}
+	}
+
+	&__content {
+		font-weight: 700;
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		gap: 8px;
+
+		::v-deep i.mdi {
+			font-size: 1rem;
+		}
+	}
+
+	&--round {
+		border-radius: 50%;
+	}
+
+	&.farm-btn--disabled {
+		background-color: #dadada;
+		color: rgba(0, 0, 0, 0.26);
+		cursor: default;
+		border-color: #dadada;
+
+		&:before {
+			display: none;
+		}
+
+		i.mdi.farm-icon {
+			color: rgba(0, 0, 0, 0.26);
+		}
+	}
+
+	&:before {
+		transition: all 0.28s ease;
+		background-color: currentColor;
+		border-radius: inherit;
+		bottom: 0;
+		color: inherit;
+		content: '';
+		left: 0;
+		opacity: 0;
+		pointer-events: none;
+		position: absolute;
+		right: 0;
+		top: 0;
+	}
+
+	&:not(.farm-btn--plain):hover {
+		&:before {
+			opacity: 0.14;
+		}
+	}
+
+	&:not(.farm-btn--plain):not(.farm-btn--disabled):active {
+		&:before {
+			opacity: 0.27;
+		}
+	}
+
+	&.farm-btn--plain {
+		background-color: transparent !important;
+
+		.farm-btn__content {
+			position: relative;
+
+			&:before {
+				content: '';
+				transition: all 0.28s ease;
+				background-color: currentColor;
+				top: 110%;
+				left: 0;
+				position: absolute;
+				width: 100%;
+				height: 1px;
+				opacity: 0;
+			}
+		}
+
+		&:hover:not(.farm-btn--disabled) {
+			.farm-btn__content,
+			.farm-btn__content:before {
+				opacity: 0.86;
+			}
+		}
+
+		&:active {
+			&:before {
+				opacity: 0.73;
+			}
+		}
+	}
+
+	&.farm-btn--rounded {
+		border-radius: 1rem;
+	}
+}
+
+.farm-btn.farm-btn--icon {
+	background: transparent !important;
+	border: transparent !important;
+	transition: color 0.5s ease;
+
+	min-width: auto;
+	width: 36px;
+
+	.farm-btn__content i.mdi {
+		color: gray;
+	}
+
+	@each $size,
+	$value in $sizes {
+		&#{'.farm-btn[size=' + $size + ']'} {
+			font-size: $value;
+		}
+	}
+
+	&[size='lg'] {
+		width: 48px;
+		height: 48px;
+	}
+
+	&[size='xl'] {
+		width: 64px;
+		height: 64px;
+	}
+
+	@each $color in $theme-colors-list {
+		&#{'.farm-btn--' + $color}:not(.farm-btn--disabled) {
+			&:hover {
+				color: var(--farm-#{$color}-base);
+			}
+
+			.farm-btn__content :deep(i.mdi) {
+				color: var(--farm-#{$color}-base);
+			}
+
+			&.farm-btn--variation-lighten {
+				&:hover {
+					color: var(--farm-#{$color}-lighten);
+				}
+
+				.farm-btn__content :deep(i.mdi) {
+					color: var(--farm-#{$color}-lighten);
+				}
+			}
+
+			&.farm-btn--variation-darken {
+				&:hover {
+					color: var(--farm-#{$color}-darken);
+				}
+
+				.farm-btn__content :deep(i.mdi) {
+					color: var(--farm-#{$color}-darken);
+				}
+			}
+		}
+	}
+
+	&#{'.farm-btn--white'}:not(.farm-btn--disabled) {
+		::v-deep .farm-btn__content i.mdi {
+			color: white;
+		}
+	}
+}
+
+@each $color in $theme-colors-list {
+	#{'.farm-btn--' + $color} {
+		background-color: var(--farm-#{$color}-base);
+		color: white;
+
+		&.farm-btn--outlined {
+			border: 1px solid var(--farm-#{$color}-base);
+		}
+
+		&:not(.farm-btn--outlined):not(.farm-btn--plain):not(.farm-btn--icon) {
+			::v-deep .farm-btn__content {
+				i.mdi {
+					color: white;
+				}
+
+				.farm-btn__content i.mdi {
+					color: black;
+				}
+			}
+		}
+
+		&.farm-btn--variation-lighten {
+			border: 1px solid var(--farm-#{$color}-lighten);
+			background-color: var(--farm-#{$color}-lighten);
+			color: var(--farm-text-primary);
+		}
+
+		&.farm-btn--variation-darken {
+			border: 1px solid var(--farm-#{$color}-darken);
+			background-color: var(--farm-#{$color}-darken);
+		}
+	}
+
+	.farm-btn--extra,
+	.farm-btn--white {
+		color: black;
+	}
+
+	:not(.farm-btn--disabled) {
+		&.farm-btn--outlined#{'.farm-btn--' + $color} {
+			border: 1px solid var(--farm-#{$color}-base);
+			background: white;
+			color: var(--farm-#{$color}-base);
+
+			&.farm-btn--extra,
+			&.farm-btn--white {
+				color: black;
+				border: 1px solid black;
+			}
+
+			.farm-btn__content i.mdi {
+				color: var(--farm-#{$color}-base);
+			}
+		}
+
+		&.farm-btn--plain#{'.farm-btn--' + $color} {
+			border: none;
+			background: white;
+			color: var(--farm-#{$color}-base);
+
+			&.farm-btn--extra,
+			&.farm-btn--white {
+				color: black;
+
+				.farm-btn__content i.mdi {
+					color: black;
+				}
+			}
+
+			.farm-btn__content i.mdi {
+				color: var(--farm-#{$color}-base);
+			}
+		}
+	}
+}
+
+.farm-btn--outlined.farm-btn--disabled {
+	border: 1px solid #d6d6d6;
+	color: #d6d6d6;
+	background-color: white;
+
+	i.mdi.farm-icon {
+		color: #d6d6d6;
+	}
+}
+
+.farm-btn--primary.farm-btn--disabled:not(.farm-btn--outlined) {
+	.farm-btn__content i.mdi {
+		color: rgba(0, 0, 0, 0.26) !important;
+	}
+}
+
+.farm-btn--plain.farm-btn--disabled {
+	background-color: transparent;
+	border: none;
+}
+
+.farm-btn--elevated {
+	box-shadow: 0px 3px 1px -2px rgb(0 0 0 / 20%), 0px 2px 2px 0px rgb(0 0 0 / 14%),
+		0px 1px 5px 0px rgb(0 0 0 / 12%);
+}
+
+@include upToSm {
+	.farm-btn {
+		padding: 0 12px;
+		line-height: 12px;
+		min-width: 48px;
+		height: 32px;
+	}
+}
+
+@include forXsOnly {
+	.farm-btn.farm-btn--responsive {
+		width: 100%;
+		margin: 0;
+	}
+}