ISTWCMS-4695: adding first iteration of banners and updating card to handle banners

css/styles.css

@@ -3494,6 +3494,30 @@ button {
     .card--feature .card__media {
       order: initial; } }
 
+.card.banner .card__body {
+  padding: 0; }
+
+.card.banner .card__header {
+  background-color: rgba(0, 0, 0, 0.8);
+  bottom: 0;
+  display: block;
+  height: auto;
+  opacity: 1;
+  padding: 1rem 2rem;
+  position: absolute;
+  text-align: center;
+  width: 100%; }
+
+.card.banner .card__media {
+  margin-bottom: 0; }
+
+.card.banner .card__title a {
+  color: #fdd54f;
+  font-family: "BureauGrotCond Book","Barlow Condensed",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+  font-weight: 400;
+  letter-spacing: .045rem;
+  text-align: center; }
+
 .uw-colour-bar__cbarorg-default__uw-gold--lvl1 {
   background-color: #fffaaa; }
 

js/component_scripts.min.js

@@ -297,6 +297,48 @@ else {
   }
 })(jQuery, Drupal);
 
+(function ($, Drupal) {
+  Drupal.behaviors.cardbanner = {
+    attach: function (context, settings) {
+      $(document).ready(function () {
+
+        console.log('HERE1');
+        // 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/card/card--banner/_card--banner.scss

+.card.banner {
+
+  .card__body {
+    padding: 0;
+  }
+
+  .card__header {
+    background-color: rgba(0,0,0,.8);
+    bottom: 0;
+    display: block;
+    height: auto;
+    opacity: 1;
+    padding: 1rem 2rem;
+    position: absolute;
+    text-align: center;
+    width: 100%;
+  }
+
+  .card__media {
+    margin-bottom: 0;
+  }
+
+  .card__title {
+    a {
+      color: $uw-gold;
+      font-family: "BureauGrotCond Book","Barlow Condensed",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
+      font-weight: 400;
+      letter-spacing: .045rem;
+      text-align: center;
+    }
+  }
+}
\ No newline at end of file

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

+(function ($, Drupal) {
+  Drupal.behaviors.cardbanner = {
+    attach: function (context, settings) {
+      $(document).ready(function () {
+
+        console.log('HERE1');
+        // 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);

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

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

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

+images:
+  -
+    image:
+      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'
+      title: 'Image1'
+  -
+    image:
+      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'
+      title: 'Image2'
+  -
+    image:
+      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'
+      title: 'Image3'

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

 {% import '@base/macros/uw.macro.twig' as macros %}
 
-<article  class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %}" >
-    <div class="card__body">
-        <div class="card__header">
-            {% if date %}
-            <div class="card__date">
-                {% if date is iterable %}
-                    {% for d in date %}
-                        {% include "@base/date-formats/_date-format.twig" with {
-                            'date_format': date_format,
-                            'date': d
-                        }%}
-                    {% endfor %}
-                {% else %}
-                    {% include "@base/date-formats/_date-format.twig" with {
-                        'date_format': date_format,
-                        'date': date
-                    }%}
-                {% endif %}
-            </div>
-            {% endif %}
-            <h{{ header_level }} class="card__title">
-                <a href="{{ url }}">
-                    {{ title }}
-                </a>
-            </h{{ header_level }}>
-            <div class="card__author">
-                {% if author_link %}
-                by
-                <a href="{{ author_link }}">
-                {% endif %}
+<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
+  <div class="card__body">
+    <div class="card__header">
+      {% if date %}
+        <div class="card__date">
+          {% if date is iterable %}
+            {% for d in date %}
+              {% include "@base/date-formats/_date-format.twig" with {
+                'date_format': date_format,
+                'date': d
+              }%}
+            {% endfor %}
+          {% else %}
+            {% include "@base/date-formats/_date-format.twig" with {
+              'date_format': date_format,
+              'date': date
+            }%}
+          {% endif %}
+        </div>
+      {% endif %}
 
-                {{ author_name }}
+      {% if title %}
+        <h{{ header_level }} class="card__title">
+          <a href="{{ url }}">
+            {{ title }}
+          </a>
+        </h{{ header_level }}>
+      {% endif %}
 
-                {% if author_link %}
-                </a>
-                {% endif %}
-            </div>
-        </div>
-        {% if sources or img_element %}
-        <div class="card__media">
-            {% if url %}
-            <a href="{{ url }}">
-            {% endif %}
-            {% include "@components/responsive-image/responsive-image.twig" with {
-                sources: sources,
-                img_element: img_element,
-                alt: alt
-                }%}
-            {% if url %}
+      {% if author_name %}
+        <div class="card__author">
+          {% if author_link %}
+            by
+            <a href="{{ author_link }}">
+          {% endif %}
+
+          {{ author_name }}
+
+          {% if author_link %}
             </a>
-            {% endif %}
+          {% endif %}
         </div>
+      {% endif %}
+
+    </div>
+
+
+    {% if sources or img_element %}
+      <div class="card__media">
+        {% if url %}
+          <a href="{{ url }}">
+        {% endif %}
+
+        {% include "@components/responsive-image/responsive-image.twig" with {
+          sources: sources,
+          img_element: img_element,
+          alt: alt
+        } %}
+
+        {% if url %}
+          </a>
         {% endif %}
-        <div class="card__content">
+      </div>
+    {% endif %}
+
+    {% if content %}
+      <div class="card__content">
         {{ content }}
-        </div>
-        {% if footer or read_more or tags or social_media %}
-        <div class="card__footer">
-            {{ footer }}
-            {% if tags %}
-            <div class="card__tags">
+      </div>
+    {% endif %}
+
+    {% if footer or read_more or tags or social_media %}
+      <div class="card__footer">
+        {{ footer }}
+        {% if tags %}
+          <div class="card__tags">
             {% include "@components/tag-list/tag-list.twig" with {
-             items: tags
-             } %}
-            </div>
-            {% endif %}
-            {% if read_more and url %}
-            <div class="card__readmore">
+              items: tags
+            } %}
+          </div>
+        {% endif %}
+
+        {% if read_more and url %}
+          <div class="card__readmore">
             {{ macros.readmore(url, title) }}
-            </div>
-            {% endif %}
-            {%  if social_media %}
-            <div class="card__social {{ social_media_placement }}">
+          </div>
+        {% endif %}
+
+        {%  if social_media %}
+          <div class="card__social {{ social_media_placement }}">
             {% include "@components/menu/menu--social/menu--social.twig" %}
-            </div>
-            {% endif %}
-        </div>
+          </div>
         {% endif %}
-    </div>
-</article>
+      </div>
+    {% endif %}
\ No newline at end of file
+  </div>
+</article>