AppSideNav - component (HDS-3800)

[KristinLBradley]

STATUS:

• Component code is ready for review
• Working on web docs in separate branch (not yet ready for review)
• Old SideNav component deprecated in a separate branch ready for review

---

📌 Summary

If merged, this PR will add the AppSideNav component to HDS.

Previews:

• AppSideNav Showcase
• Framed example used in context

Related branches:

• AddSideNav Documentation: [DRAFT] AppSideNav - web docs (HDS-3807) #2410
• SideNav Deprecation: SideNav - Deprecate component (HDS-3848) #2425

🛠️ Detailed description

The majority of code was duplicated from the SideNav and then updated to implement the new AppSideNav component.

Major differences of note:

• The AppSideNav has an updated visual design using lighter colors than the SideNav
  • Dark theme styles are no longer added to nested Button & Dropdown components
• The AppSideNav :header named block was simplified to act as a basic yielded container
  • The :logo & :actions child named blocks were removed
  • The Header and Header::HomeLink child components were removed.
• The Navigator Narrator (skip link) was removed as the AppSideNav is meant to always be paired with the AppHeader which already includes this

AppSideNav Follow-ons (recommended):

• Change div for list "title" to an html header tag such as h3
  AppSideNav - component (HDS-3800) #2384 (comment)
• Improve ariaLabel defaults for AppSideNav toggle button state (open/closed)
  AppSideNav - component (HDS-3800) #2384 (comment)
• Look to improve app-side-nav-test.js so it doesn't disable the whole page
  AppSideNav - component (HDS-3800) #2384 (comment)
• Audit usage of :header & :footer and look at removing them from the AppSideNav
  AppSideNav - component (HDS-3800) #2384 (comment)
• Revamp color tokens to simplify/clarify or perhaps just remove them.

🔗 External links

• Jira ticket: HDS-3800
• Figma file

---

👀 Component checklist

• Percy was checked for any visual regression
• A changelog entry was added via Changesets if needed (see templates here)

💬 Please consider using conventional comments when reviewing this PR.

[vercel]

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

Name	Status	Preview	Updated (UTC)
hds-showcase	✅ Ready (Inspect)	Visit Preview	Sep 20, 2024 9:26pm
hds-website	✅ Ready (Inspect)	Visit Preview	Sep 20, 2024 9:26pm

[KristinLBradley]

@alex-ju I pushed up fixes for issues. For some items I would like to look at them as a follow on if that's ok. (Listed below.)

AppSideNav Follow-ons:

• Change div for list "title" to an html header tag such as h3
  AppSideNav - component (HDS-3800) #2384 (comment)
• Improve ariaLabel defaults for AppSideNav toggle button state (open/closed)
  AppSideNav - component (HDS-3800) #2384 (comment)
• Look to improve app-side-nav-test.js so it doesn't disable the whole page
  AppSideNav - component (HDS-3800) #2384 (comment)
• Audit usage of :header & :footer and look at removing them from the AppSideNav
  AppSideNav - component (HDS-3800) #2384 (comment)

[KristinLBradley]

There's a test failing I will investigate...

Looks like just a timeout error. restarted test.

[jorytindall]

I think this is good to go, short of one note about the list item color that should probably be a quick fix. Let me know what you think or any other questions!

KB: Updated the color, thanks for reviewing!