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

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

@@ -0,0 +1,81 @@
+import { LoggerItem } from '../../main';
+
+export default {
+	title: 'Examples/Logger/LoggerItem',
+	component: LoggerItem,
+	parameters: {
+		docs: {
+			description: {
+				component: `LoggerItem<br />
+				selector: <em>farm-logger-item</em>
+				`,
+			},
+		},
+		viewMode: 'docs',
+	},
+};
+
+export const Primary = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+export const Success = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+export const Error = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'error',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+export const CustomIcon = () => ({
+	components: { LoggerItem },
+	data() {
+		return {
+			item: {
+				icon: 'book',
+				message: 'Recusado entre as pré elegíveis',
+				userName: 'Cleyton Rasta',
+				formattedDate: '13/06/2022  20:40',
+				status: 'success',
+			},
+		};
+	},
+	template: `<LoggerItem :item="item" />`,
+});
+
+Primary.storyName = 'Basic';
+Success.storyName = 'Success';
+Error.storyName = 'Error';
+CustomIcon.storyName = 'Custom Icon';

package/src/examples/Modal.stories.js

@@ -58,6 +58,54 @@ export const ModalSmall = () => ({
 	</div>`,
 });
 
+export const ModalExtremeSmall = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-x-small" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
+export const ModalMedium = () => ({
+	components: {
+		DialogHeader,
+		DialogFooter,
+	},
+	data() {
+		return {
+			showModalSmall: false,
+		};
+	},
+	template: `<div>
+	<v-dialog content-class="modal-default modal-default-md" v-model="showModalSmall">
+		<DialogHeader title="Exemplo" @onClose="showModalSmall = false;" />
+		<v-main class="pa-6 pt-12">
+			Place dialog content here!
+		</v-main>
+		<DialogFooter :hasConfirm="false" @onClose="showModalSmall = false;" />
+	</v-dialog>
+		<v-btn @click="showModalSmall = true;" color="secondary">
+			Clique para abrir
+		</v-btn>
+	</div>`,
+});
+
 export const ModalScrollVertical = () => ({
 	components: {
 		DialogHeader,
@@ -181,4 +229,8 @@ ModalSmall.story = {
 
 ModalScrollVertical.storyName = 'Rolagem vertical';
 
-ModalScrollHorizontal.storyName = 'Rolagem horizontal';
+ModalScrollHorizontal.storyName = 'Rolagem horizontal';
+
+ModalExtremeSmall.storyName = 'Extra pequeno';
+
+ModalMedium.storyName = 'Médio';

package/src/main.ts

@@ -21,6 +21,7 @@ import IconBox from './components/IconBox';
 import CardContext from './components/CardContext';
 
 import DefaultButton from './components/Buttons/DefaultButton';
+import Collapsible from './components/Collapsible';
 
 export {
 	DataTableEmptyWrapper,
@@ -43,6 +44,7 @@ export {
 	DefaultButton,
 	IconBox,
 	CardContext,
+	Collapsible,
 };
 
 export * from './components/Buttons/DefaultButton';
@@ -60,3 +62,5 @@ export * from './components/MultipleSelectShortener';
 export * from './components/SelectModalOptions';
 export * from './components/ChipInviteStatus';
 export * from './components/Stepper';
+export * from './components/Logger';
+export * from './components/Logger/LoggerItem';

package/src/scss/DefaultModal.scss

@@ -72,7 +72,16 @@
 			max-width: calc(392px - 2rem);
 		}
 	}
+
+	.v-dialog.modal-default.modal-default-md {
+		max-width: calc(600px - 2rem);
+
+		header {
+			max-width: calc(600px - 2rem);
+		}
+	}
 }
+
 @media screen and (max-width: 960px) {
 	.v-dialog.modal-default header {
 		max-width: calc(100% - 3rem);