-
+ {% if include.image %}
+
+ {% endif %}
+
diff --git a/_posts_short/2024-10-15-sunset-USWDS-1.0.md b/_posts_short/2024-10-15-sunset-USWDS-1.0.md
new file mode 100644
index 000000000..140ec2896
--- /dev/null
+++ b/_posts_short/2024-10-15-sunset-USWDS-1.0.md
@@ -0,0 +1,7 @@
+---
+title: Sunsetting the USWDS 1.0 documentation site
+tags:
+ - Product updates
+excerpt: It's been over five years since we launched USWDS 2.0 and moved on from USWDS v1. We archived the USWDS v1 documentation site a few years back, and at the end of 2024 we'll be taking it offline. Content will likely still be available via archive.org.
+preview_url: none
+---
\ No newline at end of file
diff --git a/_posts_short/2024-10-17-uswds-3.9.0-is-out.md b/_posts_short/2024-10-17-uswds-3.9.0-is-out.md
new file mode 100644
index 000000000..7d3472a2e
--- /dev/null
+++ b/_posts_short/2024-10-17-uswds-3.9.0-is-out.md
@@ -0,0 +1,7 @@
+---
+title: USWDS 3.9.0 is out now
+tags:
+ - Releases
+excerpt: "Updates include: Date picker accessibility fix, accessibility and usability improvement to memorable date and new setting for custom breakpoints."
+preview_url: https://github.com/uswds/uswds/releases/tag/v3.9.0
+---
diff --git a/_posts_short/2024-10-19-a11y-discussion-october.md b/_posts_short/2024-10-19-a11y-discussion-october.md
new file mode 100644
index 000000000..6e851b801
--- /dev/null
+++ b/_posts_short/2024-10-19-a11y-discussion-october.md
@@ -0,0 +1,7 @@
+---
+title: "Accessibility focus: Going beyond visual design for better user experiences"
+tags:
+ - Discussion
+excerpt: This National Disability Employment Awareness Month, we talked about how members of the design community go beyond visual design to create user experiences. What steps are you taking to ensure that your website design is accessible to all?
+preview_url: https://github.com/uswds/uswds/discussions/6109
+---
diff --git a/_posts_short/2024-11-04-a11y-discussion-november.md b/_posts_short/2024-11-04-a11y-discussion-november.md
new file mode 100644
index 000000000..bac7b7217
--- /dev/null
+++ b/_posts_short/2024-11-04-a11y-discussion-november.md
@@ -0,0 +1,7 @@
+---
+title: 'Accessibility focus: An “autocompletely” useful WCAG technique!'
+tags:
+ - Discussion
+excerpt: Does your site or product ask for personal info? If so, how are you putting [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose) into practice?
+preview_url: https://github.com/uswds/uswds/discussions/6177
+---
diff --git a/_posts_short/2024-11-15-uswds-3.10.0-release-is-out.md b/_posts_short/2024-11-15-uswds-3.10.0-release-is-out.md
new file mode 100644
index 000000000..bcc904ca7
--- /dev/null
+++ b/_posts_short/2024-11-15-uswds-3.10.0-release-is-out.md
@@ -0,0 +1,7 @@
+---
+title: USWDS 3.10.0 is out now
+tags:
+- Releases
+excerpt: We fixed a bug on file input image previews, updated the order of combo box search results and updated the time picker hint text to improve clarity.
+preview_url: https://github.com/uswds/uswds/releases/tag/v3.10.0
+---
diff --git a/_posts_short/2024-11-20-figma-design-kit-beta.md b/_posts_short/2024-11-20-figma-design-kit-beta.md
new file mode 100644
index 000000000..974f41f74
--- /dev/null
+++ b/_posts_short/2024-11-20-figma-design-kit-beta.md
@@ -0,0 +1,7 @@
+---
+title: USWDS Figma design kit beta is live
+tags:
+ - Product updates
+excerpt: Our new official design kit beta contains 42 USWDS components built with USWDS design tokens, using variables and smart layouts. Updates, improvements, and changes will be coming over the next few months.
+preview_url: https://www.figma.com/community/file/1440921849343185329/uswds-design-kit-beta
+---
\ No newline at end of file
diff --git a/_posts_short/2024-12-12-nov-mc-QA.md b/_posts_short/2024-12-12-nov-mc-QA.md
new file mode 100644
index 000000000..6aabfb38d
--- /dev/null
+++ b/_posts_short/2024-12-12-nov-mc-QA.md
@@ -0,0 +1,7 @@
+---
+title: November monthly call Q&A
+tags:
+ - Monthly calls
+excerpt: Attendees at the [November monthly call](https://digital.gov/event/2024/11/21/uswds-monthly-call-november-2024/) asked about the new Figma design kit, how the direction of USWDS would affect the current codebase, and more.
+preview_url: https://github.com/uswds/uswds/discussions/6252
+---
\ No newline at end of file
diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss
index edc84e5f2..a70073a18 100644
--- a/css/_uswds-theme-custom-styles.scss
+++ b/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
@@ -1746,6 +1746,12 @@ strong {
@include u-bg("error");
}
+.output-addition {
+ @extend %output-true;
+ @include u-bg("success-light");
+ @include u-text("ink");
+}
+
.output-warning {
@extend %output-true;
@include u-bg("warning");
@@ -3386,19 +3392,23 @@ $do-dont-top-bar-width: 1;
}
a {
- @include u-display("flex");
- @include u-flex("align-center");
@include u-margin-right(2);
@include u-padding-y("05");
@include u-text("primary-dark");
@include u-text("bold");
@include u-text("no-underline");
+ display: inline-block;
&:visited {
color: color("primary-dark");
}
}
+ span {
+ @include u-display("flex");
+ @include u-flex("align-center");
+ }
+
.usa-icon {
@include u-margin-right(1);
}
diff --git a/css/custom-styles/_posts.scss b/css/custom-styles/_posts.scss
deleted file mode 100644
index d34a48197..000000000
--- a/css/custom-styles/_posts.scss
+++ /dev/null
@@ -1,80 +0,0 @@
-.post-preview {
- @include u-border-top("1px", "gray-30");
- @include u-margin-y(3);
- @include u-measure(6);
-
- &__title,
- &__content,
- &__header,
- .post-category {
- @include u-margin-y(2);
- }
-
- &__header {
- @include u-margin-top(3);
- }
-
- &__title {
- @include typeset("lang", "lg", 3);
- @include u-text("bold");
-
- a {
- color: inherit;
-
- &:hover {
- color: color($site-primary);
- }
- }
- }
-
- &__content p {
- @include u-font("lang", "xs");
- }
-}
-
-.post-meta .site-subheading {
- @include u-margin-y("105");
- display: block;
- letter-spacing: normal;
- text-transform: none;
-}
-
-.post-title {
- @include u-measure(1);
- @include typeset("lang", "xl", 2);
- @include u-text("thin");
-
- @include at-media("tablet") {
- @include typeset("lang", "2xl", 2);
- }
-}
-
-.post-content {
- @include u-margin-top(4);
- @include u-measure(4);
-
- h2 {
- line-height: lh("lang", 2);
- }
-}
-
-.post-outdated-content {
- margin-bottom: units(4);
- margin-top: units(-5);
- z-index: z-index("top");
-
- @include at-media("tablet") {
- position: sticky;
- top: 0;
- }
-
- @include at-media("desktop") {
- margin-left: units(4);
- margin-top: 0;
- top: units($height-nav-secondary);
- }
-
- .usa-alert__body {
- margin-left: 0;
- }
-}
diff --git a/css/custom-styles/_whats-new.scss b/css/custom-styles/_whats-new.scss
new file mode 100644
index 000000000..658396359
--- /dev/null
+++ b/css/custom-styles/_whats-new.scss
@@ -0,0 +1,194 @@
+.site-prose {
+ .whats-new__heading {
+ @include u-margin-top(6);
+ @include u-text("normal");
+ @include u-font("lang","md");
+ @include u-text("gray-70");
+ scroll-margin-top: 3.5rem;
+ }
+
+ .whats-new__card-group {
+ .usa-card {
+ @include at-media("desktop-lg") {
+ @include u-margin-bottom(0);
+ }
+ }
+
+ .usa-button,
+ .usa-card__body p {
+ @include typeset('lang', 'xs', 3)
+ }
+
+ .usa-card__container {
+ border: none;
+ border-radius: 0;
+ border-top: units(1) solid color("blue-80v");
+ }
+ }
+
+ .whats-new-card--monthly-call {
+ @include u-margin-y(6);
+ @include u-measure(6);
+
+ .usa-card__container {
+ @include u-bg("blue-warm-70v");
+ @include u-border(0);
+ @include u-margin-x(0);
+ @include u-text("gray-warm-5");
+
+ @include at-media("desktop-lg") {
+ @include u-padding-x(2);
+ @include u-padding-y(3);
+ }
+ }
+
+ .site-subheading {
+ color: color("gray-warm-10");
+ }
+
+ .usa-card__heading {
+ line-height: unset;
+ }
+
+ .usa-card__body,
+ .usa-card__header,
+ .usa-card__footer {
+ @include at-media("tablet") {
+ width: 100%;
+ }
+
+ @include at-media("desktop-lg") {
+ @include grid-col(7);
+ }
+ }
+
+ .usa-card__media {
+ @include u-padding(4);
+ background-image: url("../img/monthly_call_bg.png");
+ background-position-y: center;
+ background-size: 15rem;
+ display:flex;
+ justify-content: center;
+
+ @include at-media("tablet") {
+ position: relative;
+ width: 100%;
+ }
+
+ @include at-media("desktop-lg") {
+ @include grid-col(5);
+ @include u-padding(6);
+ position: absolute;
+ }
+ }
+
+ .usa-card__img {
+ background-color: initial;
+ max-width: 10rem;
+
+ @include at-media("desktop-lg") {
+ max-width: 15rem;
+ }
+ }
+
+ .usa-card__img img {
+ object-fit: initial;
+ }
+
+ .usa-button {
+ @include u-bg("gold-30v");
+ @include u-margin-top(1);
+ @include u-text("blue-warm-90");
+ }
+ }
+
+ .post-preview {
+ @include u-border-top("1px", "gray-30");
+ @include u-measure(6);
+ @include u-padding-y(1);
+ margin-top: 0;
+
+ &__title,
+ &__content p,
+ &__header,
+ .post-category {
+ @include u-margin-y("105");
+ }
+
+ &__header {
+ @include u-margin-top(2);
+ }
+
+ &__title {
+ @include u-text("bold");
+
+ a {
+ color: inherit;
+
+ &:hover {
+ color: color($site-primary);
+ }
+ }
+ }
+
+ &__content p {
+ @include u-font("lang", "xs");
+ }
+
+ &:first-of-type {
+ margin-top: units(2);
+ }
+
+ &:last-of-type {
+ @include u-border-bottom("1px", "gray-30");
+ }
+ }
+
+ .post-meta .site-subheading {
+ @include u-margin-y(1);
+ display: block;
+ letter-spacing: normal;
+ text-transform: none;
+ }
+
+
+ .post-title {
+ @include u-measure(1);
+ @include typeset("lang", "xl", 2);
+ @include u-text("thin");
+
+ @include at-media("tablet") {
+ @include typeset("lang", "2xl", 2);
+ }
+ }
+
+ .post-content {
+ @include u-margin-top(4);
+ @include u-measure(4);
+
+ h2 {
+ line-height: lh("lang", 2);
+ }
+ }
+
+ .post-outdated-content {
+ margin-bottom: units(4);
+ margin-top: units(-5);
+ z-index: z-index("top");
+
+ @include at-media("tablet") {
+ position: sticky;
+ top: 0;
+ }
+
+ @include at-media("desktop") {
+ margin-left: units(4);
+ margin-top: 0;
+ top: units($height-nav-secondary);
+ }
+
+ .usa-alert__body {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/img/monthly_call_bg.png b/img/monthly_call_bg.png
new file mode 100644
index 000000000..eec4aa42e
Binary files /dev/null and b/img/monthly_call_bg.png differ
diff --git a/pages/whats-new/all-news.md b/pages/whats-new/all-news.md
index 21f609fcf..f84e9bc11 100644
--- a/pages/whats-new/all-news.md
+++ b/pages/whats-new/all-news.md
@@ -8,6 +8,10 @@ type: posts
in_page_nav_headings: false
---
-{% for post in site.posts %}
- {% include post-preview.html post=post %}
-{% endfor %}
+{% assign all_posts = site.posts | concat: site.posts_short | sort: "date" | reverse %}
+
+
+ {% for post in all_posts %}
+ {% include post-preview.html date=true headingClasses="font-lang-lg" %}
+ {% endfor %}
+
diff --git a/pages/whats-new/changelog.md b/pages/whats-new/changelog.md
new file mode 100644
index 000000000..4fd2f0b32
--- /dev/null
+++ b/pages/whats-new/changelog.md
@@ -0,0 +1,23 @@
+---
+title: USWDS Changelog
+layout: styleguide
+lead: Meaningful code, guidance, and content updates across the design system
+permalink: /about/whats-new/changelog/
+category: About
+type: posts
+in_page_nav_headings: false
+---
+
+{% assign changelogs = site.data.changelogs %}
+{% assign changelogsItems = "" | split: "," %}
+
+{% for file in changelogs %}
+ {% assign items = file[1].items %}
+ {% assign changelogItems = changelogItems | concat: items %}
+{% endfor %}
+
+{% assign changelogItems = changelogItems | sort: 'date' | reverse | slice: 0,150 %}
+
+
+ {% include consolidated-changelog-table.html %}
+
diff --git a/pages/whats-new/overview.md b/pages/whats-new/overview.md
index 69658bcbd..99e033aaa 100644
--- a/pages/whats-new/overview.md
+++ b/pages/whats-new/overview.md
@@ -3,7 +3,8 @@ permalink: /about/whats-new/
layout: styleguide
title: What’s new
category: About
-lead: Get the latest USWDS news and information here. Learn more about our product development and process, dive deeper into our monthly call topics, and see how we work with our partners to improve the government technology space.
+lead: |
+ Stay up to date on the latest U.S. Web Design System (USWDS) product launches, learn how to use the design system, and dive deeper into our monthly call topics.
columns:
- title: New users
source: New Users
@@ -21,35 +22,148 @@ redirect_from:
- /about/updates/
type: posts
subnav:
- - text: All news and updates
+ - text: All news and events
href: /about/whats-new/all/
-changelog:
- key: about-whats-new
-cards:
- - heading: "Release notes"
- body: "Find summaries of each USWDS update on our GitHub releases page. Release notes explain bug fixes, new features, and other changes."
- linkText: "Read the USWDS release notes"
- linkUrl: "https://github.com/uswds/uswds/releases"
+ - text: USWDS changelog
+ href: /about/whats-new/changelog/
+jump_links:
+ - text: Latest releases
+ - text: News and events
+ - text: Connect with USWDS
+ - text: Changelog
+connect_cards:
+ - heading: "Stay up to date in your inbox"
+ subheading: Newsletter
+ body: "Get the latest news, product updates, and resources from USWDS."
+ linkText: "Sign up for our newsletter"
+ linkUrl: "https://public.govdelivery.com/accounts/USGSATTS/subscriber/new?qsp=GSA_TTS"
- heading: "GitHub discussions"
- body: "How our growing community of government engineers, content specialists, and designers participate and contribute to improving USWDS."
- linkText: "USWDS GitHub discussion"
+ subheading: Community discussions
+ body: "Join our growing community of USWDS users and contribute to design system improvements."
+ linkText: "USWDS GitHub discussions"
linkUrl: "https://github.com/uswds/uswds/discussions"
in_page_nav_headings: "h2"
---
+
+{% assign all_posts = site.posts | concat: site.posts_short | sort: "date" | reverse %}
-{% include site-card-list.html
- cards=page.cards
- listClasses="margin-top-6"
- listItemClasses="desktop:grid-col-6"
-%}
+
+{% assign product_grid_list_classes = "usa-card site-component-card desktop-lg:grid-col-4" %}
+{% capture uswds_link_text %} USWDS {{ site.uswds_version }}{%- endcapture %}
+{% capture uswds_compile_link_text %} USWDS Compile {{ site.uswds_compile_version }}{%- endcapture %}
+{% capture uswds_design_kit_link_text %} USWDS design kit {{ site.uswds_design_kit_version }}{%- endcapture %}
+
+
+{% assign monthly_call = site.data.monthly-calls.videos[0] %}
+{% capture monthly_call_heading %} {{ monthly_call.date }}: {{monthly_call.title}} {%- endcapture %}
+{% capture monthly_call_image %} {{site.baseurl }}/img/uswds-logo/4c-lg-on-black.svg {%- endcapture %}
+{% capture monthly_call_url %} {{ site.baseurl }}/about/monthly-calls {%- endcapture %}
-{:.margin-top-2.text-normal.font-lang-md.text-gray-70}
-## News and updates
+
+{% assign changelogs = site.data.changelogs %}
+{% assign changelogsItems = "" | split: "," %}
-{% for post in site.posts limit:4 %}
- {% include post-preview.html post=post heading="h3"%}
+{% for file in changelogs %}
+ {% assign items = file[1].items %}
+ {% assign changelogItems = changelogItems | concat: items %}
{% endfor %}
----
+{% assign changelogItems = changelogItems | sort: 'date' | reverse | slice: 0,15 %}
+
+{:.whats-new__heading.margin-top-4}
+### On this page
+
+{% include jump-links.html %}
+
+
+
Latest releases
+
+ -
+ {% include site-card.html
+ subheading="Design system"
+ heading="USWDS"
+ body="The official U.S. design system, enabling the government to build fast, accessible, mobile-friendly websites."
+ linkText=uswds_link_text
+ linkUrl="https://github.com/uswds/uswds/releases"
+ subheadingLevel="span"
+ linkClasses="padding-x-105"
+ %}
+
+ -
+ {% include site-card.html
+ subheading="Compilation tool"
+ heading="USWDS Compile"
+ body="A tool that makes it easy to customize and compile USWDS Sass into browser-readable CSS."
+ linkText=uswds_compile_link_text
+ linkUrl="https://github.com/uswds/uswds-compile/releases"
+ subheadingLevel="span"
+ linkClasses="padding-x-105"
+ %}
+
+ -
+ {% include site-card.html
+ subheading="Design assets"
+ heading="USWDS for designers"
+ body="The official USWDS design kits in Sketch and Figma."
+ linkText=uswds_design_kit_link_text
+ linkUrl="https://www.design_kit.com/community/file/1440921849343185329"
+ subheadingLevel="span"
+ linkClasses="padding-x-105"
+ %}
+
+
+
+
+{:.whats-new__heading}
+## News and events
+{% for post in all_posts limit:3 %}
+ {% include post-preview.html heading="h3" date=false %}
+{% endfor %}
+
+
+ See all USWDS news and events
+
+
+
+{% include site-card.html
+ subheading="Monthly call"
+ heading=monthly_call_heading
+ body=monthly_call.subtitle
+ image=monthly_call_image
+ linkText="See the latest USWDS monthly calls"
+ linkUrl=monthly_call_url
+%}
+
+
+{:.whats-new__heading}
+## Connect with USWDS
+
+
+ {% include site-card-list.html
+ cards=page.connect_cards
+ listClasses="whats-new__card-group"
+ listItemClasses="desktop-lg:grid-col-6"
+ containerClasses="bg-gray-4"
+ subheadingLevel="span"
+ %}
+
+
+{:.whats-new__heading}
+## Changelog
+
+Latest code, guidance, and content updates across the design system.
+
+
+ {% include consolidated-changelog-table.html %}
+
-
View all USWDS news and updates
+
View all changelog entries