From 79eb3e2fa255a054ed9d4b154183756d2569f317 Mon Sep 17 00:00:00 2001
From: ebremner <ebremner@uwaterloo.ca>
Date: Thu, 10 Jun 2021 11:55:49 -0400
Subject: [PATCH] ISTWCMS-4704: adding date component with ability to handle
multiple dates and updating card to use new date component
---
css/styles.css | 7 ++++
source/_patterns/04-components/card/card.twig | 17 +++-------
.../_patterns/04-components/date/_date.scss | 10 ++++++
source/_patterns/04-components/date/date.twig | 33 +++++++++++++++++++
4 files changed, 54 insertions(+), 13 deletions(-)
create mode 100644 source/_patterns/04-components/date/_date.scss
create mode 100644 source/_patterns/04-components/date/date.twig
diff --git a/css/styles.css b/css/styles.css
index f0bf6c2e..ee81eda5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -3921,6 +3921,13 @@ button {
padding-left: 0;
padding-right: 0; } }
+.uw-date {
+ width: 100%; }
+
+.uw-date-details .uw-date {
+ margin-bottom: 0.25rem;
+ margin-top: 0.25rem; }
+
/* stylelint-disable-next-line selector-no-qualifying-type */
details.details {
margin: 0 0 1.5rem;
diff --git a/source/_patterns/04-components/card/card.twig b/source/_patterns/04-components/card/card.twig
index 107f8396..92754eaa 100644
--- a/source/_patterns/04-components/card/card.twig
+++ b/source/_patterns/04-components/card/card.twig
@@ -6,19 +6,10 @@
<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 %}
+ {% include '@components/date/date.twig' with {
+ 'date_format': date_format,
+ 'date': date,
+ } %}
</div>
{% endif %}
{% if title or sub_title %}
diff --git a/source/_patterns/04-components/date/_date.scss b/source/_patterns/04-components/date/_date.scss
new file mode 100644
index 00000000..57999552
--- /dev/null
+++ b/source/_patterns/04-components/date/_date.scss
@@ -0,0 +1,10 @@
+.uw-date {
+ width: 100%
+}
+
+.uw-date-details {
+ .uw-date {
+ margin-bottom: 0.25rem;
+ margin-top: 0.25rem;
+ }
+}
\ No newline at end of file
diff --git a/source/_patterns/04-components/date/date.twig b/source/_patterns/04-components/date/date.twig
new file mode 100644
index 00000000..52a5ce2d
--- /dev/null
+++ b/source/_patterns/04-components/date/date.twig
@@ -0,0 +1,33 @@
+{% if date is iterable %}
+ {% if date|length == 1 %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': date.0
+ } %}
+ {% else %}
+ {% for d in date %}
+ {% if loop.index0 == 0 %}
+ <details class="uw-date-details">
+ <summary role="button" aria-controls="edit-future-dates-collapsible" aria-expanded="false" aria-pressed="false" class="uw-date-details__summary">
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': d
+ }%}
+ </summary>
+ {% else %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': d
+ }%}
+ {% endif %}
+ {% if loop.last %}
+ </details>
+ {% endif %}
+ {% endfor %}
+ {% endif %}
+{% else %}
+ {% include "@base/date-formats/_date-format.twig" with {
+ 'date_format': date_format,
+ 'date': date
+ } %}
+{% endif %}
--
GitLab