feat(card): promo variant

.changeset/fair-buttons-punch.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-card>`: Add Inline Promo demo + styles

elements/rh-card/demo/inline-promo.html

@@ -0,0 +1,85 @@
+<rh-card variant="inline-promo">
+  <svg slot="inline-promo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 190">
+    <title>A placeholder image in a card header slot</title>
+    <rect x="0" y="0" width="320" height="190" fill="#e7f0f9"/>
+    <line x1="0" y1="0" x2="320" y2="190" stroke="#d6e7f5"/>
+    <line x1="320" y1="0" x2="0" y2="190" stroke="#d6e7f5"/>
+  </svg>
+
+  <h2>Featured: left aligned with image</h2>
+  <p>You can customize the <code>#body</code> by using the <code>::part</code> selector. Using this technique, you can have padding on the top, bottom, left, right, or none at all.</p>
+  <rh-cta>
+    <a href="#">Call to action</a>
+  </rh-cta>
+</rh-card>
+
+<rh-card variant="inline-promo" reverse>
+  <svg slot="inline-promo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 190">
+    <title>A placeholder image in a card header slot</title>
+    <rect x="0" y="0" width="320" height="190" fill="#e7f0f9"/>
+    <line x1="0" y1="0" x2="320" y2="190" stroke="#d6e7f5"/>
+    <line x1="320" y1="0" x2="0" y2="190" stroke="#d6e7f5"/>
+  </svg>
+  <h2>Featured: right aligned with image</h2>
+  <p>This variant uses the same markup in the same order with one additional attribute/property on the custom element: <code>reverse</code>.</p>
+  <rh-cta>
+    <a href="#">Call to action</a>
+  </rh-cta>
+</rh-card>
+
+<rh-card variant="inline-promo" one-col>
+  <h2>Featured: no image is okay too</h2>
+  <p>Sometimes, you may not have an image to go with your card. Add the <code>one-col</code> attribute/property on the custom element.</p>
+  <rh-cta>
+    <a href="#">Call to action</a>
+  </rh-cta>
+</rh-card>
+
+<div class="bg-off-white">
+  <rh-card variant="inline-promo" full-width>
+    <svg slot="inline-promo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 190">
+      <title>A placeholder image in a card header slot</title>
+      <rect x="0" y="0" width="320" height="190" fill="#e7f0f9"/>
+      <line x1="0" y1="0" x2="320" y2="190" stroke="#d6e7f5"/>
+      <line x1="320" y1="0" x2="0" y2="190" stroke="#d6e7f5"/>
+    </svg>
+    <h2>Full Width Inline Promo</h2>
+    <p>This version doesn't have a border or padding on the sides on large viewports and will expand to the width of the container you put it in. Like the previous two examples, you can add the <code>reverse</code> or <code>one-col</code> attributes to change the look of this variant.</p>
+    <rh-cta>
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</div>
+
+<div class="bg-off-white">
+  <rh-card variant="inline-promo" full-width>
+    <h2>Full Width Inline Promo - No Image</h2>
+    <p>Just like the last version, except this version doesn't have an image.</p>
+    <rh-cta>
+      <a href="#">Call to action</a>
+    </rh-cta>
+  </rh-card>
+</div>
+
+<rh-card variant="inline-promo" standard>
+  <rh-cta slot="inline-promo">
+    <a href="#">Call to action</a>
+  </rh-cta>
+  <p>This is the "standard" inline promo. It has a paragraph and a call to action.</p>
+</rh-card>
+
+<script type="module">
+  import '@rhds/elements/rh-cta/rh-cta.js';
+  import '@rhds/elements/rh-card/rh-card.js';
+</script>
+
+<style>
+  /*****************************************************************************
+   * FOR DEMO ONLY
+   *****************************************************************************/
+  .bg-off-white {
+    background-color: var(--rh-color-surface-lighter, #f2f2f2);
+    padding: var(--rh-space-xl, 24px);
+    margin-block-end: var(--rh-space-xl, 24px);
+  }
+</style>

elements/rh-card/demo/variants.html → elements/rh-card/demo/patterns.html

@@ -1,4 +1,4 @@
-<section id="card-variants">
+<section id="card-patterns">
   <rh-card>
     <h2 slot="header">Default card, slotted content and footer</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -132,7 +132,7 @@ <h2>Card with slotted image header. Full width image.</h2>
 </script>
 
 <style>
-  #card-variants {
+  #card-patterns {
     padding: 0.5em;
     display: grid;
     gap: 1em;

elements/rh-card/rh-card.css

@@ -5,7 +5,10 @@ article {
   flex-direction: column;
 }
 
-.empty {
+#header.empty,
+#inline-promo.empty,
+#footer.empty,
+#body.empty {
   display: none;
 }
 
@@ -72,6 +75,10 @@ article {
   margin-block: var(--rh-space-2xl, 32px) var(--rh-space-xl, 24px);
 }
 
+#body:has(+ .empty) {
+  margin-block-end: var(--rh-space-2xl, 32px);
+}
+
 #footer {
   display: flex;
   gap: 0.5em;
@@ -108,3 +115,174 @@ article {
     margin-block-end: var(--rh-space-2xl, 32px);
   }
 }
+
+/*****************************************************************************
+ * INLINE PROMO SHARED
+ *****************************************************************************/
+:host([variant^="inline-promo"]) {
+  container: inline-promo / inline-size;
+  display: block;
+  margin-block-end: var(--rh-space-2xl, 32px);
+}
+
+::slotted([slot="inline-promo"]:is(img, svg)) {
+  display: block;
+  max-width: 100%;
+}
+
+:host([variant^="inline-promo"]) #inline-promo {
+  order: 10;
+  width: 100%;
+}
+
+:host([variant^="inline-promo"]) #body ::slotted(h2) {
+  margin-block-start: 0;
+}
+
+@container inline-promo (min-width: 768px) {
+  :host([variant^="inline-promo"]) #container {
+    align-items: center;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    min-height: 250px;
+  }
+
+  :host([variant^="inline-promo"]) #inline-promo {
+    order: 0;
+  }
+
+  :host([variant^="inline-promo"]) #body {
+    max-width: 75ch;
+  }
+
+  :host([variant^="inline-promo"]) #body ::slotted(h2) {
+    font-size: var(--rh-font-size-body-text-2xl, 1.5rem);
+  }
+
+  :host([variant^="inline-promo"]) #body ::slotted(p) {
+    font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+  }
+}
+
+/*****************************************************************************
+ * INLINE PROMO RIGHT ALIGNED WITH IMAGE (Reverse)
+ *****************************************************************************/
+@container inline-promo (min-width: 768px) {
+  :host([variant^="inline-promo"][reverse]) #container {
+    grid-template-columns: 2fr 1fr;
+  }
+
+  :host([reverse]) #inline-promo {
+    order: 10;
+  }
+}
+
+/*****************************************************************************
+ * INLINE PROMO NO IMAGE
+ *****************************************************************************/
+@container inline-promo (min-width: 768px) {
+  :host([variant^="inline-promo"][one-col]) #container {
+    grid-template-columns: 1fr;
+  }
+}
+
+/*****************************************************************************
+ * INLINE PROMO STANDARD
+ *****************************************************************************/
+:host([variant^="inline-promo"][standard]) #container {
+  background-color:
+    var(
+        --rh-card-inline-promo-standard-bg-color,
+        var(--rh-color-surface-lighter, #f2f2f2)
+      );
+  padding: var(--rh-space-2xl, 32px);
+  min-height: auto;
+}
+
+:host([variant^="inline-promo"][standard]) #container.dark {
+  background-color:
+    var(
+        --rh-card-inline-promo-standard-bg-color,
+        var(--rh-color-surface-darker, #1f1f1f)
+      );
+}
+
+:host([variant^="inline-promo"][standard]) #body {
+  margin-inline: 0;
+  margin-block-start: 0;
+  margin-block-end: var(--rh-space-xl, 24px);
+}
+
+:host([variant^="inline-promo"][standard]) #body ::slotted(p) {
+  font-size: var(--rh-font-size-body-text-lg, 1.125rem);
+  margin-block: 0;
+}
+
+@container inline-promo (min-width: 768px) {
+  :host([variant^="inline-promo"][standard]) #container {
+    grid-template-columns: 3fr 1fr;
+    padding: var(--rh-space-3xl, 48px);
+  }
+
+  :host([variant^="inline-promo"][standard]) #body {
+    margin-block-end: 0;
+  }
+
+  :host([variant^="inline-promo"][standard]) #inline-promo {
+    text-align: end;
+    order: 10;
+  }
+
+  :host([variant^="inline-promo"][standard][reverse]) #container {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  :host([variant^="inline-promo"][standard][reverse]) #inline-promo {
+    text-align: start;
+    order: 0;
+  }
+}
+
+/*****************************************************************************
+ * INLINE PROMO FULL WIDTH
+ *****************************************************************************/
+:host([variant^="inline-promo"][full-width]) {
+  margin-block-end: 0;
+}
+
+:host([variant^="inline-promo"][full-width]) #container {
+  border: 0;
+  padding-block: var(--rh-space-4xl, 64px);
+  padding-inline: var(--rh-space-lg, 16px);
+}
+
+:host([variant^="inline-promo"][full-width]) #body {
+  margin: 0;
+}
+
+:host([variant^="inline-promo"][full-width]) #inline-promo:not(.empty) ~ #body {
+  margin-block-end: var(--rh-space-3xl, 48px);
+}
+
+@container inline-promo (min-width: 768px) {
+  :host([variant^="inline-promo"][full-width]) #container {
+    padding-inline: 0;
+  }
+
+  :host([variant^="inline-promo"][full-width]) #body {
+    margin-block-end: 0;
+    padding-inline: var(--rh-space-2xl, 32px);
+  }
+
+  :host([variant^="inline-promo"][full-width]) #inline-promo:not(.empty) ~ #body {
+    margin-block-end: 0;
+  }
+
+  :host([variant^="inline-promo"][full-width]) #inline-promo.empty ~ #body {
+    grid-column-start: span 2;
+  }
+
+  :host([variant^="inline-promo"][full-width]) #container:has(#inline-promo.empty) {
+    min-height: auto;
+  }
+}

elements/rh-card/rh-card.ts

@@ -13,20 +13,27 @@ import styles from './rh-card.css';
  * @slot        header
  *              If this slot is used, we expect a heading level tag (h1, h2, h3, h4, h5, h6).
  *              An icon, svg, or use of the icon component are also valid in this region.
+ * @slot        inline-promo
+ *              Use this slot for the inline promo variant of the card. Images & CTA's are most often slotted here.
  * @slot        Any content that is not designated for the header or footer slot, will go to this slot.
  * @slot        footer
  *              Use this slot for anything that you want to be stuck to the base of the card.
  * @csspart     container
  *              The container for the card. Contains the header, body, and footer.
  * @csspart     header
  *              The header for the card. Contains the header slot.
+ * @csspart     inline-promo
+ *              The inline-promo variation for the card. Contains the inline-promo slot.
  * @csspart     body
  *              The body for the card. Contains the default slot.
  * @csspart     footer
  *              The footer for the card. Contains the footer slot.
  * @cssprop     {<length>} --rh-card-header-font-size
  *              Font size for header on card
  *              {@default `1.5rem`}
+ * @cssprop     {<color>} --rh-card-inline-promo-standard-bg-color
+ *              Background color for the Standard Inline Promo variant
+ *              {@default `var(--rh-color-surface-lighter, #f2f2f2)`}
  */
 @customElement('rh-card')
 export class RhCard extends LitElement {
@@ -51,7 +58,15 @@ export class RhCard extends LitElement {
   @property({ reflect: true, attribute: 'color-palette' })
     colorPalette?: 'darkest' | 'lightest' | 'lighter';
 
-  #slots = new SlotController(this, 'header', null, 'footer');
+  @property({ reflect: true }) variant?: 'inline-promo';
+
+  @property({ reflect: true, type: Boolean }) reverse = false;
+
+  @property({ reflect: true, type: Boolean }) 'one-col' = false;
+
+  @property({ reflect: true, type: Boolean }) 'full-width' = false;
+
+  #slots = new SlotController(this, 'header', 'inline-promo', null, 'footer');
 
   override render() {
     const { on = '', colorPalette = '' } = this;
@@ -64,6 +79,11 @@ export class RhCard extends LitElement {
              class="${classMap({ empty: !this.#slots.hasSlotted('header') })}">
           <slot name="header"></slot>
         </div>
+        <div id="inline-promo"
+             part="inline-promo"
+             class="${classMap({ empty: !this.#slots.hasSlotted('inline-promo') })}">
+          <slot name="inline-promo"></slot>
+        </div>
         <div id="body"
              part="body"
              class="${classMap({ empty: !this.querySelector(':not([slot])') })}">