From 089d9ac0b3de92225ae4d65cfba046e54340d7a2 Mon Sep 17 00:00:00 2001
From: Adam Johnson <adam.b.johnson1@gmail.com>
Date: Tue, 28 May 2024 16:56:39 -0400
Subject: [PATCH] feat(card): make inline promo a WC variant

---
 elements/rh-card/demo/inline-promo.html | 274 +++++-------------------
 elements/rh-card/rh-card.css            | 172 +++++++++++++++
 elements/rh-card/rh-card.ts             |  22 +-
 3 files changed, 251 insertions(+), 217 deletions(-)

diff --git a/elements/rh-card/demo/inline-promo.html b/elements/rh-card/demo/inline-promo.html
index 2190d12135..8ef042fec4 100644
--- a/elements/rh-card/demo/inline-promo.html
+++ b/elements/rh-card/demo/inline-promo.html
@@ -1,114 +1,71 @@
-<rh-card class="inline-promo">
-  <div class="container">
-    <div class="grid">
-      <div class="content">
-        <h2>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 slot="footer">
-          <a href="#">Call to action</a>
-        </rh-cta>
-      </div>
-      <div>
-        <svg 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>
-      </div>
-    </div>
-  </div>
+<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 class="inline-promo right-aligned-with-image">
-  <div class="container">
-    <div class="grid">
-      <div class="content">
-        <h2>Right aligned with image</h2>
-        <p>This variant uses the same markup in the same order with one additional class: <code>.right-aligned-with-image</code>. Using CSS, we then change the order on larger viewports.</p>
-        <rh-cta slot="footer">
-          <a href="#">Call to action</a>
-        </rh-cta>
-      </div>
-      <div>
-        <svg 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>
-      </div>
-    </div>
-  </div>
+<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 class="inline-promo no-image">
-  <div class="container">
-    <div class="grid">
-      <div class="content">
-        <h2>No image is okay too</h2>
-        <p>Sometimes, you may not have an image to go with your card. This variant shows how that might look.</p>
-        <rh-cta slot="footer">
-          <a href="#">Call to action</a>
-        </rh-cta>
-      </div>
-    </div>
-  </div>
+<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 class="inline-promo full-bleed">
-    <div class="container">
-      <div class="grid">
-        <div class="content">
-          <h2>Full Bleed</h2>
-          <p>This version doesn't have a border or padding on the sides and will expand to the width of the container you put it in. These customizations are done via the <code>::part()</code> selector.</p>
-          <rh-cta slot="footer">
-            <a href="#">Call to action</a>
-          </rh-cta>
-        </div>
-        <div>
-          <svg 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>
-        </div>
-      </div>
-    </div>
+  <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 class="inline-promo standard">
-  <div class="container">
-    <div class="grid">
-      <div class="content">
-        <p>This is the standard inline promo. It has a paragraph and a call to action.</p>
-      </div>
-      <div class="cta">
-        <rh-cta slot="footer">
-          <a href="#">Call to action</a>
-        </rh-cta>
-      </div>
-    </div>
-  </div>
-</rh-card>
-
-<rh-card color-palette="darker" class="inline-promo standard">
-  <div class="container">
-    <div class="grid">
-      <div class="content">
-        <p>This is the standard inline promo with a dark theme, styled via <code>::part()</code>.</p>
-      </div>
-      <div class="cta">
-        <rh-cta slot="footer">
-          <a href="#">Call to action</a>
-        </rh-cta>
-      </div>
-    </div>
-  </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">
@@ -117,126 +74,11 @@ <h2>Full Bleed</h2>
 </script>
 
 <style>
-  /*****************************************************************************
-   * SHARED
-   *****************************************************************************/
-  rh-card {
-    container: inline-promo / inline-size;
-    display: block;
-    margin-block-end: var(--rh-space-2xl, 32px);
-  }
-
-  rh-card img {
-    max-width: 100%;
-    display: block;
-  }
-
-  rh-card .content {
-    margin-block-end: var(--rh-space-xl, 24px);
-    order: 10;
-  }
-
-  rh-card .content h2 {
-    margin-block-start: 0;
-  }
-
-  @container inline-promo (min-width: 768px) {
-    rh-card .grid {
-      align-items: center;
-      display: grid;
-      grid-template-columns: repeat(2, 1fr);
-    }
-
-    rh-card .content {
-      max-width: 75ch;
-      padding-inline: var(--rh-space-2xl, 32px);
-    }
-
-    rh-card .content h2 {
-      font-size: var(--rh-font-size-body-text-2xl, 1.5rem);
-    }
-
-    rh-card .content p {
-      font-size: var(--rh-font-size-body-text-lg, 1.125rem);
-    }
-  }
-
-  /*****************************************************************************
-   * RIGHT ALIGNED WITH IMAGE
-   *****************************************************************************/
-  @container inline-promo (min-width: 768px) {
-    rh-card.right-aligned-with-image .content {
-      order: 0;
-    }
-  }
-
-  /*****************************************************************************
-   * NO IMAGE
-   *****************************************************************************/
-  rh-card.no-image .content {
-    order: 0;
-  }
-
-  /*****************************************************************************
-   * FULL BLEED
-   *****************************************************************************/
-  rh-card.full-bleed {
-    margin-block-end: 0;
-  }
-
-  rh-card.full-bleed::part(container) {
-    border: 0;
-  }
-
-  rh-card.full-bleed::part(body) {
-    margin: 0;
-    padding-block: var(--rh-space-3xl, 48px);
-    padding-inline: var(--rh-space-lg, 16px);
-  }
-
-  @container inline-promo (min-width: 768px) {
-    rh-card.full-bleed::part(body) {
-      margin: 0;
-      padding-block: var(--rh-space-4xl, 64px);
-      padding-inline: 0;
-    }
-  }
-
-  /*****************************************************************************
-   * STANDARD
-   *****************************************************************************/
-  rh-card.standard .content {
-    margin-block-end: 0;
-  }
-
-  rh-card.standard::part(container) {
-    background-color: var(--rh-color-surface-lighter, #f2f2f2);
-  }
-
-  rh-card.standard[color-palette="darker"]::part(container) {
-    background-color: var(--rh-color-surface-darker, #1f1f1f);
-  }
-
-  @container inline-promo (min-width: 768px) {
-    rh-card.standard .grid {
-      grid-template-columns: 3fr 1fr;
-    }
-
-    rh-card.standard .content {
-      order: 0;
-    }
-
-    rh-card.standard .cta {
-      margin-inline-start: auto;
-      margin-inline-end: var(--rh-space-2xl, 32px);
-    }
-  }
-
   /*****************************************************************************
    * FOR DEMO ONLY
    *****************************************************************************/
   .bg-off-white {
-    background-color: #f2f2f2;
+    background-color: var(--rh-color-surface-lighter, #f2f2f2);
     padding: var(--rh-space-xl, 24px);
     margin-block-end: var(--rh-space-xl, 24px);
   }
diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css
index ca6dfe465b..e8fa9e6fa9 100644
--- a/elements/rh-card/rh-card.css
+++ b/elements/rh-card/rh-card.css
@@ -6,6 +6,7 @@ article {
 }
 
 #header.empty,
+#inline-promo.empty,
 #footer.empty,
 #body.empty {
   display: none;
@@ -114,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;
+  }
+}
diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts
index a91026f5a6..ef8cb545e1 100644
--- a/elements/rh-card/rh-card.ts
+++ b/elements/rh-card/rh-card.ts
@@ -13,6 +13,8 @@ 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.
@@ -20,6 +22,8 @@ import styles from './rh-card.css';
  *              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
@@ -27,6 +31,9 @@ import styles from './rh-card.css';
  * @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])') })}">