ISTWCMS-5195: updating card to use correct bem and banners to use correct class

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

@@ -8,7 +8,7 @@
       $(document).ready(function () {
 
         // Step through each FF on the page.
-        $('.card.banner').each(function () {
+        $('.card__banner').each(function () {
 
           // Get the number of items for the carousel, if any.
           var num_of_items = 1;

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

+---
+modifier_classes: ''
+header_level: '2'
+node:
+  url: '#'
+  header:
+    date:
+      0: 'Friday, September 19, 2020'
+    title: 'This is a Card title'
+    author:
+      name: 'Author Lastname'
+      link: '#'
+  tags:
+    tag1:
+      -
+        url: '#'
+        title: 'Tag 1'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 2'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 3'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 4'
+        type: 'simple'
+    tag2:
+      -
+        url: '#'
+        title: 'Tag 5'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 6'
+        type: 'simple'
+      -
+        url: '#'
+        title: 'Tag 7'
+        type: 'simple'
+  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'
+  content: '<p>This is the summary, which can contain <abbr title="Hyper Text Markup Language">HTML</abbr> markup. It should be 600 characters or less.Ea sit vide commodo ancillae, pro eu quidam ancillae offendit. Odio ferri officiis an his, sit id causae partiendo accusamus, has discere expetendis ne. Per at wisi homero voluptaria, vis vidit ornatus vituperatoribus no. Labores maiestatis mei ad, cum cu exerci appareat.</p>'
+  social_media:
+    menu_tree:
+      - text: 'Facebook'
+        url: 'https://www.facebook.com/university.waterloo'
+      - text: 'Twitter'
+        url: 'https://twitter.com/uWaterloo'
+      - text: 'YouTube'
+        url: 'https://www.youtube.com/user/uwaterloo'
+      - text: 'Instagram'
+        url: 'https://www.instagram.com/uofwaterloo/'
+      - text: 'LinkedIn'
+        url: 'https://www.linkedin.com/edu/school?id=10875'
+  social_media_placement: 'card-footer'
+  hero_image:
+    img_element: '../../../../source/images/president/president_xlarge.jpg'
+    alt: 'Alternative hero text'
+type: 'node'

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

-{% if image.big_text or image.small_text %}
-  <div class="card__header">
-    {% if image.big_text %}
-      <div class="card__title">
-        {{ image.big_text }}
-      </div>
-    {% endif %}
-    {% if image.small_text %}
-      <span class="sub-title">
-        {{ image.small_text }}
-      </span>
-    {% endif %}
-  </div>
-{% endif %}
+<div class="card__banner--image">
+
+  {% if image.big_text or image.small_text %}
+    <div class="card__banner--titles">
+      {% if image.big_text %}
+        <span class="card__banner--title">
+          {{ image.big_text }}
+        </span>
+      {% endif %}
+      {% if image.small_text %}
+        <span class="card__banner--sub-title">
+          {{ image.small_text }}
+        </span>
+      {% endif %}
+    </div>
+  {% endif %}
 
-<div class="card__banner">
   {% if image.url %}
     <a href="{{ image.url }}">
   {% endif %}

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

@@ -11,7 +11,7 @@
   {% set show_header = 'yes' %}
 {% endif %}
 
-<article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ type }}" >
+<article class="card{% if type %} card__{{ type }}{% endif %}{% if show_hover %} card--show-hover {% endif %}" >
 
   {% if hero_image %}
     {% include '@components/card/card-elements/_hero-image.twig' with {

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

 ---
 modifier_classes: ''
-title: 'This is a Card title'
 header_level: '2'
 url: '#'
-author_name: 'Author Lastname'
-author_link: '#'
-footer:
-date: 'Friday, September 19, 2020'
-date_format: 'long-date'
-read_more: true
-show_hover: true
+header:
+  date:
+    0: 'Friday, September 19, 2020'
+  title: 'This is a Card title'
+  author:
+    name: 'Author Lastname'
+    link: '#'
 tags:
   tag1:
     -
@@ -73,6 +72,7 @@ social_media:
     - text: 'LinkedIn'
       url: 'https://www.linkedin.com/edu/school?id=10875'
 social_media_placement: 'card-footer'
-hero:
+hero_image:
   img_element: '../../../../source/images/president/president_xlarge.jpg'
   alt: 'Alternative hero text'
+type: 'card'