Merge branch 'main' into docs/cdn-import-maps

.changeset/lemon-llamas-kiss.md

@@ -0,0 +1,21 @@
+---
+"@rhds/elements": minor
+---
+
+`rh-card`: `header` slot now displays items vertically instead of stacked, allowing for more than one item to display in the header.
+
+Example:
+
+```html
+<rh-card>
+  <img slot="header" src="kitten-400x250.jpeg"></img>
+  <h2 slot="header">Headline, sm</h2>
+  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+     Nullam eleifend 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">
+    <a href="#">Call to action</a>
+  </rh-cta>
+</rh-card>
+```

.changeset/strong-pens-boil.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added `<rh-timestamp>`.
+
+Provides consistent formats for displaying date and time values.
+
+```html
+<rh-timestamp date="Tue Aug 09 2006 14:57:00 GMT-0400">Tue Aug 09 2006 14:57:00 GMT-0400</rh-timestamp>
+```

CHANGELOG.md

@@ -1,5 +1,21 @@
 # @rhds/elements
 
+## 1.1.1
+
+### Patch Changes
+
+- ab339ac6: `<rh-tag>`: outline variant should now get the correct background styles added.
+- f79543b7: `<rh-avatar>`: uses SVG for default images instead of much larger base-64 PNG images
+- 77fa329a: `<rh-audio-player>`: Added @csspart docs.
+- f0f66ec2: `<rh-tabs>`: fixed vertical tabs text alignment
+- 716b52d1: `<rh-cta>` and other elements: color context support
+- cf8ee6cb: `<rh-audio-player>`: corrected subscribe slot documentation.
+- d709896f: `<rh-cta>`: corrected layout of icon brick variant
+- d709896f: `<rh-cta>`: ensured entire CTA is clickable
+- d709896f: `<rh-cta>`: fix a style bug which affects CTA links at narrow widths
+- ff90f4d6: `<rh-footer>`: prevent an error when using footer and react in certain chrome versions
+- 44a444a5: `<rh-navigation-secondary>`: corrected navigation bar height for small and large viewports'
+
 ## 1.1.0
 
 ### Minor Changes

docs/_data/relatedItems.yaml

@@ -82,6 +82,9 @@ rh-tag:
  - rh-avatar
  - rh-badge
  - rh-button
+rh-timestamp:
+ - rh-blockquote
+ - rh-statistic
 rh-tooltip: 
  - rh-footer
  - form

docs/_includes/feedback.html

@@ -1,28 +1,15 @@
-{% set searchName = doc.tagName if doc.tagName else (title | slug) %}
-{% set related = searchName | relatedItems %}
-<div class="multi-column--min-300-wide section section--palette-default container feedback">
-  {% section %}
-    {% if related.length %}
-      <h2>Related elements or patterns</h2>
-      <ul id="related-items-list">{% for item in related %}
-        <li>
-          <a href="{{ item.url}}">{{ item.text }}</a>
-        </li>{% endfor %}
-      </ul>
-    {% elseif title === 'Patterns' %}
-      <h2>Elements</h2>
-      <p>To learn how to use our elements in your designs, visit the <a href="{{ '/elements/' | url }}">Elements</a> section.</p>
-    {% else %}
-      <h2>Patterns</h2>
-      <p>To learn how to use our patterns in your designs, visit the <a href="{{ '/patterns/' | url }}">Patterns</a> section.</p>
-    {% endif %}
-  {% endsection %}
+{% set related = (doc.tagName if doc.tagName else (title | slug)) | relatedItems %}
 
-  {% section %}
-    <h2>Feedback</h2>
-    <p>
-      To give feedback about anything on this page,
-      <a href="https://github.com/RedHat-UX/red-hat-design-system/discussions">contact us</a>.
-    </p>
-  {% endsection %}
-</div>
+{% feedback %}
+  {% if related.length %}
+    <h2>Related elements or patterns</h2>
+    <ul id="related-items-list">{% for item in related %}
+      <li>
+        <a href="{{ item.url}}">{{ item.text }}</a>
+      </li>{% endfor %}
+    </ul>
+  {% else %}
+    <h2>Other libraries</h2>
+    <p>To learn more about our other libraries, visit <a href="/get-started/">this page</a>.</p>
+  {% endif %}
+{% endfeedback %}

docs/_includes/layout-tokens.njk

@@ -2,6 +2,71 @@
 layout: layout-base.njk
 ---
 
+<style>
+  .l-main__header .container.header {
+    display: flex;
+    align-items: normal;
+    justify-content: space-between;
+    column-gap: var(--rh-space-2xl);
+    flex-wrap: wrap;
+  }
+
+  #search-tokens {
+    flex-basis: 50%;
+    align-items: center;
+    display: flex;
+    margin-top: 0.5rem;
+  }
+
+  #search-input {
+    flex: 1 0 auto;
+  }
+
+  .results-section {
+    margin-block-end: var(--rh-space-4xl) !important;
+  }
+
+  #results-list {
+    margin-left: 0;
+    padding: 0 0 0 1.5rem;
+  }
+
+  #results-list li {
+    margin-bottom: 1rem;
+    padding-left: 1rem;
+    list-style-position: outside;
+  }
+
+  #results-list li::marker {
+    color: var(--rh-color-gray-50);
+  }
+
+  #collections {
+    display: grid;
+    gap: var(--rh-space-lg);
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+  }
+
+  .token-category::part(container) {
+    text-transform: capitalize;
+    display: inline-block;
+    width: 100%;
+    text-align: center;
+  }
+
+  rh-cta.token-category:not([hidden]) {
+    display: flex;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  @media (min-width: 768px) {
+    .l-main__header .container.header {
+      flex-wrap: nowrap;
+    }
+  }
+</style>
+
 {% include 'component/header.njk' %}
 
 <main class="l-main">
@@ -24,80 +89,5 @@ layout: layout-base.njk
   </article>
 </main>
 
-<script type="module">
-  import '@rhds/elements/rh-cta/rh-cta.js';
-  import '@rhds/elements/rh-card/rh-card.js';
-  import '/assets/uxdot-search.js';
-  document
-    .getElementById('search-input')
-    .addEventListener('focus', async function() {
-      const { init } = await import('/assets/search-tokens.js');
-      init(document.getElementById('search-tokens'));
-    }, { once: true });
-</script>
-
-<style>
-
-.l-main__header .container.header {
-  display: flex;
-  align-items: normal;
-  justify-content: space-between;
-  column-gap: var(--rh-space-2xl);
-  flex-wrap: wrap;
-}
-
-#search-tokens {
-  flex-basis: 50%;
-  align-items: center;
-  display: flex;
-  margin-top: 0.5rem;
-}
-
-#search-input {
-  flex: 1 0 auto;
-}
+<script type="module" src="/assets/tokens/tokens.js"></script>
 
-.results-section {
-  margin-block-end: var(--rh-space-4xl) !important;
-}
-
-#results-list {
-  margin-left: 0;
-  padding: 0 0 0 1.5rem;
-}
-
-#results-list li {
-  margin-bottom: 1rem;
-  padding-left: 1rem;
-  list-style-position: outside;
-}
-
-#results-list li::marker {
-  color: var(--rh-color-gray-50);
-}
-
-#collections {
-  display: grid;
-  gap: var(--rh-space-lg);
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-}
-
-.token-category::part(container) {
-  text-transform: capitalize;
-  display: inline-block;
-  width: 100%;
-  text-align: center;
-}
-
-rh-cta.token-category:not([hidden]) {
-  display: flex;
-  width: 100%;
-  max-width: 100%;
-}
-
-@media (min-width: 768px) {
-  .l-main__header .container.header {
-    flex-wrap: nowrap;
-  }
-}
-</style>

docs/_plugins/rhds.cjs

@@ -146,7 +146,8 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
     'node_modules/element-internals-polyfill': '/assets/packages/element-internals-polyfill',
   });
 
-  eleventyConfig.addPassthroughCopy(getFilesToCopy(), {
+  const filesToCopy = getFilesToCopy();
+  eleventyConfig.addPassthroughCopy(filesToCopy, {
     filter: /** @param {string} path */path => !path.endsWith('.html'),
   });
 

docs/_plugins/shortcodes.cjs

@@ -4,10 +4,11 @@ const RenderInstallation = require('./shortcodes/renderInstallation.cjs');
 const ExampleImage = require('./shortcodes/example.cjs');
 const Cta = require('./shortcodes/cta.cjs');
 const Alert = require('./shortcodes/alert.cjs');
-const Section = require('./shortcodes/section.cjs');
+const { Section } = require('./shortcodes/section.cjs');
 const Demo = require('./shortcodes/demo.cjs');
 const SpacerTokensTable = require('./shortcodes/spacerTokensTable.cjs');
 const TokensTable = require('./shortcodes/tokensTable.cjs');
+const Feedback = require('./shortcodes/feedback.cjs');
 const renderCodeDocs = require('./shortcodes/renderCodeDocs.cjs');
 
 /** @typedef {import('@patternfly/pfe-tools/11ty/DocsPage').DocsPage} DocsPage */
@@ -18,17 +19,17 @@ const renderCodeDocs = require('./shortcodes/renderCodeDocs.cjs');
  * @property {object} page
  * @property {object} eleventy
  */
-
 module.exports = function(eleventyConfig) {
+  eleventyConfig.addPlugin(Section);
   eleventyConfig.addPlugin(RepoStatus);
   eleventyConfig.addPlugin(Playground);
   eleventyConfig.addPlugin(RenderInstallation);
   eleventyConfig.addPlugin(ExampleImage);
   eleventyConfig.addPlugin(Cta);
   eleventyConfig.addPlugin(Alert);
-  eleventyConfig.addPlugin(Section);
   eleventyConfig.addPlugin(Demo);
   eleventyConfig.addPlugin(SpacerTokensTable);
   eleventyConfig.addPlugin(TokensTable);
+  eleventyConfig.addPlugin(Feedback);
   eleventyConfig.addPlugin(renderCodeDocs);
 };