docs: last minute polish for caterpie (#1413)

- remove duplicated code from base layout - move uxdot- elements to their own dir - correct usage of rh-card variants in docs and demos - format some source code in audio player - format the README
RedHat-UX · Jan 11, 2024 · 5264b3e · 5264b3e
1 parent baa3820
commit 5264b3e
Show file tree

Hide file tree

Showing 9 changed files with 51 additions and 30 deletions.
diff --git a/README.md b/README.md
@@ -1,17 +1,14 @@
 # Red Hat Design System
 
-[Documentation](https://ux.redhat.com), [design tokens](https://red-hat-design-tokens.netlify.app),
-and [web components](https://ux.redhat.com/elements/) for building uniform 
-experiences with the Red Hat brand.
+[Documentation][docs], [design tokens][tokens], and [web components][elements] for building uniform experiences with the Red Hat brand.
 
 ## 🎨 For Designers
 
 RHDS provides Adobe XD libraries and design kits to aid in your design work.
 
 ## 💻 For Developers
 
-RHDS provides a collection of ready-made, framework-agnostic web components with Red Hat branding, 
-user experience, accessibility, and style guidelines built in.
+RHDS provides a collection of ready-made, framework-agnostic web components with Red Hat branding, user experience, accessibility, and style guidelines built in.
 
 ```html
 <rh-card>
@@ -25,5 +22,11 @@ user experience, accessibility, and style guidelines built in.
 
 ## Contributions are Welcome
 
-Would you like to contribute to the **documentation** or **design specs**? Read [the site contributing guide](https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DESIGN.md).  
-Would you like to contribute to **component development**? Read [the developer contributing guide](https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DEV.md).
+Would you like to contribute to the **documentation** or **design specs**? Read [the site contributing guide][contributing].  
+Would you like to contribute to **component development**? Read [the developer contributing guide][development].
+
+[docs]: https://ux.redhat.com
+[tokens]: https://red-hat-design-tokens.netlify.app
+[elements]: https://ux.redhat.com/elements/
+[contributing]: https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DESIGN.md
+[development]: https://github.com/RedHat-UX/red-hat-design-system/tree/main/CONTRIBUTING_DEV.md
diff --git a/docs/_includes/layout-base.njk b/docs/_includes/layout-base.njk
@@ -43,11 +43,6 @@
     import '@rhds/elements/{{tag}}/{{tag}}.js';
   </script>
   {% endfor %}
-  <script type="module">
-    import { PfIcon } from '@patternfly/elements/pf-icon/pf-icon.js';
-    PfIcon.getIconUrl = (set, icon) =>
-      new URL(`/assets/packages/@patternfly/elements/pf-icon/icons/${set}/${icon}.js`, location.origin);
-  </script>
   <script type="module">
     // As soon as the DOM is ready, toggle JS class
     document.documentElement.classList.remove('no-js');
@@ -59,6 +54,9 @@
     PfIcon.getIconUrl = (set, icon) =>
       new URL(`/assets/packages/@patternfly/elements/pf-icon/icons/${set}/${icon}.js`, location.origin);
   </script>
+  <script type="module">
+  if (!('shadowRootMode' in HTMLTemplateElement.prototype)) { import('/assets/dsd-polyfill.js'); }
+  </script>
 </head>
 <body id="top" class="page {{ extraPageClasses }}" unresolved>
   <div class="body-inner">

diff --git a/docs/assets/uxdot-search.js → docs/assets/elements/uxdot-search.js b/docs/assets/uxdot-search.js → docs/assets/elements/uxdot-search.js
diff --git a/docs/assets/tokens/tokens.js b/docs/assets/tokens/tokens.js
@@ -5,7 +5,7 @@ import '@rhds/elements/rh-tooltip/rh-tooltip.js';
 import '@rhds/elements/rh-footer/rh-footer-universal.js';
 
 // search bar
-import '/assets/uxdot-search.js';
+import '/assets/elements/uxdot-search.js';
 
 document
   .getElementById('search-input')

diff --git a/docs/patterns/card/index.md b/docs/patterns/card/index.md
@@ -81,7 +81,7 @@ it's near. Several cards can be used together to group related information.
     elit sed est egestas, a sollicitudin mauris tincidunt. Pellentesque vel 
     dapibus risus. Nullam aliquam felis orci, eget cursus mi lacinia quis. 
     Vivamus at felis sem.</p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -96,7 +96,7 @@ it's near. Several cards can be used together to group related information.
     dapibus risus. Nullam aliquam felis orci, eget cursus milacinia quis. 
     Vivamus at felis sem.
   </p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -111,7 +111,7 @@ it's near. Several cards can be used together to group related information.
     aliquam felis orci, eget cursus mi
     lacinia quis. Vivamus at felis sem.
   </p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -127,7 +127,7 @@ it's near. Several cards can be used together to group related information.
     aliquam felis orci, eget cursus mi
     lacinia quis. Vivamus at felis sem.
   </p>
-  <rh-cta priority="primary" slot="footer">
+  <rh-cta variant="primary" slot="footer">
     <a href="#">Call to action</a>
   </rh-cta>
 </rh-card>
@@ -139,7 +139,7 @@ it's near. Several cards can be used together to group related information.
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit 
     libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id 
     elit. Donec id elit non mi porta gravida at eget metus.</p>
-  <rh-cta priority="primary" slot="footer"><a href="#">Footer</a></rh-cta>
+  <rh-cta variant="primary" slot="footer"><a href="#">Footer</a></rh-cta>
 </rh-card>
 
 ## Image title bar

diff --git a/elements/rh-audio-player/rh-audio-player.ts b/elements/rh-audio-player/rh-audio-player.ts
@@ -618,7 +618,7 @@ export class RhAudioPlayer extends LitElement {
             <button id="close"
                     aria-label="${this.#translation.get('close')}"
                     class="toolbar-button"
-                    ?disabled=${!this.#mediaElement}
+                    ?disabled="${!this.#mediaElement}"
                     aria-controls="panel"
                     @click="${this.#selectOpenPanel}"
                     @keydown="${this.#onCloseKeydown}">

diff --git a/elements/rh-card/demo/color-context.html b/elements/rh-card/demo/color-context.html
@@ -6,7 +6,7 @@ <h2 slot="header">Default card, slotted content and footer</h2>
       sollicitudin mauris tincidunt. Pellentesque vel dapibus risus. Nullam aliquam felis orci, eget cursus mi
       lacinia quis. Vivamus at felis sem.
     </p>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="#">Call to action</a>
     </rh-cta>
   </rh-card>
@@ -17,7 +17,7 @@ <h2 slot="header">Slotted title, content, and footer</h2>
     <rh-context-picker id="picker"
                        target="custom"
                        allow="darkest, darker, lighter, lightest"></rh-context-picker>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="#">Call to action</a>
     </rh-cta>
   </rh-card>
@@ -38,7 +38,7 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
       at felis
       sem.
     </p>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="#">Call to action</a>
     </rh-cta>
   </rh-card>

diff --git a/elements/rh-card/demo/grid.html b/elements/rh-card/demo/grid.html
@@ -2,7 +2,7 @@
   <rh-card>
     <h2 slot="header">Grid Card</h2>
     <p>In a grid, cards will fill all the available vertical space.</p>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="#">Call to action</a>
     </rh-cta>
   </rh-card>
@@ -16,7 +16,7 @@ <h2 slot="header">Longer Content</h2>
       content than its neighbour, and thus fill more vertical space
       in it's body, the footers should still be aligned.
     </p>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="#">Call to action</a>
     </rh-cta>
   </rh-card>
@@ -27,14 +27,14 @@ <h2 slot="header">Grid Card</h2>
       These kinds of situations should best be avoided. See the
       guidelines for more information.
     </p>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
     </rh-cta>
   </rh-card>
 
   <rh-card>
     <p>This card has no header and short body content.</p>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="#">Call to action</a>
     </rh-cta>
   </rh-card>
@@ -52,7 +52,7 @@ <h2 slot="header">No footer, More Content</h2>
 
   <rh-card>
     <h2 slot="header">No body</h2>
-    <rh-cta priority="primary" slot="footer">
+    <rh-cta variant="primary" slot="footer">
       <a href="https://ux.redhat.com/elements/card/guidelines/#vertical-height">Read the Guidelines</a>
     </rh-cta>
   </rh-card>

diff --git a/elements/rh-tabs/demo/color-context.html b/elements/rh-tabs/demo/color-context.html
@@ -25,11 +25,30 @@
 
   <rh-tabs>
     <rh-tab id="users" slot="tab">Users</rh-tab>
-    <rh-tab-panel>Users</rh-tab-panel>
+    <rh-tab-panel>
+      <p>The control of <a href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html/system_administrators_guide/ch-managing_users_and_groups">users and groups</a> is a core
+        element of Red Hat Enterprise Linux system administration. This chapter explains how to add, manage, and delete users and groups in the graphical user
+        interface and on the command line, and covers advanced topics, such as creating group directories. </p>
+      <rh-cta>
+        <a href="https://access.redhat.com/documentation/en-us/red_hat_enterprise_linux/7/html/system_administrators_guide/ch-managing_users_and_groups">Read about user management</a>
+      </rh-cta>
+    </rh-tab-panel>
     <rh-tab slot="tab">Containers</rh-tab>
-    <rh-tab-panel>Containers <a href="#">Focusable element</a></rh-tab-panel>
+    <rh-tab-panel>
+      <p>Containers are technologies that allow the packaging and isolation of applications with their entire runtime environment—all of the files necessary to run. This makes it easy to move the contained application between environments (dev, test, production, etc.) while retaining full functionality. Containers are also an important part of <a href="/en/topics/security">IT security</a>. By <a href="/en/topics/security/container-security">building security into the container pipeline</a>&nbsp;and defending infrastructure, containers stay reliable, scalable, and trusted. You can also easily move the containerized application between public, private and hybrid cloud environments and data centers (or on-premises) with consistent behavior and functionality.</p>
+      <rh-cta>
+        <a href="https://www.redhat.com/en/topics/containers/whats-a-linux-container">Continue reading</a>
+      </rh-cta>
+    </rh-tab-panel>
     <rh-tab slot="tab">Database</rh-tab>
-    <rh-tab-panel>Database</rh-tab-panel>
+    <rh-tab-panel>
+      <rh-context-provider color-palette="lightest" style="background:var(--rh-color-surface-lightest, #ffffff)">
+        <p>Modern application development teams must use multiple cloud databases to access various features and capabilities. As database usage continues to increase, it is difficult using and manage this multitude of databases. Red Hat commissioned Forrester Consulting found that simplified managed database access solutions help decision-makers maximize the impact, mitigate the complexity of their database-as-a-service (DBaaS) solutions, and manage their diverse landscape of databases.</p>
+        <rh-cta>
+          <a href="https://www.redhat.com/rhdc/managed-files/cl-maximize-with-a-managed-database-access-solution-analyst-material-f32006-202208-en.pdf">Download</a>
+        </rh-cta>
+      </rh-context-provider>
+    </rh-tab-panel>
     <rh-tab slot="tab">Servers</rh-tab>
     <rh-tab-panel>Servers</rh-tab-panel>
     <rh-tab slot="tab">Cloud</rh-tab>
@@ -38,6 +57,7 @@
 </rh-context-demo>
 
 <script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
   import '@rhds/elements/rh-tabs/rh-tabs.js';
   import '@patternfly/elements/pf-icon/pf-icon.js';
   import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';