Merge branch 'staging/charmander' into docs/card-headings

.changeset/calm-fireants-kneel.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added <rh-health-index>
+
+Health index grades the health or security level of something.
+
+```html
+<rh-health-index grade="A">A</rh-health-index>
+```

.changeset/eighty-peas-joke.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tile>`: corrected border color token

.changeset/few-buckets-cross.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-cta>`: lazy-load the icon component dependency

.changeset/forty-seals-develop.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tag>`: update green border color

.changeset/good-planets-yell.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-cta>`:  Changed focus states to mimic hover states + an additonal outline.

.changeset/mighty-vans-dress.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": major
+---
+`<rh-cta>`: Removed previously-deprecated `color-palette` attribute

.changeset/mighty-vans-skate.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": major
+---
+`<rh-cta>`: Deprecated `rhCta.cta` public property. This will be removed in the
+next major version.

.changeset/nice-kangaroos-kiss.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-pagination>`: Added dark color palette

.changeset/rh-cta-lightdom-shim.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-cta>`: Added `rh-cta-lightdom-shim.css` as an optional file to help reduce layout shift before element is defined, where declarative shadow DOM is not an option.

.changeset/shaky-yaks-win.md

@@ -0,0 +1,17 @@
+---
+"@rhds/elements": minor
+---
+`<rh-cta>`: added `href` attribute. When set, do not slot an anchor or button,
+instead, slot in the link text.
+
+These two are equivalent:
+
+```html
+<rh-cta>
+  <a href="/elements">Elements</a>
+</rh-cta>
+```
+
+```html
+<rh-cta href="/elements">Elements</rh-cta>
+```

.changeset/small-turtles-visit.md

@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-card>`: Added CSS custom properties for card headings:
+
+- `--rh-card-heading-font-family`
+- `--rh-card-heading-font-size`
+- `--rh-card-heading-font-weight`

.changeset/tiny-melons-help.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+Fixed the headline, title, body text, and footer font-sizes to match the Tile specs for both the default and compact variants

.changeset/wet-readers-shine.md

@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-cta>`: added `icon-set` attribute to better control icon loading
+
+```html
+<rh-cta icon="success" icon-set="custom">...</rh-cta>
+```

.changeset/wild-steaks-play.md

@@ -0,0 +1,15 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added `<rh-switch>`
+
+A switch toggles the state of a setting (between on and off). Switches and checkboxes can often be used interchangeably, but the switch provides a more explicit, visible representation on a setting.
+
+html```
+<rh-switch id="a" checked></rh-switch>
+<label for="a">
+  <span data-state="on">Message when on</span>
+  <span data-state="off" hidden>Message when off</span>
+</label>
+```

docs/_data/relatedItems.yaml

@@ -41,6 +41,10 @@ rh-footer:
  - rh-popover
  - rh-tooltip
  - rh-site-status
+rh-health-index:
+ - rh-avatar
+ - rh-badge
+ - rh-tag
 rh-jump-links: 
  - rh-pagination
  - rh-progress-steps
@@ -82,6 +86,9 @@ rh-subnav:
  - rh-navigation
  - rh-navigation-secondary
  - skip-navigation
+rh-switch:
+ - rh-button
+ - form
 rh-table:
  - rh-code-block
 rh-tabs: 

docs/_data/repoStatus.yaml

@@ -148,13 +148,24 @@
   libraries:
     - name: Figma library
       status: Ready
-
     - name: RH Elements
       status: Ready
     - name: WebRH
       status: Ready
     - name: Documentation
       status: Ready
+- name: "Health Index"
+  type: "Element"
+  overallStatus: "Available"
+  libraries:
+    - name: Figma library
+      status: Ready
+    - name: RH Elements
+      status: Ready
+    - name: WebRH
+      status: Planned
+    - name: Documentation
+      status: Ready
 - name: "Jumplinks"
   type: "Element"
   overallStatus: "Available"
@@ -275,6 +286,18 @@
       status: Ready
     - name: Documentation
       status: Ready
+- name: "Switch"
+  type: "Element"
+  overallStatus: "New"
+  libraries:
+    - name: Figma library
+      status: Ready
+    - name: RH Elements
+      status: Ready
+    - name: WebRH
+      status: Planned
+    - name: Documentation
+      status: Ready  
 - name: "Table"
   type: "Element"
   overallStatus: "New"

docs/_includes/layout-base.njk

@@ -0,0 +1,68 @@
+{%- set extraPageClasses = bodyClasses or "" -%}
+{%- if title -%}
+  {% set extraPageClasses = extraPageClasses + ' page-' + title | slug -%}
+{%- endif -%}
+<!doctype html>
+<html class="no-js" lang="">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="x-ua-compatible" content="ie=edge">
+  <title>{{ data.title or title }} | Red Hat design system</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="shortcut icon" type="image/svg+xml" sizes="any" href="{{ '/assets/logo-red-hat.svg' | url }}">
+
+  <meta property="og:title" content="Red Hat design system">
+  <meta property="og:site_name" content="Red Hat design system">
+  <meta property="og:url" content="ux.redhat.com">
+  <meta property="og:description" content="This is Red Hat's design system. Using Red Hat brand standards and PatternFly as our foundational design language, we enable designers and developers to concurrently build branded experiences across redhat.com, Red Hat Customer Portal, and beyond.">
+  <meta property="og:type" content="website">
+  <meta property="og:image" content="https://ux.redhat.com/assets/opengraph.png">
+
+  <meta name="pfe-auto-reveal" content="true">
+
+  <link rel="stylesheet" href="{{ '/assets/redhat/redhat-theme/4/advanced-theme.css' | url }}">
+  <link rel="stylesheet" href="{{ '/assets/redhat/redhat-font/2/webfonts/red-hat-font.css' | url }}" media="all">
+
+  <link rel="stylesheet" href="{{ '/assets/prism.css' | url }}" >
+  <link rel="stylesheet" href="{{ '/assets/rhds.min.css' | url }}">
+  <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-footer/rh-footer-lightdom.css' | url }}">
+  <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-cta/rh-cta-lightdom-shim.css' | url }}">
+  <link rel="stylesheet" href="{{ '/assets/packages/@rhds/elements/elements/rh-subnav/rh-subnav-lightdom.css' | url }}">
+
+  {% sassFile false %}
+  {% for stylesheet in stylesheets %}
+  <link rel="stylesheet" href="{{ stylesheet | url }}">
+  {% endfor %}
+
+  <noscript>
+    <link type="text/css" href="{{ '/assets/pfe--noscript.min.css' | url }}">
+  </noscript>
+
+  <script type="importmap">{{ importMap | dump | safe }}</script>
+  <script async src="https://ga.jspm.io/npm:[email protected]/dist/es-module-shims.js"></script>
+  {% for tag in importElements %}
+  <script type="module">
+    import '@rhds/elements/{{tag}}/{{tag}}.js';
+  </script>
+  {% endfor %}
+  <script type="module">
+    // As soon as the DOM is ready, toggle JS class
+    document.documentElement.classList.remove('no-js');
+    document.documentElement.classList.add('js');
+  </script>
+  <script type="module" src="{{ '/assets/copy-permalink.js' | url }}"></script>
+  <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">
+  if (!('shadowRootMode' in HTMLTemplateElement.prototype)) { import('/assets/dsd-polyfill.js'); }
+  </script>
+</head>
+<body id="top" class="page {{ extraPageClasses }}" unresolved>
+  <div class="body-inner">
+    {{ content | safe }}
+  </div>
+</body>
+</html>

docs/_includes/partials/accessibility/1.1.1-A.md

@@ -0,0 +1 @@
+- [SC 1.1.1 Non-text content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content.html) (Level A)

docs/_plugins/rhds.cjs

@@ -11,12 +11,16 @@ const RHDSAlphabetizeTagsPlugin = require('./alphabetize-tags.cjs');
 const RHDSShortcodesPlugin = require('./shortcodes.cjs');
 const { parse } = require('async-csv');
 
-/** @typedef {object} EleventyTransformContext */
+/**
+ * @typedef {object} EleventyTransformContext the `this` binding for transform functions
+ * @property {string} outputPath the path the page will be written to
+ * @property {string} inputPath the path to the page's input file (e.g. template or paginator)
+ */
 
 /**
  * Replace paths in demo files from the dev SPA's format to 11ty's format
  * @this {EleventyTransformContext}
- * @param {string} content
+ * @param {string} content the HTML content to replace
  */
 function demoPaths(content) {
   const { outputPath, inputPath } = this;
@@ -42,18 +46,23 @@ function demoPaths(content) {
 }
 
 // Rewrite DEMO lightdom css relative URLs
-const LIGHTDOM_HREF_RE = /href="\.(?<pathname>.*-lightdom\.css)"/g;
+const LIGHTDOM_HREF_RE = /href="\.(?<pathname>.*-lightdom.*\.css)"/g;
 const LIGHTDOM_PATH_RE = /href="\.(.*)"/;
 
 /**
- * @param {string | number | Date} dateStr
+ * @param {string | number | Date} dateStr iso date string
+ * @param {Intl.DateTimeFormatOptions} options date format options
  */
 function prettyDate(dateStr, options = {}) {
   const { dateStyle = 'medium' } = options;
   return new Intl.DateTimeFormat('en-US', { dateStyle })
       .format(new Date(dateStr));
 }
 
+/**
+ * @param {string} tagName e.g. pf-jazz-hands
+ * @param {import("@patternfly/pfe-tools/config.js").PfeConfig} config pfe tools repo config
+ */
 function getTagNameSlug(tagName, config) {
   const name = config?.aliases?.[tagName] ?? tagName.replace(`${config?.tagPrefix ?? 'rh'}-`, '');
   return slugify(name, {
@@ -90,7 +99,7 @@ function getFilesToCopy() {
       .filter(ent => ent.isDirectory())
       .map(ent => ent.name);
 
-  /** @type{import('@patternfly/pfe-tools/config.js').PfeConfig}*/
+  /** @type {import('@patternfly/pfe-tools/config.js').PfeConfig} */
   const config = require('../../.pfe.config.json');
 
   // Copy all component and core files to _site
@@ -103,6 +112,10 @@ function getFilesToCopy() {
   }));
 }
 
+/**
+ * @param {{ slug: number; }} a first
+ * @param {{ slug: number; }} b next
+ */
 function alphabeticallyBySlug(a, b) {
   return (
       a.slug < b.slug ? -1
@@ -111,7 +124,7 @@ function alphabeticallyBySlug(a, b) {
   );
 }
 
-/** @param {import('@11ty/eleventy/src/UserConfig')} eleventyConfig */
+/** @param {import('@11ty/eleventy/src/UserConfig')} eleventyConfig user config */
 module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
   eleventyConfig.addDataExtension('yml, yaml', contents => yaml.load(contents));
 
@@ -145,7 +158,7 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
     const { pfeconfig } = eleventyConfig?.globalData ?? {};
     const { aliases } = pfeconfig;
 
-    if (inputPath === './docs/elements/demos.html' ) {
+    if (inputPath === './docs/elements/demo.html' ) {
       const tagNameMatch = outputPath.match(/\/elements\/(?<tagName>[-\w]+)\/demo\//);
       if (tagNameMatch) {
         const { tagName } = tagNameMatch.groups;
@@ -158,17 +171,17 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
 
         // does the tagName exist in the aliases object?
         const key = Object.keys(modifiedAliases).find(key => modifiedAliases[key] === tagName);
-
-        const prefixedTagName = `${pfeconfig?.tagPrefix}-${tagName}`;
+        const { deslugify } = await import('@patternfly/pfe-tools/config.js');
+        const prefixedTagName = deslugify(tagName, path.join(__dirname, '../..'));
         const redirect = { new: key ?? prefixedTagName, old: tagName };
         const matches = content.match(LIGHTDOM_HREF_RE);
         if (matches) {
           for (const match of matches) {
             const [, path] = match.match(LIGHTDOM_PATH_RE) ?? [];
             const { pathname } = new URL(path, `file:///${outputPath}`);
-            content = content.replace(`.${path}`, pathname
-                .replace(`/_site/elements/${redirect.old}/`, `/assets/packages/@rhds/elements/elements/${redirect.new}/`)
-                .replace('/demo/', '/'));
+            const filename = pathname.split('/').pop();
+            const replacement = `/assets/packages/@rhds/elements/elements/${prefixedTagName}/${filename}`;
+            content = content.replace(`.${path}`, replacement);
           }
         }
       }
@@ -189,7 +202,7 @@ module.exports = function(eleventyConfig, { tagsToAlphabetize }) {
      * NB: since the data for this shortcode is no a POJO,
      * but a DocsPage instance, 11ty assigns it to this.ctx._
      * @see https://github.com/11ty/eleventy/blob/bf7c0c0cce1b2cb01561f57fdd33db001df4cb7e/src/Plugins/RenderPlugin.js#L89-L93
-     * @type {import('@patternfly/pfe-tools/11ty/DocsPage').DocsPage}
+     * @type {import('@patternfly/pfe-tools/11ty/DocsPage.js').DocsPage}
      */
     const docsPage = this.ctx._;
     return docsPage.description;