@farm-investimentos/front-mfe-components 8.7.1 → 9.1.1

package/src/components/CardContext/CardContext.stories.js

@@ -1,10 +1,9 @@
 import CardContext from './CardContext.vue';
 
-
 export default {
-	title: 'API/CardContext',
+	title: 'Surfaces/CardContext',
 	component: CardContext,
-    parameters: {
+	parameters: {
 		docs: {
 			description: {
 				component: `Card Context<br />
@@ -17,62 +16,51 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { CardContext },
 	template: `
-        <CardContext icon="mdi-currency-usd" title="Titulo do Card">
+        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card">
             <p>Conteúdo do Card</p>
-        </CardContext>
+        </farm-card-context>
     `,
 });
 
 export const Secondary = () => ({
-	components: { CardContext },
 	template: `
-        <CardContext icon="mdi-currency-usd" title="Titulo do Card" bold>
+        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" bold>
             <p>Conteúdo do Card</p>
-        </CardContext>
+        </farm-card-context>
     `,
 });
 
 export const WithLoading = () => ({
-	components: { CardContext },
 	template: `
-        <CardContext icon="mdi-currency-usd" title="Titulo do Card" isLoading>
+        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isLoading>
             <p>Conteúdo do Card</p>
-        </CardContext>
+        </farm-card-context>
     `,
 });
 
 export const WithLoadingLarge = () => ({
-	components: { CardContext },
 	template: `
-        <CardContext icon="mdi-currency-usd" title="Titulo do Card" isLoading largeLoading>
+        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isLoading largeLoading>
             <p>Conteúdo do Card</p>
-        </CardContext>
+        </farm-card-context>
     `,
 });
 
 export const WithError = () => ({
 	components: { CardContext },
 	template: `
-        <CardContext icon="mdi-currency-usd" title="Titulo do Card" isError>
+        <farm-card-context icon="mdi-currency-usd" title="Titulo do Card" isError>
             <p>Conteúdo do Card</p>
-        </CardContext>
+        </farm-card-context>
     `,
 });
 
 export const NoIcon = () => ({
 	components: { CardContext },
 	template: `
-        <CardContext title="Titulo do Card">
+        <farm-card-context title="Titulo do Card">
             <p>Conteúdo do Card</p>
-        </CardContext>
+        </farm-card-context>
     `,
 });
-
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Título em Bold';
-WithLoading.storyName = 'Com Loading';
-WithLoadingLarge.storyName = 'Com Loading Large';
-WithError.storyName = 'Com Erro';
-NoIcon.storyName = 'No icon';

package/src/components/CardContext/CardContext.vue

@@ -7,7 +7,7 @@
 		}"
 	>
 		<div class="card-context-header" v-if="isSuccess && title">
-			<farm-iconbox :icon="icon" v-if="icon" />
+			<farm-icon-box v-if="icon" :icon="icon" />
 			<div class="card-context-content">
 				<p :class="{ 'card-context-title': true, 'card-context-content--bold': bold }">
 					{{ title }}
@@ -26,7 +26,7 @@
 	</div>
 </template>
 
-<script>
+<script lang="ts">
 import Vue from 'vue';
 
 export default Vue.extend({
@@ -37,7 +37,7 @@ export default Vue.extend({
 		 */
 		title: {
 			type: String,
-			require: true,
+			required: true,
 		},
 		/**
 		 * Set bold text
@@ -105,6 +105,6 @@ export default Vue.extend({
 });
 </script>
 
-<style lang="sass" scoped>
-@import './CardContext.scss'
+<style lang="scss" scoped>
+@import './CardContext.scss';
 </style>

package/src/components/Checkbox/Checkbox.scss

@@ -0,0 +1,29 @@
+.farm-checkbox__container {
+    display: flex;
+    flex-direction: row;
+
+    .farm-label {
+        margin-left: 8px;
+    }
+}
+
+.farm-checkbox {
+    width: 20px;
+    height: 20px;
+    display: flex;
+    justify-content: center;
+    border: 2px solid #5c5c5c;
+    border-radius: 2px;
+    cursor: pointer;
+    line-height: 0;
+    transition: all 0.4s;
+
+    &--checked {
+        background-color: var(--v-secondary-base);
+        border-color: var(--v-secondary-base);
+    }
+
+    .farm-icon {
+        color: white;
+    }
+}

package/src/components/Checkbox/Checkbox.stories.js

@@ -0,0 +1,49 @@
+import Checkbox from './Checkbox';
+
+export default {
+	title: 'Form/Checkbox',
+	component: Checkbox,
+	parameters: {
+		docs: {
+			description: {
+				component: `Checkbox<br />
+				selector: <em>farm-checkbox</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	data() {
+		return {
+			isChecked: false,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" />
+	</div>`,
+});
+
+export const DefaultTrue = () => ({
+	data() {
+		return {
+			isChecked: true,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" />
+	</div>`,
+});
+
+export const WithLabel = () => ({
+	data() {
+		return {
+			isChecked: false,
+		};
+	},
+	template: `<div>
+		<farm-checkbox v-model="isChecked" label="custom label" />
+	</div>`,
+});

package/src/components/Checkbox/Checkbox.vue

@@ -0,0 +1,48 @@
+<template>
+	<div class="farm-checkbox__container">
+		<span
+			:class="{ 'farm-checkbox': true, 'farm-checkbox--checked': innerValue }"
+			@click="toggleValue"
+		>
+			<farm-icon size="sm" v-if="innerValue">check</farm-icon>
+		</span>
+		<farm-label v-if="label">
+            {{ label }}
+        </farm-label>
+	</div>
+</template>
+<script lang="ts">
+import Vue, { ref } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-checkbox',
+	props: {
+		/**
+		 * v-model binding
+		 */
+		value: { type: Boolean, required: true },
+		/**
+		 * Label
+		 */
+		label: { type: String, default: null },
+	},
+	setup(props, { emit }) {
+		const innerValue = ref(props.value);
+		const { label } = props;
+
+		const toggleValue = () => {
+			innerValue.value = !innerValue.value;
+			emit('input', innerValue.value);
+		};
+
+		return {
+			innerValue,
+			label,
+			toggleValue,
+		};
+	},
+});
+</script>
+<style lang="scss" scoped>
+@import './Checkbox.scss';
+</style>

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

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

package/src/components/Checkbox/index.ts

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

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

@@ -1,15 +1,56 @@
 import Chip from './Chip.vue';
+import('./Chip.stories.scss');
+
+const colors = ['secondary', 'info', 'error'];
+const variations = ['darken', 'lighten'];
 
 export default {
-	title: 'API/Chip',
+	title: 'Display/Chips',
 	component: Chip,
 };
 
 export const Primary = () => ({
-	components: { 'farm-chip': Chip },
 	template: `<div>
 		<farm-chip color="info">Chip</farm-chip>
 	</div>`,
 });
 
-Primary.storyName = 'Básico';
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="chips-container">
+		<h3>Base Colors</h3>
+		<farm-chip 
+			v-for="color in colors"
+			:key="color"
+			:color="color">
+				{{ color }}
+		</farm-chip>
+	</div>`,
+});
+
+export const Variations = () => ({
+	data() {
+		return {
+			colors,
+			variations,
+		};
+	},
+	template: `
+	<div>
+		<h3>Variations</h3>
+		<div class="chips-container" v-for="color in colors">
+			<h4>{{ color }}</h4>
+			<farm-chip 
+				v-for="variation in variations"
+				:key="color + '_' + variation"
+				:color="color"
+				:variation="variation">
+					{{ variation }}
+			</farm-chip>
+		</div>
+	</div>`,
+});

package/src/components/Chip/Chip.vue

@@ -1,21 +1,16 @@
 <template>
 	<span :class="{ 'farm-chip': true }">
-        <farm-typography tag="span" size="sm">
-            <slot></slot>
-        </farm-typography>
+		<farm-typography tag="span" size="sm">
+			<slot></slot>
+		</farm-typography>
 	</span>
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import Typography from '../Typography';
 
 export default Vue.extend({
 	name: 'farm-chip',
-    inheritAttrs: true,
-	setup() {},
-	components: {
-		'farm-typography': Typography,
-	},
+	inheritAttrs: true,
 });
 </script>
 <style lang="scss" scoped>

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

@@ -1,22 +1,19 @@
 import ChipInviteStatus from './ChipInviteStatus.vue';
 
 export default {
-	title: 'API/Onboarding/ChipInviteStatus',
+	title: 'Display/Chips/Onboarding/InviteStatus',
 	component: ChipInviteStatus,
 };
 
 export const Primary = () => ({
-	components: { ChipInviteStatus },
 	template: `<div style="width: 120px;">
-        <ChipInviteStatus :status="10" />
-        <ChipInviteStatus :status="11" />
-        <ChipInviteStatus :status="12" />
-        <ChipInviteStatus :status="13" />
-        <ChipInviteStatus :status="14" />
-        <ChipInviteStatus :status="15" />
-        <ChipInviteStatus :status="16" />
-        <ChipInviteStatus :status="17" />
+        <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" />
     </div>`,
 });
-
-Primary.storyName = 'Básico';

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

@@ -1,19 +1,49 @@
-import Collapsible from './Collapsible.vue';
+import Collapsible from './Collapsible';
 
 export default {
-	title: 'API/Collapsible',
-	component: Collapsible,
+	title: 'Surfaces/Collapsible',
+	components: Collapsible,
+	parameters: {
+		docs: {
+			description: {
+				component: `Collapsible<br />selector: <em>farm-collapsible</em>`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
-export const Default = () => ({
-	components: { Collapsible },
-	template: '<Collapsible title="Example" icon="home">Text or Components</Collapsible>',
+export const Primary = () => ({
+	template: '<farm-collapsible title="">collapsible content</farm-collapsible>',
 });
 
-export const WithoutIcon = () => ({
-	components: { Collapsible },
-	template: '<Collapsible title="Example without icon">Text or Components</Collapsible>',
+export const Title = () => ({
+	template: '<farm-collapsible title="Title">collapsible content</farm-collapsible>',
 });
 
-Default.storyName = 'Básico';
-WithoutIcon.storyName = 'Sem ícone';
+export const Icon = () => ({
+	template: '<farm-collapsible icon="book" title="With Icon">collapsible content</farm-collapsible>',
+});
+
+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>`,
+});
+
+Primary.storyName = 'Basic';
+Title.storyName = 'Title';
+Icon.storyName = 'Icon';
+Opened.storyName = 'Opened';

package/src/components/Collapsible/Collapsible.vue

@@ -29,19 +29,10 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import Icon from '../Icon';
-import Card from '../Card';
-import CardContent from '../Card/CardContent';
-import Typography from '../Typography';
 
 export default Vue.extend({
 	name: 'farm-collapsible',
-	components: {
-		'farm-icon': Icon,
-		'farm-card': Card,
-		'farm-card-content': CardContent,
-		'farm-typography': Typography,
-	},
+
 	props: {
 		/**
 		 * Title

package/src/components/DataTableEmptyWrapper/DataTableEmptyWrapper.stories.js

@@ -1,21 +1,15 @@
 import DataTableEmptyWrapper from './DataTableEmptyWrapper.vue';
 
 export default {
-    title: 'API/Table/DataTableEmptyWrapper',
-    component: DataTableEmptyWrapper,
+	title: 'Display/Table/DataTableEmptyWrapper',
+	component: DataTableEmptyWrapper,
 };
 
 export const Primary = () => ({
-    components: { DataTableEmptyWrapper },
-    template: '<DataTableEmptyWrapper />',
+	template: '<DataTableEmptyWrapper />',
 });
 
-
 export const CustomTitles = () => ({
-    components: { DataTableEmptyWrapper },
-    template: '<DataTableEmptyWrapper title="Título customizado" subtitle="Subtítulo customizado" />',
+	template:
+		'<DataTableEmptyWrapper title="Título customizado" subtitle="Subtítulo customizado" />',
 });
-
-
-Primary.storyName = 'Básico';
-CustomTitles.storyName = "Títulos";

package/src/components/DataTableHeader/DataTableHeader.stories.js

@@ -1,12 +1,11 @@
 import DataTableHeader from './DataTableHeader.vue';
 
 export default {
-	title: 'API/Table/DataTableHeader',
+	title: 'Display/Table/DataTableHeader',
 	component: DataTableHeader,
 };
 
 export const Primary = () => ({
-	components: { DataTableHeader },
 	data() {
 		return {
 			headers: [

package/src/components/DataTablePaginator/DataTablePaginator.stories.js

@@ -2,7 +2,7 @@ import { withDesign } from 'storybook-addon-designs';
 import DataTablePaginator from './DataTablePaginator.vue';
 
 export default {
-	title: 'API/Table/DataTablePaginator',
+	title: 'Display/Table/DataTablePaginator',
 	component: DataTablePaginator,
 	decorators: [withDesign],
 	parameters: {
@@ -26,19 +26,19 @@ export const Primary = () => ({
 	data() {
 		return {
 			totalPages: null
-		}
+		};
 	},
 	template: '<DataTablePaginator :totalPages="totalPages" :page="1" />',
 	mounted() {
 		setTimeout(() => {
 			this.totalPages = 2;
-		}, 1000)
+		}, 1000);
 	}
 });
 
 export const Secondary = () => ({
 	components: { DataTablePaginator },
-	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="19" :page="1" />',
+	template: '<DataTablePaginator :hidePerPageOptions="true" :totalPages="190000" :page="1" />',
 });
 
 export const Disabled = () => ({

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

@@ -24,5 +24,5 @@ describe('DataTablePaginator component', () => {
 		it('Should build range of items', () => {
 			expect(component.range(1, 7).length).toEqual(7);
 		});
-	})
+	});
 });

package/src/components/DatePicker/DatePicker.vue

@@ -136,7 +136,9 @@ export default Vue.extend({
 					timeZone: 'America/Sao_Paulo',
 				});
 
-				return this.min && locatedSelectedDate < locatedMinDate
+				console.log(this.getUniversalDate(locatedSelectedDate), this.getUniversalDate(locatedMinDate));
+
+				return this.min && this.getUniversalDate(locatedSelectedDate) < this.getUniversalDate(locatedMinDate)
 					? 'A data está fora do período permitido'
 					: true;
 			},
@@ -174,6 +176,11 @@ export default Vue.extend({
 				this.save();
 			}
 		},
+		getUniversalDate(d) {
+			const onlyDMY = d.split(' ')[0];
+			const arr = onlyDMY.split('/');
+			return new Date(arr[2], arr[1] -1, arr[0]);
+		},
 	},
 	computed: {
 		inputVal: {

package/src/components/DialogFooter/DialogFooter.stories.js

@@ -1,11 +1,39 @@
 import DialogFooter from './DialogFooter.vue';
 
 export default {
-	title: 'API/Dialog/DialogFooter',
+	title: 'Display/Dialog/DialogFooter',
 	component: DialogFooter,
 };
 
 export const Primary = () => ({
-	components: { DialogFooter },
-	template: '<DialogFooter />',
+	components: { 'farm-dialog-footer': DialogFooter },
+	template: '<farm-dialog-footer />',
+});
+
+export const ExtraButton = () => ({
+	data() {
+		return { extraButtons: [{ label: 'Random label', color: 'error', outlined: true }] };
+	},
+	template: `<farm-dialog-footer :extraButtons="extraButtons" />`,
+});
+
+export const ConfirmIcon = () => ({
+	template: `<div>
+        <farm-dialog-footer confirmIcon="check" />
+        <farm-dialog-footer confirmIcon="check" confirmColor="yellow" />
+        <farm-dialog-footer confirmIcon="check" confirmColor="accent" />
+    </div>
+	`,
+});
+
+export const Handlers = () => ({
+	template: '<farm-dialog-footer @onConfirm="onConfirm"  @onClose="onClose" />',
+	methods: {
+		onConfirm() {
+			alert('onConfirm handler');
+		},
+		onClose() {
+			alert('onClose handler');
+		},
+	},
 });