Merge branch 'main' into docs/vpn-links

.changeset/curly-pets-jog.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tile>`: fixed cursor when arrow is hovered

.eslintignore

@@ -37,6 +37,7 @@ docs/pfe.min.js
 docs/bundle.js
 docs/core
 docs/components
+docs/assets/playgrounds
 node_modules
 
 core/pfe-sass/docs/index.html

.gitignore

@@ -1,10 +1,12 @@
 # Dependencies
 node_modules
 .wireit
+.rollup.cache
 
 # Ignore compiled files in webroot
 _site
 docs/pfe.min*
+docs/assets/playgrounds/
 
 # Build artifacts
 elements/*/*.js
@@ -92,3 +94,4 @@ $RECYCLE.BIN/
 *.lnk
 
 !declaration.d.ts
+docs/assets/playgrounds/rh-playground.js

CHANGELOG.md

@@ -1,5 +1,144 @@
 # @rhds/elements
 
+## 1.2.0
+
+### Minor Changes
+
+- 35c28e72: Added `<rh-tile>`.
+
+  Tile creates a component that can be used in place of a link, checkbox, or radio button selection.
+
+  ```html
+  <rh-tile-group radio>
+    <rh-tile checked>
+      <div slot="title">Title</div>
+      <h2 slot="headline"><a href="#top">Link</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <div slot="footer">Suspendisse eu turpis elementum</div>
+    </rh-tile>
+
+    <rh-tile>
+      <div slot="title">Title</div>
+      <h2 slot="headline"><a href="#top">Link</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <div slot="footer">Suspendisse eu turpis elementum</div>
+    </rh-tile>
+
+    <rh-tile>
+      <div slot="title">Title</div>
+      <h2 slot="headline"><a href="#top">Link</a></h2>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+      <div slot="footer">Suspendisse eu turpis elementum</div>
+    </rh-tile>
+  </rh-tile-group>
+  ```
+
+- 9d3c7b09: ✨ Added `<rh-table>`.
+
+  A table is a container for displaying information. It allows a user to scan, examine, and compare large amounts of data.
+
+  ```html
+  <rh-table>
+    <table>
+      <caption>
+        Concerts
+      </caption>
+      <colgroup>
+        <col />
+        <col />
+        <col />
+      </colgroup>
+      <thead>
+        <tr>
+          <th scope="col" data-label="Date">Date</th>
+          <th scope="col" data-label="Event">
+            Event<rh-sort-button></rh-sort-button>
+          </th>
+          <th scope="col" data-label="Venue">
+            Venue<rh-sort-button></rh-sort-button>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td data-label="Date">12 February</td>
+          <td data-label="Event">Waltz with Strauss</td>
+          <td data-label="Venue">Main Hall</td>
+        </tr>
+        <tr>
+          <td data-label="Date">24 March</td>
+          <td data-label="Event">The Obelisks</td>
+          <td data-label="Venue">West Wing</td>
+        </tr>
+        <tr>
+          <td data-label="Date">14 April</td>
+          <td data-label="Event">The What</td>
+          <td data-label="Venue">Main Hall</td>
+        </tr>
+      </tbody>
+    </table>
+    <small slot="summary">Dates and venues subject to change.</small>
+  </rh-table>
+  ```
+
+- 39e76fc6: `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>
+  ```
+
+- c9780fc2: ✨ 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
+  >
+  ```
+
+### Patch Changes
+
+- f4fcb1f3: `<rh-navigation-secondary>`: improved keyboard navigation
+- 681519b5: `<rh-avatar>`:
+  `<rh-code-block>`:
+  `<rh-navigation-secondary>`: Updated custom elements manifest summaries
+- ed6ff92e: `<rh-navigation-secondary>`: corrected and updated support for current page indicator
+- a6ca3987: `<rh-cta>`: `brick` variants are now full width.
+
+  `<rh-cta variant="brick">` should only be used within grids. Check your layouts to make sure they adhere to the guidelines.
+
+- 0c2d42b1: `<rh-tabs>`: corrects the custom element manifest's event name for the `expand` event
+- 7e2c9bb6: `<rh-cta>`: adds `color-palette` attribute back with deprecation notice
+
+## 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/playgrounds.cjs

@@ -53,9 +53,26 @@ function demoPaths(content, pathname) {
   }
 }
 
+function isModuleScript(node) {
+  return (
+    node.tagName === 'script' &&
+    node.attrs.some(x => x.name === 'type' && x.value === 'module') &&
+    node.attrs.some(x => x.name === 'src')
+  );
+}
+
+function isStyleLink(node) {
+  return (
+    node.tagName === 'link' &&
+    node.attrs.some(x => x.name === 'rel' && x.value === 'stylesheet') &&
+    node.attrs.some(x => x.name === 'href')
+  );
+}
+
 module.exports = async function(data) {
   performance.mark('playgrounds-start');
-  const { parseHTML } = await import('linkedom');
+  const { parseFragment, serialize } = await import('parse5');
+  const Tools = await import('@parse5/tools');
 
   const demoManifests = groupBy('primaryElementName', data.demos);
 
@@ -74,13 +91,22 @@ module.exports = async function(data) {
 
       const demoSource = await fs.readFile(demo.filePath, 'utf8');
 
-      const { document } = parseHTML(demoSource);
+      const fragment = parseFragment(demoSource);
 
       const baseCssPathPrefix = demo.filePath.match(DEMO_FILEPATH_IS_MAIN_DEMO_RE) ? '' : '../';
-      const baseCssLink = document.createElement('link');
-      baseCssLink.rel = 'stylesheet';
-      baseCssLink.href = `${baseCssPathPrefix}rhds-demo-base.css`;
-      document.head.append(baseCssLink);
+
+      Tools.spliceChildren(
+        fragment,
+        Infinity,
+        0,
+        Tools.createCommentNode('playground-fold'),
+        Tools.createElement('link', {
+          rel: 'stylesheet',
+          href: `${baseCssPathPrefix}rhds-demo-base.css`,
+        }),
+        Tools.createTextNode('\n\n'),
+        Tools.createCommentNode('playground-fold-end'),
+      );
 
       const filename = getDemoFilename(demo);
 
@@ -99,14 +125,20 @@ module.exports = async function(data) {
       fileMap.set(filename, {
         contentType: 'text/html',
         selected: isMainDemo,
-        content: demoPaths(document.toString(), demo.filePath),
+        content: demoPaths(serialize(fragment), demo.filePath),
         label: demo.title,
       });
 
+      const modulesAndLinks = Tools.queryAll(fragment, node =>
+        Tools.isElementNode(node) &&
+          isModuleScript(node) ||
+          isStyleLink(node));
+
       // register demo script and css resources
-      for (const el of document.querySelectorAll('script[type=module][src], link[rel=stylesheet][href]')) {
-        const isLink = el.localName === 'link';
-        const subresourceURL = isLink ? el.href : el.src;
+      for (const el of modulesAndLinks) {
+        const isLink = el.tagName === 'link';
+        const attrs = Object.fromEntries(el.attrs.map(({ name, value }) => [name, value]));
+        const subresourceURL = isLink ? attrs.href : attrs.src;
         if (!subresourceURL.startsWith('http')) {
           const subresourceFileURL = !subresourceURL.startsWith('/')
             // non-tabular tern

docs/_data/relatedItems.yaml

@@ -74,6 +74,8 @@ rh-subnav:
  - rh-navigation
  - rh-navigation-secondary
  - skip-navigation
+rh-table:
+ - rh-code-block
 rh-tabs: 
  - rh-jump-links
  - rh-pagination
@@ -82,6 +84,13 @@ rh-tag:
  - rh-avatar
  - rh-badge
  - rh-button
+rh-tile:
+ - rh-cta
+ - rh-card
+ - form
+rh-timestamp:
+ - rh-blockquote
+ - rh-statistic
 rh-tooltip: 
  - rh-footer
  - form
@@ -93,7 +102,7 @@ announcement:
 disclosure: 
  - rh-accordion
  - filter
- - form
+ - rh-form
 filter: 
  - rh-accordion
  - disclosure

docs/_includes/accessibility/1.3.1-A.md

@@ -0,0 +1 @@
+- [SC 1.3.1 Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships.html) (Level A)

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/_plugins/rhds.cjs

@@ -198,6 +198,10 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
     return related;
   });
 
+  eleventyConfig.addFilter('makeSentenceCase', function(value) {
+    return value.charAt(0).toUpperCase() + value.slice(1).toLowerCase();
+  });
+
   eleventyConfig.addCollection('elementDocs', async function(collectionApi) {
     const { pfeconfig } = eleventyConfig?.globalData ?? {};
     /**
@@ -215,6 +219,7 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
         capitalize(filePath.split(path.sep).pop()?.split('.').shift()?.replace(/^\d+-/, '') ?? '');
       const pageSlug = slugify(pageTitle, { strict: true, lower: true });
       /** e.g. `/elements/call-to-action/code/index.html` */
+      const overviewHref = `/elements/${slug}/`;
       const permalink =
           pageSlug === 'overview' ? `/elements/${slug}/index.html`
         : `/elements/${slug}/${pageSlug}/index.html`;
@@ -232,6 +237,7 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
         screenshotPath,
         permalink,
         href,
+        overviewHref
       };
     }