Merge branch 'main' into staging/charmander

CONTRIBUTING_DESIGN.md

@@ -10,7 +10,7 @@ contributing guide](./CONTRIBUTING_DEV.md#prerequisites)
 
 Once set up, run the 11ty development server with the following command:
 ```bash
-npm run watch:docs
+npm run serve
 ```
 
 This will start eleventy and a watch process that will reload the site if `*.njk`, `*.md`, `*.scss`,

docs/_includes/layouts/base.njk

@@ -1,3 +1,12 @@
+---js
+{
+  isPlanned: function(repoStatus, name) {
+    const element = repoStatus.find(element => element.name === name);
+    return element && element.libraries.find(library => library.name === 'RH Elements').status === "Planned";
+  }
+}
+---
+
 {%- set extraPageClasses = bodyClasses or "" -%}
 {%- if title -%}
   {% set extraPageClasses = extraPageClasses + ' page-' + title | slug -%}

docs/_includes/layouts/pages/basic.njk

@@ -5,6 +5,7 @@ importElements:
   - rh-footer
   - rh-alert
   - rh-subnav
+  - rh-tag
 ---
 <link rel="stylesheet" href="/styles/pages/backpage.css">
 

docs/_includes/layouts/pages/elements.njk

@@ -5,14 +5,14 @@ eleventyComputed:
   title: "{{ doc.pageTitle }} | {{ slug | deslugify }}"
   importElements:
     - rh-alert
-    - rh-tag
     - rh-cta
     - rh-footer
     - rh-subnav
     - rh-code-block
     - rh-table
     - rh-accordion
     - rh-badge
+    - rh-tag
     - "{{ doc.tagName or element.tagName }}"
 ---
 {%- if hasToc %}
@@ -56,7 +56,11 @@ eleventyComputed:
 <main id="main">
   <article {% if hasToc and (content | toc).length > 0 %}class="has-toc"{% endif %}>
     <uxdot-header has-subnav>
-      <h1 id="{{ slug }}" class="page-title">{{ doc.alias or (slug | deslugify) }}</h1>
+      {%- set inProgress = doc.docsPage.manifest -%}
+      {%- set name = (doc.alias) or (slug | deslugify) %}
+      {%- set planned = isPlanned(repoStatus, name) %}
+      <h1 id="{{ slug }}" class="page-title">{{ name }}{% if planned %} <rh-tag icon="bell" color="gray">Planned</rh-tag>{% endif %}</h1>
+
       {%- set manifest = doc.docsPage.manifest -%}
       {%- set demos = manifest and manifest.getDemos(doc.docsPage.tagName) -%}
       {%- set demosUrl -%}/elements/{{ slug }}/demos/{%- endset -%}

docs/_includes/layouts/pages/home.njk

@@ -3,6 +3,7 @@ layout: layouts/base.njk
 importElements:
   - rh-cta
   - rh-footer
+  - rh-tag
 ---
 
 {% include 'partials/component/masthead.njk' %}

docs/_includes/layouts/pages/tokens.njk

@@ -1,5 +1,7 @@
 ---
 layout: layouts/base.njk
+importElements:
+  - rh-tag
 ---
 
 <style>

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>

docs/_includes/partials/component/sidenav.njk

@@ -33,10 +33,12 @@
                     {%- set slug = fst.slug -%}
                     {%- set href = '/elements/' + slug + '/' -%}
                     {%- set active = href === page.url -%}
+                    {%- set name = (fst.alias) or (slug | deslugify) %}
+                    {%- set planned = isPlanned(repoStatus, name) %}
                     {% if not (tagName in comingSoonItems) %}
                       <li>
                         <uxdot-sidenav-dropdown-menu-item {{ 'active' if active }}>
-                          <a href="{{ href }}">{{ (fst.alias) or (slug | deslugify) }}</a>
+                          <a href="{{ href }}">{{ (fst.alias) or (slug | deslugify) }}{% if planned %} <rh-tag icon="bell" color="gray">Planned</rh-tag>{% endif %}</a>
                         </uxdot-sidenav-dropdown-menu-item>
                       </li>
                     {% endif %}

docs/_plugins/rhds.cjs

@@ -256,6 +256,19 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
     });
   });
 
+  eleventyConfig.addCollection('sortedTypography', async function(collectionApi) {
+    const typographyCollection = collectionApi.getFilteredByTags('typography');
+    return typographyCollection.sort((a, b) => {
+      if (a.data.order > b.data.order) {
+        return 1;
+      } else if (a.data.order < b.data.order) {
+        return -1;
+      } else {
+        return 0;
+      }
+    });
+  });
+
   eleventyConfig.addCollection('sortedDevelopers', async function(collectionApi) {
     const developersCollection = collectionApi.getFilteredByTags('developers');
     return developersCollection.sort((a, 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;
   }
-}
+}

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);
-      }
     }
 
   `;

docs/assets/javascript/elements/uxdot-repo-status-list.js

@@ -11,6 +11,7 @@ class UxdotRepoStatusList extends LitElement {
     #inner-container {
       border: var(--rh-border-width-sm, 1px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
       border-radius: var(--rh-border-radius-default, 3px);
+      margin-block-start: var(--rh-space-lg, 16px);
     }
 
     #header-container {