Adjustments to the date-formats used in card - teaser patterns

css/styles.css

@@ -1237,6 +1237,12 @@ svg:not(:root) {
   width: 1px;
   word-wrap: normal; }
 
+.uw-date-pl {
+  margin-bottom: 1.5rem; }
+
+.uw-date-pl h4 {
+  margin-bottom: 0.5rem; }
+
 .uw-date {
   background-color: #000;
   clear: both;

source/_patterns/02-base/date-formats/_date-format.twig

+{% set date_modifier_classes -%}
+    uw-date   uw-date--{{ date_format|replace({'-' : '_'})}} {{ date_modifier_classes }}
+{%- endset %}
+{% if is_demo %}
+<div class='uw-date-pl'>
+    <h4> {{ date_format }}:</h4>
+{% endif %}
+
+{% if date %}
+    <span class="{{ date_modifier_classes }}" >{{ date }}</span>
+{% endif %}
+
+{% if is_demo %}
+</div>
+{% endif %}
\ No newline at end of file

source/_patterns/02-base/date-formats/_date-formats.scss

@@ -2,7 +2,12 @@
 // Styles for Date formats.
 $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat', 'org-sci', 'org-school';
 
-
+.uw-date-pl{
+  margin-bottom: rem(gesso-spacing(md));
+}
+.uw-date-pl h4{
+  margin-bottom: rem(gesso-spacing(xs));
+}
 .uw-date{
   background-color:gesso-brand(org-default,uw-black,'primary');
   clear: both;

source/_patterns/02-base/date-formats/date-formats.md

+---
+title: Date Formats
+---

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

+
+{% for date_format in date_formats %}
+    {% include '@base/date-formats/_date-format.twig' with {
+        'date_format': date_format.date_format,
+        'date': date_format.date,
+        'is_demo': 'true'
+    }%}
+{% endfor %}

source/_patterns/02-base/date-formats/date-formats.yml

 ---
-date_modifier_classes: ''
+date_modifier_classes: ''
\ No newline at end of file
+date_formats:
+  -
+    date_format: 'long-date'
+    date: 'Friday, September 18, 2020'
+  -
+    date_format: 'long-datetime'
+    date: 'Friday, September 18, 2020 - 4:20pm'
+  -
+    date_format: 'medium-date'
+    date: 'September 18, 2018'
+  -
+    date_format: 'medium-date-short-month'
+    date: 'Sep. 18, 2020'
+  -
+    date_format: 'medium-datetime'
+    date: 'September 18, 2020 - 4:20pm'
+  -
+    date_format: 'short-date'
+    date: '09-18-2020'
+  -
+    date_format: 'short-datetime'
+    date: '09-18-2020, - 4:20pm'

source/_patterns/02-base/date-formats/long-date.md

----
-title: Long Date
----

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

-{% set date_modifier_classes -%}
-  uw-date   uw-date--long_date {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
-  <span class="{{ date_modifier_classes }}" >{{ weekday.long }}, {{ month.long }} {{ day.short }}, {{ year.long }}</span>
-{% endif %}

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

----
-title: Long Datetime
----

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

-{% set date_modifier_classes -%}
-  uw-date   uw-date--long_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
-  <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/02-base/date-formats/medium-date.md

----
-title: Medium Date
----

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

-{% set date_modifier_classes -%}
-  uw-date   uw-date--medium_date {{ modifier_classes }}
-{%- endset %}
-
-{% if year %}
-  <span class="{{ date_modifier_classes }}" > {{ month.long }} {{ day.short }}, {{ year.long }}</span>
-{% endif %}

source/_patterns/02-base/date-formats/medium-datetime.md

----
-title: Medium Datetime
----

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

-{% set date_modifier_classes -%}
-  uw-date   uw-date--medium_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
-  <span class="{{ date_modifier_classes }}" > {{ month.long }} {{ day.short }}, {{ year.long }} &mdash; {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}

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

----
-title: Short Date
----

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

-{% set date_modifier_classes -%}
-  uw-date   uw-date--short_date {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
-  <span class="{{ date_modifier_classes }}" >{{ month.digit }}-{{ day.long }}-{{ year.long }}</span>
-{% endif %}

source/_patterns/02-base/date-formats/short-datetime.md

----
-title: Short Datetime
----

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

-{% set date_modifier_classes -%}
-  uw-date   uw-date--short_date_time {{ date_modifier_classes }}
-{%- endset %}
-
-{% if year %}
-  <span class="{{ date_modifier_classes }}" > {{ month.digit }}-{{ day.long }}-{{ year.long }} {{ hour.short }}:{{ minute.long }} {{ hour.ampm }}</span>
-{% endif %}