GH-101: Navigation Bar (Sans Search & Portal Nav Button)

[wesleyboar]

Overview

Redesign the nav dropdowns and the CMS nav.

The search bar and portal nav button have not been redesigned yet. Their final design might change.

Issues

• Header Redesign → FP-1458 #101
  • Nav Menu Open Toggle Diff Size on CMS and Portal → FP-1459 #55
  • Resize "Brand Bar" and "Nav Bar" #29
  • Do Not Support CMS Menu Dropdown Nav Link #129

Changes

Summary:

• Support custom selectors.
• For variable freezing, support custom environment variables.
• Install merge-lite.
• Add arrow mixin to CSS.
• Document the kinds of "Trumps" that are in our CSS.
• Add stylesheet trumps/for-docs.header.css.
• Rewrite trumps/s-header.css.
• Add Theme "constants".
• Fix docs header colors by loading colors in site.header.css.

Bug Fixes:

• Nav Menu Open Toggle Diff Size on CMS and Portal → FP-1459 #55
• Resize "Brand Bar" and "Nav Bar" #29
• Do Not Support CMS Menu Dropdown Nav Link #129

Complete List

• New: Support custom selectors.
  • So we can scope selectors to subsite, and change in one place how we scope.
• New: For variable freezing, support custom environment variables.
  • Because site.tacc-search-bar.css uses border.css which now uses env().¹
• New: Install merge-lite to support deep merge of objects.
  • So we can extend themes with constants.
  • Because ES6/ES7 does not support deep merge and lodash is more than we need.
• Minor: Add test case for custom environment variables.
• Minor: Move header-specific branding styles from branding component to header scope.
• Minor: Use fallback values for custom properties.
• Minor: Control logo image width and height within component styles._
• Minor: Add comment about work involved for conversion of font size to 62.5%._
• Minor: Deprecate "global variables" for font weight in favor of custom environment variables._
• New: Add arrow mixin.
  • So we can create customizable arrows with CSS.
• Docs: Describe the kinds of "Trumps" that are in our CSS.
  • Because I never documented "Scopes" and have now added "For (Other Sites)"
• New: Add stylesheet trumps/for-docs.header.css.
  • So we can add styles to manage Docs-specific side effects of header.
• New: Rewrite trumps/s-header.css.
  • Because this is where the bulk of the header styles are.
• Minor Remove s-header ID (because s-header class will be used twice).
• Minor: Remove now-useless code from trumps/s-portal-nav.css.
• New: Add Theme "constants".
  • So we can share immutable values across themes.
• Minor: Add new theme property --header-link-bkgd-color.
• Fix: Load colors in site.header.css.
  • So Docs has access to the color variables used in header.
• Fix: Do not support CMS menu nav link + dropdown (Do Not Support CMS Menu Dropdown Nav Link #129).
  • Because supporting it retains complexity in markup and styles.
• Minor: Improve responsiveness of mobile nav (because now-smaller nav text allows this).
• Minor: Update taccsite_custom:frontera-cms based on these Core changes.

¹ I expect to completely replace freeze_variables feature with env() in whichever GH-101 PR updates the search bar.

Testing

Simple UI Testing

Light/Dark Navbar

Prerequisite: CMS menu has dropdowns (by having nested links set to display in menu).

1. Build CSS with CMS setting/secret _THEME set to None.
2. Confirm dropdown styles match CMS-Common Components > Navigation Light-mode.
3. Build CSS with CMS setting/secret _THEME set to 'has-dark-logo'.
4. Confirm dropdown styles match CMS-Common Components > Navigation Dark-mode.

Responsiveness

Prerequisite: These steps assume you are testing on a CMS with an attached Portal. Without a Portal, see "Detailed UI Testing" at "Responsiveness".

Known Issue: For Portal and Docs, responsiveness will not have changed unless testing on their branch task/GH-101-header-redesign.

While resizing width of window:

• Search field may shrink (but it must always have a border all the way around).
• Space between CMS Nav items may grow or shrink.
• Space between Nav Bar and edge of screen must not shrink.
• Given Frontera nav link count and text:
  • CMS Nav items must not wrap.
  • CMS Nav items text must not be cut off.
  • CMS Nav items text may be truncated with an ellipses.
• Logo must not shrink.
• Portal nav link (not logged in) must not shrink.
• Portal menu toggle (logged in) must not shrink.
• Search button should not shrink, furthermore:
  • Search button text must not wrap.
  • Search button text should not be cut off.
  • Search button text may be truncated with an ellipses.

Detailed UI Testing

Hide/Show Sections

Responsiveness

CMS (with Portal)

Known Issue:
For Portal and Docs, these steps will differ on Portal/Docs without their branch task/GH-101-header-redesign.

Expected Difference

1. Load site with page wider than 1200px.
2. Resize page to narrower than 1200px.
3. Confirm mobile nav is triggered.

1. Load site with page wider than 1200px.
2. Note distance between CMS nav links.
3. Resize page to narrower than 1200px.
4. Confirm distance between CMS nav links is shorter.
5. Resize page to narrower than 992px.
6. Confirm mobile nav is triggered.

CMS (stand-alone)

1. Load site with page wider than 992px.
2. Note distance between CMS nav links.
3. Resize page to narrower than 992px.
4. Confirm distance between CMS nav links is shorter.
5. Resize page to narrower than 768px.
6. Confirm mobile nav is triggered.

Logo & CMS Nav Alignment

CMS (with Portal)

• The CMS Nav is aligned to the left.
• The Nav Bar's left and right padding is equal. When comparing, be aware:
  • Portal Nav link has internal padding that is not part of Nav Bar's right padding.
  • Logo image may have internal space that is not part of Nav Bar's left padding.
  • Portal Nav link design is not complete in this PR.
• The Logo image's left side is aligned with Portal sidebar text's left side.
• The CMS Nav first link text's left side is aligned with Portal section header text's left side.

CMS (stand-alone)

• The CMS Nav is aligned to the right.
• The Nav Bar's left and right padding is equal. When comparing, be aware:
  • CMS Nav link has internal padding that is not part of Nav Bar's right padding.
  • Logo image may have internal space that is not part of Nav Bar's left padding.
• The Logo image's left side is aligned with Portal sidebar text's left side.
• The CMS Nav first link text's left side is aligned with Portal section header text's left side.

Light/Dark Navbar

Perform "Simple UI Testing" at "Light/Dark Navbar", but review items on the checklist for each theme.

Checklist

• navbar height
• logo dimension & spacing:
  • logo height
  • vertical space between logo and top and bottom of navbar¹
• top-level nav link states:
  • (default)
  • :hover
  • :focus
  • .active (on page)²
  • :active (mid-click)²
• dropdown menu border
• dropdown menu toggle states:
  • menu closed
  • menu opened
• dropdown menu link states:
  • (default)
  • :hover
  • :focus
  • .active (on page)²
  • :active (mid-click)²
• portal nav
  • link when not logged in
  • menu toggle when logged in

¹ The logo image may have its own internal space (annotated screenshot, example logo file).

² Not explicit in design, but should match :hover state.