fix(navigation-secondary): add current page indicator to logo (#1339)

* fix(navigation-secondary): add current page indicator to demos, add css to enable, fix border css props * chore(navigation-secondary): add changeset * style(navigation-secondary): lint styles * fix(navigation-secondary): remove duplicate border-block-end for dark variant
RedHat-UX · Nov 14, 2023 · a1c587d · a1c587d
1 parent 7198739
commit a1c587d
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 28 deletions.
diff --git a/.changeset/six-dancers-repair.md b/.changeset/six-dancers-repair.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-navigation-secondary>`: adds current page indicator to logo slot
diff --git a/elements/rh-navigation-secondary/demo/analytics.html b/elements/rh-navigation-secondary/demo/analytics.html
@@ -1,5 +1,5 @@
 <rh-navigation-secondary role="navigation" data-analytics-region="secondary-navigation-Ansible">
-  <a href="#" slot="logo" id="logo-id">
+  <a href="#" slot="logo" id="logo-id" aria-current="page">
     Red Hat Ansible Automation Platform
   </a>
   <ul slot="nav" aria-labelledby="logo-id">

diff --git a/elements/rh-navigation-secondary/demo/current-page-indicator.html b/elements/rh-navigation-secondary/demo/current-page-indicator.html
@@ -1,5 +1,5 @@
 <rh-navigation-secondary role="navigation">
-  <a href="#" slot="logo" id="logo-id">
+  <a href="#" slot="logo" id="logo-id" aria-current="page">
     Logo/Title
   </a>
   <ul slot="nav" aria-labelledby="logo-id">
@@ -106,9 +106,7 @@ <h2>Content Placeholder</h2>
   import '@rhds/elements/rh-card/rh-card.js';
   import '@rhds/elements/rh-button/rh-button.js';
 
-  const nav = document.querySelector('rh-navigation-secondary [slot="nav"]');
-  const links = nav.querySelectorAll('a');
-
+  const links = document.querySelectorAll('rh-navigation-secondary [slot="logo"], rh-navigation-secondary [slot="nav"] a');
   const [firstLink] = links;
   const lastLink = [...links].pop();
 
@@ -163,7 +161,7 @@ <h2>Content Placeholder</h2>
 
   function resetCurrentPageIndex() {
     // get the current page
-    const currentPage = nav.querySelector('[aria-current="page"]');
+    const currentPage = document.querySelector('rh-navigation-secondary [slot="logo"][aria-current="page"], rh-navigation-secondary [slot="nav"] a[aria-current="page"]');
     // get the index of the current page
     const currentPageIndex = Array.from(links).indexOf(currentPage);
     // remove the current page

diff --git a/elements/rh-navigation-secondary/demo/dark-variant.html b/elements/rh-navigation-secondary/demo/dark-variant.html
@@ -1,5 +1,5 @@
 <rh-navigation-secondary color-palette="dark" role="navigation" aria-label="main">
-  <a href="#" slot="logo" id="logo-id">
+  <a href="#" slot="logo" id="logo-id" aria-current="page">
     Red Hat Advanced Cluster Management for Kubernetes
   </a>
   <ul slot="nav" aria-labelledby="logo-id">

diff --git a/elements/rh-navigation-secondary/demo/deprecated.html b/elements/rh-navigation-secondary/demo/deprecated.html
@@ -1,5 +1,5 @@
 <rh-secondary-nav role="navigation">
-  <a href="#" slot="logo" id="logo-id">
+  <a href="#" slot="logo" id="logo-id" aria-current="page">
     Red Hat Ansible Automation Platform
   </a>
   <ul slot="nav" aria-labelledby="logo-id">

diff --git a/elements/rh-navigation-secondary/demo/long-logo-text.html b/elements/rh-navigation-secondary/demo/long-logo-text.html
@@ -1,5 +1,5 @@
 <rh-navigation-secondary role="navigation">
-  <a href="#" slot="logo" id="logo-id">
+  <a href="#" slot="logo" id="logo-id" aria-current="page">
     Red Hat Ansible Automation Platform
   </a>
   <ul slot="nav" aria-labelledby="logo-id">

diff --git a/elements/rh-navigation-secondary/demo/proxy.html b/elements/rh-navigation-secondary/demo/proxy.html
@@ -31,7 +31,7 @@
   </style>
   <link href="/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css" rel="stylesheet"></link>
   <rh-navigation-secondary role="navigation">
-    <a href="#" slot="logo" id="logo-id">
+    <a href="#" slot="logo" id="logo-id" aria-current="page">
       Red Hat Ansible Automation Platform
     </a>
     <ul slot="nav" aria-labelledby="logo-id">

diff --git a/elements/rh-navigation-secondary/demo/rh-navigation-secondary.html b/elements/rh-navigation-secondary/demo/rh-navigation-secondary.html
@@ -1,5 +1,5 @@
 <rh-navigation-secondary role="navigation">
-  <a href="#" slot="logo" id="logo-id">
+  <a href="#" slot="logo" id="logo-id" aria-current="page">
     Logo/Title
   </a>
   <ul slot="nav" aria-labelledby="logo-id">

diff --git a/elements/rh-navigation-secondary/demo/translation.html b/elements/rh-navigation-secondary/demo/translation.html
@@ -1,6 +1,6 @@
 <div lang="he" dir="rtl">
   <rh-navigation-secondary role="navigation">
-    <a href="#" slot="logo" id="logo-id">
+    <a href="#" slot="logo" id="logo-id" aria-current="page">
       Red Hat Ansible Automation Platform
     </a>
     <ul slot="nav" aria-labelledby="logo-id">

diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.css b/elements/rh-navigation-secondary/rh-navigation-secondary-dropdown.css
@@ -3,8 +3,8 @@
 }
 
 #container {
-  border-inline-start: 3px solid transparent;
-  border-inline-end: 1px solid transparent;
+  border-inline-start: var(--rh-border-width-lg, 3px) solid transparent;
+  border-inline-end: var(--rh-border-width-sm, 1px) solid transparent;
   display: block;
   height: 100%;
 }

diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css b/elements/rh-navigation-secondary/rh-navigation-secondary-lightdom.css
@@ -9,7 +9,7 @@
   position: sticky;
   top: 0;
   background-color: var(--rh-color-surface-lighter, #f2f2f2);
-  border-block-end: 1px solid transparent;
+  border-block-end: var(--rh-border-width-sm, 1px) solid transparent;
   box-shadow: var(--rh-box-shadow-sm, 0 2px 4px 0 rgba(21, 21, 21, 0.2));
   height: var(--_max-height);
   min-height: var(--_min-height);
@@ -62,11 +62,16 @@
   text-decoration: none;
   font-size: var(--rh-font-size-body-text-md, 1rem);
   letter-spacing: 0.01125em;
-  line-height: var(--rh-line-height-body-text, 1.5);
   margin-inline-start: var(--rh-space-lg, 16px);
   font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
   font-weight: var(--rh-font-weight-heading-medium, 500);
   padding-block: var(--rh-space-lg, 16px);
+  border-block-start: var(--rh-border-width-lg, 3px) solid transparent;
+  width: max-content;
+}
+
+:is(rh-secondary-nav, rh-navigation-secondary) > [slot="logo"][aria-current="page"] {
+  border-block-start-color: var(--rh-color-brand-red-on-light, #ee0000);
 }
 
 :is(rh-secondary-nav, rh-navigation-secondary) > [slot="logo"]:hover {
@@ -91,6 +96,11 @@
     var(--rh-space-lg, 16px);
 }
 
+:is(rh-secondary-nav, rh-navigation-secondary) > [slot="logo"],
+:is(rh-secondary-nav, rh-navigation-secondary) > [slot="nav"] {
+  line-height: var(--rh-line-height-body-text, 1.5);
+}
+
 :is(rh-secondary-nav, rh-navigation-secondary) > [slot="cta"] {
   grid-area: cta;
   display: none;
@@ -128,7 +138,7 @@
   padding: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px);
   text-decoration: none !important;
   text-align: center;
-  border-block-start: 3px solid transparent;
+  border-block-start: var(--rh-border-width-lg, 3px) solid transparent;
 }
 
 :is(rh-secondary-nav, rh-navigation-secondary) [slot="nav"] > li > a[aria-current="page"] {
@@ -153,11 +163,17 @@
 }
 
 :is(rh-secondary-nav, rh-navigation-secondary) > [slot="nav"] > li {
-  border-block-start: 1px solid var(--rh-color-border-subtle-on-light, #c7c7c7);
+  border-block-start: 
+    var(--rh-border-width-sm, 1px)
+    solid
+    var(--rh-color-border-subtle-on-light, #c7c7c7);
 }
 
 :is(rh-secondary-nav, rh-navigation-secondary) > [slot="nav"] > li:last-of-type {
-  border-block-end: 1px solid  var(--rh-color-border-subtle-on-light, #c7c7c7);
+  border-block-end: 
+    var(--rh-border-width-sm, 1px)
+    solid 
+    var(--rh-color-border-subtle-on-light, #c7c7c7);
 }
 
 :is(rh-secondary-nav, rh-navigation-secondary) > [slot="nav"] a[aria-expanded="false"],

diff --git a/elements/rh-navigation-secondary/rh-navigation-secondary.css b/elements/rh-navigation-secondary/rh-navigation-secondary.css
@@ -25,17 +25,9 @@
 }
 
 nav {
-  position: absolute;
-  height: 100%;
-  width: 100%;
-  min-height: var(--_min-height);
   z-index: var(--rh-navigation-secondary-z-index, 102);
 }
 
-:host([color-palette="dark"]) nav.compact {
-  border-block-end: 1px solid var(--rh-color-border-subtle-on-dark, #707070);
-}
-
 nav.rtl {
   --_chevron-transform-collapsed:
     rotate(calc(-1 * var(--_chevron-up)))
@@ -195,7 +187,6 @@ button[aria-expanded="true"],
   rh-context-provider {
     flex-direction: row;
     justify-content: space-between; 
-    width: 100%;
   }
 
   #container.expanded ::slotted([slot="nav"]) {