docs(tag): update docs (#1039)

* docs(stat): removing spacer token images, replacing with spacer table * docs(tag): adding repo status table, text updates * docs(tag): removing spacer images * docs: add .visually-hidden * docs(tag): format markup * docs(tag): break out demos --------- Co-authored-by: Benny Powers <web@bennypowers.com>
RedHat-UX · Jun 6, 2023 · 162dd1e · 162dd1e
1 parent 8cbcb79
commit 162dd1e
Show file tree

Hide file tree

Showing 11 changed files with 123 additions and 111 deletions.
diff --git a/docs/_data/repoStatus.csv b/docs/_data/repoStatus.csv
@@ -67,3 +67,10 @@ Card - pricing,,,x,,
 Card - logo slider,,,x,,
 Card - name slider,,,x,,
 Avatar,,,,,
+Tag - Red - filled and unfilled,x,,,,
+Tag - Orange - filled and unfilled,x,,,,
+Tag - Green - filled and unfilled,x,,,,
+Tag - Cyan - filled and unfilled,x,,,,
+Tag - Blue - filled and unfilled,x,,,,
+Tag - Purple - filled and unfilled,x,,,,
+Tag - Gray - filled and unfilled,x,,,,
diff --git a/docs/scss/_utility.scss b/docs/scss/_utility.scss
@@ -18,6 +18,11 @@
   }
 }
 
+.visually-hidden {
+  @include visually-hidden;
+  grid-gap: 1rem;
+}
+
 .element-invisible {
   @include visually-hidden;
   grid-gap: 1rem;

diff --git a/elements/rh-tag/demo/demo.css b/elements/rh-tag/demo/demo.css
@@ -1,4 +1,4 @@
-.visually-hidden-class {
+.visually-hidden {
   position: absolute !important;
   width: 1px !important;
   height: 1px !important;

diff --git a/elements/rh-tag/demo/rh-tag.html b/elements/rh-tag/demo/rh-tag.html
@@ -1,47 +1,13 @@
-<link rel="stylesheet" href="demo.css">
-<script type="module" src="rh-tag.js"></script>
-
-<section>
-  <h2>Filled Color</h2>
-  <rh-tag color="red"><span>Red <span class="visually-hidden-class">Hat</span></span></rh-tag>
-  <rh-tag color="orange">Orange</rh-tag>
-  <rh-tag color="green">Green</rh-tag>
-  <rh-tag color="cyan">Cyan</rh-tag>
-  <rh-tag color="blue">Blue</rh-tag>
-  <rh-tag color="purple">Purple</rh-tag>
-  <rh-tag>Gray</rh-tag>
-</section>
-
-<section>
-  <h2>Outline</h2>
-  <rh-tag variant="outline" color="red"><span>Red <span class="visually-hidden-class">Hat</span></span></rh-tag>
-  <rh-tag variant="outline" color="orange">Orange</rh-tag>
-  <rh-tag variant="outline" color="green">Green</rh-tag>
-  <rh-tag variant="outline" color="cyan">Cyan</rh-tag>
-  <rh-tag variant="outline" color="blue">Blue</rh-tag>
-  <rh-tag variant="outline" color="purple">Purple</rh-tag>
-  <rh-tag variant="outline">Gray</rh-tag>
-</section>
-
-<section>
-  <h2>Filled Color With Icon</h2>
-  <rh-tag color="red" icon="circle-info" icon-set="fas">Red</rh-tag>
-  <rh-tag color="orange" icon="circle-info" icon-set="fas">Orange</rh-tag>
-  <rh-tag color="green">Green <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
-  <rh-tag color="cyan" icon="circle-info" icon-set="fas">Cyan</rh-tag>
-  <rh-tag color="blue" icon="circle-info" icon-set="fas">Blue</rh-tag>
-  <rh-tag color="purple" icon="circle-info" icon-set="fas">Purple <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
-  <rh-tag icon="circle-info" icon-set="fas">Gray</rh-tag>
-</section>
+<rh-tag color="red">Red <span class="visually-hidden">Hat</span></rh-tag>
+<rh-tag color="orange">Orange</rh-tag>
+<rh-tag color="green">Green</rh-tag>
+<rh-tag color="cyan">Cyan</rh-tag>
+<rh-tag color="blue">Blue</rh-tag>
+<rh-tag color="purple">Purple</rh-tag>
+<rh-tag>Gray</rh-tag>
 
+<link rel="stylesheet" href="demo.css">
+<script type="module">
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
 
-<section>
-  <h2>Filled Color With Icon</h2>
-  <rh-tag variant="outline" color="red" icon="circle-info" icon-set="fas">Red</rh-tag>
-  <rh-tag variant="outline" color="orange" icon="circle-info" icon-set="fas">Orange</rh-tag>
-  <rh-tag variant="outline" color="green">Green <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
-  <rh-tag variant="outline" color="cyan" icon="circle-info" icon-set="fas">Cyan</rh-tag>
-  <rh-tag variant="outline" color="blue" icon="circle-info" icon-set="fas">Blue</rh-tag>
-  <rh-tag variant="outline" color="purple" icon="circle-info" icon-set="fas">Purple <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
-  <rh-tag variant="outline" icon="circle-info" icon-set="fas">Gray</rh-tag>
-</section>
diff --git a/elements/rh-tag/demo/variants.html b/elements/rh-tag/demo/variants.html
@@ -0,0 +1,51 @@
+<section>
+  <h2>Filled Color</h2>
+  <rh-tag color="red">Red <span class="visually-hidden">Hat</span></rh-tag>
+  <rh-tag color="orange">Orange</rh-tag>
+  <rh-tag color="green">Green</rh-tag>
+  <rh-tag color="cyan">Cyan</rh-tag>
+  <rh-tag color="blue">Blue</rh-tag>
+  <rh-tag color="purple">Purple</rh-tag>
+  <rh-tag>Gray</rh-tag>
+</section>
+
+<section>
+  <h2>Outline</h2>
+  <rh-tag variant="outline" color="red">Red <span class="visually-hidden">Hat</span></rh-tag>
+  <rh-tag variant="outline" color="orange">Orange</rh-tag>
+  <rh-tag variant="outline" color="green">Green</rh-tag>
+  <rh-tag variant="outline" color="cyan">Cyan</rh-tag>
+  <rh-tag variant="outline" color="blue">Blue</rh-tag>
+  <rh-tag variant="outline" color="purple">Purple</rh-tag>
+  <rh-tag variant="outline">Gray</rh-tag>
+</section>
+
+<section>
+  <h2>Filled Color With Icon</h2>
+  <rh-tag color="red" icon="circle-info" icon-set="fas">Red</rh-tag>
+  <rh-tag color="orange" icon="circle-info" icon-set="fas">Orange</rh-tag>
+  <rh-tag color="green">Green <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
+  <rh-tag color="cyan" icon="circle-info" icon-set="fas">Cyan</rh-tag>
+  <rh-tag color="blue" icon="circle-info" icon-set="fas">Blue</rh-tag>
+  <rh-tag color="purple" icon="circle-info" icon-set="fas">Purple <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
+  <rh-tag icon="circle-info" icon-set="fas">Gray</rh-tag>
+</section>
+
+
+<section>
+  <h2>Filled Color With Icon</h2>
+  <rh-tag variant="outline" color="red" icon="circle-info" icon-set="fas">Red</rh-tag>
+  <rh-tag variant="outline" color="orange" icon="circle-info" icon-set="fas">Orange</rh-tag>
+  <rh-tag variant="outline" color="green">Green <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
+  <rh-tag variant="outline" color="cyan" icon="circle-info" icon-set="fas">Cyan</rh-tag>
+  <rh-tag variant="outline" color="blue" icon="circle-info" icon-set="fas">Blue</rh-tag>
+  <rh-tag variant="outline" color="purple" icon="circle-info" icon-set="fas">Purple <svg slot="icon" height="1em" width: "1em" fill="currentColor" viewBox="0 0 512 512" aria-hidden="true" role="img"><path d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"></path></svg></rh-tag>
+  <rh-tag variant="outline" icon="circle-info" icon-set="fas">Gray</rh-tag>
+</section>
+
+<link rel="stylesheet" href="demo.css">
+<script type="module">
+  import '@rhds/elements/rh-tag/rh-tag.js';
+</script>
+
+
diff --git a/elements/rh-tag/docs/00-overview.md b/elements/rh-tag/docs/00-overview.md
@@ -4,35 +4,38 @@
 {{ tagName | getElementDescription }}
 
 {% example palette="light",
-           width=404,
            alt="Two rows of tags; the top row is ‘Filled’ tags and the bottom row is ‘Unfilled’ tags; from left to right, both rows of tags include red, orange, green, cyan, blue, purple, and gray colors",
            src="tag-sample-element.png" %}
 {% endsection %}
 
 {% section %}
+
+<hgroup>
+
 ## Sample element
-  <section>
-    <h2>Filled</h2>
-    <rh-tag color="red">
-      <span>Red <span class="visually-hidden-class">Hat</span></span></rh-tag>
-    <rh-tag color="orange">Orange</rh-tag>
-    <rh-tag color="green">Green</rh-tag>
-    <rh-tag color="cyan">Cyan</rh-tag>
-    <rh-tag color="blue">Blue</rh-tag>
-    <rh-tag color="purple">Purple</rh-tag>
-    <rh-tag>Gray</rh-tag>
-  </section>
-  <section>
-    <h2>Unfilled</h2>
-    <rh-tag variant="outline" color="red">
-      <span>Red <span class="visually-hidden-class">Hat</span></span></rh-tag>
-    <rh-tag variant="outline" color="orange">Orange</rh-tag>
-    <rh-tag variant="outline" color="green">Green</rh-tag>
-    <rh-tag variant="outline" color="cyan">Cyan</rh-tag>
-    <rh-tag variant="outline" color="blue">Blue</rh-tag>
-    <rh-tag variant="outline" color="purple">Purple</rh-tag>
-    <rh-tag variant="outline">Gray</rh-tag>
-  </section>
+### Filled
+
+</hgroup>
+
+<rh-tag color="red">Red<span class="visually-hidden">Hat</span></rh-tag>
+<rh-tag color="orange">Orange</rh-tag>
+<rh-tag color="green">Green</rh-tag>
+<rh-tag color="cyan">Cyan</rh-tag>
+<rh-tag color="blue">Blue</rh-tag>
+<rh-tag color="purple">Purple</rh-tag>
+<rh-tag>Gray</rh-tag>
+
+### Unfilled
+
+<rh-tag variant="outline" color="red">Red<span 
+class="visually-hidden">Hat</span></rh-tag>
+<rh-tag variant="outline" color="orange">Orange</rh-tag>
+<rh-tag variant="outline" color="green">Green</rh-tag>
+<rh-tag variant="outline" color="cyan">Cyan</rh-tag>
+<rh-tag variant="outline" color="blue">Blue</rh-tag>
+<rh-tag variant="outline" color="purple">Purple</rh-tag>
+<rh-tag variant="outline">Gray</rh-tag>
+
 {% endsection %}
 
 {% section %}
@@ -53,6 +56,6 @@
 
 {% section %}
 
-{% repoStatus %}
+{% repoStatus type="Element" %}
 
-{% endsection %}
+{% endsection %}
diff --git a/elements/rh-tag/docs/10-style.md b/elements/rh-tag/docs/10-style.md
@@ -11,13 +11,14 @@ border.
 
 ### Anatomy
 {% example palette="light",
-           width=554,
            alt="Anatomy of a tag with annotations; number 1 is pointing to the container, number 2 is pointing to the text label, and number 3 is pointing to an optional icon",
            src="../tag-anatomy.png" %}
 
 1. Container and border
-1. Text label
-1. Optional icon
+2. Text label
+3. Optional icon
+{.example-notes}
+
 
 ### Variations
 
@@ -26,57 +27,50 @@ colors. Both variations include an optional slot for displaying a small icon to
 the left of the text label.
 
 {% example palette="light",
-           width=584,
            alt="Tags with text describing each variation",
            src="../tag-variations.png" %}
 
-### Theme
+## Theme
 
 Both variations are available in the light theme. There is an unfilled white tag 
 available in the dark theme if necessary.
 
-#### Light Theme
+### Light Theme
 
 {% example palette="light",
-        width=404,
         alt="Light theme tag examples",
         src="../tag-theme-light.png" %}
 
-#### Dark Theme
+### Dark Theme
 {% example palette="darkest",
-        width=53,
         alt="Dark theme tag examples",
         src="../tag-theme-dark.png" %}
 
-### Configuration
+## Configuration
 
 Both variations have the same height and border radius.
 
 {% example palette="light",
-        width=473,
         alt="How a tag is constructed showing border radius, icon, and height details",
         src="../tag-configuration.png" %}
 
-### Space
+## Space
 
 {% example palette="light",
-        width=528,
         alt="Light theme tag spacing within the element and when grouped",
         src="../tag-space-theme-light.png" %}
 
 {% example palette="darkest",
-        width=71,
         alt="Light theme tag spacing within the element",
         src="../tag-space-theme-dark.png" %}
 
-| Property                                 | Current value  |
-| ---------------------------------------- | -------------- |
-| ![4 pixel spacer](../tag-4px-spacer.png) | 4px<br>0.25rem |
-| ![8 pixel spacer](../tag-8px-spacer.png) | 8px<br>0.5rem  |
-
-{style="width:100%"}
+{% spacerTokensTable 
+    headline='',
+    caption='',
+    tokens="--rh-space-xs, --rh-space-md" %}
+{% endspacerTokensTable %}
 
-### Interaction states
+## Interaction states
 
 A tag includes only text and an optional icon and is not interactive right now.