USWDS-Site: Enhance what's new page layout #3115
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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=" | ||
|
|
||
| Original file line number | Diff line number | Diff line change | ||||
|---|---|---|---|---|---|---|
| @@ -0,0 +1,25 @@ | ||||||
| <!-- Turn on smooth scroll animation for anchor links --> | ||||||
|
There was a problem hiding this comment. issue: Can you add a comment with a brief description and where this is used? Are there any settings related to this component? There was a problem hiding this comment. Added a comment in 84d5637 |
||||||
| <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 %} | ||||||
| <li> | ||||||
| <a href="#{{ link.href | default: link.text | downcase | slugify }}"> | ||||||
|
There was a problem hiding this comment. polish: Is downcase needed here? Slugify in Jekyll docs says it already handles lowercase.
Suggested change
There was a problem hiding this comment. More polish: You could improve readability by saving this in a variable. {% for link in page.jump_links %}
{% assign link_href = link.href | default: link.text | slugify %}
<li>
<a href="#{{ link_href }}">There was a problem hiding this comment. Made these updates in 84d5637 |
||||||
| <svg class="usa-icon" aria-hidden="true" role="img"> | ||||||
| <use href="{{ site.baseurl }}/assets/img/sprite.svg#arrow_downward"></use> | ||||||
| </svg> | ||||||
| {{ link.text }} | ||||||
|
There was a problem hiding this comment. thought: If For example There was a problem hiding this comment. It feels to me like |
||||||
| </a> | ||||||
| </li> | ||||||
| {% endfor %} | ||||||
| </ul> | ||||||
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,11 +16,13 @@ | |
|
|
||
| <article id="{{ post_id }}" class="post-preview"> | ||
| <header class="post-preview__header"> | ||
| {% if include.category %} | ||
| <p class="post-category site-subheading"> | ||
| {{ post.tags[0] }} | ||
| </p> | ||
| {% endif %} | ||
|
Comment on lines
+19
to
+23
There was a problem hiding this comment. Note On the main what's new page, I removed the tag eyebrow to conserve vertical real estate. I added it back in on the "All news and updates" page. Flag if you would like this changed. |
||
|
|
||
| <{{ include.heading | default:"h2" }} class="post-preview__title {{ include.headingClasses }}"> | ||
|
There was a problem hiding this comment. polish: Where's this class needed? What happens when I see an empty space in the what's new preview <!-- about/whats-new/ -->
<h3 class="post-preview__title ">There was a problem hiding this comment. Added a conditional for |
||
| {% unless preview_url == "none" %} | ||
| <a href="{{ preview_url }}"> | ||
| {% endunless %} | ||
|
|
@@ -30,12 +32,12 @@ | |
| {% endunless %} | ||
| </{{ include.heading | default:"h2" }}> | ||
|
|
||
| {% if include.date %} | ||
| {% include post-meta.html %} | ||
| {% endif %} | ||
|
Comment on lines
+35
to
+37
There was a problem hiding this comment. Note On the main what's new page, I removed the date to conserve vertical real estate. I added it back in on the "All news and updates" page. Flag if you would like this changed. |
||
| </header> | ||
|
|
||
| <div class="post-preview__content site-prose"> | ||
| <p>{{ post.lead | default: post.excerpt | markdownify }}</p> | ||
| </div> | ||
| </article> | ||
|
There was a problem hiding this comment. thought: Something for next time. This component could benefit from using For example: <!-- Set in template and passed to include. -->
{% capture card_heading %}
<div>A subheading</div>
<h3>The heading</h3>
{% endcapture %}
<!-- Component re-uses `card_heading` -->
<header class="usa-card__header">
{{ include.card_heading }}
</header> |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,20 +1,40 @@ | ||
| {% comment %} | ||
| Single card element for `site-card-list`. | ||
|
|
||
| Variables: | ||
| - heading: String heading for a single card. | ||
| - headingElement: The heading HTML element type. | ||
| - subheading: String subheading for a single card. | ||
| - subheadingElement: The subheading HTML element type. | ||
| - body: String body that gets placed in a paragraph tag. | ||
| - image: The card image. | ||
| - imageAlt: The alt tag for the image. | ||
| - linkUrl: String for the link url. | ||
| - linkText: String link label. | ||
| - linkClasses: Classes for the link element. | ||
|
There was a problem hiding this comment. issue: Are all these settings required or are some optional? There was a problem hiding this comment. Added notes about required vs optional in 5d18a6c |
||
| {% endcomment %} | ||
|
|
||
| <div class="usa-card__container {{ include.containerClasses }}"> | ||
| <header class="usa-card__header"> | ||
| {% if include.subheading %} | ||
| <{{ include.subheadingElement | default:"h2" }} class="site-subheading">{{ include.subheading }}</{{ include.subheadingElement | default:"h2" }}> | ||
| {% endif %} | ||
| <{{ include.headingElement | default:"h3" }} class="usa-card__heading font-lang-lg">{{ include.heading }}</{{ include.headingElement | default:"h3" }}> | ||
amyleadem marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| </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 {{ include.linkClasses }}" href="{{ include.linkUrl }}">{{ include.linkText }}</a> | ||
| </div> | ||
| </div> | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
issue (non-blocking): We already have a jump links component in
_includes/accessibility-tests/jump-links.html.We should avoid repeating ourselves in the future and create a more flexible jump links component that can be reused. This would allow you to re-use the reduced motion styles and avoid setting them in multiple places, like
accessibility-tests.html.