@farm-investimentos/front-mfe-components 10.0.1 → 10.1.1

package/package.json

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

package/src/components/Card/Card.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Card<br />
 				selector: <em>farm-card</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Card/CardContent/CardContent.vue

@@ -5,13 +5,16 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import Vue, { PropType } from 'vue';
 
 export default Vue.extend({
 	name: 'farm-card-content',
 	props: {
 		tag: { type: String, default: 'div' },
-		gutter: { type: String, default: 'default' },
+		gutter: {
+			type: String as PropType<'none' | 'xs' | 'sm' | 'default' | 'md' | 'lg' | 'xl'>,
+			default: 'default',
+		},
 	},
 	inheritAttrs: true,
 });

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

@@ -12,7 +12,7 @@ export default {
 			description: {
 				component: `Checkbox<br />
 				selector: <em>farm-checkbox</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

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

@@ -13,7 +13,7 @@ export default {
 			description: {
 				component: `Chip<br />
 				selector: <em>farm-chip</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/DialogHeader/DialogHeader.scss

@@ -14,6 +14,8 @@ header {
     padding: 16px;
     background-color: #fff;
     font-weight: 700;
-    color: var(--v-secondary-base);
-    border-bottom: 1px solid #d6d6d6;
+    color: var(--farm-primary-base);
+    border-bottom: 1px solid var(--farm-stroke-divider);
+    display: flex;
+    justify-content: flex-start;
 }

package/src/components/DialogHeader/DialogHeader.vue

@@ -1,7 +1,9 @@
 <template>
 	<header>
 		<farm-icon v-if="iconTitle" size="16px" color="secondary">{{ iconTitle }}</farm-icon>
-		{{ title }}
+		<farm-caption v-if="title" variation="regular" bold>
+			{{ title }}
+		</farm-caption>
 
 		<slot></slot>
 
@@ -19,7 +21,6 @@
 </template>
 <script lang="ts">
 import Vue from 'vue';
-import Icon from '../Icon';
 /**
  * Header de dialog/modal
  */
@@ -48,9 +49,6 @@ export default Vue.extend({
 			default: true,
 		},
 	},
-	components: {
-		'farm-icon': Icon,
-	},
 	methods: {
 		onClose() {
 			this.$emit('onClose', {});

package/src/components/Form/Form.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Form<br />
 				selector: <em>farm-form</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Form/Form.vue

@@ -9,7 +9,7 @@ type ErrorsBag = Record<number, boolean>;
 export default Vue.extend({
 	name: 'farm-form',
 	props: {
-		value: { type: [Array, Boolean], required: true },
+		value: { type: [Boolean], required: true },
 	},
 	inheritAttrs: true,
 	setup(props, { emit }) {

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

@@ -3,7 +3,6 @@ import Form from '../Form';
 
 describe('Form component', () => {
 	let wrapper;
-	let component;
 
 	beforeEach(() => {
 		wrapper = shallowMount(Form);

package/src/components/Icon/Icon.stories.js

@@ -14,7 +14,7 @@ export default {
 			description: {
 				component: `Icon<br />
                 selector: <em>farm-icon<em><br />
-                <span style="color: green;">ready for use</span>`,
+                <span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/ListItem/ListItem.stories.js

@@ -55,7 +55,7 @@ export const ClickableCursor = () => ({
 export const ClickListener = () => ({
 	methods: {
 		onClick() {
-			alert('Clicked')
+			alert('Clicked');
 		}
 	},
 	template:

package/src/components/Loader/Loader.stories.ts

@@ -10,7 +10,7 @@ export default {
 			description: {
 				component: `Loader<br />
 				selector: <em>farm-loader</em><br />
-				<span style="color: green;">ready for use</span>`,
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 	},

package/src/components/Logger/Logger.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Logger<br />
 				selector: <em>farm-logger</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/MainFilter/MainFilter.scss

@@ -10,6 +10,10 @@ section {
 		border: 0;
 	}
 
+	.farm-tooltip {
+		margin-left: 4px;
+	}
+
 }
 
 @media screen and (max-width: 600px) {
@@ -22,4 +26,4 @@ section {
 			margin-top: 0 !important;
 		}
 	}
-}
+}

package/src/components/MainFilter/MainFilter.stories.js

@@ -3,6 +3,17 @@ import MainFilter from './MainFilter.vue';
 export default {
 	title: 'Form/MainFilter',
 	component: MainFilter,
+	parameters: {
+		docs: {
+			description: {
+				component: `Main Filter<br />
+				selector: <em>farm-form-mainfilter</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
 };
 
 export const Primary = () => ({
@@ -17,7 +28,6 @@ export const CustomLabel = () => ({
 	template: '<farm-form-mainfilter label="Custom" />',
 });
 
-
 export const MainFilters = () => ({
 	data() {
 		return {
@@ -32,3 +42,15 @@ export const MainFilters = () => ({
         </section>
 	</div>`,
 });
+
+export const Tooltip = () => ({
+	data() {
+		return {
+			text: 'Some long tooltip text to be placed here!',
+		};
+	},
+	template: `
+	<div style="max-width: 480px; padding-top: 32px; margin-left: 32px;">
+		<farm-form-mainfilter label="Label" :tooltip="text" />
+	</div>`,
+});

package/src/components/MainFilter/MainFilter.vue

@@ -3,12 +3,16 @@
 		<fieldset v-if="hasInitialInput">
 			<farm-label :for="elementId">
 				{{ label }}
+				<farm-tooltip v-if="tooltip">
+					<farm-caption>
+						{{ tooltip }}
+					</farm-caption>
+					<template v-slot:activator="">
+						<farm-icon size="sm" color="gray">help-circle</farm-icon>
+					</template>
+				</farm-tooltip>
 			</farm-label>
-			<farm-textfield
-				v-model="inputValue"
-				:id="elementId"
-				@keyup="onKeyUp"
-			/>
+			<farm-textfield v-model="inputValue" :id="elementId" @keyup="onKeyUp" />
 		</fieldset>
 		<farm-btn
 			v-if="hasExtraFilters"
@@ -65,6 +69,13 @@ export default Vue.extend({
 			type: Boolean,
 			default: false,
 		},
+		/**
+		 * Tooltip text
+		 */
+		tooltip: {
+			type: String,
+			default: null,
+		},
 	},
 
 	watch: {

package/src/components/Modal/Modal.scss

@@ -18,7 +18,8 @@
         left: 0;
         width: 100vw;
         height: 100vh;
-        background: rgba(#999999, 0.8);
+        opacity: 0.46;
+        background-color: rgb(33, 33, 33) !important;
         z-index: 101;
     }
 

package/src/components/Modal/Modal.stories.js

@@ -8,7 +8,7 @@ export default {
 			description: {
 				component: `Modal<br />
 				selector: <em>farm-modal</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Modal/Modal.vue

@@ -25,7 +25,7 @@ export default Vue.extend({
 		/**
 		 * v-model binding
 		 */
-		value: { type: Boolean, required: true, default: true },
+		value: { type: Boolean, required: true, default: false },
 		/**
 		 * Is persistent
 		 */

package/src/components/ModalPromptUser/ModalPromptUser.stories.js

@@ -11,7 +11,7 @@ export default {
 			description: {
 				component: `Modal Prompt User to Confirm<br />
 				selector: <em>farm-prompt-user</em><br />
-				<span style="color: green;">ready for use</span>`,
+				<span style="color: var(--farm-primary-base);">ready for use</span>`,
 			},
 		},
 		design: {

package/src/components/RadioGroup/RadioGroup.stories.js

@@ -11,7 +11,7 @@ export default {
 			description: {
 				component: `RadioGroup<br />
 				selector: <em>farm-radio-group</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 
 				`,
 			},

package/src/components/TableContextMenu/TableContextMenu.stories.js

@@ -14,7 +14,7 @@ export default {
 			description: {
 				component: `TableContextMenu<br />
 				selector: <em>farm-context-menu</em><br />
-				<span style="color: green;">ready for use</span>
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},

package/src/components/Tooltip/Tooltip.scss

@@ -1,8 +1,20 @@
+@import '../../configurations/theme-colors';
 @import '../../configurations/variables';
 
 .farm-tooltip {
 	display: inline-block;
 	position: relative;
+
+	@each $color in $colors {
+		@each $color in $theme-colors-list {
+	
+			&--#{$color} {
+				.farm-tooltip__popup {
+					background-color: themeColor($color);
+				}
+			}
+		}
+	}
 }
 
 .farm-tooltip__popup {
@@ -22,15 +34,4 @@
 		opacity: 1;
 		visibility: visible;
 	}
-
-}
-
-
-@each $color in $colors {
-	#{'.farm-tooltip--' + $color} {
-		.farm-tooltip__popup {
-			background-color: var(--v-#{$color}-base);
-
-		}
-	}
 }

package/src/components/Tooltip/Tooltip.stories.js

@@ -1,25 +1,29 @@
 import { withDesign } from 'storybook-addon-designs';
 import Tooltip from '.';
-import colors from '../../configurations/colors';
-
+import baseThemeColors from '../../configurations/_theme-colors-base.scss';
+const colors = Object.keys(baseThemeColors);
 
 export default {
-    title: 'Interactions/Tooltip',
-    component: Tooltip,
-    decorators: [withDesign],
-    parameters: {
+	title: 'Interactions/Tooltip',
+	component: Tooltip,
+	decorators: [withDesign],
+	parameters: {
 		docs: {
 			description: {
 				component: `Tooltip<br />
-				selector: <em>farm-tooltip</em>
+				selector: <em>farm-tooltip</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
 				`,
 			},
 		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
+		},
 		viewMode: 'docs',
 	},
 };
 
-
 export const Tooltips = () => ({
 	data() {
 		return {
@@ -79,33 +83,3 @@ export const Visibility = () => ({
         </farm-tooltip>
 	</div>`,
 });
-
-Tooltips.story = {
-	name: 'Colors',
-	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
-		},
-	},
-};
-
-Iconed.story = {
-	name: 'Iconed',
-	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
-		},
-	},
-};
-
-Visibility.story = {
-	name: 'Visibility',
-	parameters: {
-		design: {
-			type: 'figma',
-			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=3779%3A6131',
-		},
-	},
-};

package/src/components/Tooltip/Tooltip.vue

@@ -9,7 +9,8 @@
 		<span
 			:class="{
 				'farm-tooltip__popup': true,
-				'farm-tooltip__popup--visible': (!externalControl && showOver) || (externalControl && toggleComponent),
+				'farm-tooltip__popup--visible':
+					(!externalControl && showOver) || (externalControl && toggleComponent),
 			}"
 		>
 			<slot></slot>
@@ -29,32 +30,32 @@ export default Vue.extend({
 			type: String as PropType<
 				| 'primary'
 				| 'secondary'
-				| 'error'
-				| 'extra'
-				| 'accent'
+				| 'neutral'
 				| 'info'
 				| 'success'
-				| 'gray'
-				| 'yellow'
-				| 'white'
+				| 'error'
+				| 'warning'
+				| 'success'
+				| 'extra-1'
+				| 'extra-2'
 			>,
-			default: 'gray',
+			default: 'secondary',
 		},
 		/**
 		 * Control visibility
+		 * v-model bind
 		 */
-		value: {},
+		value: {
+			type: Boolean,
+			default: undefined,
+		},
 	},
 	setup(props) {
 		const parent = ref(null);
 		const showOver = ref(false);
 
-		const toggleComponent = computed(() => {
-			return props.value;
-		});
-		const externalControl = computed(() => {
-			return typeof props.value === 'boolean';
-		});
+		const toggleComponent = computed(() => props.value);
+		const externalControl = computed(() => props.value !== undefined);
 
 		const onOver = () => {
 			showOver.value = true;
@@ -66,10 +67,10 @@ export default Vue.extend({
 		return {
 			parent,
 			showOver,
-			onOver,
-			onOut,
 			toggleComponent,
 			externalControl,
+			onOver,
+			onOut,
 		};
 	},
 });

package/src/components/layout/Basic.stories.js

@@ -17,13 +17,13 @@ export const Primary = () => ({
 export const Structure = () => ({
 	template: `
 	<farm-container>
-		<div>
+		<farm-box>
 			Content<br />
 			Content<br />
 			Content<br />
 			Content<br />
 			Content<br />
-		</div>
+		</farm-box>
 		<farm-row>
 			<v-col md="6" lg="3">
 				coluna 1

package/src/components/layout/Box/Box.scss

@@ -0,0 +1,20 @@
+@import '../../../configurations/variables';
+
+.farm-box {
+    display: flex;
+    flex: 1 0 auto;
+    max-width: 100%;
+    transition: .2s cubic-bezier(.4, 0, .2, 1);
+
+    @each $k in $justifications {
+        &#{'--justify-' + $k} {
+            justify-content: $k;
+        }
+    }
+
+    @each $k in $directions {
+        &#{'--direction-' + $k} {
+            flex-direction: $k;
+        }
+    }
+}

package/src/components/layout/Box/Box.stories.js

@@ -0,0 +1,66 @@
+import Box from './Box.vue';
+import { directions, justifications } from '../../../configurations/flexVariables';
+
+export default {
+	title: 'Layout/Box',
+	component: Box,
+	parameters: {
+		docs: {
+			description: {
+				component: `Box<br />
+				selector: <em>farm-box</em><br />
+				<span style="color: var(--farm-primary-base);">ready for use</span>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `<div>
+		<farm-box>box</farm-box>
+	</div>`,
+});
+
+export const Tag = () => ({
+	template: `<div>
+		<farm-box tag="section">tag: section</farm-box>
+	</div>`,
+});
+
+export const Justify = () => ({
+	data() {
+		return {
+			justifications,
+		};
+	},
+	template: `<div>
+		<farm-box :justify="k" v-for="k in justifications" :key="'justify-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
+			<div>
+				justify {{ k }}
+			</div>
+			<div>
+				another div
+			</div>
+		</farm-box>
+	</div>`,
+});
+
+export const Directions = () => ({
+	data() {
+		return {
+			directions,
+		};
+	},
+	template: `<div>
+		<farm-box :direction="k" v-for="k in directions" :key="'direction-_' + k" style="border:1px solid var(--farm-stroke-base); margin-bottom: 16px;">
+			<div>
+			direction {{ k }}
+			</div>
+			<div>
+				another div
+			</div>
+		</farm-box>
+	</div>`,
+});

package/src/components/layout/Box/Box.vue

@@ -0,0 +1,43 @@
+<template>
+	<component
+		:is="tag"
+		:class="{
+			'farm-box': true,
+			[`farm-box--justify-${justify}`]: justify,
+			[`farm-box--direction-${direction}`]: direction,
+		}"
+	>
+		<slot></slot>
+	</component>
+</template>
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+
+export default Vue.extend({
+	name: 'farm-box',
+	props: {
+		/**
+		 * Html tag
+		 */
+		tag: { type: String, default: 'div' },
+		/**
+		 * Applies the flex-direction css property
+		 */
+		direction: {
+			type: String as PropType<'row' | 'row-reverse' | 'column' | 'column-reverse'>,
+			default: 'row',
+		},
+		/**
+		 * Applies the justify-content css property
+		 */
+		justify: {
+			type: String as PropType<'start' | 'center' | 'end' | 'space-between' | 'space-around'>,
+			default: '',
+		},
+	},
+	inheritAttrs: true,
+});
+</script>
+<style lang="scss" scoped>
+@import 'Box';
+</style>

package/src/components/layout/Box/__tests__/Box.spec.js

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