feat(card): promo variant (#1569)

* fix(card): make `.empty` work

* fix(card): even `#body` spacing when footer is `.empty`

* feat(card): add inline promo demo

* chore(card): add changeset for inline promo

* docs(card): rename variants demo to patterns

* fix(card): hide empty slots when there's no content

* feat(card): make inline promo a WC variant

* fix(card): remove inline promo comment

* fix(card): svg title text

* docs(card): update changeset

* docs(card): change `patterns.html` back to `variants.html`

* fix(card): move inline-promo margin to demo styles

* fix(card): remove inline promo full width padding

* fix(card): rename slot `inline-promo` to `image`

* fix(card): remove `one-col` and `reverse` attrs

Change them to classes and moved styles into the demo. Now styled using CSS Shadow Parts.

* fix(card): remove `full-width` attr, convert to class + `part` selector

* fix(card): move `standard` styles to demo

* docs(card): change attr docs to reference `class`

* docs(card): inline promo inline docs layout tweaks

* fix(card): update inline promo CSS attr selector

The `~` searches for the word `inline-promo` in a space separated list. Pre-optimization just in case more variants are added in the future.

* fix(card): nix outdated `full-width` prop and var docs

* docs(card): update changeset

* fix(card): style header when image is present

* docs(card): implement asset and image patterns

* docs(card): logo pattern

* docs(card): quote pattern

* docs(card): image pattern

* docs(card): icon pattern

* docs(card): asset pattern

* docs: remove unused images

* docs: rename inline promo pattern file

* docs(card): sticky pattern

* docs(card): title pattern

* docs(card): video pattern

* fix(card): merge updates from base

* docs(card): pattern fixes

* fix(card): has-body shadow class, header margin

h/t @OneEightyFirst

* fix(card): remove `isServer`, it's not in use

* fix(card): inline promo heading and paragraph spacing

docs PR surfaced that we need more robust heading and paragraph spacing in Inline Promo. CSS Custom Properties added for users if needed.

* fix(card): inline promo tweaks

* fix(card): promo tweaks

* fix(card): promo tweaks

* refactor(card): class names

* fix(card): private vars

* fix(card): remove unused private var

* docs(card): inline-promo

* fix(card): rename inline promo to promo

* fix(card): imageless promo layout

* docs(card): align image when reversed

* fix(card): remove 1px spacing around promo image

* fix(card): unify promo demo sample SVG attr values

* refactor(card): alphabetize promo container css

* fix(card): touch up promo spacing

* fix(card): add appropriate promo standard typography

* fix(card): increase promo standard desktop padding

* fix(card): fix spacing with standard promo

* fix(card): promo layouts

* docs(card): promo demos

* fix(card): improve standard promo spacing

* docs(card): add promo standard demo gutters

* fix(card): role `img`

* feat(card): add `full-width` attribute to promo

`<rh-card variant="promo" full-width>`

* docs(card): layout tweaks for promo demo

* docs(card): change one promo narrow card

Remove standard. Add Promo sans image.

* feat(card): make public vars work with promo variant

* docs(card): improve wording around promo changes

* fix(card): match promo border mockup to code

* fix(card): update promo standard bkg color

* docs(card): add dark examples to promo + full width demos

* fix(card): style `.reverse` on container grid, not image/body

* fix(card): increase promo image width

---------

Co-authored-by: Benny Powers <[email protected]>
Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>
Co-authored-by: Steven Spriggs <[email protected]>

.changeset/fair-buttons-punch.md

@@ -0,0 +1,16 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-card>`: ✨ Added promo card variant
+
+The promo card variant allows users to easily display text and optionally an image side by side. 
+
+```html
+<rh-card variant="promo">
+  <img slot="image" alt="product illustration" src="/assets/images/new-product.png">
+  <h2 slot="header">Try our new product</h2>
+  <p>Our new product is the best in class.</p>
+  <rh-cta slot="footer" href="#">Start a Free Trial</rh-cta>
+</rh-card>
+```

elements/rh-card/demo/asset-pattern.html

@@ -0,0 +1,108 @@
+<section id="card-pattern-asset">
+  <rh-card>
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <pf-icon icon="info-circle"
+        size="md"
+        slot="header"></pf-icon>
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+  </rh-card>
+
+  <rh-card>
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card class="footer-asset">
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+    <svg class="sample" slot="footer" width="296" height="171"><rect/></svg>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <pf-icon icon="info-circle"
+        size="md"
+        slot="header"></pf-icon>
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image" width="296" height="171"><rect/></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter" class="footer-asset">
+    <h2 slot="header">Title, lg</h2>
+    <a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</a>
+    <svg class="sample" slot="footer" width="296" height="171"><rect/></svg>
+  </rh-card>
+</section>
+
+<style>
+  svg.sample {
+    border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);
+    & rect { width: 100%; height: 100%; fill: rgba(0 102 204 / 0.10) }
+  }
+  #card-pattern-asset {
+    display: grid;
+    gap: var(--rh-space-md, 16px);
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    & rh-card {
+      height: 100%;
+      & h2 { flex: 1 1 auto; }
+      & img { width: 100%; }
+      &::part(container) { height: 100%; }
+      &::part(header) {
+        display: flex;
+        align-items: center;
+        flex-flow: row;
+        font-family: var(--rh-font-family-body-text, RedHatText, "Red Hat Text", "Noto Sans Arabic", "Noto Sans Hebrew", "Noto Sans JP", "Noto Sans KR", "Noto Sans Malayalam", "Noto Sans SC", "Noto Sans TC", "Noto Sans Thai", Helvetica, Arial, sans-serif);
+        font-size: var(--rh-font-size-body-text-md, 1rem);
+        font-weight: var(--rh-font-weight-heading-regular, 400);
+        text-transform: uppercase;
+      }
+      &::part(image) {
+        padding: var(--rh-space-2xl, 32px);
+        padding-block-end: 0;
+        background-color: var(--rh-color-surface-lighter, #f2f2f2);
+      }
+      &::part(body) {
+        margin-block-start: 0;
+        padding-block-start: var(--rh-space-lg, 16px);
+      }
+      &.footer-asset::part(footer) {
+        margin: 0;
+        margin-block-start: auto;
+        padding: var(--rh-space-2xl, 32px);
+        padding-block-end: 0;
+        background-color: var(--rh-color-surface-lighter, #f2f2f2);
+      }
+      &[color-palette="lighter"] {
+        &::part(image) {
+          background-color: var(--rh-color-surface-light, #e0e0e0);
+        }
+        &.footer-asset::part(footer) {
+          background-color: var(--rh-color-surface-light, #e0e0e0);
+        }
+      }
+    }
+  }
+</style>
+
+<script type="module">
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>

elements/rh-card/demo/icon-pattern.html

@@ -0,0 +1,121 @@
+<section id="card-pattern-icon">
+  <rh-card>
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="header" width="80" height="80" ><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</section>
+
+<style>
+  svg.sample {
+    border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);
+    & rect { width: 100%; height: 100%; fill: rgba(0 102 204 / 0.10) }
+  }
+  #card-pattern-icon {
+    display: grid;
+    gap: var(--rh-space-md, 16px);
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    & rh-card {
+      height: 100%;
+      &::part(container) {
+        height: 100%;
+      }
+      &::part(header) {
+        flex-flow: column;
+        gap: var(--rh-space-2xl, 32px);
+      }
+      &::part(body) {
+        margin-block-start: var(--rh-space-lg, 16px);
+      }
+      & > p {
+        margin-block: 0;
+      }
+      & h2 {
+        font-size: var(--rh-font-size-code-2xl, 1.5rem);
+      }
+    }
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>

elements/rh-card/demo/image-pattern.html

@@ -0,0 +1,110 @@
+<section id="card-pattern-image">
+  <rh-card>
+    <svg class="sample" slot="image"><rect></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card>
+    <svg class="sample" slot="image"><rect></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image"><rect></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="lighter">
+    <svg class="sample" slot="image"><rect/></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="image"><rect></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="dark">
+    <svg class="sample" slot="image"><rect></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="image"><rect></svg>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+
+  <rh-card color-palette="darker">
+    <svg class="sample" slot="image"><rect></svg>
+    <h2 slot="header">Heading, sm</h2>
+    <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 slot="footer">
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</section>
+
+<style>
+  svg.sample {
+    border: 1px dashed var(--rh-color-border-interactive-on-light, #0066cc);
+    width: 100%;
+    aspect-ratio: 296/171;
+    & rect { width: 100%; height: 100%; fill: rgba(0 102 204 / 0.10) }
+  }
+  #card-pattern-image {
+    display: grid;
+    gap: var(--rh-space-md, 16px);
+    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
+    & rh-card {
+      height: 100%;
+      &::part(container) {
+        height: 100%;
+      }
+    }
+  }
+</style>
+
+<script type="module">
+  import '@rhds/elements/rh-card/rh-card.js';
+  import '@rhds/elements/rh-cta/rh-cta.js';
+</script>