feat(health-index): Adding rh-health-index element

.changeset/calm-fireants-kneel.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added <rh-health-index>
+
+Health index grades the health or security level of something.
+
+```html
+<rh-health-index grade="A">A</rh-health-index>
+```

docs/_data/relatedItems.yaml

@@ -41,6 +41,10 @@ rh-footer:
  - rh-popover
  - rh-tooltip
  - rh-site-status
+rh-health-index:
+ - rh-avatar
+ - rh-badge
+ - rh-tag
 rh-jump-links: 
  - rh-pagination
  - rh-progress-steps

docs/_data/repoStatus.yaml

@@ -148,13 +148,24 @@
   libraries:
     - name: Figma library
       status: Ready
-
     - name: RH Elements
       status: Ready
     - name: WebRH
       status: Ready
     - name: Documentation
       status: Ready
+- name: "Health Index"
+  type: "Element"
+  overallStatus: "Available"
+  libraries:
+    - name: Figma library
+      status: Ready
+    - name: RH Elements
+      status: Ready
+    - name: WebRH
+      status: Planned
+    - name: Documentation
+      status: Ready
 - name: "Jumplinks"
   type: "Element"
   overallStatus: "Available"

elements/rh-health-index/README.md

@@ -0,0 +1,37 @@
+# Health Index
+Health index grades the health or security level of something.
+
+## Usage
+Use the Health Index element to display a health or security grade (A–F) of something.
+
+At a minimum an `rh-health-index` element should have a `grade=""` attribute with a value of A–F along with a matching grade letter in the slot.
+
+### Default
+```html
+<rh-health-index grade="A">A</rh-health-index>
+```
+
+### Sizes
+
+- Small = `sm`
+- Default (i.e., Medium) = `md`
+- Large = `lg`
+- Extra Large = `xl`
+
+#### Small
+
+```html
+<rh-health-index size="sm" grade="A">A</rh-health-index>
+```
+
+#### Large
+
+```html
+<rh-health-index size="lg" grade="A">A</rh-health-index>
+```
+
+#### Extra Large
+
+```html
+<rh-health-index size="xl" grade="A">A</rh-health-index>
+```

elements/rh-health-index/demo/color-context.html

@@ -0,0 +1,73 @@
+<rh-context-demo>
+  <ul class="demo">
+    <li>
+      <h2>SM</h2>
+      <div><rh-health-index grade="A" size="sm">A</rh-health-index></div>
+      <div><rh-health-index grade="B" size="sm">B</rh-health-index></div>
+      <div><rh-health-index grade="C" size="sm">C</rh-health-index></div>
+      <div><rh-health-index grade="D" size="sm">D</rh-health-index></div>
+      <div><rh-health-index grade="E" size="sm">E</rh-health-index></div>
+      <div><rh-health-index grade="F" size="sm">F</rh-health-index></div>
+    </li>
+    <li>
+      <h2>Default</h2>
+      <div><rh-health-index grade="A">A</rh-health-index></div>
+      <div><rh-health-index grade="B">B</rh-health-index></div>
+      <div><rh-health-index grade="C">C</rh-health-index></div>
+      <div><rh-health-index grade="D">D</rh-health-index></div>
+      <div><rh-health-index grade="E">E</rh-health-index></div>
+      <div><rh-health-index grade="F">F</rh-health-index></div>
+    </li>
+
+    <li>
+      <h2>LG</h2>
+      <div><rh-health-index grade="A" size="lg">A</rh-health-index></div>
+      <div><rh-health-index grade="B" size="lg">B</rh-health-index></div>
+      <div><rh-health-index grade="C" size="lg">C</rh-health-index></div>
+      <div><rh-health-index grade="D" size="lg">D</rh-health-index></div>
+      <div><rh-health-index grade="E" size="lg">E</rh-health-index></div>
+      <div><rh-health-index grade="F" size="lg">F</rh-health-index></div>
+    </li>
+
+    <li>
+      <h2>XL</h2>
+      <div><rh-health-index grade="A" size="xl">A</rh-health-index></div>
+      <div><rh-health-index grade="B" size="xl">B</rh-health-index></div>
+      <div><rh-health-index grade="C" size="xl">C</rh-health-index></div>
+      <div><rh-health-index grade="D" size="xl">D</rh-health-index></div>
+      <div><rh-health-index grade="E" size="xl">E</rh-health-index></div>
+      <div><rh-health-index grade="F" size="xl">F</rh-health-index></div>
+    </li>
+  </ul>
+</rh-context-demo>
+
+<script type="module">
+    import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+    import '@rhds/elements/rh-surface/rh-surface.js';
+    import '@rhds/elements/rh-health-index/rh-health-index.js';
+</script>
+
+<style>
+.demo {
+    margin: 2rem;
+    padding: 0;
+    list-style: none;
+    width: 800px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 2rem;
+    & h2 {
+      font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+    }
+
+    & li {
+        margin: 0;
+        padding: 0;
+    }
+
+    & rh-surface,
+    & div {
+        margin-block-end: 1rem;
+    }
+}
+</style>

elements/rh-health-index/demo/rh-health-index.html

@@ -0,0 +1,6 @@
+<rh-health-index grade="C"
+                 size="lg">C</rh-health-index>
+
+<script type="module">
+  import '@rhds/elements/rh-health-index/rh-health-index.js';
+</script>

elements/rh-health-index/demo/screen-readers.html

@@ -0,0 +1,61 @@
+<section>
+  <h2>&lt;rh-health-index> element</h2>
+  <rh-health-index grade="A" size="sm">A</rh-health-index>
+  <rh-health-index grade="B" size="sm">B</rh-health-index>
+  <rh-health-index grade="C" size="sm">C</rh-health-index>
+  <rh-health-index grade="D" size="md">D</rh-health-index>
+  <rh-health-index grade="E" size="lg">E</rh-health-index>
+  <rh-health-index grade="F" size="xl">F</rh-health-index>
+</section>
+
+<section>
+  <h2>ARIA attrs for <abbr title="localization">l10n</abbr></h2>
+  <rh-health-index grade="A"
+      aria-label="בריאות מדורג מדרגות א עד ו"
+      aria-valuetext="דרגה א"
+      size="sm">A</rh-health-index>
+</section>
+
+<section>
+  <h2>Native &gt;meter> element</h2>
+  <meter min="1" max="6" value="1" aria-valuetext="Grade A" aria-label="Health graded A to F"></meter>
+  <meter min="1" max="6" value="2" aria-valuetext="Grade B" aria-label="Health graded A to F"></meter>
+  <meter min="1" max="6" value="3" aria-valuetext="Grade C" aria-label="Health graded A to F"></meter>
+  <meter min="1" max="6" value="4" aria-valuetext="Grade D" aria-label="Health graded A to F"></meter>
+  <meter min="1" max="6" value="5" aria-valuetext="Grade E" aria-label="Health graded A to F"></meter>
+  <meter min="1" max="6" value="6" aria-valuetext="Grade F" aria-label="Health graded A to F"></meter>
+</section>
+
+<section>
+  <h2>ARIA-attributes &gt;meter> element</h2>
+  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade A" aria-label="Health graded A to F">A</div>
+  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade B" aria-label="Health graded A to F">B</div>
+  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade C" aria-label="Health graded A to F">C</div>
+  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade D" aria-label="Health graded A to F">D</div>
+  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade E" aria-label="Health graded A to F">E</div>
+  <div role="meter" aria-valuemin="1" aria-valuemax="6" aria-valuenow="1" aria-valuetext="Grade F" aria-label="Health graded A to F">F</div>
+</section>
+
+<script type="module">
+  import '@rhds/elements/rh-health-index/rh-health-index.js';
+</script>
+
+<style>
+  section {
+    display: flex;
+    flex-flow: column;
+    gap: var(--rh-space-lg, 16px);
+  }
+  div[role="meter"] {
+    display: block;
+    height: 2em;
+    width: 5em;
+    background: linear-gradient(90deg, blue, red);
+    &::after {
+      color: white;
+      content: attr(aria-valuetext);
+    }
+  }
+</style>
+
+

elements/rh-health-index/demo/variants.html

@@ -0,0 +1,69 @@
+<ul class="demo">
+  <li>
+    <h2>SM</h2>
+    <rh-health-index grade="A" size="sm">A</rh-health-index>
+    <rh-health-index grade="B" size="sm">B</rh-health-index>
+    <rh-health-index grade="C" size="sm">C</rh-health-index>
+    <rh-health-index grade="D" size="sm">D</rh-health-index>
+    <rh-health-index grade="E" size="sm">E</rh-health-index>
+    <rh-health-index grade="F" size="sm">F</rh-health-index>
+  </li>
+
+  <li>
+    <h2>Default</h2>
+    <rh-health-index grade="A">A</rh-health-index>
+    <rh-health-index grade="B">B</rh-health-index>
+    <rh-health-index grade="C">C</rh-health-index>
+    <rh-health-index grade="D">D</rh-health-index>
+    <rh-health-index grade="E">E</rh-health-index>
+    <rh-health-index grade="F">F</rh-health-index>
+  </li>
+
+  <li>
+    <h2>LG</h2>
+    <rh-health-index grade="A" size="lg">A</rh-health-index>
+    <rh-health-index grade="B" size="lg">B</rh-health-index>
+    <rh-health-index grade="C" size="lg">C</rh-health-index>
+    <rh-health-index grade="D" size="lg">D</rh-health-index>
+    <rh-health-index grade="E" size="lg">E</rh-health-index>
+    <rh-health-index grade="F" size="lg">F</rh-health-index>
+  </li>
+
+  <li>
+    <h2>XL</h2>
+    <rh-health-index grade="A" size="xl">A</rh-health-index>
+    <rh-health-index grade="B" size="xl">B</rh-health-index>
+    <rh-health-index grade="C" size="xl">C</rh-health-index>
+    <rh-health-index grade="D" size="xl">D</rh-health-index>
+    <rh-health-index grade="E" size="xl">E</rh-health-index>
+    <rh-health-index grade="F" size="xl">F</rh-health-index>
+  </li>
+</ul>
+
+<script type="module">
+  import '@rhds/elements/rh-health-index/rh-health-index.js';
+</script>
+
+<style>
+  .demo {
+    margin: 2rem;
+    padding: 0;
+    list-style: none;
+    width: 800px;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: 2rem;
+    & h2 {
+      font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+    }
+    & li {
+      display: flex;
+      flex-flow: column;
+      gap: var(--rh-space-lg, 16px);
+      margin: 0;
+      padding: 0;
+    }
+  }
+</style>
+
+

elements/rh-health-index/docs/00-overview.md

@@ -0,0 +1,35 @@
+## Overview
+
+{{ tagName | getElementDescription }}
+
+<uxdot-example width-adjustment="752px">
+  <img src="{{ './overview.png' | url }}" alt="Four health index components. One is green with letter grade A, one is yellow with letter grade C, one is orange with letter grade D, and one is red with letter grade F.">
+</uxdot-example>
+
+
+{% repoStatusList %}
+
+## Sample element
+
+<rh-health-index grade="A">A</rh-health-index>
+
+
+## Demos
+
+View a live version of this component and see how it can be customized.
+
+{% playground tagName=tagName %}{% endplayground %}
+
+<rh-cta><a href="{{ './demo/' | url }}">Full screen demo</a></rh-cta>
+
+
+## When to use
+
+- When you need to use severity to communicate the health of something
+- When you need to communicate how secure or vulnerable something is
+- When you need to measure how current or out of date something is
+
+
+
+{% repoStatusChecklist %}
+