From 8bad40883fdbea33d378917bc0f6f2c9c8b52bfc Mon Sep 17 00:00:00 2001
From: Matt Hinz <matt.hinz@gsa.gov>
Date: Mon, 23 May 2022 16:38:51 -0700
Subject: [PATCH] Home page: Add placeholder for "Upcoming Events"

Not wired up to anything yet.
---
 _blocks/upcoming-events/block.md           | 16 +++++++---------
 _pages/home/index.md                       |  4 +---
 app/assets/stylesheets/uswds-settings.scss |  7 ++++++-
 app/assets/stylesheets/uswds-tweaks.scss   |  5 +++++
 4 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/_blocks/upcoming-events/block.md b/_blocks/upcoming-events/block.md
index 4414e506..38223b4d 100644
--- a/_blocks/upcoming-events/block.md
+++ b/_blocks/upcoming-events/block.md
@@ -3,7 +3,7 @@ name: Upcoming events
 ---
 
 <ul class="usa-collection">
-<li class="usa-collection__item usa-collection__item--no-border">
+<li class="usa-collection__item">
 <div class="usa-collection__calendar-date">
 <time datetime="2020-09-30T12:00:00+01:00">
 <span class="usa-collection__calendar-date-month">SEP</span>
@@ -11,15 +11,13 @@ name: Upcoming events
 </time>
 </div>
 <div class="usa-collection__body">
-<span class="usa-tag">Workshop/seminar</span>
-<h3 class="usa-collection__heading">
-Thriving Thursday: Mind your mood
-</h3>
+<span class="usa-tag bg-accent-warm-dark">Workshop/seminar</span>
+<h4 class="usa-collection__heading">
+  <a href="#">Thriving Thursday: Mind your mood</a>
+</h4>
 <p class="usa-collection__description">
-<%= uswds_icon "alarm" %>
-Thu, Apr 28, 2022<br>
-11:00 am – 12:00 pm ET<br>
-Location: Virtual<br>
+  Thu, Apr 28, 2022 | 11:00 am – 12:00 pm ET<br>
+  Location: Virtual<br>
 </p>
 </div>
 </li>
diff --git a/_pages/home/index.md b/_pages/home/index.md
index d166507e..ac03fb7c 100644
--- a/_pages/home/index.md
+++ b/_pages/home/index.md
@@ -43,9 +43,7 @@ Clinical fellows and other health professionals affiliated with Duke or the NIH
 
 ### Upcoming events
 
-(This will be a dynamic listing of upcoming events)
-
-
+{::content_block slug="upcoming-events/block" /}
 
 {:/column}
 {:/columns}
diff --git a/app/assets/stylesheets/uswds-settings.scss b/app/assets/stylesheets/uswds-settings.scss
index 237ff872..909e7576 100644
--- a/app/assets/stylesheets/uswds-settings.scss
+++ b/app/assets/stylesheets/uswds-settings.scss
@@ -12,6 +12,7 @@
   $theme-header-max-width: "desktop-lg",
 
   // Colors
+  $theme-color-accent-warm-dark: "gold-50",
   $theme-color-primary: "cyan-50",
   $theme-color-primary-darker: "cyan-70",
   $theme-color-primary-dark: "mint-cool-60",
@@ -43,5 +44,9 @@
     "padding",
     "text-align",
     "text-transform"
-  )
+  ),
+  // Add !important to USWDS utility classes.
+  // This is _not_ recommended if you're doing Atomic CSS-type styling with
+  // utility classes, but that's not what we're doing here.
+  $utilities-use-important: true
 );
diff --git a/app/assets/stylesheets/uswds-tweaks.scss b/app/assets/stylesheets/uswds-tweaks.scss
index 460a5e00..a958044f 100644
--- a/app/assets/stylesheets/uswds-tweaks.scss
+++ b/app/assets/stylesheets/uswds-tweaks.scss
@@ -1,5 +1,10 @@
 @use "uswds-core" as uswds;
 
+// Don't add top border to collection items
+.usa-collection__item {
+  border-top: none;
+}
+
 // Constrain logo vertically inside navbar
 .usa-navbar .usa-logo img {
   max-height: uswds.units(4);