diff --git a/_config.yml b/_config.yml index 22e66c57c..209d94f72 100644 --- a/_config.yml +++ b/_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: uswds@gsa.gov federalist_base: "https://federalist-3b6ba08e-0df4-44c9-ac73-6fc193b0e19c.sites.pages.cloud.gov/preview/uswds/uswds" federalist_component_preview: "iframe.html?id=" diff --git a/_includes/jump-links.html b/_includes/jump-links.html new file mode 100644 index 000000000..65103547e --- /dev/null +++ b/_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 %} + + + + + diff --git a/_includes/post-preview.html b/_includes/post-preview.html index bb0bc7db5..1d08a1510 100644 --- a/_includes/post-preview.html +++ b/_includes/post-preview.html @@ -16,11 +16,13 @@
-

- {{ post.tags[0] }} -

+ {% if include.category %} +

+ {{ post.tags[0] }} +

+ {% 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" %} {% endunless %} @@ -30,12 +32,12 @@ {% endunless %} - {% include post-meta.html %} + {% if include.date %} + {% include post-meta.html %} + {% endif %}
-

- {{ post.lead | default: post.excerpt | markdownify }} -

+

{{ post.lead | default: post.excerpt | markdownify }}

diff --git a/_includes/site-card-list.html b/_includes/site-card-list.html index feb808b8b..ae7e05b79 100644 --- a/_includes/site-card-list.html +++ b/_includes/site-card-list.html @@ -1,6 +1,6 @@ {% comment %} Container for site card group. - + Seen in "What's New" page - `/about/whats-new/` {% endcomment %} @@ -8,10 +8,17 @@ {% for card in include.cards %}
  • {% 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 %}
    • {% endfor %} diff --git a/_includes/site-card.html b/_includes/site-card.html index 3bcc40a3b..509265d81 100644 --- a/_includes/site-card.html +++ b/_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 %} -
    + +
    -

    {{ include.heading }}

    + {% if include.subheading %} + <{{ include.subheadingElement | default:"span" }} class="site-subheading">{{ include.subheading }} + {% endif %} + <{{ include.headingElement | default:"h3" }} class="usa-card__heading font-lang-lg">{{ include.heading }}
    + {% if include.image %} +
    +
    + {{ include.imageAlt }} +
    +
    + {% endif %}

    {{ include.body }}

    - {{ include.linkText }} + {{ include.linkText }}
    diff --git a/css/_uswds-theme-custom-styles.scss b/css/_uswds-theme-custom-styles.scss index edc84e5f2..99d487a91 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 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..08b883ced --- /dev/null +++ b/css/custom-styles/_whats-new.scss @@ -0,0 +1,198 @@ + +.whats-new-card-group { + .usa-card, + .usa-card:last-of-type { + @include at-media("desktop-lg") { + @include u-margin-bottom(0); + } + } + + .usa-card__heading { + @include u-margin-top("105"); + } + + .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"); + } +} + +.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; +} + +.site-prose .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 87005be4c..353975b2a 100644 --- a/pages/whats-new/all-news.md +++ b/pages/whats-new/all-news.md @@ -1,5 +1,5 @@ --- -title: All news and updates +title: All news and events layout: styleguide lead: The full listing of all USWDS product updates, articles, case studies and more. permalink: /about/whats-new/all/ @@ -10,6 +10,12 @@ in_page_nav_headings: false {% assign all_posts = site.posts | concat: site.posts_short | sort: "date" | reverse %} -{% for post in all_posts %} - {% include post-preview.html %} -{% endfor %} +
    + {% for post in all_posts %} + {% include post-preview.html + category=true + date=true + headingClasses="font-lang-lg" + %} + {% endfor %} +
    diff --git a/pages/whats-new/overview.md b/pages/whats-new/overview.md index 2cfe9edf5..0fd84baad 100644 --- a/pages/whats-new/overview.md +++ b/pages/whats-new/overview.md @@ -3,14 +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. -columns: - - title: New users - source: New Users - - title: Total users - source: Users - - title: Page views - source: Pageviews +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. redirect_from: - /about/releases/ - /about-our-work/ @@ -21,37 +15,120 @@ 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" +jump_links: + - text: Latest releases + - text: News and events + - text: Connect with USWDS +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" %} +{% assign uswds_link_text = 'USWDS ' | append: site.uswds_version %} +{% assign uswds_compile_link_text = 'USWDS Compile ' | append: site.uswds_compile_version %} +{% assign uswds_design_kit_link_text = 'USWDS design kit ' | append: site.uswds_design_kit_version %} + + +{% assign monthly_call = site.data.monthly-calls.videos[0] %} +{% assign monthly_call_heading = monthly_call.date | append: ': ' | append: monthly_call.title %} +{% assign monthly_call_image = site.baseurl | append: '/img/uswds-logo/4c-lg-on-black.svg' %} +{% assign monthly_call_url = site.baseurl | append: '/about/monthly-calls' %} + +{:.whats-new__heading.margin-top-4} +On this page + +{% include jump-links.html %} -{:.margin-top-2.text-normal.font-lang-md.text-gray-70} -## News and updates +
    +

    Latest releases

    + +
    -{% for post in all_posts limit: 4 %} - {% include post-preview.html heading="h3"%} +{:.whats-new__heading} +## News and events +{% for post in all_posts limit:3 %} + {% include post-preview.html heading="h3" %} {% endfor %} ---- + + See all USWDS news and events + + +
    + {% include site-card.html + subheading="Monthly call" + subheadingElement="h2" + 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 -View all USWDS news and updates +
    + {% include site-card-list.html + cards=page.connect_cards + listClasses="whats-new-card-group" + listItemClasses="desktop-lg:grid-col-6" + containerClasses="bg-gray-4" + %} +