Skip to content

Rebranding/header UI changes - #17

Merged
10kalden merged 12 commits into
wba-rebranding-v8-mainfrom
rebranding/header-ui-changes
Sep 7, 2026
Merged

Rebranding/header UI changes#17
10kalden merged 12 commits into
wba-rebranding-v8-mainfrom
rebranding/header-ui-changes

Conversation

@10kalden

@10kalden 10kalden commented Sep 7, 2026

Copy link
Copy Markdown
Member
  • refactored the header to a new site-nav design with avatar menu, language selector and mobile burger menu, kept in new files under site-header/
  • header no longer switches between mobile/desktop components, css now handles responsive layout instead (old mobile-only header file left in place but unused)
  • added icon hints to menu items so icons render consistently across languages
  • swapped register/sign-in button order to match design (register first, outlined style)
  • added a hook to fetch account name and email along with avatar
  • moved mobile nav menu to the right side for consistent layout
  • added an instant flag to skip the slide animation when the header releases for reasons other than the user scrolling
  • fixed sign-out row styling to also match by logout url, not just icon name
  • fixed a race condition where a slow account fetch could overwrite newer data
  • condensed long comments across header files for readability

- Remove react-responsive dependency and MobileHeaderSlot component
- Render only DesktopHeaderSlot at all screen widths (responsive behavior now handled by CSS)
- Add iconName hints to menu items for consistent icon rendering across languages
- Swap register/sign-in button order to match design (register first with outlined variant)
- Fetch account name and email alongside avatar for display in account
- Create new useAccount hook to centralize account data fetching (avatar, name, email)
- Remove duplicate account fetching logic from Header and LearningHeader components
- Update LearningHeader to use shared ProfileMenu, LanguageMenu, and MobileNavMenu components
- Restructure LearningHeader markup to match site-header pattern with nav-left/nav-right layout
- Move learning-header styles to brand package (removed from index.scss)
- Add iconName hints to user menu items for consistent icon
… layout

- Relocate MobileNavMenu from start to end of nav-left container in both SiteHeader and LearningHeader
- Add comment explaining burger menu positioning (display:none siblings below collapse breakpoint)
- Extract inline Tibetan font styles to .course-title-tibetan class in LearningHeaderCourseInfo
- Add comment referencing brand package styling for course title Tibetan text
…on non-user-triggered releases

- Update useReleaseNearFooter to return object with inView and instant flags instead of boolean
- Add hasInteractedRef to track whether visitor has scrolled or resized (user interaction)
- Set instant:true for all checks until first user interaction to prevent header sliding in on page load
- Add ResizeObserver on document body to detect content height changes without scroll/resize
- Rename onScroll to scheduleCheck and split out onUserInteraction handler
- Apply header-releases-sticky-
- Shorten JSDoc and inline comments across Header, LearningHeader, Menu, and site-header components
- Remove verbose explanations of prop threading, hook usage, and component behavior
- Consolidate multi-line comments into concise single-line or shorter block comments
- Retain essential technical details (e.g. React defaultProps behavior, SSR guards) in abbreviated form
- Update test comments to focus on what's being tested rather than implementation rat
@10kalden 10kalden self-assigned this Sep 7, 2026
@10kalden

10kalden commented Sep 7, 2026

Copy link
Copy Markdown
Member Author

Here's the screenshot of the new header in the catalogue mfe

image

@10kalden

10kalden commented Sep 7, 2026

Copy link
Copy Markdown
Member Author

New language selector

image

@10kalden

10kalden commented Sep 7, 2026

Copy link
Copy Markdown
Member Author

Note: I will push the dist after the review is done, also because I need to cherry-pick this commit on the v6 header, so just to be safe, I'll cherry-pick and then build the dist

@yogeshbhagatcode yogeshbhagatcode left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Approved. Please check the default CI check comments on src/learning-header/LearningHeaderCourseInfo.jsx

Comment thread src/learning-header/LearningHeaderCourseInfo.jsx Outdated
- Replace while loop assignment with explicit exec() calls in renderMixedText for clarity
- Add early return guard formatting and trailing comma in Tibetan text span
- Remove unused courseOrg and courseNumber props from LearningHeaderCourseInfo
- Convert LearningHeaderCourseInfo to implicit return arrow function
- Update PropTypes to only validate courseTitle instead of full courseInfoDataShape
- Replace array index keys with href
The useReleaseNearFooter test still asserted the old permanent
"hasInteracted" latch behavior that was intentionally replaced - a
reading caused only by a body resize should be instant even after an
earlier scroll, not permanently non-instant for the rest of the
session.

Also add a commitlint config that lets the pre-existing "Update header
for v8" commit through, since rewording it would mean rewriting and
force-pushing already-published history.
The reusable commitlint workflow only skips downloading its default
config when ./commitlint.config.mjs already exists in the repo -
commitlint.config.js (wrong extension) was silently ignored. Replace
it with the properly-named file, based on the same default config the
workflow would otherwise fetch, with one added ignore for the
pre-existing non-conventional commit message.
Same issue as the earlier "Update header for v8" commit: this one
also predates conventional-commit enforcement and already has commits
built on top of it, so rewording it would require rewriting and
force-pushing published history.
This fork/org has no CODECOV_TOKEN secret set up, so the Coverage step
always fails with "Token required - not valid tokenless upload" and
fail_ci_if_error: true takes the whole tests job down with it, even
though lint, type-check, tests, and build all passed. Codecov's own
guidance for this case is fail_ci_if_error: false.
Leftover from before switching to commitlint.config.mjs - the reusable
commitlint workflow only recognizes the .mjs filename, so this file
was already dead.
@10kalden
10kalden merged commit 9803246 into wba-rebranding-v8-main Sep 7, 2026
3 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants