From c15845ef332615b294e07b1b2718a9917323e4d2 Mon Sep 17 00:00:00 2001
From: Mark Caron <markcaron@users.noreply.github.com>
Date: Wed, 28 Aug 2024 15:36:37 -0400
Subject: [PATCH] docs: fixing repoStatus tag icons (#1796)

* docs: fixing repoStatus tag icons

* docs: update var name from iconname to iconName

---------

Co-authored-by: Adam Johnson <adam.b.johnson1@gmail.com>
---
 docs/_plugins/shortcodes/repoStatus.cjs | 24 ++++++++-----
 docs/design-code-status/index.md        | 46 +++----------------------
 2 files changed, 21 insertions(+), 49 deletions(-)

diff --git a/docs/_plugins/shortcodes/repoStatus.cjs b/docs/_plugins/shortcodes/repoStatus.cjs
index 0c06efb909..0912e2d487 100644
--- a/docs/_plugins/shortcodes/repoStatus.cjs
+++ b/docs/_plugins/shortcodes/repoStatus.cjs
@@ -7,45 +7,53 @@ const STATUS_LEGEND = {
     color: 'gray',
     variant: 'filled',
     icon: html`<rh-icon set="ui" icon="notification-fill">Planned</rh-icon>`,
+    iconName: 'notification-fill',
   },
   'In Progress': {
     description: 'In the design or development process',
     color: 'green',
     variant: 'outline',
-    icon: html`<rh-icon set="ui" icon="harvey-ball-50">✔️</rh-icon>`,
+    icon: html`<rh-icon set="ui" icon="harvey-ball-50">WIP</rh-icon>`,
+    iconName: 'harvey-ball-50',
   },
   'Ready': {
     description: 'Ready to use and approved by all team members',
     color: 'green',
     variant: 'filled',
     icon: html`<rh-icon set="ui" icon="check-circle-fill">✔️</rh-icon>`,
+    iconName: 'check-circle-fill',
   },
   'Deprecated': {
     description: 'No longer supported by RHDS',
     color: 'orange',
     variant: 'filled',
     icon: html`<rh-icon set="ui" icon="close-circle-fill">Deprecated</rh-icon>`,
+    iconName: 'close-circle-fill',
   },
   'N/A': {
     description: 'Not planned, not available, or does not apply',
     color: 'gray',
     variant: 'outline',
     icon: html`<rh-icon set="ui" icon="ban">N/A</rh-icon>`,
+    iconName: 'ban',
   },
   'Beta': {
     color: 'purple',
     variant: 'outline',
     icon: html`<rh-icon set="ui" icon="build-fill">Beta</rh-icon>`,
+    iconName: 'build-fill',
   },
   'Experimental': {
     color: 'orange',
     variant: 'outline',
     icon: html`<rh-icon set="ui" icon="experimental">Beta</rh-icon>`,
+    iconName: 'experimental',
   },
   'New': {
     color: 'cyan',
     variant: 'outline',
     icon: html`<rh-icon set="ui" icon="new-fill">New</rh-icon>`,
+    iconName: 'new-fill',
   },
 };
 
@@ -103,8 +111,8 @@ function repoStatusList({ repoStatus, heading = 'Status', level = 2 } = {}) {
     <div>
       <dt>${listItem.name}:</dt>
       <dd>
-        <rh-tag color="${STATUS_LEGEND[listItem.status].color}" variant="${STATUS_LEGEND[listItem.status].variant}">
-        ${listItem.status}${STATUS_LEGEND[listItem.status].icon.trim()}
+        <rh-tag color="${STATUS_LEGEND[listItem.status].color}" variant="${STATUS_LEGEND[listItem.status].variant}" icon="${STATUS_LEGEND[listItem.status]['iconName']}">
+          ${listItem.status}
         </rh-tag>
       </dd>
     </div>`.trim()).join('\n').trim()}
@@ -147,12 +155,12 @@ function repoStatusTable({ repoStatus }) {
         <td data-label="Name">
           <span><a href="/elements/${listItem.name.toLowerCase().trim().split(' ').join('-')}">${listItem.name}</a>
             ${listItem.overallStatus !== 'Available' ?
-            `<rh-tag color="${STATUS_LEGEND[listItem.overallStatus].color}" variant="${STATUS_LEGEND[listItem.overallStatus].variant}">${listItem.overallStatus}${STATUS_LEGEND[listItem.overallStatus].icon}</rh-tag>` : ''}</span>
+            `<rh-tag color="${STATUS_LEGEND[listItem.overallStatus].color}" variant="${STATUS_LEGEND[listItem.overallStatus].variant}" icon="${STATUS_LEGEND[listItem.overallStatus]['iconName']}">${listItem.overallStatus}</rh-tag>` : ''}</span>
         </td>${listItem.libraries.map(lib => html`
         <td data-label="${lib.name}">
           <span>
-            <rh-tag color=${STATUS_LEGEND[lib.status].color} variant=${STATUS_LEGEND[lib.status].variant}>
-              ${lib.status}${STATUS_LEGEND[lib.status].icon.trim()}
+            <rh-tag color="${STATUS_LEGEND[lib.status].color}" variant="${STATUS_LEGEND[lib.status].variant}" icon="${STATUS_LEGEND[lib.status]['iconName']}">
+              ${lib.status}
             </rh-tag>
           </span>
         </td>`).join('\n').trim()}
@@ -202,8 +210,8 @@ function repoStatusChecklist({ repoStatus, heading = 'Status checklist', level =
         <td data-label="Property">${listItem.name}</td>
         <td data-label="Status">
           <span>
-            <rh-tag color=${STATUS_LEGEND[listItem.status].color} variant=${STATUS_LEGEND[listItem.status].variant}>
-              ${listItem.status}${STATUS_LEGEND[listItem.status].icon.trim()}
+            <rh-tag color="${STATUS_LEGEND[listItem.status].color}" variant="${STATUS_LEGEND[listItem.status].variant}" icon="${STATUS_LEGEND[listItem.status]['iconName']}">
+              ${listItem.status}
             </rh-tag>
           </span>
         </td>
diff --git a/docs/design-code-status/index.md b/docs/design-code-status/index.md
index a8015627e0..7964f6b3ff 100644
--- a/docs/design-code-status/index.md
+++ b/docs/design-code-status/index.md
@@ -31,21 +31,8 @@ A detailed synopsis of our web components and their implementation status.
         <tr>
           <td data-label="Sample tag">
             <span>
-              <rh-tag variant="filled" color="gray">
+              <rh-tag variant="filled" color="gray" icon="notification-fill">
                 Planned
-                <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" role="img" aria-label="planned icon">
-                  <style type="text/css">
-                    .planned{fill:#707070;}
-                  </style>
-                  <g>
-                    <path class="planned" d="M8,12c0.6,0,1,0.4,1,1s-0.4,1-1,1s-1-0.4-1-1S7.4,12,8,12z M8,11c-1.1,0-2,0.9-2,2s0.9,2,2,2s2-0.9,2-2
-                      S9.1,11,8,11z"/>
-                    <path class="planned" d="M12.5,9V7.5C12.5,5,10.5,3,8,3S3.5,5,3.5,7.5V9c0,0.6-0.4,1-1,1C2.2,10,2,10.2,2,10.5v2C2,12.8,2.2,13,2.5,13
-                      h11c0.3,0,0.5-0.2,0.5-0.5v-2c0-0.3-0.2-0.5-0.5-0.5C12.9,10,12.5,9.6,12.5,9z"/>
-                    <path class="planned" d="M8,2c0.3,0,0.5,0.2,0.5,0.5S8.3,3,8,3S7.5,2.8,7.5,2.5S7.7,2,8,2z M8,1C7.2,1,6.5,1.7,6.5,2.5S7.2,4,8,4
-                      s1.5-0.7,1.5-1.5S8.8,1,8,1z"/>
-                  </g>
-                </svg>
               </rh-tag>
             </span>
           </td>
@@ -54,15 +41,8 @@ A detailed synopsis of our web components and their implementation status.
         <tr>
           <td data-label="Sample tag">
             <span>
-              <rh-tag variant="outline" color="green">
+              <rh-tag variant="outline" color="green" icon="harvey-ball-50">
                 In progress
-                <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" fill="none" role="img" aria-label="in progress icon">
-                  <style type="text/css">
-                    .inprogress{fill:#63993D;}
-                  </style>
-                  <path class="inprogress" d="M15,8c0,3.9-3.1,7-7,7s-7-3.1-7-7H15z"/>
-                  <path class="inprogress" d="M8,2c3.3,0,6,2.7,6,6s-2.7,6-6,6s-6-2.7-6-6S4.7,2,8,2z M8,1C4.1,1,1,4.1,1,8s3.1,7,7,7s7-3.1,7-7S11.9,1,8,1z"/>
-                </svg>
               </rh-tag>
             </span>
           </td>
@@ -71,12 +51,8 @@ A detailed synopsis of our web components and their implementation status.
         <tr>
           <td data-label="Sample tag">
             <span>
-              <rh-tag variant="filled" color="green">
+              <rh-tag variant="filled" color="green" icon="check-circle-fill">
                 Ready
-                <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 14 15" fill="none" role="img" aria-label="ready icon">
-                  <path d="M7 14.5C10.866 14.5 14 11.366 14 7.5C14 3.63401 10.866 0.5 7 0.5C3.13401 0.5 0 3.63401 0 7.5C0 11.366 3.13401 14.5 7 14.5Z" fill="#63993D"/>
-                  <path d="M4 7.5L6 9.5L10 5.5" stroke="#E9F7DF" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
               </rh-tag>
             </span>
           </td>
@@ -85,13 +61,8 @@ A detailed synopsis of our web components and their implementation status.
         <tr>
           <td data-label="Sample tag">
             <span>
-              <rh-tag variant="filled" color="orange">
+              <rh-tag variant="filled" color="orange" icon="close-circle-fill">
                 Deprecated
-                <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 14 15" fill="none" role="img" aria-label="deprecated icon">
-                  <path d="M7 14.5C10.866 14.5 14 11.366 14 7.5C14 3.63401 10.866 0.5 7 0.5C3.13401 0.5 0 3.63401 0 7.5C0 11.366 3.13401 14.5 7 14.5Z" fill="#F0561D"/>
-                  <path d="M5 9.5L9 5.5" stroke="#FFE3D9" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                  <path d="M9 9.5L5 5.5" stroke="#FFE3D9" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
-                </svg>
               </rh-tag>
             </span>
           </td>
@@ -100,15 +71,8 @@ A detailed synopsis of our web components and their implementation status.
         <tr>
           <td data-label="Sample tag">
             <span>
-              <rh-tag variant="outline" color="gray">
+              <rh-tag variant="outline" color="gray" icon="ban">
                 N/A
-                <svg slot="icon" xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16" role="img" aria-label="not applicable icon">
-                  <style type="text/css">
-                    .na{fill:#707070;}
-                  </style>
-                  <path class="na" d="M8,1C4.1,1,1,4.1,1,8c0,3.9,3.1,7,7,7c3.9,0,7-3.1,7-7C15,4.1,11.9,1,8,1z M2,8c0-1.5,0.5-2.8,1.4-3.9l8.4,8.4
-                    C10.8,13.5,9.5,14,8,14C4.7,14,2,11.3,2,8z M12.6,11.9L4.1,3.4C5.2,2.5,6.5,2,8,2c3.3,0,6,2.7,6,6C14,9.5,13.5,10.8,12.6,11.9z"/>
-                </svg>
               </rh-tag>
             </span>
           </td>