Skip to content

Commit

Permalink
docs: fixing repoStatus tag icons (#1796)
Browse files Browse the repository at this point in the history 
* docs: fixing repoStatus tag icons

* docs: update var name from iconname to iconName

---------

Co-authored-by: Adam Johnson <[email protected]>
  • Loading branch information
@markcaron @adamjohnson
markcaron and adamjohnson authored Aug 28, 2024
1 parent 3c0ab92 commit c15845e
Show file tree
Hide file tree
Showing 2 changed files with 21 additions and 49 deletions.
24 changes: 16 additions & 8 deletions docs/_plugins/shortcodes/repoStatus.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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',
},
};

Expand Down Expand Up @@ -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()}
Expand Down Expand Up @@ -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()}
Expand Down Expand Up @@ -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>
Expand Down
46 changes: 5 additions & 41 deletions docs/design-code-status/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down

0 comments on commit c15845e

Please sign in to comment.