diff --git a/src/js/components/Navbar/Navbar.stories.js b/src/js/components/Navbar/Navbar.stories.js
index 9b9493e..3f2ea73 100644
--- a/src/js/components/Navbar/Navbar.stories.js
+++ b/src/js/components/Navbar/Navbar.stories.js
@@ -43,25 +43,13 @@ export const DesktopLoginModalOpen = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- const loginButton = await canvas.getByTestId('login-button');
+ const loginButton = canvas.getByTestId('login-button');
// const loginButton = await canvas.getByRole('button', { name: /log in/i });
// const loginButton = await canvas.locator('#navbarNavDropdown:has-text"Log In"');
await userEvent.click(loginButton);
},
};
-// export const DesktopShortViewportModal = {
-// parameters: {
-// viewport: {
-// defaultViewport: 'shortDesktop'
-// }
-// },
-// play: async ({ canvasElement }) => {
-// const canvas = within(canvasElement);
-// const loginButton = await canvas.getByRole('button', {name: /log in/i});
-// await userEvent.click(loginButton);
-// },
-// }
export const DesktopLoggedIn = {
parameters: { ...Default.parameters },
args: {
@@ -75,6 +63,41 @@ export const DesktopLoggedIn = {
}),
],
};
+export const DesktopLoggedInResourceSharingRole = {
+ parameters: { ...Default.parameters },
+ args: {
+ loggedIn: true,
+ },
+ decorators: [
+ () => ({
+ Component: PingCallbackDecorator,
+ props: { loggedIn: true, role: 'resourceSharing', hasActivatedRole: false },
+ }),
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const accountButton = canvas.getByLabelText('My account');
+ await userEvent.click(accountButton);
+ },
+};
+export const DesktopLoggedInResourceSharingRoleActivated = {
+ parameters: { ...Default.parameters },
+ args: {
+ loggedIn: true,
+ hasActivatedRole: true,
+ },
+ decorators: [
+ () => ({
+ Component: PingCallbackDecorator,
+ props: { loggedIn: true, role: 'resourceSharing', hasActivatedRole: true },
+ }),
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const accountButton = canvas.getByLabelText('My account');
+ await userEvent.click(accountButton);
+ },
+};
export const DesktopLoggedInWithNotifications = {
parameters: { ...Default.parameters },
args: {
@@ -109,7 +132,7 @@ export const MobileOpenMenu = {
parameters: { ...Mobile.parameters },
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- const mobileMenuButton = await canvas.getByLabelText('Toggle navigation');
+ const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
await userEvent.click(mobileMenuButton);
},
};
@@ -118,8 +141,8 @@ export const MobileDropdownMenuSelected = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- const mobileMenuButton = await canvas.getByLabelText('Toggle navigation');
- const mainMenu = await canvas.getByText(/member libraries/i);
+ const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
+ const mainMenu = canvas.getByText(/member libraries/i);
await userEvent.click(mobileMenuButton);
await userEvent.click(mainMenu);
@@ -137,6 +160,45 @@ export const MobileLoggedIn = {
}),
],
};
+export const MobileLoggedInResourceSharingRole = {
+ parameters: { ...Mobile.parameters },
+ args: {
+ loggedIn: true,
+ },
+ decorators: [
+ () => ({
+ Component: PingCallbackDecorator,
+ props: { loggedIn: true, role: 'resourceSharing', hasActivatedRole: false },
+ }),
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
+ const accountButton = canvas.getByLabelText('My account');
+ await userEvent.click(mobileMenuButton);
+ await userEvent.click(accountButton);
+ },
+};
+export const MobileLoggedInResourceSharingRoleActivated = {
+ parameters: { ...Mobile.parameters },
+ args: {
+ loggedIn: true,
+ hasActivatedRole: true,
+ },
+ decorators: [
+ () => ({
+ Component: PingCallbackDecorator,
+ props: { loggedIn: true, role: 'resourceSharing', hasActivatedRole: true },
+ }),
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
+ const accountButton = canvas.getByLabelText('My account' );
+ await userEvent.click(mobileMenuButton);
+ await userEvent.click(accountButton);
+ },
+};
export const MobileLoggedInWithNotifications = {
parameters: { ...Mobile.parameters },
args: {
@@ -174,10 +236,37 @@ export const MobileLoggedInMyAccountDropdown = {
play: async ({ canvasElement }) => {
const canvas = within(canvasElement);
- const mobileMenuButton = await canvas.getByLabelText('Toggle navigation');
- const myAccount = await canvas.getByText(/my account/i);
+ const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
+ const myAccount = canvas.getByLabelText('My account');
await userEvent.click(mobileMenuButton);
await userEvent.click(myAccount);
},
};
+export const MobileLoggedInResourceSharingRoleActivatedHasNotification = {
+ parameters: { ...Mobile.parameters },
+ args: {
+ loggedIn: true,
+ hasActivatedRole: true,
+ },
+ decorators: [
+ () => ({
+ Component: PingCallbackDecorator,
+ props: { loggedIn: true, role: 'resourceSharing', hasActivatedRole: true, notificationData: [
+ {
+ title: 'A navbar story',
+ message: 'Once upon a time there was a user with notifications',
+ read_more_label: 'Do you want to know more?',
+ read_more_link: 'https://umich.edu',
+ },
+ ], },
+ }),
+ ],
+ play: async ({ canvasElement }) => {
+ const canvas = within(canvasElement);
+ const mobileMenuButton = canvas.getByLabelText('Toggle navigation');
+ const accountButton = canvas.getByLabelText('My account' );
+ await userEvent.click(mobileMenuButton);
+ await userEvent.click(accountButton);
+ },
+};
diff --git a/src/js/components/Navbar/index.svelte b/src/js/components/Navbar/index.svelte
index c0784d3..c0fc77e 100644
--- a/src/js/components/Navbar/index.svelte
+++ b/src/js/components/Navbar/index.svelte
@@ -26,10 +26,10 @@
export let compact = false;
export let userNavigation = true;
- const switchableRoles = ['enhancedTextProxy', 'totalAccess','resourceSharing'];
+ const switchableRoles = ['enhancedTextProxy', 'totalAccess', 'resourceSharing'];
const switchableRolesLabels = {};
- switchableRolesLabels['enhancedTextProxy'] = 'ATRS';
- switchableRolesLabels['totalAccess'] = 'CAA';
+ switchableRolesLabels['enhancedTextProxy'] = 'Accessible Text Request Service';
+ switchableRolesLabels['totalAccess'] = 'Collection Administrative Access';
switchableRolesLabels['resourceSharing'] = 'Resource Sharing';
function toggleSearch() {
@@ -328,37 +328,38 @@
data-bs-toggle="dropdown"
>Get Help
-