Implement designs for Heading component within Olivero for XB

ckrina → credited Alyciamjones → .

ckrina → credited jwitkowski79 → .

Adding credits to @jwitkowski79 and @Alyciamjones for the designs.

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.

Willing to help. Assigning this to me.

Figma link added.

I saved without refreshing the issue and lost some data. @matthieuscarset I can't assign this back to you.

Thank you very much for the additional information.

I do have Drupal CMS installed with an xb_page for testing now.

I found out there is already a heading component provided by XB (e.g. [data-xb-component-id="sdc.experience_builder.heading"]) so I am confused about the expectations here.

After some discussion in Slack, I think the best I should do is to copy the existing component from XB module into drupal_cms_olivero, remove the unwanted complexity (i.e. no custom schema definition, only h1 to h6 - no div, no primary/secondary variations...etc), and implement the styling based on Figma.

I don't think I can ask questions in Figma asking here - do we have mobile versions of these heading elements ?

Heading component implemented based on Figma (desktop only) in the attached MR.

I used CSS variables from Olivero parent theme whenever possible.

I am not sure about the design expectations. Here's what I did:
- Figma: 5 sizes/styles based on primary Olivero design system
- Me: I understand we want to decouple styling from semantic. I allowed users to select a size (H1..H6 html tag) AND also to select a size (h1....h6 CSS class) - this is what is also in the heading component from XB.

- F: Spans columns 3-10 on desktop
- M: I am not sure we can do it because `grid-columns` cannot be applied on the heading element directly - 🤔 do we want a wrapper div ? - plus when I tried it it looks strange to have the texts centered in the grid (see attached screenshot). There is no such things as grid-column: 3 - 10 elsewhere in Olivero too. There are 3 -11 but no 3 - 10 yet.

Looking forward to hearing from reviewers.

A couple of questions. I don't know anything about authoring SDCs but two things jump out at me as being odd.

I understand that it was suggested to create a new component for this since the XB one is development only. Are we able to remove the XB one? With this change there are two 'Heading' components, which is pretty confusing. Probably a question for @balintbrews or someone else from the XB team?

Right, I think we should disable all components that XB ships, and even narrow down the list of blocks that we allow in XB. Fortunately, it can be done in config — here is the UI for it: /admin/structure/component.

@balintbrews ahh, ok too easy, thanks! I'll create an issue for that to action once we have this included in the starter recipe and can actually modify the config.

Thanks a lot for the review.

I understand the config changes will happen in the other issue.

I've resolved comments in the MR.

I think there is nothing more to do.

MR ready for review.

@balintbrews said in Slack that the status was not needed, and it doesn't look like the group is used currently either so removed that.

I left some comments on the code, minor changes needed in my opinion.

I noticed that H5 and H6 text are supposed to be uppercase, so I pushed a small fix for that. I think this is looking great now.

And there you go: our first component for XB :) Well done, everybody! To infinity and beyond. Or the stars. Whatever! #starshot

Merged into 1.x and cherry-picked to 1.0.x. Thanks!

~36 hours later …

@phenaproxima Please check my proposal at #3498337-3: When demo_mode, limit component list to only SDCs provided by the active theme (and not subthemes) → on how to ensure only these components show up in Drupal CMS :)