EMULSIF-304: Banner component.

[robherba]

Summary

Adds an banner component.

How to review this pull request

• Run npm run storybook
• Go to http://localhost:6006/?path=/story/components-banner--banner
• Ensure that the new component matches the Figma design.
• Ensure the video doesn't play when the browser doesn't allow it or when motion reduction is turned on in the system settings.

Grabacion.de.pantalla.2024-08-26.a.la.s.9.14.16.a.m.mov

[callinmullaney]

@robherba This PR matches the design but I have some feedback for you:

1. Lets try and avoid committing images (png, gif, jpg) directly to the repository and use a free service instead. https://picsum.photos/ is what we've used for Compound and seemed to work well. Here is an example of how we crafted a URL which defines the image size. I don't think you need to make this a responsive image so a standard <img src /> should be fine: https://github.com/emulsify-ds/compound/blob/main/components/02-molecules/text-with-media/text-with-media.yml#L4C16-L4C37

2. See code comments on banner.twig

3. Lets combine the bem() and add_attributes() functions. For example:

{% set banner__attributes = {
  'data-banner-alignment': banner__alignment|default('left'),
  'class': bem(banner__base_class, banner__modifiers, banner__blockname)
} %}

<div {{ add_attributes(banner__attributes) }}> ... </div>

4. Avoid using CSS background images. Lets use the image component instead. Pull it it below all the banner content/text. Then use position:absolute, z-index, and object-fit styles. This makes wiring a lot easier and allows us to use responsive images.

[callinmullaney]

Instead of statically creating this video markup lets use the Video component included in the UI Kit. Here is an example of how we did this for the Smith College banner: https://github.com/smithcollege-drupal/smith-drupal/blob/develop/web/themes/custom/smith/components/02-molecules/banner/banner.twig#L128

[callinmullaney]

The playback button should be part of the video component mentioned above. You could likely create this as a sub-component in src/components/video/playback-button. This playback button should use the button component and extend it. Here is an example of how I did this for Smith College but unlike Smith lets make this a sub component of Video: https://github.com/smithcollege-drupal/smith-drupal/tree/develop/web/themes/custom/smith/components/01-atoms/playback-button

[callinmullaney]

Lets remove this this reference. attach_library() is a drupal function and this component library may be used for non-drupal platforms.