docs: add version number to masthead (#1723)

* docs: add version number to masthead * docs: masthead style tweaks
RedHat-UX · Jul 24, 2024 · cf0ec84 · cf0ec84
1 parent 2004aca
commit cf0ec84
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 49 deletions.
diff --git a/docs/_includes/partials/component/masthead.njk b/docs/_includes/partials/component/masthead.njk
@@ -6,7 +6,8 @@
     <img src="{{ '/assets/red-hat-design-system.svg' | url }}" alt="Red Hat Design System logo" width="188" height="40">
   </a>
   <a href="https://github.com/RedHat-UX/red-hat-design-system" slot="links">
-    <pf-icon set="fab" icon="github" size="lg" ></pf-icon>
-    <span>Contribute on Github</span>
+    <span class="display-xs">Contribute on Github</span>
+    <pf-icon set="fab" icon="github" size="lg"></pf-icon>
   </a>
+  <a href="https://github.com/RedHat-UX/red-hat-design-system/releases/tag/v{{ pkg.version }}" slot="links" title="Version {{pkg.version}}" aria-label="Version {{pkg.version}}">v{{ pkg.version }}</a>
 </uxdot-masthead>
diff --git a/docs/assets/javascript/elements/uxdot-masthead-lightdom.css b/docs/assets/javascript/elements/uxdot-masthead-lightdom.css
@@ -3,29 +3,24 @@ uxdot-masthead {
   container-name: uxdot-masthead;
 }
 
-uxdot-masthead [slot="links"] span {
-  border: 0 !important;
-  clip: rect(1px, 1px, 1px, 1px) !important; /* 1 */
-  clip-path: inset(50%) !important;  /* 2 */
-  height: 1px !important;
-  margin: -1px !important;
-  overflow: hidden !important;
-  padding: 0 !important;
-  position: absolute !important;
-  width: 1px !important;
-  white-space: nowrap !important;
+uxdot-masthead a[slot="links"] {
+  color: var(--rh-color-text-primary-on-dark, #ffffff) !important;
+}
+
+uxdot-masthead a[slot="links"]:is(:hover, :focus) {
+  color: var(--rh-color-icon-subtle-hover, #a3a3a3) !important;
+}
+
+uxdot-masthead [slot="links"] span.display-xs {
+  display: none;
+}
+
+uxdot-masthead a[slot="links"]:last-of-type {
+  margin-inline-end: var(--rh-space-md, 8px);
 }
 
 @container uxdot-masthead (min-width: 576px) {
-  uxdot-masthead [slot="links"] span {
-    clip: unset !important;
-    clip-path: unset !important;
-    height: unset !important;
-    margin: unset !important;
-    overflow: unset !important;
-    padding: unset !important;
-    position: unset !important;
-    width: unset !important;
-    white-space: unset !important;
+  uxdot-masthead [slot="links"] span.display-xs {
+    display: inline;
   }
-}
+}
diff --git a/docs/assets/javascript/elements/uxdot-masthead.js b/docs/assets/javascript/elements/uxdot-masthead.js
@@ -16,7 +16,7 @@ class UxdotMasthead extends LitElement {
 
     #container {
       display: grid;
-      gap: var(--rh-space-lg, 16px);
+      column-gap: var(--rh-space-lg, 16px);
       grid-template-columns: max-content 1fr max-content;
       max-height: var(--uxdot-masthead-max-height, 72px);
       margin-inline: var(--rh-space-md, 8px);
@@ -56,44 +56,34 @@ class UxdotMasthead extends LitElement {
       display: flex;
       flex-direction: row;
       align-items: center;
+      justify-self: flex-start;
       gap: var(--rh-space-md, 8px);
     }
 
-    slot[name="links"]::slotted(a) {
-      --pf-icon--size: 28px;
+    slot[name="links"] {
+      --pf-icon--size: 24px;
+      display: flex;
+      flex-direction: row;
+      column-gap: var(--rh-space-lg, 16px);
+    }
 
+    slot[name="links"]::slotted(a) {
       display: flex;
       flex-direction: row;
       gap: var(--rh-space-lg, 16px);
       align-items: center;
-      color: var(--rh-color-text-on-dark, #ffffff) !important;
-    }
-
-    slot[name="links"]:hover::slotted(a),
-    slot[name="links"]::slotted(a:hover) {
-      color: var(--rh-color-icon-subtle-hover, #a3a3a3) !important;
     }
 
     @container (min-width: 576px) {
       #container {
         gap: var(--rh-space-lg, 16px);
         margin: var(--rh-space-lg, 16px);
       }
-
-      slot[name="links"]::slotted(span) {
-        clip: rect(0 0 0 0);
-        clip-path: inset(50%);
-        height: 1px;
-        overflow: hidden;
-        position: absolute;
-        white-space: nowrap;
-        width: 1px;
-      }
     }
 
     @container (min-width: 992px) {
       #container {
-        grid-template-columns: 1fr max-content max-content;
+        grid-template-columns: 1fr max-content;
       }
 
       slot[name="hamburger"] {
@@ -103,11 +93,6 @@ class UxdotMasthead extends LitElement {
       slot[name="logo"]::slotted(a) {
         margin-inline-start: var(--rh-space-lg, 16px);
       }
-
-      slot[name="links"]::slotted(a) {
-
-        gap: var(--rh-space-md, 8px);
-      }
     }
 
   `;