Implement designs for Hero component within Olivero for XB

Adding some more details for the implementation on bigger screens than 1440px.

Tagging with "Experience Builder".

I'm escalating this 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.

I saved without refreshing the issue and lost some data. Adding them back.

Hi @pameeela, this one is also ready for review.

Added two new component

- Olivero Hero

** I opt for a static Image for now, need to switch to Slots once Media is compatible with XB.
** 2 CTA slots where you can drag the new "Olivero CTA" component

- Olivero CTA

** With a variant that help you select the desired style (Primary, Secondary, None)

Assigning to @pameeela for review.

This is broken somehow but can't see exactly why. When I drag in the Hero element, I get:
An unexpected error has occurred while rendering preview.

The CTA works fine. The issue must be with the slots because it loads OK when I remove that.

There seems to be a mix of syntax on this PR. Because image, cta1, and ct2 are defined as slots but the twig file calls them as properties by doing {{ cta1 }} instead of {% block cta1 %}{% endblock %} which is what slots use.
Besides that and the issues slots are having with XB should we make those slots properties for now?

The last update removes that error and makes it work with properties as seen on the image. As that seems to be what most other tickets are doing.

Not sure how to switch it to full width to take advantage of the extra space.
Otherwise, xb makes the space small for a hero compared to other components such as the feature or cards.

Taking a look...

Trying to make this more consistent with the feature component MR. Changes:

1. Changed "Olivero Hero" to "Hero" to be consistent with other components but it will conflict with the XB hero. Do we want to hide the XB hero? if not, we could rename all Olivero components so they are prefixed with "Olivero".
2. Changed the status to "experimental" per other discussions (though maybe the status will be removed).
3. Changed from subheading to "tagline" to be consistent with "feature" component. Though I think "summary" or "text" or "description" may be better given the length of text that might be used.
4. Removed attributes as it's auto-injected. See 📌 Update SDDS SDCs attributes prop to align with XB Fixed for more details.

Right now the image doesn't work so needs fixing. I'll take a look quickly now, but it's getting late.

Also, you can't leave the links empty even though they are not required so we may want to make them required or the form seems broken.

I need to get to bed, but I added the image to the twig file. The styling isn't quite right yet for the image though. At this point, if someone has some time to tweak the image styling, that might be good enough for launch.

With the long tagline default text, you can't see the wrapping of the image on the top, so I shortened it.

Note that the wrapping in XB editor looks different than when looking at the preview.

I'm done for the night. Someone can pick this up if you can make the image styling look more like figma.

I noticed this morning that umami already does something very similar.
So instead of rewriting that we might as well copy UMAMI's and tweak it as needed.

New layout:

The new layout coming from Umami is a bit squished in that region. But other than that, it seems to do well.

The biggest challenge for the hero:
This component is confined to a small space so far. That makes the text too big to match the Figma design unless it is scaled down, but then it won't look great when stacked above a feature or card component.
In layout builder, there was a way to make the section container the full width. If that's added to XB that would make this easier. So far I can only place blocks on that region and can't find an option to exit out of it from XB

Note that we will want to update the naming conventions to match the feature component. I can update here after I update that one... more details:

https://www.drupal.org/project/drupal_cms/issues/3497387#comment-15934435 📌 Implement designs for Feature component within Olivero for XB Active

I'm going to rework the prop names to align with:

📌 Implement designs for Feature component within Olivero for XB Active

While this still needs work, we need some direction, I think, so moving to needs review.

I've updated the prop names to match the WIP feature component.

Some issues:

• The default image is cut off, but we should decide if that is the image that should be used before updating
• See feedback in #24 and #26

Video showing current state:

https://youtu.be/9lvmWFuob70

I understand the issue with the XB preview area being smaller than the design, but I don't understand why the text is so narrow in the current state? Seems like it should work OK at 1024px, here's an updated mockup with that width:

The latest version is a bit of rewrite, but seems to match the spec closer at smaller screen sizes.

Given we are using two hard-coded links for the hero, we don't need the cta component anymore.

Would be good for @mherchel to confirm here.

How to test, now that 📌 Add Experience Builder to dev dependencies Active is in:

• Check out this branch locally
• Pull changes from 1.x and merge them into this branch

• ddev rebuild
  ddev drush si -y
  ddev drush recipe ../xb_test
  ddev launch /xb/xb_page/1

I added the example image @mherchel gave me, converted the media queries in the CSS to container queries, removed the <img> with the long source, and removed white space between the links.

I made some minor tweaks to the spacing and image size that for me gets this to "good enough".

Agree it's awkward in the editor view, which is <700px; but let's see if we can figure that out as a separate matter by making the space larger. It looks decent in the preview.

Preview:

Editor:

Found one thing that, IIRC, will break XB.

working on this

OK, this should be good to go!

Couple notes:

• I aligned all the content to Olivero's grid as was specified in Figma. I thought this was going to be much more of a pain, but I got it working with the help of subgrid!
• I also fixed an issue with Gin applying a negative horizontal margin to Olivero's tabs. I only noticed this when I was like, "Why the hell isn't the tabs aligning to the grid?"
• I fixed (I think) the issue with in the schema that will break XB... this assumes it's the example data for the image
• The image in the MR is mine (I sent this over to @kwiseman during the FLDC sprint. Did I mention that Florida DrupalCamp is the best Drupalcamp in the world?
• I did not test this within XB (my XB is broke AF). But I tested this manually with the following code in a copied over page.html.twig.

You'll want to place this immediately below the {{ page.hero }} around line 96

{{ include('drupal_cms_olivero:hero', {
            title: 'This is my title',
            summary: 'This is my long summary. This is my long summary. This is my long summary.',
            image: {
              src: '/themes/contrib/drupal_cms_olivero/components/hero/images/example-hero.jpg',
              alt: 'The Grand Canyon during the Winter with snow',
              width: 2000,
              height: 1500,
            },
            link_text_1: 'Learn more',
            link_url_1: 'http://www.herchel.com',
            link_text_2: 'Click me',
            link_url_2: 'http://www.drupal.org',
          }, with_context = false) }}

Thanks @mherchel, this is way better generally. Unfortunately I don't think these updated styles work well within the XB context.

This is the editor view (the image is too tall I think):

This is the preview (the image is mostly covered by the content block, and this is currently the widest available display):

To be sure the previous styles did not match the designs, but the designs didn't consider the XB context which is quite specific and restrictive. And since this is specifically for the demo, I'd rather build for that for now?

Without designs for the relevant widths, which I don't think we're going to get, this could keep going. So in the interest of getting it done I'd suggest:

1. Setting an aspect ratio on the image so it's 2/1 on all screen sizes (this fixes the too tall issue)
2. Updating the existing logic for min-width: 700 to be 1000 instead, keeping the current full width styles as-is
3. Creating a new breakpoint for min-width: 695 (this is the editor size) that has a reduced hero__data container to prevent it from covering most of the image

I understand most of that. I think I need to get XB back up and running to test this stuff out.

@mherchel it should be pretty easy if you use: https://github.com/phenaproxima/xb-demo

And I've just been copying the components over to test them.

I meant to update this on Friday to say, this can actually go in as-is because we are going to use the demo design system for the Atlanta XB demo. So if needed, we can refine this component for XB specifically at a later date.

Didn't bother giving this a review because it won't affect existing sites, it's only used within XB, and we are planning to iterate more on it anyway. Blissfully merged into 1.x, thanks all.

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