Adding the event teaser and the ability to select the datetime format per card-teaser

css/styles.css

@@ -4826,6 +4826,14 @@ picture {
     .card--teaser .card__title a:active {
       color: #757575; }
 
+.teaser--event .card__date {
+  margin-bottom: 0.5rem;
+  order: 1; }
+
+.teaser--event .card__title {
+  margin: 0;
+  order: 2; }
+
 .uw-bg--black {
   background-color: #000; }
 

source/_patterns/02-base/date-formats/long-datetime.twig

@@ -3,5 +3,5 @@
 {%- endset %}
 
 {% if year %}
-  <span class="{{ date_modifier_classes }}" > {{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }} {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
+  <span class="{{ date_modifier_classes }}" > {{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }} &mdash; {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
 {% endif %}

source/_patterns/02-base/date-formats/medium-date-short-month.md

+---
+title: Medium Date Short Month
+---

source/_patterns/02-base/date-formats/medium-date-short-month.twig

+{% set date_modifier_classes -%}
+  uw-date   uw-date--medium-date-short-month {{ date_modifier_classes }}
+{%- endset %}
+
+{% if year %}
+  <span class="{{ date_modifier_classes }}" > {{ month.short }}. {{ day.short }}, {{ year.long }}</span>
+{% endif %}
\ No newline at end of file

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

@@ -12,6 +12,14 @@ __Variables:__
 * author_link:  [string] URL for the author link.
 * show_hover: [boolean] to show outline and shadow on hover
 * date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+    * long_date
+    * long_datetime
+    * medium_date
+    * medium_datetime
+    * medium_date_short_month
+    * short_date
+    * short_datetime
 * read_more: [boolean] Whether to show the read more link.
 * footer: [string] Footer content of the card.
 * sources: [string] URL for the srcset of picture tag inside of responsive-image.

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

@@ -5,9 +5,41 @@
         <div class="card__header">
             {% if date %}
             <div class="card__date">
-                {% include "@base/date-formats/long-date.twig" with {
-                    modifier_classes: 'uw-date uw-date--long',
-                } %}
+                {% if date_format == 'long_date' %}
+                    {% include "@base/date-formats/long-date.twig" with {
+                        modifier_classes: modifier_classes,
+                    }%}
+                {% endif %}
+                {% if date_format == 'long_datetime' %}
+                    {% include "@base/date-formats/long-datetime.twig" with {
+                        modifier_classes: modifier_classes,
+                    }%}
+                {% endif %}
+                {% if date_format == 'medium_date' %}
+                    {% include "@base/date-formats/medium-date.twig" with {
+                        modifier_classes: modifier_classes,
+                    }%}
+                {% endif %}
+                {% if date_format == 'medium_date_short_month' %}
+                    {% include "@base/date-formats/medium-date-short-month.twig" with {
+                        modifier_classes: modifier_classes,
+                    }%}
+                {% endif %}
+                {% if date_format == 'medium_datetime' %}
+                    {% include "@base/date-formats/medium-datetime.twig" with {
+                        modifier_classes: modifier_classes,
+                    }%}
+                {% endif %}
+                {% if date_format == 'short_date' %}
+                    {% include "@base/date-formats/short-date.twig" with {
+                        modifier_classes: modifier_classes,
+                    }%}
+                {% endif %}
+                {% if date_format == 'short_datetime' %}
+                    {% include "@base/date-formats/short-datetime.twig" with {
+                        modifier_classes: modifier_classes,
+                    }%}
+                {% endif %}
             </div>
             {% endif %}
             <h{{ header_level }} class="card__title">

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

@@ -6,7 +6,8 @@ url: '#'
 author_name: 'Author Lastname'
 author_link: '#'
 footer: '<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam et accumsan augue. Morbi non laoreet lorem.</p>'
-date: Thursday, September 28, 2018
+date: 'Thursday, September 28, 2018'
+date_format: 'long_date'
 read_more: true
 show_hover: true
 tags:

source/_patterns/04-components/teaser/teaser--blog/_teaser--blog.scss

 // @file
-// Styles for teaser.
-
-//.teaser--blog{
-//  .card__body {
-//    background: #ff1493;
-//  }
-//
-//  .card__header{
-//    background:#F00;
-//  }
-//
-//  .card__date {
-//    background: #ffa500;
-//  }
-//
-//  .card__author{
-//    background: #800080;
-//  }
-//
-//  .card__title{
-//    background: #adff2f;
-//  }
-//
-//  .card__content {
-//    background: #2f4f4f;
-//  }
-//
-//  .card__media {
-//    background: #fffacd;
-//  }
-//  .card__footer{
-//    background: #ff0;
-//    .card__tags{
-//
-//    }
-//    .card__readmore{
-//
-//    }
-//    .card__social{
-//
-//    }
-//  }
-//}
+// Styles for blog teaser.
+
+.teaser--blog{
+  .card__body {
+  }
+
+  .card__header{
+  }
+
+  .card__date {
+  }
+
+  .card__author{
+  }
+
+  .card__title{
+  }
+
+  .card__content {
+  }
+
+  .card__media {
+  }
+  .card__footer{
+    .card__tags{
+
+    }
+    .card__readmore{
+
+    }
+    .card__social{
+
+    }
+  }
+}
 

source/_patterns/04-components/teaser/teaser--blog/teaser--blog.md

@@ -12,6 +12,14 @@ __Variables: (same form card)__
 * author_link:  [string] URL for the author link.
 * show_hover: [boolean] to show outline and shadow on hover
 * date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+    * long_date
+    * long_datetime
+    * medium_date
+    * medium_datetime
+    * medium_date_short_month
+    * short_date
+    * short_datetime
 * sources: [string] URL for the srcset of picture tag inside of responsive-image.
 * img_element: [string] Url to source of fall back image.
 * alt: [string] Alt text to the image used in the picture tag or fallback image.

source/_patterns/04-components/teaser/teaser--blog/teaser--blog.twig

@@ -6,6 +6,7 @@
   modifier_classes: teaser_modifier_classes,
   title: title,
   url: url,
+  date_format: date_format,
   date: date,
   tags: tags,
   sources: sources,
@@ -14,7 +15,6 @@
   show_hover: show_hover,
   content: content,
   header_level: '2',
-  url: url,
   author_name: author_name,
   author_link: author_link,
 } %}
\ No newline at end of file

source/_patterns/04-components/teaser/teaser--blog/teaser--blog.yml

 ---
 title: 'Blog Teaser title'
 url: '#'
-date: Thursday, September 28, 2018
+date: 'Thursday, September 28, 2018'
+date_format: 'long_date'
 author_name: 'Author Lastname'
 author_link: '#'
 tags:

source/_patterns/04-components/teaser/teaser--event/_teaser--event.scss

+// @file
+// Styles for event teaser.
+
+.teaser--event{
+  .card__body {
+  }
+
+  .card__header{
+  }
+
+  .card__date {
+    margin-bottom: rem(gesso-spacing(xs));
+    order:1;
+  }
+
+  .card__author{
+  }
+
+  .card__title{
+    margin:0;
+    order:2;
+  }
+
+  .card__content {
+  }
+
+  .card__media {
+  }
+  .card__footer{
+    .card__tags{
+
+    }
+    .card__readmore{
+
+    }
+    .card__social{
+
+    }
+  }
+}

source/_patterns/04-components/teaser/teaser--event/teaser--event.md

+---
+el: .teaser--event
+title: Teaser Event
+---
+
+__Variables: (same form card)__
+* modifier_classes: [string] Classes to modify the default component styling.
+* title: [string] Title of the card.
+* header_level: [string] Set the level of herder <h?> tag for card
+* url: [string] URL of the card.
+* author_name:  [string] Author name.
+* author_link:  [string] URL for the author link.
+* show_hover: [boolean] to show outline and shadow on hover
+* date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+    * long_date
+    * long_datetime
+    * medium_date
+    * medium_datetime
+    * medium_date_short_month
+    * short_date
+    * short_datetime
+* sources: [string] URL for the srcset of picture tag inside of responsive-image.
+* img_element: [string] Url to source of fall back image.
+* alt: [string] Alt text to the image used in the picture tag or fallback image.
+* content: [string] Content of the card.  
+* tags: [array] List of taxonomy tags
+    * type: [string] Type of the tag, it will add class ".tag--type".
+    * size: [string] Size of the tag, it will add class ".tag--size"
+    * url: [string] URL of the tag.
+    * title: [string] Title of the tag. 
\ No newline at end of file

source/_patterns/04-components/teaser/teaser--event/teaser--event.twig

+{% set teaser_modifier_classes -%}
+    card--teaser teaser--event {{ modifier_classes }}
+{%- endset %}
+
+{% include "@components/teaser/teaser.twig" with {
+  modifier_classes: teaser_modifier_classes,
+  title: title,
+  url: url,
+  date: date,
+  sources: sources,
+  img_element: img_element,
+  alt: alt,
+  show_hover: show_hover,
+  content: content,
+  header_level: '2',
+} %}
\ No newline at end of file

source/_patterns/04-components/teaser/teaser--event/teaser--event.yml

+---
+title: 'Event Teaser title'
+url: '#'
+date: 'AUG 14, 2020'
+date_format: 'long_datetime'
+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 for blog teaser photo'
+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>
+

source/_patterns/04-components/teaser/teaser.md

@@ -11,6 +11,14 @@ __Variables: (same form card)__
 * author_name:  [string] Author name.
 * author_link:  [string] URL for the author link.
 * date: [string] Date of the card.
+* date_format: [string] Choose the date format used for presentation.
+    * long_date
+    * long_datetime
+    * medium_date
+    * medium_datetime
+    * medium_date_short_month
+    * short_date
+    * short_datetime
 * read_more: [boolean] Whether to show the read more link.
 * footer: [string] Footer content of the card.
 * sources: [string] URL for the srcset of picture tag inside of responsive-image.

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

@@ -6,6 +6,7 @@
   modifier_classes: teaser_modifier_classes,
   title: title,
   url: url,
+  date_format: date_format,
   date: date,
   tags: tags,
   sources: sources,
@@ -14,7 +15,6 @@
   show_hover: show_hover,
   content: content,
   header_level: '2',
-  url: url,
   author_name: author_name,
   author_link: author_link,
 } %}
\ No newline at end of file

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

@@ -3,7 +3,8 @@ title: 'This is a Teaser title using the card component'
 url: '#'
 author_name: 'Author Lastname'
 author_link: '#'
-date: Thursday, September 28, 2018
+date: 'Thursday, September 28, 2018'
+date_format: 'long_date'
 tags:
   - url: '#'
     title: 'Tag 1'