refactor: improve banner component structure

emulsify-ds · Nov 11, 2024 · 1e3ab8e · 1e3ab8e
1 parent 949103d
commit 1e3ab8e
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 80 deletions.
diff --git a/src/components/banner/banner.component.yml b/src/components/banner/banner.component.yml
@@ -8,8 +8,8 @@ props:
   required:
     - banner__title
     - banner__content
-    - banner__button_text
-    - banner__button_url
+    - banner__button__content
+    - banner__button__url
   properties:
     banner__title:
       type: string
@@ -21,25 +21,30 @@ props:
       title: Content
       description: 'Specifies the main content of the banner'
       data: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
-    banner__button_text:
+    banner__button__content:
       type: string
-      title: Button Text
+      title: Button Content
       description: 'Specifies the text displayed on the button'
       data: 'Learn More'
-    banner__button_url:
+    banner__button__url:
       type: string
       title: Button URL
       description: 'Specifies the URL the button will link to'
       data: '#'
-    banner__background_image:
+    banner__image__src:
       type: string
-      title: Background Image
-      description: 'Specifies the URL of the background image for the banner. Either this or banner__video should be provided.'
-      data: 'https://example.com/path/to/background-image.jpg'
+      title: Image's source
+      description: The image's source of the banner.
+      data: 'https://placehold.co/400'
+    banner__image__alt:
+      type: string
+      title: Image's alternative text
+      description: The image's alternative text of the banner.
+      data: 'This is the card image alt text'
     banner__video:
       type: string
       title: Video URL
-      description: 'Specifies the URL of the video to be displayed. Either this or banner__background_image should be provided.'
+      description: 'Specifies the URL of the video to be displayed. Either this or banner__image should be provided.'
       data: ''
     banner__alignment:
       type: string
@@ -52,23 +57,27 @@ props:
   example:
     - banner__title: 'THIS IS A BANNER HEADING'
       banner__content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
-      banner__button_text: 'this is a link'
-      banner__button_url: '#'
-      banner__background_image: ''
+      banner__button__content: 'this is a link'
+      banner__button__url: '#'
+      banner__image__src: 'https://picsum.photos/890/215'
+      banner__image__alt: "This is the banner image's alt text"
     - banner__title: 'THIS IS A BANNER HEADING'
       banner__content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
-      banner__button_text: 'this is a link'
-      banner__button_url: '#'
-      banner__video: ''
+      banner__button__content: 'this is a link'
+      banner__button__url: '#'
+      banner__videos:
+        - 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4'
+        - 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-webm-file.webm'
     - banner__title: 'THIS IS A BANNER HEADING'
       banner__content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
-      banner__button_text: 'this is a link'
-      banner__button_url: '#'
-      banner__background_image: ''
+      banner__button__content: 'this is a link'
+      banner__button__url: '#'
+      banner__image__src: 'https://picsum.photos/890/215'
+      banner__image__alt: "This is the banner image's alt text"
       banner__alignment: 'center'
     - banner__title: 'THIS IS A BANNER HEADING'
       banner__content: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>'
-      banner__button_text: 'this is a link'
-      banner__button_url: '#'
-      banner__video: ''
+      banner__button__content: 'this is a link'
+      banner__button__url: '#'
+      banner__videos: ''
       banner__alignment: 'center'
diff --git a/src/components/banner/banner.scss b/src/components/banner/banner.scss
@@ -1,13 +1,40 @@
 @use '../../foundation/typography/typography' as *;
 
+@mixin overlay-darken($color: var(--color-primary-dark), $opacity: 0.75, $blend-mode: multiply) {
+  &::before {
+    content: '';
+    top: 0;
+    left: 0;
+    z-index: 2;
+    width: 100%;
+    height: 100%;
+    opacity: $opacity;
+    display: block;
+    position: absolute;
+    pointer-events: none;
+    mix-blend-mode: $blend-mode;
+    background-color: $color;
+  }
+}
+
 .banner {
   min-height: 16rem;
   position: relative;
 }
 
-.banner--has-image {
-  background-size: 100%;
-  background-position: center;
+.banner__image {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+
+  &:is(div) {
+    @include overlay-darken;
+  }
+
+  &:is(img) {
+    z-index: 1;
+    object-fit: cover;
+  }
 }
 
 .banner__video-container {
@@ -17,7 +44,6 @@
   position: absolute;
 }
 
-.banner--has-image,
 .banner__video-container {
   &::before {
     content: '';

diff --git a/src/components/banner/banner.stories.js b/src/components/banner/banner.stories.js
@@ -1,7 +1,6 @@
 import bannerTwig from './banner.twig';
 import { props } from './banner.component.yml';
-import bannerVideo from '../../../assets/audio/video-placeholder.mp4';
-import bannerImage from '../../../assets/images/example/banner-image.jpg';
+
 import './banner';
 
 export default {
@@ -12,18 +11,7 @@ export default {
   ],
 };
 
-function getBannerData(data) {
-  const newData = Object.assign({}, data);
-  if (data && typeof data === 'object' && 'banner__video' in data) {
-    newData.banner__video = bannerVideo;
-  }
-  if (data && typeof data === 'object' && 'banner__background_image' in data) {
-    newData.banner__background_image = bannerImage;
-  }
-  return newData;
-}
-
 export const Banner = () =>
   `<div class="banner-list">${props.example
-    .map((data) => bannerTwig(getBannerData(data)))
+    .map((data) => bannerTwig(data))
     .join('')}</div>`;
diff --git a/src/components/banner/banner.twig b/src/components/banner/banner.twig
@@ -3,60 +3,75 @@
  * Available Variables:
  * - banner__title: The title of the banner.
  * - banner__content: The main content of the banner.
- * - banner__button_text: The text displayed on the banner button.
- * - banner__button_url: The URL that the banner button links to.
- * - banner__background_image: The URL of the background image for the banner.
+ * - banner__button__content: The text displayed on the banner button.
+ * - banner__button__url: The URL that the banner button links to.
+ * - banner__image__src: The URL of the background image for the banner.
  * - banner__video: The URL of the video to be displayed. If provided, background_image will be ignored.
  * - banner__alignment: Specifies the alignment of the content within the banner. Options include 'left', 'center'.
  * - banner__variant: Specifies the style variant for the banner component (e.g., default, light, dark).
- * - additional_attributes: Additional HTML attributes for the banner container.
+ * - banner__attributes: HTML attributes for the banner container.
  */
 #}
 {{ attach_library('emulsify/banner') }}
 
 {% set banner__base_class = 'banner' %}
 {% set banner__attributes = banner__attributes|default({}) %}
 {% set banner__alignment = banner__alignment|default('left') %}
-{% set has_image = not banner__video and banner__background_image %}
 {% set banner__modifiers = banner__modifiers|default([])|merge([banner__alignment]) %}
 
-{% if has_image %}
-  {% set banner__modifiers = banner__modifiers|merge(['has-image']) %}
+{% if banner__alignment %}
+  {% set banner__attributes = banner__attributes|merge({
+    'data-component-width': banner__alignment,
+  }) %}
 {% endif %}
 
-{% set banner__attributes = {
+{% set banner__attributes = banner__attributes|merge({
   'class': bem(banner__base_class, banner__modifiers, banner__blockname)
-} %}
+}) %}
 
-<div 
-  {{ add_attributes(additional_attributes) }}
-  style="{% if has_image %}background-image: url('{{ banner__background_image }}');{% endif %}"
->
+<div {{ add_attributes(banner__attributes) }}>
+  {% block banner__image %}
+		{% if banner__image__src %}
+			{% include "@components/image/responsive-image.twig" with {
+        responsive_image__blockname: banner__base_class,
+        image__src: banner__image__src,
+        image__alt: banner__image__alt,
+      } %}
+		{% endif %}
+	{% endblock %}
   {# Render the video background #}
-  {% if banner__video %}
-    <div {{ bem('video-container', [], banner__base_class) }}>
-      <video {{ bem('video', [], banner__base_class) }} autoplay loop muted>
-        <source src="{{ banner__video }}" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>
-      <div {{ bem('video-controls', [], banner__base_class) }}>
-        <button {{ bem('toggle', [], banner__base_class) }}>
-          <span {{ bem('toggle_label', [], banner__base_class, ['visually-hidden']) }}></span>
-          {% include "@components/icons/_icon.twig" with {
-            icon__name: 'pause',
-            icon__decorative: true,
-            icon__base_class: 'pause',
-            icon__blockname: banner__base_class,
-          } %}
-          {% include "@components/icons/_icon.twig" with {
-            icon__name: 'play',
-            icon__decorative: true,
-            icon__base_class: 'play',
-            icon__blockname: banner__base_class,
-          } %}
-        </button>
-      </div>
-    </div>
+  {% if banner__videos %}
+    {% include "@components/video/video.twig" with {
+      video__type: 'html5',
+      video__urls: banner__videos,
+      video__show_caption: media_box__show_caption,
+      video__show_copyright: media_box__show_copyright,
+      video__caption: media_box__caption,
+      video__copyright: media_box__copyright,
+      video__show_placeholder: true,
+    } %}
+    {# <video {{ bem('video', [], banner__base_class) }} autoplay loop muted>
+      <source src="{{ banner__video }}" type="video/mp4">
+      Your browser does not support the video tag.
+    </video>
+
+    <div {{ bem('video-controls', [], banner__base_class) }}>
+      <button {{ bem('toggle', [], banner__base_class) }}>
+        <span {{ bem('toggle_label', [], banner__base_class, ['visually-hidden']) }}></span>
+        {% include "@components/icons/_icon.twig" with {
+          icon__name: 'pause',
+          icon__decorative: true,
+          icon__base_class: 'pause',
+          icon__blockname: banner__base_class,
+        } %}
+        {% include "@components/icons/_icon.twig" with {
+          icon__name: 'play',
+          icon__decorative: true,
+          icon__base_class: 'play',
+          icon__blockname: banner__base_class,
+        } %}
+      </button>
+    </div> #}
   {% endif %}
   {# Render the main content #}
   <div {{ bem('content', [banner__alignment], banner__base_class) }}>

diff --git a/src/components/icons/_icon.twig b/src/components/icons/_icon.twig
@@ -10,7 +10,7 @@
  * - icon__desc - a11y description
  */
 #}
-{% set icon__base_class = icon_base_class|default('icon') %}
+{% set icon__base_class = icon__base_class|default('icon') %}
 {% set icon__attributes = icon__attributes|default([]) %}
 {# If `directory` is defined, set the path relative for Drupal.
  # Otherwise, set the path relative to the Component Library. #}

diff --git a/src/components/icons/icons.md b/src/components/icons/icons.md
@@ -34,8 +34,8 @@ Complex (BEM classes):
 
 ```
 {% include "@atoms/04-images/icons/_icon.twig" with {
-  icon_base_class: 'toggle',
-  icon_blockname: 'main-nav',
+  icon__base_class: 'toggle',
+  icon__blockname: 'main-nav',
   icon__name: 'menu',
 } %}
 ```