docs: quick and dirty icon update for in progress elements (#1734)

* docs: quick and dirty icon update for in progress elements * docs: improve upon the icon placement in sidenav and header * docs: improve upon the icon placement in sidenav and header --------- Co-authored-by: Zack Hawkins <[email protected]> Co-authored-by: Steven Spriggs <[email protected]>
RedHat-UX · Aug 2, 2024 · 14ae697 · 14ae697
1 parent b661beb
commit 14ae697
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 5 deletions.
diff --git a/CONTRIBUTING_DESIGN.md b/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`,

diff --git a/docs/_data/repoStatus.yaml b/docs/_data/repoStatus.yaml
@@ -167,6 +167,18 @@
       status: N/A
     - name: Documentation
       status: Ready
+- name: "Navigation (primary)"
+  type: "Element"
+  overallStatus: "Planned"
+  libraries:
+    - name: Figma library
+      status: Planned
+    - name: RH Elements
+      status: Planned
+    - name: RH Shared Libs
+      status: Planned
+    - name: Documentation
+      status: Planned
 - name: "Navigation Secondary"
   type: "Element"
   overallStatus: "Available"
@@ -198,11 +210,23 @@
     - name: Figma library
       status: Ready
     - name: RH Elements
-      status: Ready
+      status: Planned
     - name: WebRH
       status: Ready
     - name: Documentation
       status: Ready
+- name: "Progress steps"
+  type: "Element"
+  overallStatus: "Available"
+  libraries:
+    - name: Figma library
+      status: Ready
+    - name: RH Elements
+      status: Planned
+    - name: WebRH
+      status: Ready
+    - name: Documentation
+      status: Ready      
 - name: "Skip Link"
   type: "Element"
   overallStatus: "New"

diff --git a/docs/_includes/layouts/base.njk b/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 -%}

diff --git a/docs/_includes/layouts/pages/basic.njk b/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">
 

diff --git a/docs/_includes/layouts/pages/elements.njk b/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,10 @@ 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 -%}

diff --git a/docs/_includes/layouts/pages/home.njk b/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' %}

diff --git a/docs/_includes/layouts/pages/tokens.njk b/docs/_includes/layouts/pages/tokens.njk
@@ -1,5 +1,7 @@
 ---
 layout: layouts/base.njk
+importElements:
+  - rh-tag
 ---
 
 <style>

diff --git a/docs/_includes/partials/component/sidenav.njk b/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 %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,6 +3,7 @@ layout: layouts/base.njk @@
     importElements:
       - rh-cta
       - rh-footer
+      - rh-tag
     ---
     {% include 'partials/component/masthead.njk' %}
@@ Expand Down @@