From 9861f8263fc8a496c2420cf13df42b09267ad657 Mon Sep 17 00:00:00 2001 From: Blesilda Ramirez Date: Wed, 7 Aug 2024 20:42:18 +0800 Subject: [PATCH] test --- src/components/Modal/SideModal.stories.js | 278 +++++++++++++++++ .../Modal/SideModalLayout2Columns.vue | 2 +- src/components/Navigation/Navigation.vue | 2 + .../Navigation2/Navigation2.stories.js | 203 ++++++++++++ src/components/Navigation2/Navigation2.vue | 245 +++++++++++++++ .../Navigation3/Navigation3.stories.js | 203 ++++++++++++ src/components/Navigation3/Navigation3.vue | 291 ++++++++++++++++++ 7 files changed, 1223 insertions(+), 1 deletion(-) create mode 100644 src/components/Navigation2/Navigation2.stories.js create mode 100644 src/components/Navigation2/Navigation2.vue create mode 100644 src/components/Navigation3/Navigation3.stories.js create mode 100644 src/components/Navigation3/Navigation3.vue diff --git a/src/components/Modal/SideModal.stories.js b/src/components/Modal/SideModal.stories.js index b5ac1bcda..1f6d0646f 100644 --- a/src/components/Modal/SideModal.stories.js +++ b/src/components/Modal/SideModal.stories.js @@ -2,6 +2,7 @@ import {within, userEvent} from '@storybook/test'; import {ref, inject} from 'vue'; import SideModal from './SideModal.vue'; import {useModal} from '@/composables/useModal.js'; +import Navigation2 from '../Navigation2/Navigation2.vue'; import SideModalBody from './SideModalBody.vue'; import SideModalLayoutBasic from './SideModalLayoutBasic.vue'; import SideModalLayout2Columns from './SideModalLayout2Columns.vue'; @@ -405,3 +406,280 @@ export const NestedModal = { await user.click(await canvas.findByText('Open Second Modal')); }, }; + +const SideModalWithNavigation = { + components: {SideModal, SideModalBody, SideModalLayout2Columns, Navigation2}, + setup() { + const metadata = [ + {name: 'Type', value: 'Article'}, + { + name: 'Abstract', + value: + 'Nam id quam mollis, porta dui vel, accumsan sem. Sed commodo felis tristique justo pulvinar lacinia. Etiam pulvinar tortor et dui malesuada fringilla. Nullam leo risus, luctus ut sem ut, dignissim luctus quam. Nulla vel varius urna. Cras eget odio tellus. Proin eu nisi vehicula nulla laculis lobortis.', + }, + ]; + const generalInformation = [ + {name: 'Editors request', value: 'dd-mm-yyyy'}, + { + name: 'Response due date', + value: 'dd-mm-yyy', + }, + ]; + const links = { + admin: { + name: 'Dashboards', + url: '#', + isCurrent: true, + icon: 'Dashboard', + }, + review: { + name: 'My Review Assignments', + url: '#', + isCurrent: false, + icon: 'ReviewAssignments', + }, + submissions: { + name: 'My Submissions as Author', + url: '#', + isCurrent: false, + icon: 'MySubmissions', + }, + notifications: { + name: 'Notifications (10)', + url: '#', + isCurrent: false, + icon: 'Notifications', + }, + issues: { + name: 'Issues', + url: '#', + isCurrent: false, + icon: 'Issues', + }, + announcements: { + name: 'Announcements', + url: '#', + isCurrent: false, + icon: 'Announcements', + }, + dois: { + name: 'DOIs', + url: '#', + isCurrent: false, + icon: 'NavDoi', + }, + institutes: { + name: 'Institutes', + url: '#', + isCurrent: false, + icon: 'Institutes', + }, + settings: { + name: 'Settings', + icon: 'Settings', + url: '#', + submenu: { + context: { + name: 'Journal', + url: '#', + isCurrent: false, + icon: '', + }, + website: { + name: 'Website', + url: '#', + isCurrent: false, + icon: '', + submenu: { + item1: { + name: 'Item 1', + url: '#', + isCurrent: false, + icon: '', + }, + item2: { + name: 'Item 2', + url: '#', + isCurrent: false, + icon: '', + submenu: { + item1: { + name: 'Item 2.1', + url: '#', + isCurrent: false, + icon: '', + }, + item2: { + name: 'Item 2.2', + url: '#', + isCurrent: false, + icon: '', + }, + item3: { + name: 'Item 2.3', + url: '#', + isCurrent: false, + icon: '', + }, + }, + }, + item3: { + name: 'Item 2', + url: '#', + isCurrent: false, + icon: '', + }, + }, + }, + workflow: { + name: 'Workflow', + url: '#', + isCurrent: false, + icon: '', + }, + distribution: { + name: 'Distribution', + url: '#', + isCurrent: false, + icon: '', + }, + access: { + name: 'Users & Roles', + url: '#', + isCurrent: false, + icon: '', + }, + }, + }, + statistics: { + name: 'Statistics', + icon: 'Statistics', + url: '#', + submenu: { + publications: { + name: 'Articles', + url: '#', + isCurrent: false, + icon: '', + }, + issues: { + name: 'Issues', + url: '#', + isCurrent: false, + icon: '', + }, + context: { + name: 'Journal', + url: '#', + isCurrent: false, + icon: '', + }, + editorial: { + name: 'Editorial Activity', + url: '#', + isCurrent: false, + icon: '', + }, + users: { + name: 'Users', + url: '#', + isCurrent: false, + icon: '', + }, + reports: { + name: 'Reports', + url: '#', + isCurrent: false, + icon: '', + }, + }, + }, + tools: { + name: 'Tools', + url: '#', + isCurrent: false, + icon: 'Tools', + }, + help: { + name: 'Help', + url: '#', + isCurrent: false, + icon: 'Help', + }, + }; + return {metadata, generalInformation, links}; + }, + template: ` + + + + + + + + + + + + + + `, +}; + +export const WithNavigation = { + render: (args) => ({ + components: {SideModalWithNavigation}, + setup() { + const {openSideModal} = useModal(); + + function openModal() { + openSideModal(SideModalWithNavigation); + } + + return {openModal}; + }, + template: ` + + Open Modal + + `, + }), + decorators: [ + () => ({ + template: '
', + }), + ], + args: {}, + play: async ({canvasElement}) => { + // Assigns canvas to the component root element + const canvas = within(canvasElement); + const user = userEvent.setup(); + + await user.click(canvas.getByText('Open Modal')); + }, +}; diff --git a/src/components/Modal/SideModalLayout2Columns.vue b/src/components/Modal/SideModalLayout2Columns.vue index 26cfb6a8f..e5b5e37fb 100644 --- a/src/components/Modal/SideModalLayout2Columns.vue +++ b/src/components/Modal/SideModalLayout2Columns.vue @@ -1,5 +1,5 @@