Merge branch 'staging/charmander' into fix/pagination/dark-theme

RedHat-UX · May 13, 2024 · 305bf22 · 305bf22
2 parents 0b4d74c + e96dece
commit 305bf22
Show file tree

Hide file tree

Showing 20 changed files with 554 additions and 185 deletions.
diff --git a/.changeset/curly-ways-march.md b/.changeset/curly-ways-march.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+React: add generated react wrappers to NPM package
diff --git a/.changeset/metal-birds-share.md b/.changeset/metal-birds-share.md
@@ -0,0 +1,5 @@
+---
+"@rhds/elements": major
+---
+DELETE THIS FILE BEFORE MERGING
+chore: changeset validating github action
diff --git a/.changeset/rh-cta-lightdom-shim.md b/.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.
diff --git a/.changeset/shy-houses-arrive.md b/.changeset/shy-houses-arrive.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: applied heading font to card headings
diff --git a/.changeset/wet-feet-pull.md b/.changeset/wet-feet-pull.md
@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: removes landmark semantics from card, simplifying page navigation for screen reader users
diff --git a/.github/workflows/validate-pr.yml b/.github/workflows/validate-pr.yml
@@ -0,0 +1,25 @@
+name: Validate PRs
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - edited
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - run: npm i semantic-release @changesets/read --prefer-offline
+      - uses: actions/github-script@v7
+        with:
+          script: |
+            const { validate } = await import('${{ github.workspace }}/scripts/validate-prs.js');
+            await validate({ context });
diff --git a/docs/_includes/layout-base.njk b/docs/_includes/layout-base.njk
@@ -26,6 +26,7 @@
   <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 %}

diff --git a/docs/_plugins/shortcodes/repoStatus.cjs b/docs/_plugins/shortcodes/repoStatus.cjs
@@ -250,10 +250,13 @@ function repoStatusTable() {
     return /* html */`
 <tr>
 <td data-label="Name">
-  <a href="/elements/${listItem.name}">${listItem.name}</a>
-  ${listItem.overallStatus !== 'Available' ? `<rh-tag color="${STATUS_LEGEND[listItem.overallStatus].color}" variant="${STATUS_LEGEND[listItem.overallStatus].variant}">
-    ${listItem.overallStatus}${STATUS_LEGEND[listItem.overallStatus].icon}
-  </rh-tag>` : ''}
+  <span>
+    <a href="/elements/${listItem.name}">${listItem.name}</a>
+    ${listItem.overallStatus !== 'Available' ?
+      `<rh-tag color="${STATUS_LEGEND[listItem.overallStatus].color}" variant="${STATUS_LEGEND[listItem.overallStatus].variant}">
+        ${listItem.overallStatus}${STATUS_LEGEND[listItem.overallStatus].icon}
+      </rh-tag>` : ''}
+  </span>
 </td>
 ${listItem.libraries.map(lib => {
     return /* html */`

diff --git a/docs/get-started/designers.md b/docs/get-started/designers.md
@@ -40,6 +40,10 @@ Our design system libraries and the documentation website offer assets and guida
         <h3>Elements and patterns</h3>
         <p>Our libraries include <a href="/elements">elements</a> and <a href="/patterns">patterns</a> you can use to create digital experiences.</p>
     </div>
+    <div>
+        <h3>Accessibility</h3>
+        <p><a href="/accessibility/design/">Designer-specific guidelines</a> equip you with the information to create inclusive digital experiences.</p>
+    </div>
 </div>
 
 ## Access Figma

diff --git a/docs/get-started/developers/index.md b/docs/get-started/developers/index.md
@@ -32,7 +32,7 @@ Our design system libraries and the documentation website offer assets and guida
     </div>
     <div>
         <h3>Documentation</h3>
-        <p>This website offers guidance about how to use our <a href="elements">elements</a> and <a href="patterns">patterns</a> correctly.</p>
+        <p>This website offers guidance about how to use our <a href="elements">elements</a> and <a href="patterns">patterns</a>. Learn how to apply them accessibily with <a href="/accessibility/development/">developer-specific guidelines</a>.</p>
     </div>
     <div>
         <h3>GitHub repositories</h3>

diff --git a/elements/rh-card/demo/variants.html b/elements/rh-card/demo/variants.html
@@ -1,136 +1,138 @@
-<rh-card>
-  <h2 slot="header">Default card, slotted content and footer</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card>
-  <h2 slot="header">Slotted title, content, and footer</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card color-palette="lighter">
-  <h2 slot="header">Lighter color palette</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card color-palette="lighter" class="bar">
-  <h2 slot="header">Lighter color palette and custom header</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="bar">
-  <h2 slot="header">Custom header</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="center">
-  <h2 slot="header">Center aligned content, footer</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="end">
-  <h2 slot="header">End aligned content, footer</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="full">
-  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+<section id="card-variants">
+  <rh-card>
+    <h2 slot="header">Default card, slotted content and footer</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <h2 slot="header">Slotted title, content, and footer</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <h2 slot="header">Lighter color palette</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter" class="bar">
+    <h2 slot="header">Lighter color palette and custom header</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="bar">
+    <h2 slot="header">Custom header</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="center">
+    <h2 slot="header">Center aligned content, footer</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="end">
+    <h2 slot="header">End aligned content, footer</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="image">
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+        <title>A placeholder image in a card header slot</title>
+        <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+        <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+        <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+      </svg>
+    <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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="image">
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
+        <title>A placeholder image in a card header slot</title>
+        <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
+        <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
+        <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
+      </svg>
+    <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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="image heading">
+    <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
       <title>A placeholder image in a card header slot</title>
       <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
       <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
       <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
-    </svg> 
-  <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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="full">
-  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
-      <title>A placeholder image in a card header slot</title>
-      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
-      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
-      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
-    </svg> 
-  <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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
-
-<rh-card class="full">
-  <svg slot="header" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 120">
-      <title>A placeholder image in a card header slot</title>
-      <rect x="0" y="0" width="320" height="120" fill="#e0e0e0"/>
-      <line x1="0" y1="0" x2="320" y2="120" stroke="#d0d0d0"/>
-      <line x1="320" y1="0" x2="0" y2="120" stroke="#d0d0d0"/>
-    </svg> 
-  <h2 slot="header">Card with slotted image header. Full width image.</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 variant="primary" slot="footer">
-    <a href="#">Call to action</a>
-  </rh-cta>
-</rh-card>
+    </svg>
+    <h2>Card with slotted image header. Full width image.</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 variant="primary" slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</section>
 
 <script type="module">
   import '@rhds/elements/rh-card/rh-card.js';
   import '@rhds/elements/rh-cta/rh-cta.js';
 </script>
 
 <style>
-  [data-demo="rh-card"] {
+  #card-variants {
     padding: 0.5em;
     display: grid;
     gap: 1em;
@@ -151,25 +153,27 @@ <h2 slot="header">Card with slotted image header. Full width image.</h2>
       font-weight: var(--rh-font-weight-heading-regular, 300);
       font-size: var(--rh-font-size-body-text-md, 1rem);
     }
-    &::part(body) {
-      /* margin: var(--rh-space-lg, 16px) var(--rh-space-xl, 24px); */
-    }
   }
 
-  rh-card.full {
+  rh-card.image {
     &::part(header) {
       margin: 0;
     }
 
-    & :is(h1, h2, h3, h4, h5, h6)[slot="header"] {
-      padding-inline: var(--rh-space-xl, 24px);
-    }
-
     & img {
       display: block;
       min-width: 100%;
       height: auto;
     }
+
+    &.heading {
+      & h2 {
+        font-weight: var(--rh-font-weight-heading-medium, 500);
+        font-size: var(--rh-font-size-heading-md, 1.75rem);
+        margin-block-start: 0;
+        margin-block-end: var(--rh-space-lg, 16px);
+      }
+    }
   }
 
   rh-card.center::part(body),