From ebb1132c33b861e6227ef3560402a76ea47c6c63 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Thu, 26 Sep 2024 02:11:01 +0800 Subject: [PATCH] pkp/pkp-lib#10444 Change Dialog component styling --- src/components/Modal/Dialog.mdx | 8 +++ src/components/Modal/Dialog.stories.js | 81 ++++++++++++++++++++++++++ src/components/Modal/Dialog.vue | 69 +++++++++++++++------- 3 files changed, 136 insertions(+), 22 deletions(-) diff --git a/src/components/Modal/Dialog.mdx b/src/components/Modal/Dialog.mdx index 3e298eae3..4f7db6f8a 100644 --- a/src/components/Modal/Dialog.mdx +++ b/src/components/Modal/Dialog.mdx @@ -19,6 +19,14 @@ Dialog purpose is to display simple feedback like success and error messages. Or Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composables-usemodal--docs#opensidemodal) composable. Check out the props description for details. +## Styling + +The style of the modal can be changed by passing the prop `type`. It accepts the following values: + +- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal type. +- **`negative`**: Indicates a negative state, typically for error messages or alerts. +- **`success`**: Represents a positive state, often used for success notifications. + ## Accessibility To correctly handle accessibility (title, description) and focus management - [headless-ui](https://headlessui.com) library is used. diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js index 25b577c15..437d10138 100644 --- a/src/components/Modal/Dialog.stories.js +++ b/src/components/Modal/Dialog.stories.js @@ -138,3 +138,84 @@ export const DialogComplex = { await user.click(canvas.getByText('Full Example')); }, }; + +const ErrorBodyComponent = { + template: ` + Cancelling the invitation sent to Emma Stone will deactivate the acceptance link sent to her via email. Here are the invitation details: + + `, + props: { + failedDoiActions: {type: Array, required: true}, + }, +}; + +export const NegativeState = { + args: { + buttonName: 'Show modal', + name: 'error', + title: 'Cancel Invitation', + bodyComponent: ErrorBodyComponent, + actions: [ + { + label: 'Cancel Invitation', + isPrimary: true, + callback: (close) => { + // Simulate a server request + setTimeout(() => close(), 2000); + }, + }, + { + label: 'Cancel', + isWarnable: true, + callback: (close) => close(), + }, + ], + close: () => console.log('closed full example dialog'), // eslint-disable-line, + type: 'negative', + }, + play: async ({canvasElement}) => { + // Assigns canvas to the component root element + const canvas = within(canvasElement); + const user = userEvent.setup(); + + await user.click(canvas.getByText('Show modal')); + }, +}; + +export const SuccessState = { + args: { + buttonName: 'Show modal', + name: 'error', + title: "You've been added as a section editor in OJS", + message: + 'Congratulations! As a section editor you might get access to more options in OJS. If you need any assistance in understanding the system, please click on "Help" buttons throughout the system to guide you through the interface.', + actions: [ + { + label: 'View All Submissions', + callback: (close) => close(), + }, + ], + close: () => console.log('closed full example dialog'), // eslint-disable-line, + type: 'success', + }, + play: async ({canvasElement}) => { + // Assigns canvas to the component root element + const canvas = within(canvasElement); + const user = userEvent.setup(); + + await user.click(canvas.getByText('Show modal')); + }, +}; diff --git a/src/components/Modal/Dialog.vue b/src/components/Modal/Dialog.vue index 58b0338c0..9c6223329 100644 --- a/src/components/Modal/Dialog.vue +++ b/src/components/Modal/Dialog.vue @@ -27,31 +27,24 @@ leave-from="opacity-100 translate-y-0 sm:scale-100" leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95" > - +
- {{ title }} +
+ +
+ {{ title }} -
-
+
-
+