From f2ce13cd0a678c20f41c4227ac9b12b851ac60ed Mon Sep 17 00:00:00 2001
From: Blesilda Ramirez <ramirezblesilda@gmail.com>
Date: Tue, 1 Oct 2024 01:43:24 +0800
Subject: [PATCH] pkp/pkp-lib#10444 Update default Dialog modal styling

---
 src/components/Modal/Dialog.mdx        |  3 ++-
 src/components/Modal/Dialog.stories.js | 28 ++++++++++++++++++++++++--
 src/components/Modal/Dialog.vue        |  8 +++++---
 3 files changed, 33 insertions(+), 6 deletions(-)

diff --git a/src/components/Modal/Dialog.mdx b/src/components/Modal/Dialog.mdx
index 7ab371cd1..e3fb1f1f5 100644
--- a/src/components/Modal/Dialog.mdx
+++ b/src/components/Modal/Dialog.mdx
@@ -23,7 +23,8 @@ Dialog are opened via method `openDialog` from [useModal](../?path=/docs/composa
 
 The style of the modal can be changed by passing the prop `modalStyle`. It accepts the following values:
 
-- **`default`**: The standard modal style that uses primary color styling. This serves as the default value for the modal style.
+- **`default`**: The standard modal style, which has no special border styling. This serves as the default value for the modal style.
+- **`primary`**: A modal style that uses the primary color scheme.
 - **`negative`**: Indicates a negative state, typically for error messages or alerts.
 - **`success`**: Represents a positive state, often used for success notifications.
 
diff --git a/src/components/Modal/Dialog.stories.js b/src/components/Modal/Dialog.stories.js
index 114c3d854..a848f95f2 100644
--- a/src/components/Modal/Dialog.stories.js
+++ b/src/components/Modal/Dialog.stories.js
@@ -183,7 +183,7 @@ export const NegativeState = {
 				callback: (close) => close(),
 			},
 		],
-		close: () => console.log('closed full example dialog'), // eslint-disable-line,
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
 		modalStyle: 'negative',
 	},
 	play: async ({canvasElement}) => {
@@ -208,7 +208,7 @@ export const SuccessState = {
 				callback: (close) => close(),
 			},
 		],
-		close: () => console.log('closed full example dialog'), // eslint-disable-line,
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
 		modalStyle: 'success',
 	},
 	play: async ({canvasElement}) => {
@@ -219,3 +219,27 @@ export const SuccessState = {
 		await user.click(canvas.getByText('Show modal'));
 	},
 };
+
+export const PrimaryStyle = {
+	args: {
+		buttonName: 'Show modal',
+		name: 'primary',
+		title: 'Primary Color',
+		message: "This dialog uses the application's primary color.",
+		actions: [
+			{
+				label: 'Ok',
+				callback: (close) => close(),
+			},
+		],
+		close: () => console.log('closed example dialog'), // eslint-disable-line,
+		modalStyle: 'primary',
+	},
+	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 731a804f7..d5b2921c2 100644
--- a/src/components/Modal/Dialog.vue
+++ b/src/components/Modal/Dialog.vue
@@ -110,17 +110,19 @@ const props = defineProps({
 	actions: {type: Array, default: () => []},
 	/** Callback when dialog is being closed by close button or clicking outside of the modal */
 	close: {type: Function, default: null},
-	/** Defines the visual style of the modal: 'default' (primary color), 'negative', or 'success'. */
+	/** Defines the visual style of the modal: 'default' (primary color), 'primary', 'negative', or 'success'. */
 	modalStyle: {
 		type: String,
 		default: () => 'default',
-		validator: (value) => ['default', 'negative', 'success'].includes(value),
+		validator: (value) =>
+			['default', 'primary', 'negative', 'success'].includes(value),
 	},
 });
 
 const styles = computed(() => ({
 	'modal__panel modal__panel--dialog relative mx-3 w-10/12 max-w-3xl transform overflow-hidden rounded bg-secondary text-start shadow transition-all sm:my-8': true,
-	'border-s-[14px] border-primary': props.modalStyle === 'default',
+	'border-none': props.modalStyle === 'default',
+	'border-s-[14px] border-primary': props.modalStyle === 'primary',
 	'border-s-[14px] border-success': props.modalStyle === 'success',
 	'border-s-[14px] border-negative': props.modalStyle === 'negative',
 }));