DSD-1852: SubNav Menu Component #1697

gonuguntla · 2024-11-05T15:26:48Z

Fixes JIRA ticket (https://newyorkpubliclibrary.atlassian.net/browse/DSD-1852)

This PR does the following:

Implemented subnav

How has this been tested?

local Storybook

Accessibility concerns or updates

Accessibility Checklist

Checked Storybook's "Accessibility" tab for color contrast and other issues.
The feature works with keyboard inputs including tabbing back and forward and pressing space, enter, arrow, and esc keys.
For hidden text or when aria-live is used, a screenreader was used to verify the text is read.
For features that involve UI updates and focusing on DOM refs, focus management was reviewed.
The feature works when the page is zoomed in to 200% and 400%.

Open Questions

Checklist:

I have updated the Storybook documentation and changelog accordingly.
I have added relevant accessibility documentation for this pull request.
All new and existing tests passed.

Front End Review:

Review the Vercel preview deployment once it is ready.

into DSD-1852/sub-nav-menu

vercel · 2024-11-05T15:26:52Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
nypl-design-system	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 25, 2024 5:27pm

…design-system into DSD-1852/sub-nav-menu

EdwinGuzman

This looks good to me, thanks for working on this and making all the updates.

7emansell

Quick question about the colors but otherwise looks and works great! Is there already a place where we're planning to use this?

7emansell · 2024-11-21T19:20:29Z

src/components/SubNav/SubNav.tsx

+import List from "../List/List";
+import useScrollFadeStyles from "../../hooks/useScrollFadeStyles";
+
+export const actionBackgroundColorsArray = [


Both arrays of colors are already declared in Banner– could they live in one place now that two components are using them?

@7emansell Yes, that is the eventual goal, but for now, we are continuing to use unique data objects in the separate components.

bigfishdesign13

Just one minor addition to the story for the hook, but otherwise, it looks good.

bigfishdesign13 · 2024-11-22T15:52:44Z

src/hooks/useScrollFadeStyles.mdx

+      inline
+      noStyling
+    >
+      <>


This can be removed.

bigfishdesign13 · 2024-11-22T15:52:56Z

src/hooks/useScrollFadeStyles.mdx

+            Link
+          </SubNavLink>
+        </li>
+      </>


This can be removed.

bigfishdesign13 · 2024-11-22T17:22:15Z

src/hooks/useScrollFadeStyles.mdx

+        </li>
+      </>
+    </List>
+    {showRightFade && <Box sx={styles.fadeEffect} />}


@deepikagonuguntla Can you also include a code example showing the styles?

oliviawongnyc · 2024-11-22T22:22:27Z

Screen.Recording.2024-11-22.at.1.58.46.PM.mov

Just wondering - is the height of the component meant to grow as the screen shrinks? @deepikagonuguntla

bigfishdesign13 · 2024-11-22T22:30:34Z

Screen.Recording.2024-11-22.at.1.58.46.PM.mov
Just wondering - is the height of the component meant to grow as the screen shrinks? @deepikagonuguntla

@oliviawongnyc Yes. There are two things happening when it hits the mobile viewport. First, the overall padding within the component jumps from 8px to 16px. Second, the buttons increase in height from 32px to 44px for mobile a11y compliance.

oliviawongnyc · 2024-11-22T22:35:40Z

Screen.Recording.2024-11-22.at.1.58.46.PM.mov
Just wondering - is the height of the component meant to grow as the screen shrinks? @deepikagonuguntla

@oliviawongnyc Yes. There are two things happening when it hits the mobile viewport. First, the overall padding within the component jumps from 8px to 16px. Second, the buttons increase in height from 32px to 44px for mobile a11y compliance.

I see, thanks, Marty!

…design-system into DSD-1852/sub-nav-menu

bigfishdesign13

Looks good!

deepikagonuguntla added 13 commits October 30, 2024 22:46

SubNav functionality in progress

7a350f2

Added code comments

560c938

implemented subnav

e37e579

implemented subnav functionality

c410eb0

added Icon styles

e27fb4e

added Icon styles

67adba4

added button styles

7f4ae08

added highlight color

4d4633d

Added href in subnav Link

9ff0dc8

Added href in subnav Link

5e0750d

Added common styles for priamry and secondary

c114cf0

Added common styles for priamry and secondary

75ed80d

Merge branch 'development' of https://github.com/NYPL/nypl-design-system

3967ff9

into DSD-1852/sub-nav-menu

vercel bot deployed to Preview November 5, 2024 15:30 View deployment

Added common styles for priamry and secondary

1aec077

vercel bot deployed to Preview November 5, 2024 16:01 View deployment

Added accessibility links

1baa384

vercel bot deployed to Preview November 5, 2024 17:39 View deployment

deepikagonuguntla added 2 commits November 5, 2024 15:16

added test cases

f3e7e47

added test cases

b0fcff4

gonuguntla changed the title ~~SubNav Menu Component~~ DSD-1852 SubNav Menu Component Nov 5, 2024

gonuguntla changed the title ~~DSD-1852 SubNav Menu Component~~ DSD-1852: SubNav Menu Component Nov 5, 2024

Merge branch 'development' into DSD-1852/sub-nav-menu

95d9ec1

vercel bot deployed to Preview November 5, 2024 20:23 View deployment

deepikagonuguntla added 2 commits November 5, 2024 17:45

implemented test cases

c5c4e27

Merge branch 'DSD-1852/sub-nav-menu' of https://github.com/NYPL/nypl-…

f42e3e2

…design-system into DSD-1852/sub-nav-menu

vercel bot deployed to Preview November 5, 2024 22:50 View deployment

deepikagonuguntla added 2 commits November 5, 2024 18:24

added changelog

08dc08e

added changelog

7068b34

added example

d25a333

vercel bot deployed to Preview November 19, 2024 14:59 View deployment

EdwinGuzman approved these changes Nov 19, 2024

View reviewed changes

removing important from light mode styles

4399db5

vercel bot deployed to Preview November 19, 2024 18:40 View deployment

one final style adjustment for secondaryActions

7c003c9

vercel bot deployed to Preview November 19, 2024 19:52 View deployment

fixed a11y violation in 'placement' story

fe48ca5

vercel bot deployed to Preview November 19, 2024 19:58 View deployment

EdwinGuzman requested review from jackiequach and 7emansell November 21, 2024 17:33

7emansell approved these changes Nov 21, 2024

View reviewed changes

bigfishdesign13 requested changes Nov 22, 2024

View reviewed changes

bigfishdesign13 added Changes Requested Pull requests where changes have been requested in peer review. and removed Needs Review Pull requests that are ready for peer review. labels Nov 22, 2024

deepikagonuguntla added 2 commits November 25, 2024 09:26

Added styles

a32764c

Merge branch 'DSD-1852/sub-nav-menu' of https://github.com/NYPL/nypl-…

66db791

…design-system into DSD-1852/sub-nav-menu

vercel bot deployed to Preview November 25, 2024 14:30 View deployment

added faceeffect styles in hook

a4404d2

vercel bot deployed to Preview November 25, 2024 15:17 View deployment

bigfishdesign13 approved these changes Nov 25, 2024

View reviewed changes

bigfishdesign13 added Ship It Pull requests that have been reviewed and approved. and removed Changes Requested Pull requests where changes have been requested in peer review. labels Nov 25, 2024

merge from development branch

4f4e54c

vercel bot deployed to Preview November 25, 2024 17:27 View deployment

bigfishdesign13 merged commit 5043b6a into development Nov 25, 2024
5 checks passed

bigfishdesign13 deleted the DSD-1852/sub-nav-menu branch November 25, 2024 17:41

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

DSD-1852: SubNav Menu Component #1697

DSD-1852: SubNav Menu Component #1697

gonuguntla commented Nov 5, 2024 •

edited

Loading

vercel bot commented Nov 5, 2024 •

edited

Loading

EdwinGuzman left a comment

7emansell left a comment

7emansell Nov 21, 2024

bigfishdesign13 Nov 21, 2024

bigfishdesign13 left a comment

bigfishdesign13 Nov 22, 2024

bigfishdesign13 Nov 22, 2024

bigfishdesign13 Nov 22, 2024

gonuguntla Nov 22, 2024

oliviawongnyc commented Nov 22, 2024

bigfishdesign13 commented Nov 22, 2024

oliviawongnyc commented Nov 22, 2024

bigfishdesign13 left a comment

DSD-1852: SubNav Menu Component #1697

DSD-1852: SubNav Menu Component #1697

Conversation

gonuguntla commented Nov 5, 2024 • edited Loading

This PR does the following:

How has this been tested?

Accessibility concerns or updates

Accessibility Checklist

Open Questions

Checklist:

Front End Review:

vercel bot commented Nov 5, 2024 • edited Loading

EdwinGuzman left a comment

Choose a reason for hiding this comment

7emansell left a comment

Choose a reason for hiding this comment

7emansell Nov 21, 2024

Choose a reason for hiding this comment

bigfishdesign13 Nov 21, 2024

Choose a reason for hiding this comment

bigfishdesign13 left a comment

Choose a reason for hiding this comment

bigfishdesign13 Nov 22, 2024

Choose a reason for hiding this comment

bigfishdesign13 Nov 22, 2024

Choose a reason for hiding this comment

bigfishdesign13 Nov 22, 2024

Choose a reason for hiding this comment

gonuguntla Nov 22, 2024

Choose a reason for hiding this comment

oliviawongnyc commented Nov 22, 2024

bigfishdesign13 commented Nov 22, 2024

oliviawongnyc commented Nov 22, 2024

bigfishdesign13 left a comment

Choose a reason for hiding this comment

gonuguntla commented Nov 5, 2024 •

edited

Loading

vercel bot commented Nov 5, 2024 •

edited

Loading