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.

[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.

[netlify]

✅ Deploy Preview for emulsify-ui-kit ready!

Name	Link
🔨 Latest commit	5b339de
🔍 Latest deploy log	https://app.netlify.com/sites/emulsify-ui-kit/deploys/6731c1e30a038c0008c2109b
😎 Deploy Preview	https://deploy-preview-152--emulsify-ui-kit.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[robherba]

Hey @callinmullaney, the changes have been applied!