ISTWCMS-5195: adding many card elements to make card easier to read

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

@@ -4,23 +4,16 @@
   {% set node_image_class =  'without-image' %}
 {% endif %}
 
+{{ dd(node) }}
 <div class="uw-node__{{ node_image_class }}">
   {% include '@components/card/card.twig' with {
     'type': type,
-    'title': node.title,
-    'sub_title': node.sub_title,
-    'featured_image': featured_image,
-    'hero': node.hero,
-    'date': node.date,
+    'hero_image': node.hero_image,
+    'header': node.header,
     'tags': node.tags,
     'content': node.content,
     'sources': node.image.sources,
-    'img_element': node.image.img_element,
-    'image': node.image.uri,
-    'alt': node.image.alt,
-    'header_level': 2,
     'show_hover': '',
-    'author': node.author,
     'url': node.url,
     'additional_info': node.additional_info,
     'location_info': node.location_info,

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

+<div class="card__author">
+  by
+  {% if author.link %}
+    <a href="{{ author.link }}">{{ author.name }}</a>
+  {% else %}
+    {{ author.name }}
+  {% endif %}
+</div>

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

+<div class="card__content">
+  {{ content }}
+</div>

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

+<div class="card__date">
+  {% include '@components/date/date.twig' with {
+    'date_format': date_format,
+    'date': date,
+  } %}
+</div>

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

+<div class="card__header">
+  {% if header.date %}
+    {% include '@components/card/card-elements/_date.twig' with {
+      'date_format': date_format,
+      'date': header.date,
+    } %}
+  {% endif %}
+
+  {% if show_title == 'yes' %}
+    {% include '@components/card/card-elements/_title.twig' with {
+      'header_level': 2,
+      'title': header.title,
+    } %}
+  {% endif %}
+
+  {% if header.position %}
+    {% include '@components/card/card-elements/_position.twig' with {
+      'position': position
+    } %}
+  {% endif %}
+
+  {% if header.author %}
+    {% include '@components/card/card-elements/_author.twig' with {
+      'author': header.author
+    } %}
+  {% endif %}
+</div>

source/_patterns/04-components/card/card-elements/_hero-image.twig

+<div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
+</div>

source/_patterns/04-components/card/card-elements/_listing-image.twig

+<div class="card__media">
+  {% if url %}
+    <a href="{{ url }}">
+  {% endif %}
+
+  {% include "@components/responsive-image/responsive-image.twig" with {
+    sources: listing_image.sources,
+    img_element: listing_image.img_element,
+    alt: listing_image.alt
+  }%}
+
+  {% if url %}
+    </a>
+  {% endif %}
+</div>

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

+<div class="card__position">
+  {{ position }}
+</div>

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

+{% if header_level %}
+  <h{{ header_level }} class="card__title">
+{% else %}
+  <div class="card__title">
+    <strong>
+{% endif %}
+
+{% if url %}
+  <a href="{{ url }}">
+{% endif %}
+
+{{ title }}
+
+{% if url %}
+  </a>
+{% endif %}
+
+{% if header_level %}
+  </h{{ header_level }}>
+{% else %}
+    </strong>
+  </div>
+{% endif%}
+
+{% if sub_title %}
+  <span class="sub-title">{{ sub_title }}</span>
+{% endif %}

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

@@ -9,84 +9,21 @@
 
 <article class="card {{ modifier_classes }} {% if show_hover %} card--show-hover {% endif %} {{ card_type }}" >
 
-  {% if featured_image == 'yes' and hero.img_element %}
-    <div class="card__featured-image" style="background-image: url({{ hero.img_element }});" role="img" aria-label="{{ hero.alt }}">
-    </div>
+  {% if hero_image %}
+    {% include '@components/card/card-elements/_hero-image.twig' with {
+      'hero': hero_image,
+    } %}
   {%  endif %}
 
   <div class="card__body">
-    {% if title or author or date or sub_title or position %}
-      <div class="card__header">
-        {% if date %}
-          <div class="card__date">
-            {% include '@components/date/date.twig' with {
-              'date_format': date_format,
-              'date': date,
-            } %}
-          </div>
-        {% endif %}
-
-        {% if show_title == 'yes' %}
-          {% if header_level %}
-            <h{{ header_level }} class="card__title">
-          {% else %}
-           <div class="card__title">
-             <strong>
-          {% endif %}
-            {% if url %}
-              <a href="{{ url }}">
-            {% endif %}
-            {{ title }}
-            {% if url %}
-              </a>
-            {% endif %}
-             </strong>
-            {% if header_level %}
-            </h{{ header_level }}>
-            {% else %}
-           </div>
-          {% endif%}
-
-          {% if sub_title %}
-            <span class="sub-title">{{ sub_title }}</span>
-          {% endif %}
-        {% endif %}
-
-        {% if position %}
-          <div class="card__position">
-            {{ position }}
-          </div>
-        {% endif %}
-
-        {% if author %}
-          <div class="card__author">
-            by
-            {% if author.link %}
-              <a href="{{ author.link }}">{{ author.name }}</a>
-            {% else %}
-              {{ author.name }}
-            {% endif %}
-          </div>
-        {% endif %}
-      </div>
-    {% endif %}
+    {% include '@components/card/card-elements/_header.twig' with {
+      'header': header
+    } %}
 
-    {% if not featured_image and (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>
+    {% if listing_image %}
+      {% include '@components/card/card-elements/_listing-image.twig' with {
+        'listing_image': listing_image
+      } %}
     {% endif %}
 
     {% if image and not card_type == 'banner' %}
@@ -96,9 +33,9 @@
     {% endif %}
 
     {% if content %}
-      <div class="card__content">
-        {{ content }}
-      </div>
+      {% include '@components/card/card-elements/_content.twig' with {
+        'content': content
+      } %}
     {% endif %}
 
   </div>