USWDS-Site: Enhance what's new page layout

_config.yml

@@ -2,6 +2,8 @@
 title: U.S. Web Design System (USWDS)
 description: USWDS makes it easier to build accessible, mobile-friendly government websites.
 uswds_version: 3.11.0
+uswds_compile_version: 1.2.1
+uswds_design_kit_version: 3.0
 uswds_email: [email protected]
 federalist_base: "https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.sites.pages.cloud.gov/preview/uswds/uswds"
 federalist_component_preview: "iframe.html?id="

_includes/jump-links.html

@@ -0,0 +1,38 @@
+{% comment %}
+  Generates jump links for on-page content.
+  To create the jump links list, add a `jump_links` data key to the page's front matter
+  and add a list of items that you want to include.
+
+  Keys for the front matter link list:
+  - text: (required) The text for the jump link list item.
+  - href: (optional) The anchor hash for the jump link list item.
+    If no `href` is added, the link will point to a hash made from the slugified link text.
+{% endcomment %}
+
+<!-- Turn on smooth scroll animation for anchor links -->
+<style>
+  html {
+    scroll-behavior: smooth;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    html {
+      scroll-behavior: auto;
+    }
+  }
+</style>
+
+<ul class="site-checklist-jump-links">
+  {% for link in page.jump_links %}
+    {% assign link_href = link.href | default: link.text | slugify %}
+
+    <li>
+      <a href="#{{ link_href }}">
+        <svg class="usa-icon" aria-hidden="true" role="img">
+          <use href="{{ site.baseurl }}/assets/img/sprite.svg#arrow_downward"></use>
+        </svg>
+        {{ link.text }}
+      </a>
+    </li>
+  {% endfor %}
+</ul>

_includes/post-preview.html

@@ -16,11 +16,13 @@
 
 <article id="{{ post_id }}" class="post-preview">
   <header class="post-preview__header">
-    <p class="post-category site-subheading">
-      {{ post.tags[0] }}
-    </p>
+    {% if include.category %}
+      <p class="post-category site-subheading">
+        {{ post.tags[0] }}
+      </p>
+    {% endif %}
 
-    <{{ include.heading | default:"h2" }} class="post-preview__title">
+    <{{ include.heading | default:"h2" }} class="post-preview__title{% if include.headingClasses %} {{ include.headingClasses }}{% endif %}">
       {% unless preview_url == "none" %}
         <a href="{{ preview_url }}">
       {% endunless %}
@@ -30,12 +32,12 @@
       {% endunless %}
     </{{ include.heading | default:"h2" }}>
 
-    {% include post-meta.html %}
+    {% if include.date %}
+      {% include post-meta.html %}
+    {% endif %}
   </header>
 
   <div class="post-preview__content site-prose">
-    <p>
-      {{ post.lead | default: post.excerpt | markdownify }}
-    </p>
+    <p>{{ post.lead | default: post.excerpt | markdownify }}</p>
   </div>
 </article>

_includes/site-card-list.html

@@ -1,17 +1,24 @@
 {% comment %}
   Container for site card group.
-  
+
   Seen in "What's New" page - `/about/whats-new/`
 {% endcomment %}
 
 <ul class="usa-card-group {{ include.listClasses }}">
   {% for card in include.cards %}
     <li class="usa-card site-component-card {{ include.listItemClasses }}">
       {% include site-card.html
+        containerClasses=include.containerClasses
         heading=card.heading
+        headingElement=include.headingElement
+        subheading=card.subheading
+        subheadingElement=include.subheadingElement
+        image=card.image
+        imageAlt=card.imageAlt
         body=card.body
         linkUrl=card.linkUrl
         linkText=card.linkText
+        linkClasses=include.linkClasses
       %}
     </li>
   {%  endfor %}

_includes/site-card.html

@@ -1,20 +1,40 @@
 {% comment %}
   Single card element for `site-card-list`.
-  
+
   Variables:
-    - heading: String heading for a single card.
-    - body: String body that gets placed in a paragraph tag.
-    - linkUrl: String for the link url.
-    - linkText: String link label.
+    - heading: (required) String heading for a single card.
+    - headingElement: (optional) The heading HTML element type.
+    - subheading: (optional) String subheading for a single card.
+    - subheadingElement: (optional) The subheading HTML element type.
+    - body: (required) String body that gets placed in a paragraph tag.
+    - image: (optional) The card image.
+    - imageAlt: (optional) The alt tag for the image.
+    - linkUrl: (required) String for the link url.
+    - linkText: (required) String link label.
+    - linkClasses: (optional) Classes for the link element.
 {% endcomment %}
-<div class="usa-card__container">
+
+<div class="usa-card__container {{ include.containerClasses }}">
   <header class="usa-card__header">
-    <h2 class="usa-card__heading font-lang-lg">{{ include.heading }}</h2>
+    {% if include.subheading %}
+      <{{ include.subheadingElement | default:"span" }} class="site-subheading">{{ include.subheading }}</{{ include.subheadingElement | default:"span" }}>
+    {% endif %}
+    <{{ include.headingElement | default:"h3" }} class="usa-card__heading font-lang-lg">{{ include.heading }}</{{ include.headingElement | default:"h3" }}>
   </header>
+  {% if include.image %}
+  <div class="usa-card__media">
+    <div class="usa-card__img">
+      <img
+        src="{{ include.image }}"
+        alt="{{ include.imageAlt }}"
+      />
+    </div>
+  </div>
+  {% endif %}
   <div class="usa-card__body font-lang-sm">
     <p>{{ include.body }}</p>
   </div>
   <div class="usa-card__footer">
-    <a class="usa-button site-button" href="{{ include.linkUrl }}">{{ include.linkText }}</a>
+    <a class="usa-button site-button {{ include.linkClasses }}" href="{{ include.linkUrl }}">{{ include.linkText }}</a>
   </div>
 </div>

css/_uswds-theme-custom-styles.scss

@@ -7,7 +7,7 @@
 @import "custom-styles/highlight";
 @import "custom-styles/copy-code-btn";
 @import "custom-styles/graphic-list";
-@import "custom-styles/posts";
+@import "custom-styles/whats-new";
 
 // ========================================
 // CUSTOM PROJECT SASS