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

elements/rh-health-index/README.md

@@ -0,0 +1,11 @@
+# Health Index
+Add a description of the component here.
+
+## Usage
+Describe how best to use this web component along with best practices.
+
+```html
+<rh-health-index>
+
+</rh-health-index>
+```

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

@@ -0,0 +1,74 @@
+<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;
+}
+
+.demo h2 {
+  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+}
+
+.demo li {
+    margin: 0;
+    padding: 0;
+}
+
+.demo rh-surface,
+.demo div {
+    margin-block-end: 1rem;
+}
+</style>

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

@@ -0,0 +1,71 @@
+<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>
+
+<script type="module">
+    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;
+}
+
+.demo h2 {
+  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+}
+
+.demo li {
+    margin: 0;
+    padding: 0;
+}
+
+.demo rh-surface,
+.demo div {
+    margin-block-end: 1rem;
+}
+</style>

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

@@ -0,0 +1,20 @@
+## Overview
+{{ tagName | getElementDescription }}
+
+{% 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 %}
+  {% cta href="./demo/", target="_blank" %}
+    View the `<rh-health-index>` demo in a new tab
+  {% endcta %}
+
+## When to use
+- When you need to displays a health grade (A–F) for a particular item or package.
+
+{% repoStatusChecklist %}

elements/rh-health-index/docs/40-code.md

@@ -0,0 +1,17 @@
+{% renderOverview %}
+  <rh-health-index></rh-health-index>
+{% endrenderOverview %}
+
+{% band header="Usage" %}{% endband %}
+
+{% renderSlots %}{% endrenderSlots %}
+
+{% renderAttributes %}{% endrenderAttributes %}
+
+{% renderMethods %}{% endrenderMethods %}
+
+{% renderEvents %}{% endrenderEvents %}
+
+{% renderCssCustomProperties %}{% endrenderCssCustomProperties %}
+
+{% renderCssParts %}{% endrenderCssParts %}