ISTWCMS-4695: creating separate component for banners and updating card--banner

js/component_scripts.min.js

+(function ($, Drupal) {
+  Drupal.behaviors.cardbanner = {
+    attach: function (context, settings) {
+      $(document).ready(function () {
+
+        // Step through each FF on the page.
+        $('.card.banner').each(function () {
+
+          // Get the number of items for the carousel, if any.
+          var num_of_items = 1;
+
+          // Add the carousel to the FF using the id.
+          $('.owl-carousel').owlCarousel({
+            margin: 10,
+            nav: true,
+            navContainerClass: 'uw-owl-nav',
+            navText:[
+                '‹ prev',
+                'next ›'
+            ],
+            responsiveClass: true,
+            responsive: {
+              0: {
+                items: 1
+              },
+              600: {
+                items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
+
+              },
+              1000: {
+                items: num_of_items
+
+              }
+            }
+          });
+        });
+      });
+    }
+  };
+})(jQuery, Drupal);
+
 /**
  * @file
  */
@@ -297,47 +338,6 @@ else {
   }
 })(jQuery, Drupal);
 
-(function ($, Drupal) {
-  Drupal.behaviors.cardbanner = {
-    attach: function (context, settings) {
-      $(document).ready(function () {
-
-        // Step through each FF on the page.
-        $('.card.banner').each(function () {
-
-          // Get the number of items for the carousel, if any.
-          var num_of_items = 1;
-
-          // Add the carousel to the FF using the id.
-          $('.owl-carousel').owlCarousel({
-            margin: 10,
-            nav: true,
-            navContainerClass: 'uw-owl-nav',
-            navText:[
-                '‹ prev',
-                'next ›'
-            ],
-            responsiveClass: true,
-            responsive: {
-              0: {
-                items: 1
-              },
-              600: {
-                items: num_of_items <= 2 ? (num_of_items - 1 > 0) ? num_of_items - 1 : 1 : 2
-
-              },
-              1000: {
-                items: num_of_items
-
-              }
-            }
-          });
-        });
-      });
-    }
-  };
-})(jQuery, Drupal);
-
 /**
  * @file
  */

source/_patterns/04-components/banners/banners.twig

+{% embed '@layouts/carousel/carousel.twig' %}
+  {% block content %}
+    {% include '@components/card/card--banner/card--banner.twig' with {
+      banners: banners,
+    } %}
+  {% endblock %}
+{% endembed %}
\ No newline at end of file

source/_patterns/04-components/banners/banners.yml

+banners:
+  images:
+    -
+      sources:
+        -
+          srcset: '../../../../source/images/president/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        -
+          srcset: '../../../../source/images/president/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        -
+          srcset: '../../../../source/images/president/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        -
+          srcset: '../../../../source/images/president/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        -
+          srcset: '../../../../source/images/president/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '../../../../source/images/president/president_xlarge.jpg'
+      alt: 'Alternative text'
+      big_text: 'Image1'
+      small_text: 'Caption 1'
+      link: 'http://google.ca'
+    -
+      sources:
+        - srcset: '../../../../source/images/president/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '../../../../source/images/president/president_xlarge.jpg'
+      alt: 'Alternative text'
+      big_text: 'Image2'
+    -
+      sources:
+        - srcset: '../../../../source/images/president/president_xlarge.jpg'
+          media: 'all and (min-width: 63.19rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_large.jpg'
+          media: 'all and (min-width: 49.81rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_medium.jpg'
+          media: 'all and (min-width: 30rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_small.jpg'
+          media: 'all and (min-width: 25rem)'
+          type: 'image/jpeg'
+        - srcset: '../../../../source/images/president/president_xsmall.jpg'
+          media: 'all and (min-width: 15rem)'
+          type: 'image/jpeg'
+      img_element: '../../../../source/images/president/president_xlarge.jpg'
+      alt: 'Alternative text'
+      big_text: 'Image3'
+      link: 'http://google.ca'
+  autoplay: 1
+  slide_speed: 7000
+  style: 'full-width'
+  transition_speed: 400

source/_patterns/04-components/card/card--banner/card--banner.twig

-{% embed '@layouts/carousel/carousel.twig' %}
-  {% block content %}
-    {% for image in banners.images %}
-      {% include '@components/card/card.twig' with {
-        sources: image.sources,
-        img_element: image.img_element,
-        type: 'banner',
-        title: image.big_text,
-        sub_title: image.small_text,
-        header_level: 2,
-        url: image.link,
-      } %}
-    {% endfor %}
-  {% endblock %}
-{% endembed %}
\ No newline at end of file
+{% for image in banners.images %}
+  {% include '@components/card/card.twig' with {
+    sources: image.sources,
+    img_element: image.img_element,
+    type: 'banner',
+    title: image.big_text,
+    sub_title: image.small_text,
+    header_level: 2,
+    url: image.link,
+  } %}
+{% endfor %}
\ No newline at end of file