Skip to content

ETT-324: update account dropdown UI #120

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jul 7, 2025
Merged

ETT-324: update account dropdown UI #120

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
15bfb25
update role toggle markup and styles
carylwyatt Jun 20, 2025
7b80343
add stories for new UI
carylwyatt Jun 24, 2025
c5f06b1
update styles and stories
carylwyatt Jun 30, 2025
ebea7a3
fix focus style in dropdown
carylwyatt Jul 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
125 changes: 107 additions & 18 deletions src/js/components/Navbar/Navbar.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand All @@ -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 },
Copy link
Member Author

@carylwyatt carylwyatt Jun 30, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

...and here is where the props for the role/status are passed in to PingCallbackDecorator for this story (and the other stories that have a role, whether activated or not).

}),
],
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: {
Expand Down Expand Up @@ -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);
},
};
Expand All @@ -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);
Expand All @@ -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: {
Expand Down Expand Up @@ -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);
},
};
Loading
Loading