pkp/pkp-lib#10001 Add Cancel buttons in Modal and SideModal stories w…

…ith form

src/components/Modal/Modal.stories.js

@@ -51,6 +51,18 @@ export const WithForm = {
 
 			const form = ref({
 				...cloneDeep(FormMock),
+				pages: [
+					{
+						id: 'default',
+						submitButton: {
+							label: 'Submit',
+							isPrimary: true,
+						},
+						cancelButton: {
+							label: 'Cancel',
+						},
+					},
+				],
 				action: 'https://httpbin.org',
 				method: 'GET',
 			});
@@ -67,7 +79,7 @@ export const WithForm = {
 				:open="isModalOpened"
 				@close="isModalOpened = false"
 			>
-				<PkpForm v-bind="form" @set="setForm" @success="formSuccess" />
+				<PkpForm v-bind="form" @set="setForm" @success="formSuccess" @cancel="isModalOpened = false" />
 			</Modal>
 		`,
 	}),

src/components/Modal/SideModal.stories.js

@@ -1,5 +1,5 @@
 import {within, userEvent} from '@storybook/test';
-import {ref} from 'vue';
+import {ref, inject} from 'vue';
 import SideModal from './SideModal.vue';
 import {useModal} from '@/composables/useModal.js';
 import SideModalBody from './SideModalBody.vue';
@@ -171,11 +171,29 @@ const SideModalWithForm = {
 	setup() {
 		const form = ref({
 			...cloneDeep(FormMock),
+			pages: [
+				{
+					id: 'default',
+					submitButton: {
+						label: 'Submit',
+						isPrimary: true,
+					},
+					cancelButton: {
+						label: 'Cancel',
+					},
+				},
+			],
 			action: 'https://httpbin.org',
 			method: 'GET',
 		});
 
-		return {form};
+		const closeModal = inject('closeModal');
+
+		function closeSideModal() {
+			closeModal();
+		}
+
+		return {form, closeSideModal};
 	},
 	template: `
 		<SideModalBody>
@@ -187,7 +205,7 @@ const SideModalWithForm = {
 			</template>
 			<div class="p-4">
 				<div class="bg-secondary">
-					<PkpForm v-bind="form" @set="setForm" @success="formSuccess" />
+					<PkpForm v-bind="form" @set="setForm" @success="formSuccess" @cancel="closeSideModal" />
 				</div> 
 			</div>
 		</SideModalBody>