AppSideNav - component main branch (HDS-3800)

[KristinLBradley]

STATUS:

• Component code is Need Eng review & approval
• Working on web docs in separate branch ready for review
• Old SideNav component deprecation in separate branch ready for review

🔷 NOTE: Branch will NOT be merged immediately after approval. It will be kept open & branched off of for follow on tasks. This will make it easier to review changes which different from original SideNav code that this branch is based on.

---

📌 Summary

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

Previews:

• AppSideNav Showcase
• Framed example used in context

Related branches:

• AddSideNav Documentation: AppSideNav - web docs sub-branch (HDS-3807) #2410
• SideNav Deprecation: SideNav - Deprecate component sub-branch (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.
  • :header and :footer named blocks were removed (KB: undid this change)
• 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 main branch (HDS-3800) #2384 (comment)
• Improve ariaLabel defaults for AppSideNav toggle button state (open/closed) (& use aria-expanded as mentioned in link)
  AppSideNav - component main branch (HDS-3800) #2384 (comment)
• Look to improve app-side-nav-test.js so it doesn't disable the whole page
  AppSideNav - component main branch (HDS-3800) #2384 (comment)
  AppSideNav - component main branch (HDS-3800) #2384 (comment)
• Revamp color tokens to simplify/clarify or perhaps just remove them.
• Consider removing named blocks for :header, :footer, :root, & :body
• For hds-app-side-nav__list look to add title to the list as the value for an aria-labelledby attribute AppSideNav - component main branch (HDS-3800) #2384 (comment)
• Bug: users can still scroll when zoomed in with AppSideNav open and overlaying main content (mobile view) AppSideNav - component main branch (HDS-3800) #2384 (comment)

🔗 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 26, 2024 6:43pm
hds-website	✅ Ready (Inspect)	Visit Preview	Sep 26, 2024 6:43pm