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

package/src/components/DialogHeader/DialogHeader.stories.js

@@ -1,19 +1,45 @@
 import DialogHeader from './DialogHeader.vue';
 
 export default {
-	title: 'API/Dialog/DialogHeader',
+	title: 'Display/Dialog/DialogHeader',
 	component: DialogHeader,
 };
 
 export const Primary = () => ({
-	components: { DialogHeader },
-	template: '<div style="max-width: 480px; position: relative;"><DialogHeader title="Título do header" /></div>',
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header title="Título do header" />
+	</div>`,
 });
 
 export const Secondary = () => ({
-	components: { DialogHeader },
-	template: `<div style="max-width: 480px; position: relative;"><DialogHeader title="Título do header" iconTitle="calendar" /></div>`,
+	template: `<div style="max-width: 480px; position: relative;">
+		<farm-dialog-header title="Título do header" iconTitle="calendar" />
+	</div>`,
 });
 
-Primary.storyName = 'Básico';
-Secondary.storyName = 'Com ícone';
+
+export const CustomIcon = () => ({
+	template: `
+		<div style="max-width: 480px; position: relative;">
+			<farm-dialog-header title="Título do header" iconTitle="calendar" />
+		</div>`,
+});
+
+export const CloseHandler = () => ({
+	template: `
+		<div style="max-width: 480px; position: relative;">
+			<farm-dialog-header title="Título do header" iconTitle="calendar" @onClose="onClose" />
+		</div>`,
+	methods: {
+		onClose() {
+			alert('onClose handler');
+		},
+	},
+});
+
+export const NoCloseIcon = () => ({
+	template: `
+		<div style="max-width: 480px; position: relative;">
+			<farm-dialog-header title="Título do header" :hasCloseIcon="false" />
+		</div>`,
+});

package/src/components/FilePicker/FilePicker.stories.js

@@ -1,19 +1,14 @@
 import FilePicker from './FilePicker.vue';
 
 export default {
-	title: 'API/FilePicker',
+	title: 'Form/FilePicker',
 	component: FilePicker,
 };
 
 export const Primary = () => ({
-	components: { FilePicker },
 	template: '<FilePicker />',
 });
 
 export const MaxFileSize = () => ({
-	components: { FilePicker },
 	template: '<FilePicker maxFileSize="0.1" />',
 });
-
-Primary.storyName = 'Básico';
-MaxFileSize.storyName =  'Max File Size';

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

@@ -6,7 +6,7 @@ import sizes from '../../configurations/sizes';
 import('./Icons.stories.scss');
 
 export default {
-	title: 'Atoms/Icons',
+	title: 'Display/Icons',
 	decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
@@ -20,7 +20,7 @@ export default {
 
 export const Atom = () => ({
 	template: `<div class="icons-container">
-        <farm-icon :color="color">
+        <farm-icon color="secondary">
             book
         </farm-icon>
 	</div>`,

package/src/components/IconBox/IconBox.scss

@@ -9,9 +9,21 @@
 	align-items: center;
 
 	@each $color in $colors {
-        &#{'--' + $color} {
-            background: var(--v-#{$color}-lighten5);
-        }
-    }
-
+		&#{'--' + $color} {
+			background: var(--v-#{$color}-lighten5);
+		}
+	}
 }
+
+.farm-icon-box--inverted.farm-icon-box {
+	@each $color in $colors {
+		&#{'--' + $color} {
+			background: var(--v-#{$color}-base);
+		}
+	}
+
+	.farm-icon.farm-icon--white {
+		color: white;
+	}
+
+}

package/src/components/IconBox/IconBox.stories.js

@@ -1,13 +1,73 @@
-import IconBox from './IconBox.vue';
+import { withDesign } from 'storybook-addon-designs';
+import IconBox from './IconBox';
+import colors from '../../configurations/colors';
+import sizes from '../../configurations/sizes';
+import('../Icon/Icons.stories.scss');
 
 export default {
-	title: 'API/IconBox',
+	title: 'Display/IconBox',
 	component: IconBox,
+	decorators: [withDesign],
+	parameters: {
+		viewMode: 'docs',
+		docs: {
+			description: {
+				component: `IconBox`,
+			},
+		},
+	},
 };
 
 export const Primary = () => ({
-	components: { IconBox },
-	template: '<IconBox icon="mdi-currency-usd" />',
+	template: `<div class="icons-container">
+        <farm-icon-box
+			icon="book" />
+	</div>`,
 });
 
-Primary.storyName = 'Básico';
+export const Colors = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon-box
+			v-for="color of colors"
+			:key="color"
+			:color="color"
+			icon="book" />
+	</div>`,
+});
+
+export const Sizes = () => ({
+	data() {
+		return {
+			sizes,
+		};
+	},
+	template: `<div class="icons-container">
+        <div v-for="size of sizes" :key="size">
+            <farm-icon-box icon="book" :key="size" :size="size" />
+			{{ size }}
+        </div>
+       
+	</div>`,
+});
+
+export const Inverted = () => ({
+	data() {
+		return {
+			colors,
+		};
+	},
+	template: `<div class="icons-container">
+        <farm-icon-box
+			v-for="color of colors"
+			:key="'inverted_' + color"
+			:color="color"
+			:inverted="true"
+			icon="book"
+			 />
+	</div>`,
+});

package/src/components/IconBox/IconBox.vue

@@ -1,18 +1,23 @@
 <template>
-	<div :class="{ 'farm-icon-box': true, [cssColorClass]: true }" :size="size">
-		<farm-icon :color="color" :size="size">{{ iconParsed }}</farm-icon>
+	<div
+		:class="{
+			'farm-icon-box': true,
+			[cssColorClass]: true,
+			'farm-icon-box--inverted': inverted,
+		}"
+		:size="size"
+	>
+		<farm-icon :color="inverted ? 'white' : color" :size="size">{{
+			iconParsed
+		}}</farm-icon>
 	</div>
 </template>
 
 <script lang="ts">
 import Vue, { PropType } from 'vue';
-import Icon from '../Icon';
 
 export default Vue.extend({
 	name: 'farm-icon-box',
-	components: {
-		'farm-icon': Icon,
-	},
 	props: {
 		/**
 		 * Icon
@@ -32,6 +37,13 @@ export default Vue.extend({
 			type: String as PropType<'xs' | 'sm' | 'md' | 'lg' | 'xl'>,
 			default: 'md',
 		},
+		/**
+		 * INverted
+		 */
+		inverted: {
+			type: Boolean,
+			default: false,
+		},
 	},
 	computed: {
 		iconParsed() {

package/src/components/IdCaption/IdCaption.scss

@@ -0,0 +1,36 @@
+.idcaption {
+	display: flex;
+	
+	.farm-icon-box {
+		margin-right: 8px;
+	}
+
+	&__body {
+
+		display: flex;
+		flex-direction: column;
+		justify-content: space-between;
+		align-content: flex-start;
+
+		&--single {
+			justify-content: center;
+		}
+
+		.farm-typography {
+			
+			margin-bottom: 0;
+			display: flex;
+			flex: none;
+			> span {
+				position: relative;
+			}
+		}
+
+		.farm-btn,
+		.farm-tooltip {
+			position: absolute;
+			right: -30px;
+			top: -8px;
+		}
+	}
+}

package/src/components/IdCaption/IdCaption.stories.js

@@ -0,0 +1,116 @@
+import { withDesign } from 'storybook-addon-designs';
+import IdCaption from './';
+
+export default {
+	title: 'Display/IdCaption',
+	component: IdCaption,
+    decorators: [withDesign],
+	parameters: {
+		docs: {
+			description: {
+				component: `Id Caption<br />
+				selector: <em>farm-idcaption</em>
+				`,
+			},
+		},
+		design: {
+			type: 'figma',
+			url: 'https://www.figma.com/file/p62YDSTfWg0Mcnf5APfdvI/%E2%9C%8D-Design-System-%7C-v2?node-id=4087%3A6463',
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower: Line Text Line Text Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const Linkless = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    
+    `,
+});
+
+export const Iconless = () => ({
+	template: `
+    <farm-idcaption 
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoUpperText = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline"
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoBottomText = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline" 
+    copyText="texto a copiar"
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});
+
+export const NoTextToClip = () => ({
+	template: `
+    <farm-idcaption 
+    icon="account-box-outline" 
+    :link="true"
+    >
+        <template v-slot:title>
+            Upper Line Text
+        </template>
+        <template v-slot:subtitle>
+            Lower:Line Text
+        </template>
+    </farm-idcaption>
+    `,
+});

package/src/components/IdCaption/IdCaption.vue

@@ -0,0 +1,63 @@
+<template>
+	<div class="idcaption">
+		<farm-icon-box v-if="icon" :icon="icon" color="secondary" size="md" />
+		<div
+			:class="{ idcaption__body: true, 'idcaption__body--single': !hasTitle || !hasSubtitle }"
+		>
+			<farm-caption bold variation="medium" v-if="hasTitle">
+				<span>
+					{{ $slots.title ? $slots.title[0].text : null }}
+					<farm-btn icon color="gray" v-if="link" @click="$emit('onLinkClick')">
+						<farm-icon size="xs">open-in-new</farm-icon>
+					</farm-btn>
+				</span>
+			</farm-caption>
+
+			<farm-caption variation="regular" color="gray" v-if="hasSubtitle">
+				<span>
+					{{ $slots.subtitle ? $slots.subtitle[0].text : null }}
+					<farm-copytoclipboard v-if="copyText" :toCopy="copyText" />
+				</span>
+			</farm-caption>
+		</div>
+	</div>
+</template>
+
+<script lang="ts">
+import Vue, { computed } from 'vue';
+export default Vue.extend({
+	name: 'farm-idcaption',
+	props: {
+		/**
+		 * Icon
+		 */
+		icon: {
+			type: String,
+		},
+		/**
+		 * copy to clipboard
+		 */
+		copyText: {
+			type: String,
+		},
+		/**
+		 * Has link?
+		 */
+		link: {
+			type: Boolean,
+			default: false,
+		},
+	},
+
+	setup(_, { slots }) {
+		const hasTitle = computed(() => slots.title);
+		const hasSubtitle = computed(() => slots.subtitle);
+
+		return { hasSubtitle, hasTitle };
+	},
+});
+</script>
+
+<style lang="scss" scoped>
+@import './IdCaption.scss';
+</style>

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

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

package/src/components/IdCaption/index.ts

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

package/src/components/Label/Label.stories.js

@@ -21,18 +21,9 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-label': Label },
 	template: '<farm-label>Label</farm-label>',
 });
 
-const parameters = {
-	design: {
-		type: 'figma',
-		url: 'https://www.figma.com/file/1f84J4m1IBghWhozQvdyyt/%E2%9C%85---Design-System-%7C-v1?node-id=1503%3A227',
-	},
-};
-
-Primary.story = {
-	name: 'Basic',
-	parameters,
-};
+export const Required = () => ({
+	template: '<farm-label :required="true">Label</farm-label>',
+});

package/src/{examples → components/Loader}/Loader.stories.ts

@@ -1,8 +1,8 @@
 import { withDesign } from 'storybook-addon-designs';
-import { Loader } from '../main';
+import { Loader } from '../../main';
 
 export default {
-	title: 'Examples/Loader',
+	title: 'Feedback/Loader',
 	decorators: [withDesign],
 	parameters: {
 		viewMode: 'docs',
@@ -16,27 +16,18 @@ export default {
 };
 
 export const Primary = () => ({
-	components: {
-		'farm-loader': Loader,
-	},
 	template: `<div style="width: 480px;">
     <farm-loader />
     </div>`,
 });
 
 export const Small = () => ({
-	components: {
-		'farm-loader': Loader,
-	},
 	template: `<div style="width: 480px;">
     <farm-loader size="small" />
     </div>`,
 });
 
 export const Overlay = () => ({
-	components: {
-		'farm-loader': Loader,
-	},
 	data() {
 		return {
 			show: false,

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

@@ -1,7 +1,7 @@
 import Logger from './Logger.vue';
 
 export default {
-	title: 'API/Logger',
+	title: 'Feedback/Logger',
 	component: Logger,
 	parameters: {
 		docs: {
@@ -21,11 +21,41 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-logger': Logger },
 	data() {
-		return {};
+		return {
+			items: [
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+				},
+				{
+					message: 'Aprovado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'success',
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
+				{
+					message: 'Recusado entre as pré elegíveis',
+					userName: 'Cleyton Rasta',
+					formattedDate: '13/06/2022  20:40',
+					status: 'error',
+				},
+			],
+		};
 	},
-	template: `<farm-logger />`,
+	template: `<farm-logger :items="items" />`,
 });
-
-Primary.storyName = 'Básico';

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

@@ -1,7 +1,7 @@
 import LoggerItem from './LoggerItem.vue';
 
 export default {
-	title: 'API/Logger/LoggerItem',
+	title: 'Feedback/Logger/LoggerItem',
 	component: LoggerItem,
 	parameters: {
 		docs: {
@@ -20,11 +20,36 @@ export default {
 };
 
 export const Primary = () => ({
-	components: { 'farm-logger-item': LoggerItem },
 	data() {
 		return {
 			item: {
-				icon: 'book',
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
+export const Success = () => ({
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});
+
+export const Error = () => ({
+	data() {
+		return {
+			item: {
 				message: 'Recusado entre as pré elegíveis',
 				userName: 'Cleyton Rasta',
 				formattedDate: '13/06/2022  20:40',
@@ -35,4 +60,17 @@ export const Primary = () => ({
 	template: `<farm-logger-item :item="item" />`,
 });
 
-Primary.storyName = 'Básico';
+export const CustomIcon = () => ({
+	data() {
+		return {
+			item: {
+				icon: 'book',
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<farm-logger-item :item="item" />`,
+});

package/src/components/Logger/LoggerItem/LoggerItem.vue

@@ -24,13 +24,9 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue';
 import ILoggerItem from './ILoggerItem';
-import Icon from '../../Icon';
 
 export default Vue.extend({
 	name: 'farm-logger-item',
-	components: {
-		'farm-icon': Icon,
-	},
 	props: {
 		/**
 		 * Logger item

package/src/components/Logos/OriginatorLogo/OriginatorLogo.stories.js

@@ -1,13 +1,12 @@
 import OriginatorLogo from './OriginatorLogo.vue';
 
 export default {
-	title: 'API/Logos/OriginatorLogo',
+	title: 'Display/Logos/OriginatorLogo',
 	component: OriginatorLogo,
 };
 
 export const Primary = () => ({
-	components: { OriginatorLogo },
-	template: '<OriginatorLogo alt="primary" id="88001" />',
+	template: '<farm-imglogo-originator alt="primary" id="88001" />',
 });
 
 Primary.storyName = 'Básico';