Kuwait Theme: Add Background Image to Display Group

[FaithDaka]

PR Checklist

• PR title descriptive (can be used in release notes)

Description

Adds a background_image_asset to feature_display_group component. Link
Also includes display group styling according to the Kuwait theme.

Author Notes

New parameter list:

• background_image_asset: Adds a background image to the display group.
• background_image_position: Positions the background image (top, center, bottom). Default top

Further additions

By @jfmcquade:

1. New display group variant, inline-padding

   • This applies the app-level content padding to the display group content
   • This is required as otherwise when using the display group with sticky set to top or bottom, there is no left or right padding around the content, as demonstrated in example_inline_header_footer:
     
   • I did consider alternatives to an explicit variant, e.g. always applying this padding when the display-group is sticky; or always applying this padding when there is a background image set. But these seemed too restrictive on those two scenarios, as we may want to use them without applying padding in this way.

2. New style param value: background_solid

   • Setting style: background_solid on the display group means that the This was previously the default when setting a display group to sticky (feat: inline header or footer, via 'sticky' display group param #2564), but we agreed that the stickiness should be independent of styles, so this style must now be used in order to prevent the display group from having a transparent background when setting sticky.

See examples in feature_display_group

Git Issues

Closes #2579

Screenshots

Design	Kuwait Style

[FaithDaka]

@jfmcquade I tested the concept of adding a margin to the text using the style_list column but given that it requires one to set two values (for top-bottom and left-right) then we don't get the desired effect.
It will be helpful to discuss the need for a spacer component such that space can always be added between components.

[jfmcquade]

@jfmcquade I tested the concept of adding a margin to the text using the style_list column but given that it requires one to set two values (for top-bottom and left-right) then we don't get the desired effect. It will be helpful to discuss the need for a spacer component such that space can always be added between components.

Thanks for looking into it. Does it not work with margin-top? In theory we should be able to pass any valid CSS to the style_list column so I would have thought that setting margin-top: 48px, for example, could work

[FaithDaka]

Oh, I was using this format: margin: 50px 0px 0px 0px. Using margin-top works fine @jfmcquade

[jfmcquade]

I think the background image options look good.

The changes to the box_primary etc. variants should be pulled into a separate PR I think. I'm not sure whether we want to overwrite the box_* variants for the KW theme or offer new variants. Presumably we're not planning on using the default box_* stylings and so overwriting them may make sense, perhaps @esmeetewinkel can confirm.

Would be good to have those changes broken out into a separate PR for that reason, but if we're sure we're happy to override then they can stay with this PR, but the title and description should be updated.

[github-actions]

Visit the preview URL for this PR (updated for commit f27841b):

https://plh-teens-app1--pr2589-feature-add-image-at-yeengskb.web.app

_{(expires Mon, 13 Jan 2025 17:22:15 GMT)}

_{🔥 via Firebase Hosting GitHub Action 🌎}

_{Sign: e4c0bab6b08dd290fbf002fd6e07987fa4b5fce1}

[esmeetewinkel]

I'm struggling a little to understand from the PR description how the different parameters (are intended to) work.

Clarifications:

1. I'm understanding that background_image_position can be one of top / center / bottom (vertical position), but can also contain left / right (horizontal position). Default is top + horizontally centred. If this is correct can this be added tot he PR description?

2. The description of style: background_solid in the PR notes is cut off. This seems to be the default - I don't observe any difference when I do / don't include this parameter. I don't understand how to achieve a transparent background, as in the design:
   

Bugs:

1. When the background_image_position is set to top right the image doesn't remain glued to the top on narrow screens.

   Screenity.video.-.Dec.18.2024.1.mp4

2. The background_image_position left / right should flip in RTL and the background image should be flipped.
   Current view in RTL:
   

3. On some screen ratios (e.g. Moto G4 and Samsung Galaxy S8+) I'm seeing a faint blue line underneath the image
   

4. I also found [BUG] RTL title alignment #2640, but tracked it separately since it's independent of this PR