From 63c43763a577dbbdbccec6fc8ea90be920342bc0 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 14 May 2024 12:06:17 -0400 Subject: [PATCH 01/71] fix(card): make `.empty` work --- elements/rh-card/rh-card.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index b0edf1f367..f93e1760cd 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -5,7 +5,10 @@ article { flex-direction: column; } -.empty { +.empty, +#header.empty, +#body.empty, +#footer.empty { display: none; } From e873ee8c70c1e732c941aa42f9ab3e3259fe1812 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 14 May 2024 12:39:58 -0400 Subject: [PATCH 02/71] fix(card): even `#body` spacing when footer is `.empty` --- elements/rh-card/rh-card.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index f93e1760cd..a83413d3af 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -75,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; From 814e034255c2d241f67bbc6281b242c34a4fc4f2 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 15 May 2024 16:42:30 -0400 Subject: [PATCH 03/71] feat(card): add inline promo demo --- elements/rh-card/demo/inline-promo.html | 243 ++++++++++++++++++++++++ 1 file changed, 243 insertions(+) create mode 100644 elements/rh-card/demo/inline-promo.html diff --git a/elements/rh-card/demo/inline-promo.html b/elements/rh-card/demo/inline-promo.html new file mode 100644 index 0000000000..2190d12135 --- /dev/null +++ b/elements/rh-card/demo/inline-promo.html @@ -0,0 +1,243 @@ + +
+
+
+

Left aligned with image

+

You can customize the #body by using the ::part selector. Using this technique, you can have padding on the top, bottom, left, right, or none at all.

+ + Call to action + +
+
+ + A placeholder image in a card header slot + + + + +
+
+
+ + + +
+
+
+

Right aligned with image

+

This variant uses the same markup in the same order with one additional class: .right-aligned-with-image. Using CSS, we then change the order on larger viewports.

+ + Call to action + +
+
+ + A placeholder image in a card header slot + + + + +
+
+
+ + + +
+
+
+

No image is okay too

+

Sometimes, you may not have an image to go with your card. This variant shows how that might look.

+ + Call to action + +
+
+
+ + +
+ +
+
+
+

Full Bleed

+

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 ::part() selector.

+ + Call to action + +
+
+ + A placeholder image in a card header slot + + + + +
+
+
+ +
+ + + +
+
+
+

This is the standard inline promo. It has a paragraph and a call to action.

+
+
+ + Call to action + +
+
+
+ + + +
+
+
+

This is the standard inline promo with a dark theme, styled via ::part().

+
+
+ + Call to action + +
+
+
+ + + + + From 906c2cebeb5ce515f3b7c0f99ce073c4e6528ba7 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 15 May 2024 16:43:01 -0400 Subject: [PATCH 04/71] chore(card): add changeset for inline promo --- .changeset/fair-buttons-punch.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/fair-buttons-punch.md diff --git a/.changeset/fair-buttons-punch.md b/.changeset/fair-buttons-punch.md new file mode 100644 index 0000000000..0bc4a6c3f8 --- /dev/null +++ b/.changeset/fair-buttons-punch.md @@ -0,0 +1,5 @@ +--- +"@rhds/elements": minor +--- + +``: Add Inline Promo demo + styles From 7dcf3770b1890e11fab903ea6b4a4d971db7d319 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Wed, 22 May 2024 14:20:28 -0400 Subject: [PATCH 05/71] docs(card): rename variants demo to patterns --- elements/rh-card/demo/{variants.html => patterns.html} | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) rename elements/rh-card/demo/{variants.html => patterns.html} (99%) diff --git a/elements/rh-card/demo/variants.html b/elements/rh-card/demo/patterns.html similarity index 99% rename from elements/rh-card/demo/variants.html rename to elements/rh-card/demo/patterns.html index e2c1a727e0..0cd630ec27 100644 --- a/elements/rh-card/demo/variants.html +++ b/elements/rh-card/demo/patterns.html @@ -1,4 +1,4 @@ -
+

Default card, slotted content and footer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. @@ -132,7 +132,7 @@

Card with slotted image header. Full width image.

diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index e8fa9e6fa9..ae957c1561 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -122,7 +122,6 @@ article { :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)) { From ad21ced0a383fb9ff5ad8e013b9d4b56aaaac817 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 4 Jun 2024 13:56:54 -0400 Subject: [PATCH 13/71] fix(card): remove inline promo full width padding --- elements/rh-card/demo/inline-promo.html | 2 +- elements/rh-card/rh-card.css | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/elements/rh-card/demo/inline-promo.html b/elements/rh-card/demo/inline-promo.html index ea38083d87..936e13057b 100644 --- a/elements/rh-card/demo/inline-promo.html +++ b/elements/rh-card/demo/inline-promo.html @@ -79,7 +79,7 @@

Full Width Inline Promo - No Image

padding: var(--rh-space-xl, 24px); margin-block-end: var(--rh-space-xl, 24px); } - rh-card[variant="inline-promo"] { + rh-card[variant="inline-promo"]:not([full-width]) { margin-block-end: var(--rh-space-2xl, 32px); } diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index ae957c1561..471fbe0a20 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -265,6 +265,7 @@ article { @container inline-promo (min-width: 768px) { :host([variant^="inline-promo"][full-width]) #container { + padding-block: var(--rh-space-lg, 16px); padding-inline: 0; } @@ -280,8 +281,10 @@ article { :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; +@container inline-promo (min-width: 992px) { + :host([variant^="inline-promo"][full-width]) #container { + padding-block: 0; } } From 75da1c74251ad775c50f8ea94fd90a1e28199d8d Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 4 Jun 2024 16:35:01 -0400 Subject: [PATCH 14/71] fix(card): rename slot `inline-promo` to `image` --- .changeset/fair-buttons-punch.md | 4 ++-- elements/rh-card/demo/inline-promo.html | 16 ++++++++-------- elements/rh-card/rh-card.css | 20 ++++++++++---------- elements/rh-card/rh-card.ts | 16 ++++++++-------- 4 files changed, 28 insertions(+), 28 deletions(-) diff --git a/.changeset/fair-buttons-punch.md b/.changeset/fair-buttons-punch.md index 7990cfc59c..262e6b7014 100644 --- a/.changeset/fair-buttons-punch.md +++ b/.changeset/fair-buttons-punch.md @@ -8,8 +8,8 @@ The Inline Promo card variant allows users to easily display text and optionally ```html - - A placeholder image in a card inline-promo slot + + A placeholder image in rh-card in the "image" slot diff --git a/elements/rh-card/demo/inline-promo.html b/elements/rh-card/demo/inline-promo.html index 936e13057b..1bb311f871 100644 --- a/elements/rh-card/demo/inline-promo.html +++ b/elements/rh-card/demo/inline-promo.html @@ -1,6 +1,6 @@ - - A placeholder image in a card inline-promo slot + + A placeholder image in rh-card in the "image" slot @@ -14,8 +14,8 @@

Featured: left aligned with image

 - - A placeholder image in a card inline-promo slot + + A placeholder image in rh-card in the "image" slot @@ -37,8 +37,8 @@

Featured: no image is okay too

- - A placeholder image in a card inline-promo slot + + A placeholder image in rh-card in the "image" slot @@ -62,10 +62,10 @@

Full Width Inline Promo - No Image

- + Call to action -

This is the "standard" inline promo. It has a paragraph and a call to action.

+

This is the "standard" inline promo. It has a paragraph and a CTA in the "image" slot.

 From f942a05ec47a80ee3f495bd61ac706da92b520c9 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Fri, 7 Jun 2024 15:15:19 -0400 Subject: [PATCH 20/71] 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. --- elements/rh-card/rh-card.css | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 77e971eb3b..b5f5e06c4f 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -119,7 +119,7 @@ article { /***************************************************************************** * INLINE PROMO *****************************************************************************/ -:host([variant^="inline-promo"]) { +:host([variant~="inline-promo"]) { container: inline-promo / inline-size; display: block; } @@ -129,36 +129,36 @@ article { max-width: 100%; } -:host([variant^="inline-promo"]) #image { +:host([variant~="inline-promo"]) #image { order: 10; width: 100%; } -:host([variant^="inline-promo"]) #body ::slotted(h2) { +:host([variant~="inline-promo"]) #body ::slotted(h2) { margin-block-start: 0; } @container inline-promo (min-width: 768px) { - :host([variant^="inline-promo"]) #container { + :host([variant~="inline-promo"]) #container { align-items: center; display: grid; grid-template-columns: 1fr 2fr; min-height: 250px; } - :host([variant^="inline-promo"]) #image { + :host([variant~="inline-promo"]) #image { order: 0; } - :host([variant^="inline-promo"]) #body { + :host([variant~="inline-promo"]) #body { max-width: 75ch; } - :host([variant^="inline-promo"]) #body ::slotted(h2) { + :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) { + :host([variant~="inline-promo"]) #body ::slotted(p) { font-size: var(--rh-font-size-body-text-lg, 1.125rem); } } From 0131c42e91312761b0295b406377525184b4a46f Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Fri, 7 Jun 2024 15:44:04 -0400 Subject: [PATCH 21/71] fix(card): nix outdated `full-width` prop and var docs --- elements/rh-card/rh-card.ts | 5 ----- 1 file changed, 5 deletions(-) diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index d6af3db9df..6cfde74497 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -31,9 +31,6 @@ import styles from './rh-card.css'; * @cssprop {} --rh-card-header-font-size * Font size for header on card * {@default `1.5rem`} - * @cssprop {} --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 { @@ -60,8 +57,6 @@ export class RhCard extends LitElement { @property({ reflect: true }) variant?: 'inline-promo'; - @property({ reflect: true, type: Boolean }) 'full-width' = false; - #slots = new SlotController(this, 'header', 'image', null, 'footer'); override render() { From cef0ff3bd8fb203f32c7f6585562bd3dad59d738 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Fri, 14 Jun 2024 10:43:27 -0400 Subject: [PATCH 22/71] docs(card): update changeset --- .changeset/fair-buttons-punch.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/fair-buttons-punch.md b/.changeset/fair-buttons-punch.md index 262e6b7014..4b35845dc2 100644 --- a/.changeset/fair-buttons-punch.md +++ b/.changeset/fair-buttons-punch.md @@ -16,7 +16,7 @@ The Inline Promo card variant allows users to easily display text and optionally

Featured: left aligned with image

-

You can customize the #body by using the ::part selector. Using this technique, you can have padding on the top, bottom, left, right, or none at all.

+

This is the default Inline Promo card. If you want, you can customize the shadow DOM by using the ::part selector. Using this technique, you can have padding on any side, or none at all.

Call to action From 325c8e0b0849016ed3e15566f03fe9a821ac738b Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Wed, 5 Jun 2024 15:39:22 +0300 Subject: [PATCH 23/71] fix(card): style header when image is present --- elements/rh-card/rh-card.css | 6 +++++- elements/rh-card/rh-card.ts | 27 +++++++++++++++++++++++---- 2 files changed, 28 insertions(+), 5 deletions(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index b5f5e06c4f..91452ae111 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -9,7 +9,7 @@ article { #image.empty, #footer.empty, #body.empty { - display: none; + display: none !important; } ::slotted(*) { @@ -116,6 +116,10 @@ article { } } +.has-image.has-header #image { + order: -1; +} + /***************************************************************************** * INLINE PROMO *****************************************************************************/ diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index 6cfde74497..91ba75a36c 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -38,6 +38,8 @@ export class RhCard extends LitElement { static styles = [styles]; + private static slots = ['header', 'image', null, 'footer']; + /** * Sets color theme based on parent context */ @@ -57,22 +59,39 @@ export class RhCard extends LitElement { @property({ reflect: true }) variant?: 'inline-promo'; - #slots = new SlotController(this, 'header', 'image', null, 'footer'); + @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, ...RhCard.slots); override render() { const { on = '', colorPalette = '' } = this; + const hasImage = this.#slots.hasSlotted('image'); + const hasHeader = this.#slots.hasSlotted('header'); return html`
+ class="${classMap({ + [on]: !!on, + [colorPalette]: !!colorPalette, + ...Object.fromEntries(RhCard.slots + .filter(slot => slot !== null) + .map(slot => [ + `has-${slot}`, + this.#slots.hasSlotted(slot), + ])), + })}">
+ class="${classMap({ empty: !hasImage })}">
Date: Wed, 5 Jun 2024 15:39:30 +0300 Subject: [PATCH 24/71] docs(card): implement asset and image patterns --- elements/rh-card/demo/asset-pattern.html | 108 +++++++++++++++++++++++ elements/rh-card/demo/image-pattern.html | 108 +++++++++++++++++++++++ 2 files changed, 216 insertions(+) create mode 100644 elements/rh-card/demo/asset-pattern.html create mode 100644 elements/rh-card/demo/image-pattern.html diff --git a/elements/rh-card/demo/asset-pattern.html b/elements/rh-card/demo/asset-pattern.html new file mode 100644 index 0000000000..09b52d41bf --- /dev/null +++ b/elements/rh-card/demo/asset-pattern.html @@ -0,0 +1,108 @@ +
+ + + +

Title, lg

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + +

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.

+ + Call to action + + + + +

Title, lg

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + + + +

Title, lg

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + + + +

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.

+ + Call to action + + + + +

Title, lg

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. + + +
+ + + + diff --git a/elements/rh-card/demo/image-pattern.html b/elements/rh-card/demo/image-pattern.html new file mode 100644 index 0000000000..87f29e0eec --- /dev/null +++ b/elements/rh-card/demo/image-pattern.html @@ -0,0 +1,108 @@ +
+ + +

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.

+ + Call to action + + + + + +

Heading, sm

+

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.

+ + Call to action + + + + + +

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.

+ + Call to action + + + + + +

Heading, sm

+

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.

+ + Call to action + + + + + +

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.

+ + Call to action + + + + + +

Heading, sm

+

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.

+ + Call to action + + + + + +

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.

+ + Call to action + + + + + +

Heading, sm

+

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.

+ + Call to action + + +
+ + + + From 0ad4f985d918fc7277305e6a63d6bbaceb3404dd Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 6 Jun 2024 09:02:59 +0300 Subject: [PATCH 25/71] docs(card): logo pattern --- elements/rh-card/demo/logo-pattern.html | 114 ++++++++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 elements/rh-card/demo/logo-pattern.html diff --git a/elements/rh-card/demo/logo-pattern.html b/elements/rh-card/demo/logo-pattern.html new file mode 100644 index 0000000000..90fe602af2 --- /dev/null +++ b/elements/rh-card/demo/logo-pattern.html @@ -0,0 +1,114 @@ + + + + + From 359d61fc52ca15b49c09945b52c5d46c137eb79c Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 6 Jun 2024 09:03:04 +0300 Subject: [PATCH 26/71] docs(card): quote pattern --- elements/rh-card/demo/quote-pattern.html | 83 ++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 elements/rh-card/demo/quote-pattern.html diff --git a/elements/rh-card/demo/quote-pattern.html b/elements/rh-card/demo/quote-pattern.html new file mode 100644 index 0000000000..1346f7e711 --- /dev/null +++ b/elements/rh-card/demo/quote-pattern.html @@ -0,0 +1,83 @@ +
+ + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ First name Last name + Job title, Company name + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ First name Last name + Job title, Company name + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ First name Last name + Job title, Company name + + + + + + +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ First name Last name + Job title, Company name + + + +
+ + + + From bb3b7adb6632fff9455450cbb225ad5b40249562 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 6 Jun 2024 09:03:11 +0300 Subject: [PATCH 27/71] docs(card): image pattern --- elements/rh-card/demo/image-pattern.html | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/elements/rh-card/demo/image-pattern.html b/elements/rh-card/demo/image-pattern.html index 87f29e0eec..8564b89516 100644 --- a/elements/rh-card/demo/image-pattern.html +++ b/elements/rh-card/demo/image-pattern.html @@ -1,6 +1,6 @@
- +

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.

@@ -10,7 +10,7 @@ - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -21,7 +21,7 @@

Heading, sm

 - +

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.

@@ -31,7 +31,7 @@

Heading, sm

 - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -42,7 +42,7 @@

Heading, sm

 - +

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.

@@ -52,7 +52,7 @@

Heading, sm

 - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -63,7 +63,7 @@

Heading, sm

 - +

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.

@@ -73,7 +73,7 @@

Heading, sm

 - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -87,7 +87,7 @@

Heading, sm

+ + From d7f067a14ddbd8e8e06a4dc3e416633e4a2bf683 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 6 Jun 2024 09:03:22 +0300 Subject: [PATCH 29/71] docs(card): asset pattern --- elements/rh-card/demo/asset-pattern.html | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/elements/rh-card/demo/asset-pattern.html b/elements/rh-card/demo/asset-pattern.html index 09b52d41bf..0e00f61075 100644 --- a/elements/rh-card/demo/asset-pattern.html +++ b/elements/rh-card/demo/asset-pattern.html @@ -1,6 +1,6 @@
- + @@ -9,7 +9,7 @@

Title, lg

 - +

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.

@@ -21,11 +21,11 @@

Title, lg

Title, lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. - + - + @@ -34,7 +34,7 @@

Title, lg

 - +

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.

@@ -46,14 +46,14 @@

Title, lg

Title, lg

Lorem ipsum dolor sit amet, consectetur adipiscing elit. - +
+ + From 4d5a372d9b48882a1a96467433b2b080a61524db Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 6 Jun 2024 09:26:11 +0300 Subject: [PATCH 33/71] docs(card): title pattern --- elements/rh-card/demo/title-pattern.html | 78 ++++++++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 elements/rh-card/demo/title-pattern.html diff --git a/elements/rh-card/demo/title-pattern.html b/elements/rh-card/demo/title-pattern.html new file mode 100644 index 0000000000..c25a74fe24 --- /dev/null +++ b/elements/rh-card/demo/title-pattern.html @@ -0,0 +1,78 @@ +
+ + +

Title, lg

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ Call to action + + + +

Title, lg

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ Call to action + + + +

Title, lg

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ Call to action + + + +

Title, lg

+ +

Lorem ipsum dolor sit amet, consectetur adipiscing elit. + Nullam eleifend elit sed est egestas, a sollicitudin mauris tincidunt. + Pellentesque vel dapibus risus.

+ Call to action + + +
+ + + + From afb2589319fbf37180274c70fdcc66f1f5f1de24 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 6 Jun 2024 09:36:22 +0300 Subject: [PATCH 34/71] docs(card): video pattern --- elements/rh-card/demo/video-pattern.html | 81 ++++++++++++++++++++++++ 1 file changed, 81 insertions(+) create mode 100644 elements/rh-card/demo/video-pattern.html diff --git a/elements/rh-card/demo/video-pattern.html b/elements/rh-card/demo/video-pattern.html new file mode 100644 index 0000000000..bbf970bce5 --- /dev/null +++ b/elements/rh-card/demo/video-pattern.html @@ -0,0 +1,81 @@ +
+ + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quaerat quae accusantium velit sed amet, praesentium maiores illum ad. + Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.

+ Call to action + + + + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quaerat quae accusantium velit sed amet, praesentium maiores illum ad. + Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.

+ First name Last name + Job title, Company name + + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + + + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quaerat quae accusantium velit sed amet, praesentium maiores illum ad. + Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.

+ Call to action + + + + + +

Lorem ipsum dolor sit amet consectetur adipisicing elit. + Quaerat quae accusantium velit sed amet, praesentium maiores illum ad. + Odio vero molestiae sint animi. Vero in ad fugit sit, possimus explicabo.

+ First name Last name + Job title, Company name + + + +
+ + + + From 4635bbcc3b50dd5d979f82ff19151b1bf985acec Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Thu, 13 Jun 2024 17:47:59 +0300 Subject: [PATCH 35/71] fix(card): merge updates from base --- elements/rh-card/rh-card.ts | 27 ++++++++++++--------------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index 91ba75a36c..2cfc78bf3c 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -2,7 +2,7 @@ import { SlotController } from '@patternfly/pfe-core/controllers/slot-controller import { customElement } from 'lit/decorators/custom-element.js'; import { property } from 'lit/decorators/property.js'; import { classMap } from 'lit/directives/class-map.js'; -import { html, LitElement } from 'lit'; +import { html, isServer, LitElement } from 'lit'; import { colorContextConsumer, type ColorTheme } from '../../lib/context/color/consumer.js'; import { colorContextProvider } from '../../lib/context/color/provider.js'; @@ -59,30 +59,27 @@ export class RhCard extends LitElement { @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, ...RhCard.slots); override render() { const { on = '', colorPalette = '' } = this; const hasImage = this.#slots.hasSlotted('image'); const hasHeader = this.#slots.hasSlotted('header'); + const hasBody = !isServer && this.querySelector(':not([slot])'); + const hasFooter = this.#slots.hasSlotted('footer'); + const hasSlotClasses = Object.fromEntries(RhCard.slots + .filter(slot => slot !== null) + .map(slot => [ + `has-${slot}`, + this.#slots.hasSlotted(slot), + ])); return html`
From 9f649a796103a0e14d8e9affe715ce7f78dc324a Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 16 Jun 2024 13:12:22 +0300 Subject: [PATCH 36/71] docs(card): pattern fixes --- elements/rh-card/demo/image-pattern.html | 18 ++++++++++-------- elements/rh-card/demo/title-pattern.html | 1 + 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/elements/rh-card/demo/image-pattern.html b/elements/rh-card/demo/image-pattern.html index 8564b89516..f3f6c58ee8 100644 --- a/elements/rh-card/demo/image-pattern.html +++ b/elements/rh-card/demo/image-pattern.html @@ -1,6 +1,6 @@
- +

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.

@@ -10,7 +10,7 @@ - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -21,7 +21,7 @@

Heading, sm

 - +

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.

@@ -31,7 +31,7 @@

Heading, sm

 - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -42,7 +42,7 @@

Heading, sm

 - +

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.

@@ -52,7 +52,7 @@

Heading, sm

 - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -63,7 +63,7 @@

Heading, sm

 - +

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.

@@ -73,7 +73,7 @@

Heading, sm

 - +

Heading, sm

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id @@ -87,6 +87,8 @@

Heading, sm

diff --git a/elements/rh-card/demo/inline-promo-narrow.html b/elements/rh-card/demo/inline-promo-narrow.html new file mode 100644 index 0000000000..a662fc8044 --- /dev/null +++ b/elements/rh-card/demo/inline-promo-narrow.html @@ -0,0 +1,48 @@ +
+ + + + +

Narrow Inline Promo

+

Promos narrower than 296px prioritize text by moving the image to the end.

+ Call to action + + + + Call to action +

The ”standard“ Inline Promo. It has a paragraph and a CTA in the ”image“ slot.

+ + + + Call to action +

In this ”standard“ Inline Promo, the slots get reversed using a class.

+ + + + Call to action +

A ”standard“ Inline Promo with a color-palette attribute added to the <rh-card> tag.

+ +
+ + + + diff --git a/elements/rh-card/demo/inline-promo-pattern.html b/elements/rh-card/demo/inline-promo-pattern.html deleted file mode 100644 index 063c2aee20..0000000000 --- a/elements/rh-card/demo/inline-promo-pattern.html +++ /dev/null @@ -1,261 +0,0 @@ -
-

Inline Promo

-

A generic but flexible pattern to feature an image, heading, content and a call to action with <rh-card>.

-
- -

Default Inline Promo:

- - - - A placeholder image in rh-card in the "image" slot - - - - - - -

Heading

-

This is the default Inline Promo card. If you want, you can customize the shadow DOM by using the ::part selector. Using this technique, you can have padding on any side, or none at all.

- - Call to action - - - -
-

Customizations to Inline Promo:

-

Using your own CSS, you can customize the look and feel of Inline Promo.

-
- - - A placeholder image in rh-card in the "image" slot - - - - -

Featured: right aligned with image

-

This variant uses the same markup in the same order with one additional class on the custom element: .reverse.

- - Call to action - - - - -

Featured: no image is okay too

-

Sometimes, you may not have an image to go with your card. Here, we've added the .one-col class to denote it's a single column.

- - Call to action - - - -
- - - A placeholder image in rh-card in the "image" slot - - - - -

Full Width Inline Promo

-

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 .reverse or .one-col classes to change the look of this variant or customize to your liking using the CSS shadow part psuedo element.

- - Call to action - - -
- -
- -

Full Width Inline Promo - No Image

-

This Inline Promo is just like the last version, except this version doesn't have an image—denoted by the .full-width--no-image class.

- - Call to action - - -
- - - - Call to action - -

The ”standard“ Inline Promo. It has a paragraph and a CTA in the ”image“ slot.

- - - - - Call to action - -

In this ”standard“ Inline Promo, the slots get reversed using a class.

- - - - - Call to action - -

A ”standard“ Inline Promo with a color-palette attribute added to the <rh-card> tag.

- - - - - diff --git a/elements/rh-card/demo/inline-promo-standard.html b/elements/rh-card/demo/inline-promo-standard.html new file mode 100644 index 0000000000..4a74259cf4 --- /dev/null +++ b/elements/rh-card/demo/inline-promo-standard.html @@ -0,0 +1,30 @@ +
+ +

The ”standard“ Inline Promo. It has a paragraph and a CTA in the ”image“ slot.

+ Call to action + + + +

In this ”standard“ Inline Promo, the slots get reversed using a class.

+ Call to action + + + +

A ”standard“ Inline Promo with a color-palette attribute added to the <rh-card> tag.

+ Call to action + +
+ + + + diff --git a/elements/rh-card/demo/inline-promo.html b/elements/rh-card/demo/inline-promo.html new file mode 100644 index 0000000000..b6d429e0c0 --- /dev/null +++ b/elements/rh-card/demo/inline-promo.html @@ -0,0 +1,57 @@ +
+ + + + +

Inline Promo

+

Featured inline promo card has an image in the image slot, + a heading in the header slot, and a CTA + in the footer slot, and body content.

+ Call to action + + + + + + +

End-aligned image

+

By selecting the image CSS Shadow Part, you may end-align the promo's image.

+ Call to action + + + +

Featured: no image is okay too

+

Sometimes, you may not have an image to go with your card. By omitting the slotted image, + the promo reverts to a single column.

+ Call to action + +
+ + + + diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index dff13b444a..3eae588047 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -1,8 +1,6 @@ -article { - position: relative; - height: 100%; - display: flex; - flex-direction: column; +:host { + container-name: card; + container-type: inline-size; } #header.empty, @@ -27,6 +25,8 @@ article { line-height: var(--rh-line-height-body-text, 1.5); border-style: solid; border-width: var(--rh-border-width-sm, 1px); + width: 100%; + height: 100%; } #container, @@ -61,6 +61,11 @@ article { font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "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); } +#image ::slotted(*) { + display: block; + max-width: 100%; +} + #header { display: flex; flex-direction: column; @@ -99,23 +104,6 @@ article { margin-block-end: 0; } -@media (min-width: 768px) { - #header, - #body, - #footer { - margin-inline: var(--rh-space-2xl, 32px); - } - - #header, - #body { - margin-block-start: var(--rh-space-2xl, 32px); - } - - #footer { - margin-block-end: var(--rh-space-2xl, 32px); - } -} - .has-image.has-header #image { order: -1; } @@ -127,56 +115,136 @@ article { /***************************************************************************** * INLINE PROMO *****************************************************************************/ -:host([variant~="inline-promo"]) { - --rh-card-inline-promo-heading-size: var(--rh-font-size-heading-xs, 1.25rem); - --rh-card-inline-promo-heading-font-weight: var(--rh-font-weight-heading-medium, 500); - --rh-card-inline-promo-heading-margin-block-end: var(--rh-space-lg, 16px); - --rh-card-inline-promo-paragraph-size: var(--rh-font-size-body-text-lg, 1.125rem); - --rh-card-inline-promo-paragraph-margin-block-end: var(--rh-space-xl, 24px); - - container: inline-promo / inline-size; - display: block; +#container.inline-promo { + display: grid; + align-items: center; } -::slotted([slot="image"]:is(img, svg)) { - display: block; - max-width: 100%; +@container card (max-width: 767px) { + #container.inline-promo #image, + #container.inline-promo #body { + width: calc(100% - 2 * var(--rh-space-lg, 16px)); + } } -:host([variant~="inline-promo"]) #image { +#container.inline-promo #image { order: 10; +} + +#container.inline-promo #image ::slotted(*) { + object-fit: cover; width: 100%; } -:host([variant~="inline-promo"]) #body ::slotted(h2) { - font-size: var(--rh-card-inline-promo-heading-size) !important; - font-weight: var(--rh-card-inline-promo-heading-font-weight) !important; +#container.inline-promo #header { + margin-inline: 0; +} + +#container.inline-promo #header ::slotted(*) { + font-size: var(--rh-card-inline-promo-heading-size, var(--rh-font-size-heading-xs, 1.25rem)) !important; + font-weight: var(--rh-card-inline-promo-heading-font-weight, var(--rh-font-weight-heading-medium, 500)) !important; margin-block-start: 0; - margin-block-end: var(--rh-card-inline-promo-heading-margin-block-end) !important; + margin-block-end: var(--rh-card-inline-promo-heading-margin-block-end, var(--rh-space-lg, 16px)) !important; +} + +#container.inline-promo:is(.has-image, .has-header) #body ::slotted(p) { + font-size: var(--rh-card-inline-promo-paragraph-size, var(--rh-font-size-body-text-lg, 1.125rem)) !important; + margin-block-end: var(--rh-card-inline-promo-paragraph-margin-block-end, var(--rh-space-xl, 24px)) !important; +} + +#container.inline-promo.has-header.has-body.has-footer:not(.has-image) { + grid-template-columns: auto; +} + +/* "standard" inline promo */ +#container.inline-promo.standard { + grid-template: auto auto / auto; + padding: var(--rh-space-2xl, 32px); + gap: var(--rh-space-xl, 24px); +} + +#container.inline-promo.standard #body { + display: contents; } -:host([variant~="inline-promo"]:not(.standard)) #body ::slotted(p) { - font-size: var(--rh-card-inline-promo-paragraph-size) !important; - margin-block-end: var(--rh-card-inline-promo-paragraph-margin-block-end) !important; +#container.inline-promo #footer { + margin: 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; +@container card (min-width: 768px) { + #header, + #body, + #footer { + margin-inline: var(--rh-space-2xl, 32px); + } + + #header, + #body { + margin-block-start: var(--rh-space-2xl, 32px); + } + + #footer { + margin-block-end: var(--rh-space-2xl, 32px); + } + + #container.inline-promo.has-image { + grid-template-columns: auto auto; } - :host([variant~="inline-promo"]) #image { + #container.inline-promo #image { order: 0; + max-width: 25cw; } - :host([variant~="inline-promo"]) #body { - max-width: 75ch; + #container.inline-promo #body { + max-width: min(75ch, calc(75cw + var(--rh-space-xl, 24px) + 2 * var(--rh-space-lg, 16px))); } - :host([variant~="inline-promo"]) #body ::slotted(h2) { + #container.inline-promo #header ::slotted(*) { --rh-card-inline-promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); } + + /* "standard" inline promo */ + #container.inline-promo.standard { + grid-template: auto / auto auto; + padding: var(--rh-space-3xl, 48px); + } + + #container.inline-promo.standard #footer { + justify-self: end; + } +} + +@container card (max-width: 767px) and (width: 100vw) { + #container.inline-promo #body { + margin-block-start: var(--rh-space-4xl, 64px); + } + #container.inline-promo #image { + margin-block-end: var(--rh-space-4xl, 64px); + } +} + +@container card (min-width: 1093px) or (min-width: 100vw) { + #container.inline-promo { + border-color: transparent; + gap: var(--rh-space-2xl, 32px); + padding-inline: var(--rh-space-lg, 16px); + place-items: center; + width: calc(100% - 2 * var(--rh-space-lg, 16px)); + } + + #container.inline-promo #header, + #container.inline-promo #body, + #container.inline-promo #footer { + margin-inline: 0; + } +} + +@container card (min-width: 1093px) { + #container.inline-promo:not(.has-image) #image.empty { + display: block !important; + order: 1; + grid-column: 2/3; + width: 360px; + } } diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index 2a395b51de..e4454ab050 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -85,19 +85,33 @@ export class RhCard extends LitElement { | 'image' | 'body' | 'footer', boolean>; + const isInlinePromo = this.variant === 'inline-promo'; + const standard = isInlinePromo && slots.body && !slots.image && !slots.header; + const computedPalette = + !standard ? colorPalette + : (colorPalette || 'lightest').replace('est', 'er'); + const header = html` + `; + const footer = html` + `; return html`
- + })}">${isInlinePromo ? '' : header}
@@ -106,13 +120,11 @@ export class RhCard extends LitElement {
+ ${!isInlinePromo ? '' : header} + ${!isInlinePromo ? '' : footer}
- + ${isInlinePromo ? '' : footer}
`; } From 7ad749f7df3936e995db483a9eb9505b11213869 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 15:04:38 +0300 Subject: [PATCH 41/71] fix(card): promo tweaks --- elements/rh-card/rh-card.css | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 3eae588047..a494c77ae2 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -121,7 +121,6 @@ } @container card (max-width: 767px) { - #container.inline-promo #image, #container.inline-promo #body { width: calc(100% - 2 * var(--rh-space-lg, 16px)); } @@ -193,18 +192,21 @@ #container.inline-promo #image { order: 0; - max-width: 25cw; + max-width: 360px; } #container.inline-promo #body { - max-width: min(75ch, calc(75cw + var(--rh-space-xl, 24px) + 2 * var(--rh-space-lg, 16px))); + max-width: 750px; + } + + #container.inline-promo:not(.has-image) #body { + max-width: 100cw; } #container.inline-promo #header ::slotted(*) { --rh-card-inline-promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); } - /* "standard" inline promo */ #container.inline-promo.standard { grid-template: auto / auto auto; padding: var(--rh-space-3xl, 48px); @@ -219,6 +221,7 @@ #container.inline-promo #body { margin-block-start: var(--rh-space-4xl, 64px); } + #container.inline-promo #image { margin-block-end: var(--rh-space-4xl, 64px); } @@ -238,6 +241,10 @@ #container.inline-promo #footer { margin-inline: 0; } + + #container.inline-promo #image { + max-width: 360px; + } } @container card (min-width: 1093px) { @@ -245,6 +252,6 @@ display: block !important; order: 1; grid-column: 2/3; - width: 360px; + width: 25cw; } } From 93d9a09c08333dfcea584b8bcb31e5b4f75db789 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 15:17:35 +0300 Subject: [PATCH 42/71] fix(card): promo tweaks --- elements/rh-card/rh-card.css | 44 +++++++++++++++++++----------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index a494c77ae2..5b0f8c504c 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -104,6 +104,23 @@ margin-block-end: 0; } +@container card (min-width: 768px) { + #header, + #body, + #footer { + margin-inline: var(--rh-space-2xl, 32px); + } + + #header, + #body { + margin-block-start: var(--rh-space-2xl, 32px); + } + + #footer { + margin-block-end: var(--rh-space-2xl, 32px); + } +} + .has-image.has-header #image { order: -1; } @@ -118,12 +135,7 @@ #container.inline-promo { display: grid; align-items: center; -} - -@container card (max-width: 767px) { - #container.inline-promo #body { - width: calc(100% - 2 * var(--rh-space-lg, 16px)); - } + --_standard-inline-padding: var(--rh-space-2xl, 32px); } #container.inline-promo #image { @@ -158,8 +170,9 @@ /* "standard" inline promo */ #container.inline-promo.standard { grid-template: auto auto / auto; - padding: var(--rh-space-2xl, 32px); + padding: var(--_standard-inline-padding); gap: var(--rh-space-xl, 24px); + width: calc(100% - 2 * var(--_standard-inline-padding)); } #container.inline-promo.standard #body { @@ -171,19 +184,9 @@ } @container card (min-width: 768px) { - #header, - #body, - #footer { - margin-inline: var(--rh-space-2xl, 32px); - } - - #header, - #body { - margin-block-start: var(--rh-space-2xl, 32px); - } - - #footer { - margin-block-end: var(--rh-space-2xl, 32px); + #container.inline-promo { + width: 100%; + --_standard-inline-padding: var(--rh-space-2xl, 32px); } #container.inline-promo.has-image { @@ -209,7 +212,6 @@ #container.inline-promo.standard { grid-template: auto / auto auto; - padding: var(--rh-space-3xl, 48px); } #container.inline-promo.standard #footer { From d307505037166db66c5746637ef868e284506019 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 15:38:20 +0300 Subject: [PATCH 43/71] refactor(card): class names --- elements/rh-card/rh-card.css | 71 ++++++++++++++++-------------------- elements/rh-card/rh-card.ts | 14 +++---- 2 files changed, 39 insertions(+), 46 deletions(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 5b0f8c504c..132de3b1cd 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -129,108 +129,105 @@ margin-block-start: var(--rh-space-lg, 16px); } -/***************************************************************************** - * INLINE PROMO - *****************************************************************************/ -#container.inline-promo { +#container.promo { display: grid; align-items: center; --_standard-inline-padding: var(--rh-space-2xl, 32px); } -#container.inline-promo #image { +#container.promo #image { order: 10; } -#container.inline-promo #image ::slotted(*) { +#container.promo #image ::slotted(*) { object-fit: cover; width: 100%; } -#container.inline-promo #header { +#container.promo #header { margin-inline: 0; } -#container.inline-promo #header ::slotted(*) { - font-size: var(--rh-card-inline-promo-heading-size, var(--rh-font-size-heading-xs, 1.25rem)) !important; - font-weight: var(--rh-card-inline-promo-heading-font-weight, var(--rh-font-weight-heading-medium, 500)) !important; +#container.promo #header ::slotted(*) { + font-size: var(--rh-card-promo-heading-size, var(--rh-font-size-heading-xs, 1.25rem)) !important; + font-weight: var(--rh-card-promo-heading-font-weight, var(--rh-font-weight-heading-medium, 500)) !important; margin-block-start: 0; - margin-block-end: var(--rh-card-inline-promo-heading-margin-block-end, var(--rh-space-lg, 16px)) !important; + margin-block-end: var(--rh-card-promo-heading-margin-block-end, var(--rh-space-lg, 16px)) !important; } -#container.inline-promo:is(.has-image, .has-header) #body ::slotted(p) { - font-size: var(--rh-card-inline-promo-paragraph-size, var(--rh-font-size-body-text-lg, 1.125rem)) !important; - margin-block-end: var(--rh-card-inline-promo-paragraph-margin-block-end, var(--rh-space-xl, 24px)) !important; +#container.promo:is(.has-image, .has-header) #body ::slotted(p) { + font-size: var(--rh-card-promo-paragraph-size, var(--rh-font-size-body-text-lg, 1.125rem)) !important; + margin-block-end: var(--rh-card-promo-paragraph-margin-block-end, var(--rh-space-xl, 24px)) !important; } -#container.inline-promo.has-header.has-body.has-footer:not(.has-image) { +#container.promo.has-header.has-body.has-footer:not(.has-image) { grid-template-columns: auto; } -/* "standard" inline promo */ -#container.inline-promo.standard { +#container.promo.standard { grid-template: auto auto / auto; padding: var(--_standard-inline-padding); gap: var(--rh-space-xl, 24px); width: calc(100% - 2 * var(--_standard-inline-padding)); } -#container.inline-promo.standard #body { +#container.promo.standard #body { display: contents; } -#container.inline-promo #footer { +#container.promo #footer { margin: 0; } @container card (min-width: 768px) { - #container.inline-promo { + #container.promo { width: 100%; --_standard-inline-padding: var(--rh-space-2xl, 32px); } - #container.inline-promo.has-image { + #container.promo.has-image { grid-template-columns: auto auto; } - #container.inline-promo #image { + #container.promo #image { order: 0; max-width: 360px; } - #container.inline-promo #body { + #container.promo #body { max-width: 750px; } - #container.inline-promo:not(.has-image) #body { + #container.promo:not(.has-image) #body { max-width: 100cw; } - #container.inline-promo #header ::slotted(*) { - --rh-card-inline-promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); + #container.promo #header ::slotted(*) { + --rh-card-promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); } - #container.inline-promo.standard { + #container.promo.standard { grid-template: auto / auto auto; } - #container.inline-promo.standard #footer { + #container.promo.standard #footer { justify-self: end; } } @container card (max-width: 767px) and (width: 100vw) { - #container.inline-promo #body { + #container.promo #body { margin-block-start: var(--rh-space-4xl, 64px); } - #container.inline-promo #image { + #container.promo #image { margin-block-end: var(--rh-space-4xl, 64px); } } +/* full width promo */ @container card (min-width: 1093px) or (min-width: 100vw) { - #container.inline-promo { + #container.promo { border-color: transparent; gap: var(--rh-space-2xl, 32px); padding-inline: var(--rh-space-lg, 16px); @@ -238,19 +235,15 @@ width: calc(100% - 2 * var(--rh-space-lg, 16px)); } - #container.inline-promo #header, - #container.inline-promo #body, - #container.inline-promo #footer { + #container.promo #header, + #container.promo #body, + #container.promo #footer { margin-inline: 0; } - - #container.inline-promo #image { - max-width: 360px; - } } @container card (min-width: 1093px) { - #container.inline-promo:not(.has-image) #image.empty { + #container.promo:not(.has-image) #image.empty { display: block !important; order: 1; grid-column: 2/3; diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index e4454ab050..003a1755c8 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -85,8 +85,8 @@ export class RhCard extends LitElement { | 'image' | 'body' | 'footer', boolean>; - const isInlinePromo = this.variant === 'inline-promo'; - const standard = isInlinePromo && slots.body && !slots.image && !slots.header; + const promo = this.variant === 'inline-promo'; + const standard = promo && slots.body && !slots.image && !slots.header; const computedPalette = !standard ? colorPalette : (colorPalette || 'lightest').replace('est', 'er'); @@ -108,10 +108,10 @@ export class RhCard extends LitElement { class="${classMap({ [on]: !!on, [computedPalette]: !!computedPalette, - 'inline-promo': isInlinePromo, + promo, standard, ...Object.fromEntries(Object.entries(slots).map(([k, v]) => [`has-${k}`, v])), - })}">${isInlinePromo ? '' : header} + })}">${promo ? '' : header}
@@ -120,11 +120,11 @@ export class RhCard extends LitElement {
- ${!isInlinePromo ? '' : header} + ${!promo ? '' : header} - ${!isInlinePromo ? '' : footer} + ${!promo ? '' : footer}
- ${isInlinePromo ? '' : footer} + ${promo ? '' : footer}
`; } From fe7549f5a76bf8f5910d0d8842d9682842308920 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 15:46:18 +0300 Subject: [PATCH 44/71] fix(card): private vars --- elements/rh-card/rh-card.css | 49 ++++++++++++++++++++---------------- 1 file changed, 28 insertions(+), 21 deletions(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 132de3b1cd..2c699f1ddf 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -132,7 +132,14 @@ #container.promo { display: grid; align-items: center; - --_standard-inline-padding: var(--rh-space-2xl, 32px); + --_promo-standard-inline-padding: var(--rh-space-2xl, 32px); + --_promo-image-width: 360px; + --_promo-body-width: 750px; + --_promo-heading-size: var(--rh-font-size-heading-xs, 1.25rem); + --_promo-heading-font-weight: var(--rh-font-weight-heading-medium, 500); + --_promo-heading-margin-block-end: var(--rh-space-lg, 16px); + --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem); + --_promo-paragraph-margin-block-end: var(--rh-space-xl, 24px); } #container.promo #image { @@ -149,15 +156,15 @@ } #container.promo #header ::slotted(*) { - font-size: var(--rh-card-promo-heading-size, var(--rh-font-size-heading-xs, 1.25rem)) !important; - font-weight: var(--rh-card-promo-heading-font-weight, var(--rh-font-weight-heading-medium, 500)) !important; + font-size: var(--_promo-heading-size) !important; + font-weight: var(--_promo-heading-font-weight) !important; margin-block-start: 0; - margin-block-end: var(--rh-card-promo-heading-margin-block-end, var(--rh-space-lg, 16px)) !important; + margin-block-end: var(--_promo-heading-margin-block-end) !important; } #container.promo:is(.has-image, .has-header) #body ::slotted(p) { - font-size: var(--rh-card-promo-paragraph-size, var(--rh-font-size-body-text-lg, 1.125rem)) !important; - margin-block-end: var(--rh-card-promo-paragraph-margin-block-end, var(--rh-space-xl, 24px)) !important; + font-size: var(--_promo-paragraph-font-size) !important; + margin-block-end: var(--_promo-paragraph-margin-block-end) !important; } #container.promo.has-header.has-body.has-footer:not(.has-image) { @@ -166,9 +173,9 @@ #container.promo.standard { grid-template: auto auto / auto; - padding: var(--_standard-inline-padding); + padding: var(--_promo-standard-inline-padding); gap: var(--rh-space-xl, 24px); - width: calc(100% - 2 * var(--_standard-inline-padding)); + width: calc(100% - 2 * var(--_promo-standard-inline-padding)); } #container.promo.standard #body { @@ -182,7 +189,7 @@ @container card (min-width: 768px) { #container.promo { width: 100%; - --_standard-inline-padding: var(--rh-space-2xl, 32px); + --_promo-standard-inline-padding: var(--rh-space-2xl, 32px); } #container.promo.has-image { @@ -191,11 +198,11 @@ #container.promo #image { order: 0; - max-width: 360px; + max-width: var(--_promo-image-width); } #container.promo #body { - max-width: 750px; + max-width: var(--_promo-body-width); } #container.promo:not(.has-image) #body { @@ -203,7 +210,7 @@ } #container.promo #header ::slotted(*) { - --rh-card-promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); + --_promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); } #container.promo.standard { @@ -225,6 +232,15 @@ } } +@container card (min-width: 1093px) { + #container.promo:not(.has-image) #image.empty { + display: block !important; + order: 1; + grid-column: 2/3; + width: var(--_promo-image-width); + } +} + /* full width promo */ @container card (min-width: 1093px) or (min-width: 100vw) { #container.promo { @@ -241,12 +257,3 @@ margin-inline: 0; } } - -@container card (min-width: 1093px) { - #container.promo:not(.has-image) #image.empty { - display: block !important; - order: 1; - grid-column: 2/3; - width: 25cw; - } -} From 297503824f0d1220c4d3835cbbc4a2a69c452dca Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 16:12:15 +0300 Subject: [PATCH 45/71] fix(card): remove unused private var --- elements/rh-card/rh-card.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 2c699f1ddf..2bd87e329d 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -20,7 +20,7 @@ flex-direction: column; justify-items: flex-start; overflow: hidden; - border-radius: var(--_border-radius, var(--rh-border-width-lg, 3px)); + border-radius: var(--rh-border-width-lg, 3px); 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); line-height: var(--rh-line-height-body-text, 1.5); border-style: solid; From 410b4a21275443abc0eebe35283a886141b0b6d2 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 16:12:22 +0300 Subject: [PATCH 46/71] docs(card): inline-promo --- elements/rh-card/demo/inline-promo-full-width.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/demo/inline-promo-full-width.html b/elements/rh-card/demo/inline-promo-full-width.html index 5fbd194712..298fe2e409 100644 --- a/elements/rh-card/demo/inline-promo-full-width.html +++ b/elements/rh-card/demo/inline-promo-full-width.html @@ -13,7 +13,7 @@ stroke-dasharray="1 1">

Full Width Inline Promo

-

Promos wider than 1300px do not have a border.

+

Promos which span the entire viewport do not have a border.

Call to action From 16ce8caddc63ecfcb925bb0791d0d6a968b8840c Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 17:09:44 +0300 Subject: [PATCH 47/71] fix(card): rename inline promo to promo --- .changeset/fair-buttons-punch.md | 22 +++++---------- ...-full-width.html => promo-full-width.html} | 14 +++++----- ...ne-promo-narrow.html => promo-narrow.html} | 16 +++++------ ...romo-standard.html => promo-standard.html} | 12 ++++----- .../demo/{inline-promo.html => promo.html} | 8 +++--- elements/rh-card/rh-card.ts | 27 +++++-------------- 6 files changed, 38 insertions(+), 61 deletions(-) rename elements/rh-card/demo/{inline-promo-full-width.html => promo-full-width.html} (82%) rename elements/rh-card/demo/{inline-promo-narrow.html => promo-narrow.html} (65%) rename elements/rh-card/demo/{inline-promo-standard.html => promo-standard.html} (51%) rename elements/rh-card/demo/{inline-promo.html => promo.html} (92%) diff --git a/.changeset/fair-buttons-punch.md b/.changeset/fair-buttons-punch.md index 4b35845dc2..eabaab8b37 100644 --- a/.changeset/fair-buttons-punch.md +++ b/.changeset/fair-buttons-punch.md @@ -2,23 +2,15 @@ "@rhds/elements": minor --- -``: ✨ Added Inline Promo variant +``: ✨ Added promo card variant -The Inline Promo card variant allows users to easily display text and optionally an image side by side. +The promo card variant allows users to easily display text and optionally an image side by side. ```html - - - A placeholder image in rh-card in the "image" slot - - - - - -

Featured: left aligned with image

-

This is the default Inline Promo card. If you want, you can customize the shadow DOM by using the ::part selector. Using this technique, you can have padding on any side, or none at all.

- - Call to action - + + product illustration +

Try our new product

+

Our new product is the best in class.

+ Start a Free Trial ``` diff --git a/elements/rh-card/demo/inline-promo-full-width.html b/elements/rh-card/demo/promo-full-width.html similarity index 82% rename from elements/rh-card/demo/inline-promo-full-width.html rename to elements/rh-card/demo/promo-full-width.html index 298fe2e409..3ad9afb404 100644 --- a/elements/rh-card/demo/inline-promo-full-width.html +++ b/elements/rh-card/demo/promo-full-width.html @@ -1,5 +1,5 @@ - + -

Full Width Inline Promo

+

Full Width Promo

Promos which span the entire viewport do not have a border.

Call to action - + Full Width Inline Promo height="100%" stroke-dasharray="1 1"> -

Full Width Inline Promo

+

Full Width Promo

Using the image part to end-align the image

Call to action - -

Full Width Inline Promo - No Image

-

This Inline Promo is just like the last version, except this version doesn't have an + +

Full Width Promo - No Image

+

This Promo is just like the last version, except this version doesn't have an image in the image slot. Content flows around the empty image slot.

Call to action diff --git a/elements/rh-card/demo/inline-promo-narrow.html b/elements/rh-card/demo/promo-narrow.html similarity index 65% rename from elements/rh-card/demo/inline-promo-narrow.html rename to elements/rh-card/demo/promo-narrow.html index a662fc8044..fd960599df 100644 --- a/elements/rh-card/demo/inline-promo-narrow.html +++ b/elements/rh-card/demo/promo-narrow.html @@ -1,5 +1,5 @@
- + -

Narrow Inline Promo

+

Narrow Promo

Promos narrower than 296px prioritize text by moving the image to the end.

Call to action - + Call to action -

The ”standard“ Inline Promo. It has a paragraph and a CTA in the ”image“ slot.

+

The ”standard“ Promo. It has a paragraph and a CTA in the ”image“ slot.

 - + Call to action -

In this ”standard“ Inline Promo, the slots get reversed using a class.

+

In this ”standard“ Promo, the slots get reversed using a class.

 - + Call to action -

A ”standard“ Inline Promo with a color-palette attribute added to the <rh-card> tag.

+

A ”standard“ Promo with a color-palette attribute added to the <rh-card> tag.
diff --git a/elements/rh-card/demo/inline-promo-standard.html b/elements/rh-card/demo/promo-standard.html similarity index 51% rename from elements/rh-card/demo/inline-promo-standard.html rename to elements/rh-card/demo/promo-standard.html index 4a74259cf4..f22044fdbb 100644 --- a/elements/rh-card/demo/inline-promo-standard.html +++ b/elements/rh-card/demo/promo-standard.html @@ -1,16 +1,16 @@
- -

The ”standard“ Inline Promo. It has a paragraph and a CTA in the ”image“ slot.

+ +

The ”standard“ Promo. It has a paragraph and a CTA in the ”image“ slot.

Call to action - -

In this ”standard“ Inline Promo, the slots get reversed using a class.

+ +

In this ”standard“ Promo, the slots get reversed using a class.

Call to action - -

A ”standard“ Inline Promo with a color-palette attribute added to the <rh-card> tag.

+ +

A ”standard“ Promo with a color-palette attribute added to the <rh-card> tag.

Call to action
diff --git a/elements/rh-card/demo/inline-promo.html b/elements/rh-card/demo/promo.html similarity index 92% rename from elements/rh-card/demo/inline-promo.html rename to elements/rh-card/demo/promo.html index b6d429e0c0..7f3f475d57 100644 --- a/elements/rh-card/demo/inline-promo.html +++ b/elements/rh-card/demo/promo.html @@ -1,5 +1,5 @@
- + -

Inline Promo

+

Promo

Featured inline promo card has an image in the image slot, a heading in the header slot, and a CTA in the footer slot, and body content.

Call to action - + End-aligned image Call to action - +

Featured: no image is okay too

Sometimes, you may not have an image to go with your card. By omitting the slotted image, the promo reverts to a single column.

diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index 003a1755c8..b6ed5ccdea 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -14,7 +14,7 @@ import styles from './rh-card.css'; * 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 image - * Use this slot for the inline promo variant of the card. Images & CTA's are most often slotted here. + * Use this slot for the 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. @@ -23,7 +23,7 @@ import styles from './rh-card.css'; * @csspart header * The header for the card. Contains the header slot. * @csspart image - * The image part for the inline-promo variation for the card. Contains the image slot. + * The image part for the promo variation for the card. Contains the image slot. * @csspart body * The body for the card. Contains the default slot. * @csspart footer @@ -31,21 +31,6 @@ import styles from './rh-card.css'; * @cssprop {} --rh-card-header-font-size * Font size for header on card * {@default `1.5rem`} - * @cssprop --rh-card-inline-promo-heading-size - Size of inline promo heading - {@default `var(--rh-font-size-heading-xs, 1.25rem)`} - * @cssprop {} --rh-card-inline-promo-heading-font-weight - Font weight of inline promo heading - {@default `var(--rh-font-weight-heading-medium, 500)`} - * @cssprop {} --rh-card-inline-promo-heading-margin-block-end - Bottom margin on inline promo heading - {@default `var(--rh-space-lg, 16px)`} - * @cssprop --rh-card-inline-promo-paragraph-size - Inline promo paragraph size - {@default `var(--rh-font-size-body-text-lg, 1.125rem)`} - * @cssprop {} --rh-card-inline-promo-paragraph-margin-block-end - Bottom margin on inline promo paragraph - {@default `var(--rh-space-xl, 24px)`} */ @customElement('rh-card') export class RhCard extends LitElement { @@ -72,12 +57,12 @@ export class RhCard extends LitElement { @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: 'darkest' | 'lightest' | 'lighter'; - @property({ reflect: true }) variant?: 'inline-promo'; + @property({ reflect: true }) variant?: 'promo'; #slots = new SlotController(this, ...RhCard.slots); override render() { - const { on = '', colorPalette = '' } = this; + const { on = '', colorPalette = '', variant = '' } = this; const slots = Object.fromEntries(RhCard.slots.map(slot => [slot ?? 'body', this.#slots.hasSlotted(slot)])) as Record< @@ -85,7 +70,7 @@ export class RhCard extends LitElement { | 'image' | 'body' | 'footer', boolean>; - const promo = this.variant === 'inline-promo'; + const promo = this.variant === 'promo'; const standard = promo && slots.body && !slots.image && !slots.header; const computedPalette = !standard ? colorPalette @@ -108,7 +93,7 @@ export class RhCard extends LitElement { class="${classMap({ [on]: !!on, [computedPalette]: !!computedPalette, - promo, + [variant]: !!variant, standard, ...Object.fromEntries(Object.entries(slots).map(([k, v]) => [`has-${k}`, v])), })}">${promo ? '' : header} From c1c2a13c8deb9b441487dbb9334d9ce83985e0c1 Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Mon, 24 Jun 2024 17:24:18 +0300 Subject: [PATCH 48/71] fix(card): imageless promo layout --- elements/rh-card/rh-card.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 2bd87e329d..e651bb04ec 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -132,6 +132,7 @@ #container.promo { display: grid; align-items: center; + --_promo-standard-inline-padding: var(--rh-space-2xl, 32px); --_promo-image-width: 360px; --_promo-body-width: 750px; @@ -189,6 +190,7 @@ @container card (min-width: 768px) { #container.promo { width: 100%; + --_promo-standard-inline-padding: var(--rh-space-2xl, 32px); } @@ -206,7 +208,7 @@ } #container.promo:not(.has-image) #body { - max-width: 100cw; + max-width: 100cqi; } #container.promo #header ::slotted(*) { From 2d3cf8c4df0e5c5625dd86cff2ca2d096ec5468f Mon Sep 17 00:00:00 2001 From: Benny Powers Date: Sun, 30 Jun 2024 15:06:09 +0300 Subject: [PATCH 49/71] docs(card): align image when reversed --- elements/rh-card/demo/promo.html | 1 + 1 file changed, 1 insertion(+) diff --git a/elements/rh-card/demo/promo.html b/elements/rh-card/demo/promo.html index 7f3f475d57..ed5ab6c7ab 100644 --- a/elements/rh-card/demo/promo.html +++ b/elements/rh-card/demo/promo.html @@ -47,6 +47,7 @@

Featured: no image is okay too

From daba725c4ac4b0ddcadd654805e03812a8422b90 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 18 Jul 2024 15:56:22 -0400 Subject: [PATCH 59/71] fix(card): improve standard promo spacing --- elements/rh-card/rh-card.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index 9b12fb25e1..c450a1a077 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -259,14 +259,14 @@ --_promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); } - #container.standard { + #container.promo.standard { --_promo-standard-inline-padding: var(--rh-space-3xl, 48px); row-gap: 0; grid-template: auto / auto auto; } - #container.standard #footer { + #container.promo.standard #footer { justify-self: end; } } From 11812d40b66432991f7380baef9b04da234c6b9b Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Thu, 18 Jul 2024 16:00:23 -0400 Subject: [PATCH 60/71] docs(card): add promo standard demo gutters --- elements/rh-card/demo/promo-standard.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/demo/promo-standard.html b/elements/rh-card/demo/promo-standard.html index f22044fdbb..44d6f9cd37 100644 --- a/elements/rh-card/demo/promo-standard.html +++ b/elements/rh-card/demo/promo-standard.html @@ -22,9 +22,9 @@ From 12c8dacb347ac43fb060abd4f4b95f37ae4e5abe Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Jul 2024 10:36:18 -0400 Subject: [PATCH 61/71] fix(card): role `img` --- elements/rh-card/demo/promo-full-width.html | 4 ++-- elements/rh-card/demo/promo-narrow.html | 2 +- elements/rh-card/demo/promo.html | 4 ++-- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/elements/rh-card/demo/promo-full-width.html b/elements/rh-card/demo/promo-full-width.html index 04def5aa56..789d42248f 100644 --- a/elements/rh-card/demo/promo-full-width.html +++ b/elements/rh-card/demo/promo-full-width.html @@ -1,7 +1,7 @@ Full Width Promo Promo End-aligned image

By selecting the image CSS Shadow Part, you may end-align the promo's image.

Call to action + role="img" + role="img"

Featured: no image is okay too

From 431d8195837bad2d7f85d3d09b5420339c990e61 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Jul 2024 10:52:21 -0400 Subject: [PATCH 62/71] feat(card): add `full-width` attribute to promo `` --- elements/rh-card/demo/promo-full-width.html | 27 ++- elements/rh-card/demo/promo-standard.html | 14 +- elements/rh-card/demo/promo.html | 114 +++++++------ elements/rh-card/rh-card.css | 180 +++++++++----------- elements/rh-card/rh-card.ts | 8 + 5 files changed, 177 insertions(+), 166 deletions(-) diff --git a/elements/rh-card/demo/promo-full-width.html b/elements/rh-card/demo/promo-full-width.html index 789d42248f..b8b02b1722 100644 --- a/elements/rh-card/demo/promo-full-width.html +++ b/elements/rh-card/demo/promo-full-width.html @@ -1,5 +1,5 @@ - + Full Width Promo Call to action - + Full Width Promo height="100%" stroke-dasharray="1 1"> -

Full Width Promo

-

Using the image part to end-align the image

+

Full Width Promo - reverse

+

Using the container and image parts to reverse and style the Promo.

Call to action - +

Full Width Promo - No Image

This Promo is just like the last version, except this version doesn't have an - image in the image slot. Content flows around the empty image slot.

+ image in the image slot. Without an image, this turns into a single column component.

Call to action @@ -50,18 +50,27 @@

Full Width Promo - No Image

diff --git a/elements/rh-card/demo/promo.html b/elements/rh-card/demo/promo.html index 88eb5190a2..22ffacf235 100644 --- a/elements/rh-card/demo/promo.html +++ b/elements/rh-card/demo/promo.html @@ -1,70 +1,76 @@ - - - - - -

Promo

-

Featured inline promo card has an image in the image slot, - a heading in the header slot, and a CTA - in the footer slot, and body content.

- Call to action - - - - - -

End-aligned image

-

By selecting the image CSS Shadow Part, you may end-align the promo's image.

- Call to action - + + + + +

Promo

+

Featured promo card has an image in the image slot, + a heading in the header slot, and a CTA + in the footer slot, and body content.

+ Call to action + + + + + + +

Promo reversed

+

By selecting the imageand body CSS Shadow Parts, you can reverse the image and body shadow parts and adjust column widths.

+ Call to action + + + +

Featured: no image is okay too

+

Sometimes, you may not have an image to go with your card. By omitting the slotted image, + the promo reverts to a single column.

+ Call to action + - -

Featured: no image is okay too

-

Sometimes, you may not have an image to go with your card. By omitting the slotted image, - the promo reverts to a single column.

- Call to action - - diff --git a/elements/rh-card/rh-card.css b/elements/rh-card/rh-card.css index c450a1a077..b7deaf4394 100644 --- a/elements/rh-card/rh-card.css +++ b/elements/rh-card/rh-card.css @@ -3,10 +3,6 @@ container-type: inline-size; } -:host([variant="promo"]) { - container-name: card promo; -} - #header.empty, #image.empty, #footer.empty, @@ -140,169 +136,153 @@ } } -.has-image.has-header #image { - order: -1; -} - -.has-header.has-body #body { - margin-block-end: var(--rh-space-2xl, 32px); - margin-block-start: var(--rh-space-lg, 16px); - margin-inline: var(--rh-space-2xl, 32px); +/* promo */ +:host([variant="promo"]) { + display: block; + container-name: card promo; } #container.promo { - align-items: center; - display: grid; - height: auto; - - --_promo-standard-inline-padding: var(--rh-space-2xl, 32px); - --_promo-image-width: 360px; - --_promo-body-width: 750px; - --_promo-heading-size: var(--rh-font-size-heading-xs, 1.25rem); --_promo-heading-font-weight: var(--rh-font-weight-heading-medium, 500); - --_promo-heading-margin-block-end: var(--rh-space-lg, 16px); + --_promo-heading-size: var(--rh-font-size-heading-xs, 1.25rem); --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem); --_promo-paragraph-margin-block-end: var(--rh-space-lg, 16px); + --_promo-standard-inline-padding: var(--rh-space-2xl, 32px); + + height: auto; } -#container.promo #image { - order: 10; +#container.promo:not(.standard, .has-image) { + grid-template-columns: auto; } -#container.promo #image ::slotted(*) { - object-fit: cover; - width: 100%; +.promo #body { + margin: var(--rh-space-2xl, 32px); } -#container.promo #header { - margin-block-start: var(--rh-space-md, 8px); +.promo.has-image #body { + order: -5; +} + +.promo.has-header #header { + margin: 0; + margin-block-end: var(--rh-space-lg, 16px); +} + +.promo.has-footer #footer { + margin-block-end: 0; + margin-block-start: var(--rh-space-xl, 24px); margin-inline: 0; } -#container.promo #header ::slotted(*) { +.promo #header ::slotted(*) { font-size: var(--_promo-heading-size) !important; font-weight: var(--_promo-heading-font-weight) !important; - margin-block-start: 0; margin-block-end: var(--_promo-heading-margin-block-end) !important; + margin-block-start: 0; } -#container.promo:is(.has-image, .has-header) #body ::slotted(p) { +.promo:is(.has-image, .has-header) #body ::slotted(p) { font-size: var(--_promo-paragraph-font-size) !important; margin-block-end: var(--_promo-paragraph-margin-block-end) !important; } -#container.promo.has-header.has-body.has-footer:not(.has-image) { - grid-template-columns: auto; -} - #container.promo.standard { - grid-template: auto auto / auto; + display: flex; padding: var(--_promo-standard-inline-padding); - gap: var(--rh-space-xl, 24px); - width: calc(100% - 2 * var(--_promo-standard-inline-padding)); + width: auto; } -#container.promo.standard #body { +.promo.standard #body { display: contents; } -#container.promo.standard #body ::slotted(:not([slot])) { +.promo.standard #body ::slotted(:not([slot])) { font-family: var(--rh-font-family-heading, RedHatDisplay, "Red Hat Display", "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-xl, 1.25rem) !important; font-weight: var(--rh-font-weight-body-text-medium, 500); line-height: var(--rh-line-height-heading, 1.3) !important; } -#container.promo #footer { - margin: 0; +:host([variant="promo"][full-width]) #container { + border-color: transparent; + padding-block: var(--rh-space-4xl, 64px); + padding-inline: var(--rh-space-lg, 16px); + width: auto; } -#container.promo.has-image { - grid-template-columns: auto; +:host([variant="promo"][full-width]) #body { + margin: 0; } -@container promo (max-width: 767px) { - #container.has-image { - grid-template-columns: auto; - } +:host([variant="promo"][full-width]) #body ::slotted(p) { + --_promo-paragraph-font-size: var(--rh-font-size-body-text-md, 1rem); } -@container promo (min-width: 768px) { - #container { - width: 100%; - - --_promo-standard-inline-padding: var(--rh-space-2xl, 32px); - } - - #container.promo.has-image { - grid-template-columns: auto auto; - } +:host([variant="promo"][full-width]) #header ::slotted(*) { + --_promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); +} - #container #image { - order: 0; - max-width: var(--_promo-image-width); - } +:host([variant="promo"][full-width]) .has-image #footer { + margin-block-end: var(--rh-space-2xl, 32px); +} - #container #body { - max-width: var(--_promo-body-width); +@container promo (min-width: 768px) { + #container.promo { + align-items: center; + display: grid; + grid-template-columns: 2fr 1fr; + min-height: 250px; } - #container #header { - margin-block-start: var(--rh-space-lg, 16px); + .promo #image { + justify-self: end; } - #container:not(.has-image) #body { - max-width: 100cqi; + .promo #body { + margin: var(--rh-space-3xl, 48px); + max-width: 70ch; } - #container #header ::slotted(*) { - --_promo-heading-size: var(--rh-font-size-body-text-2xl, 1.5rem); + .promo #header ::slotted(*) { + --_promo-heading-size: var(--rh-font-size-heading-sm, 1.5rem); } #container.promo.standard { --_promo-standard-inline-padding: var(--rh-space-3xl, 48px); - row-gap: 0; - grid-template: auto / auto auto; + column-gap: var(--rh-space-xl, 24px); + flex-direction: row; + justify-content: space-between; + min-height: auto; } - #container.promo.standard #footer { - justify-self: end; + .promo.standard #footer { + flex: 0 0 auto; + margin-block-start: 0; } -} -@container promo (max-width: 767px) and (width: 100vw) { - #container #body { - margin-block-start: var(--rh-space-4xl, 64px); + :host([variant="promo"][full-width]) #container { + column-gap: var(--rh-space-2xl, 32px); + min-height: auto; + padding-inline: var(--rh-space-4xl, 64px); } - #container #image { - margin-block-end: var(--rh-space-4xl, 64px); + :host([variant="promo"][full-width]) #body ::slotted(p) { + --_promo-paragraph-font-size: var(--rh-font-size-body-text-lg, 1.125rem); } -} -@container promo (min-width: 1093px) { - #container:not(.has-image) #image.empty { - display: block !important; - order: 1; - grid-column: 2/3; - width: var(--_promo-image-width); + :host([variant="promo"][full-width]) #header ::slotted(*) { + --_promo-heading-size: var(--rh-font-size-heading-md, 1.75rem); } -} -/* full width promo */ -@container promo (min-width: 1093px) or (min-width: 100vw) { - #container:not(.standard) { - border-color: transparent; - gap: var(--rh-space-2xl, 32px); - padding-inline: var(--rh-space-lg, 16px); - place-items: center; - width: calc(100% - 2 * var(--rh-space-lg, 16px)); + :host([variant="promo"][full-width]) .has-image #footer { + margin-block-end: 0; } +} - #container #header, - #container #body, - #container #footer { - margin-inline: 0; +@container promo (min-width: 1200px) { + :host([variant="promo"][full-width]) #container { + padding-inline: var(--rh-space-7xl, 128px); } } diff --git a/elements/rh-card/rh-card.ts b/elements/rh-card/rh-card.ts index f3a08ea7f3..08e3b6b888 100644 --- a/elements/rh-card/rh-card.ts +++ b/elements/rh-card/rh-card.ts @@ -63,8 +63,16 @@ export class RhCard extends LitElement { @property({ reflect: true, attribute: 'color-palette' }) colorPalette?: 'darkest' | 'lightest' | 'lighter'; + /** + * Change the style of the card to be a "Promo" + */ @property({ reflect: true }) variant?: 'promo'; + /** + * Change a promo with an image + body + footer to use the "full width" style + */ + @property({ reflect: true, type: Boolean }) fullWidth? = false; + #slots = new SlotController(this, ...RhCard.slots); override render() { From 78d2cb19b7e0a37e1374156abb17b554907ceb2b Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Tue, 23 Jul 2024 11:44:55 -0400 Subject: [PATCH 63/71] docs(card): layout tweaks for promo demo --- elements/rh-card/demo/promo.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/elements/rh-card/demo/promo.html b/elements/rh-card/demo/promo.html index 22ffacf235..f9a7c830af 100644 --- a/elements/rh-card/demo/promo.html +++ b/elements/rh-card/demo/promo.html @@ -53,7 +53,7 @@

Featured: no image is okay too

From 5de06b0fb073d175e956ebacfcf2748d4064bf62 Mon Sep 17 00:00:00 2001 From: Adam Johnson Date: Fri, 26 Jul 2024 13:28:23 -0400 Subject: [PATCH 71/71] fix(card): increase promo image width --- elements/rh-card/demo/promo-full-width.html | 6 +++--- elements/rh-card/demo/promo.html | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/elements/rh-card/demo/promo-full-width.html b/elements/rh-card/demo/promo-full-width.html index 0431a4df91..0d9b373ca4 100644 --- a/elements/rh-card/demo/promo-full-width.html +++ b/elements/rh-card/demo/promo-full-width.html @@ -3,7 +3,7 @@ + width="1920" height="158"> Full Width Promo + width="1920" height="158"> Full Width Promo - No Image + width="1920" height="158"> @@ -21,7 +21,7 @@

Promo

@@ -47,7 +47,7 @@

Featured: no image is okay too