Implement designs for Cards component within Olivero for XB

Tagging with "Experience Builder".

Escalating to critical because @ckrina told me it is a must-have issue for the Experience Builder preview to be viable. I am not calling it a stable blocker, though, since the XB preview is not itself a stable blocker.

Figma link added.

I saved without refreshing the issue and lost some data. Adding them back. @balintbrews I can't assign the issue back to you.

The most important things are done — see what's remaining in the MR's description. Initial reviews are welcome!

Minor but ideally the cards should be the same height:

Like our non-SDC teaser cards:

And just one other odd thing, there's no way to actually see the three-column layout when you're in the editor, because it isn't wide enough. It's obviously a broader issue but noting it as I initially thought the three-column layout wasn't working but can see it in the preview.

Minor but ideally the cards should be the same height

Yes, I'll still need to polish the styling — thanks for highlighting the height issue, @pameeela.

And just one other odd thing, there's no way to actually see the three-column layout when you're in the editor, because it isn't wide enough. It's obviously a broader issue but noting it as I initially thought the three-column layout wasn't working but can see it in the preview.

The viewport sizes are hardcoded for now, but we'll allow customizing them in a later version of XB.

Working on this!

I'm working on 🐛 PHP warnings thrown for optional image or date-time SDC props without examples Active to fix the PHP warnings that occur because we don't add examples for the optional image prop. (The same happens in 📌 Implement designs for Feature component within Olivero for XB Active , too.)

The previous code was relying on the code from the node--teaser.html.twig.

I created new styles in the card component and then refactored the node-teaser template to use a different classname.

@balintbrews and I had a discussion in Slack about this with he advocating that we leave the CSS out of the SDC, and me advocating that it should be contained in the SDC.

My thought is that we can do additional refactoring by duplicating the markup within the node teaser, and then creating a dependency on the SDC library.

Just pushed a fix to consolidate the styles. Its a bit better than duplicating them, But, hopefully XB will either work w slots, or if we can easily grab the image style's height/width from the node template and pass them in that way

Note that the card container is not working. But I believe this is a XB problem. Even when I place the default "Two Column" component, it breaks. Can't really do much until that's fixed.

Do you get an error shown in the app UI when you try to drag on a component with a slot? If so, 🐛 Unable to add SDCs with slots to the page Active is about to land, that will fix it.

Btw, 🐛 PHP warnings thrown for optional image or date-time SDC props without examples Active is merged, so no more warnings!

@mherchel you can ping me when this is ready for review.

One quick thing is IMO "eyebrow" isn't a good name to use... too "jargon-y"... I've used "pretitle" / "Pre-title" in the past.]

I just asked chatgpt and it seems to agree ;)

Q: what's a good name for a bit of text *before* a title on a webpage (not subtitle because that would be below the title)

A: A good name for a bit of text that appears before a title on a webpage is typically referred to as a "pretitle" or "lead-in." Another term used is "header," although this can sometimes refer to the larger section at the top of a webpage, including navigation elements. "Preheader" is also used, especially in the context of email marketing, to refer to introductory text.

One quick thing is IMO "eyebrow" isn't a good name to use... too "jargon-y"... I've used "pretitle" / "Pre-title" in the past.]

I can agree with that!

I am unable to see a proper preview for the cards component.

Hi all!

I'm not entirely sure if this belongs in this thread or a more specific general Drupal CMS one, but worth mentionning and relevant I think.

I've noticed that the bottom right arrow on the card (.teaser--card::after) does not allow clicks to go through which I feel is not quite right as some users might expect the arrow itself to be clickable. Quick fix is to add "pointer-events: none;" to ".teaser--card::after".

I've noticed that the bottom right arrow on the card (.teaser--card::after) does not allow clicks to go through

Oh yeah, that is a big deal. Good catch! I'll fix this at some point soon :D

Perfect - on the same topic, might as well take a peek at the ".teaser--card .teaser__image" class. It could likely use a "pointer-events: none;" as well :) That will allow for a click from anywhere on the card now making it super easy for users to access the content.

I'll update the prop naming conventions.

Sorry... haven't gotten back to this so I'll unassign for the moment in case someone wants to jump in here.

Getting back to this because @mherchel will be taking a look shortly.

I'm going to test this and do a final round of review now and will relinquish this in about 15 mins :)

Looks like this has merge conflicts, can those be resolved before I merge this?

I can try to merge in latest after I finish tweaking/testing.

Testing notes

1. Card grid title doesn't show up
2. Not responsive in preview
3. XB edit doesn't look the same as preview
4. XB bug: can't edit image in 2nd card after adding to 1st card... but I haven't updated my XB code in awhile so might be fixed
5. Note the stacked approach with one card by itself and then two in the grid... would we want the images to align?
6. A general question on the approach: given we should have a generic columns or grid component, do we need the card grid component?

3 cards in builder

3 cards in preview

3 cards in preview and medium width

3 cards in preview and smaller width

1 card and 2 cards stacked in builder

1 card and 2 cards stacked in preview

Hmm... tried to merge in 1.x but I don't know enough about how the component/card.css was/is being used... this MR deletes that file but then we need to test all the views/displays that use the card to make sure things are still handled correctly.

Off to @mherchel for thoughts here.

diff --git a/drupal_cms_olivero/css/components/card.css b/drupal_cms_olivero/css/components/card.css
index 76eff66..1c82cda 100644
--- a/drupal_cms_olivero/css/components/card.css
+++ b/drupal_cms_olivero/css/components/card.css
@@ -3,6 +3,7 @@
       var(--grid-repeat, auto-fit),
       minmax(min(100%, var(--grid-min, 26ch)), 1fr)
     );
+  gap: var(--sp2);
 }

For now I'm going to delete the file in the MR. Before merging we need to figure out where its being used, and make sure nothing breaks.

cards can be previewed now.

OK! I think we're good. I updated the example image with the goodest boy on the planet, which is a photo that I take and am happy to relinquish rights, assign whatever GPL/CC licenses needed.

Awesome to get this done!! Merged into 1.x. Thanks!

Automatically closed - issue fixed for 2 weeks with no activity.