Merge branch 'main' into bc-contact-center-community-landing

GSA · Jun 28, 2024 · 94b4ae1 · 94b4ae1
2 parents 0654a91 + ef0ec90
commit 94b4ae1
Show file tree

Hide file tree

Showing 7 changed files with 172 additions and 44 deletions.
diff --git a/content/communities/web-managers-forum.md b/content/communities/web-managers-forum.md
@@ -15,9 +15,30 @@ aliases:
 # see all topics at https://digital.gov/topics
 topics:
   - analytics
+  - accessibility
+  - communication
+  - customer-experience
+  - content-strategy
+  - design
+  - plain-language
   - product-and-project-management
+  - usability
   - user-experience
-  - content-strategy
+  - governance
+  - digital-service-delivery
+  - user-centered-design
+  - human-centered-design
+  - search-engine-optimization
+  - multimedia
+  - multilingual
+  - mobile
+  - policy
+  - information-architecture
+  - social-media
+  - privacy
+  - security
+
+
 # see all authors at https://digital.gov/authors
 authors:
   - toni-bonitto

diff --git a/content/news/2024/06/2024-06-27-digital-front-door-expanding-access-to-va.md b/content/news/2024/06/2024-06-27-digital-front-door-expanding-access-to-va.md
@@ -0,0 +1,27 @@
+---
+# Originally published at the following URL
+source_url: https://digital.va.gov/office-of-information-and-technology/digital-front-door/
+source: va
+date: 2024-06-26
+title: "Digital front door: Expanding access to VA"
+deck: "More Veterans are turning to the U.S. Department of Veterans Affairs (VA) for healthcare and benefits, accessing these services online through tools like the VA Health and Benefits mobile app and VA.gov. With over 2.28 million app downloads and 17.8 million monthly visitors on VA.gov, these digital tools provide faster, easier, and more inclusive access to VA services. Learn more about how these technologies are often Veterans’ first interaction with VA by watching their latest video, Digital Front Door: Expanding Access to VA."
+summary: "More Veterans are turning to the U.S. Department of Veterans Affairs (VA) for healthcare and benefits, accessing these services online through tools like the VA Health and Benefits mobile app and VA.gov. With over 2.28 million app downloads and 17.8 million monthly visitors on VA.gov, these digital tools provide faster, easier, and more inclusive access to VA services. Learn more about how these technologies are often Veterans’ first interaction with VA by watching their latest video, Digital Front Door: Expanding Access to VA."
+
+# See all topics at https://digital.gov/topics
+topics:
+  - application-programming-interface
+  - accessibility
+  - communication
+  - content-strategy
+  - design
+  - human-centered-design
+  - user-centered-design
+  - trust
+  - best-practices
+slug: digital-front-door-expanding-access-to-va
+# Controls how this page appears across the site
+# 0 -- hidden
+# 1 -- visible
+weight: 1
+
+---
diff --git a/...er-experience-omb-has-taken-actions-to-implement-cross-agency-priority-goals.md b/...er-experience-omb-has-taken-actions-to-implement-cross-agency-priority-goals.md
@@ -0,0 +1,24 @@
+---
+# Originally published at the following URL
+source_url: https://www.gao.gov/products/gao-24-106632
+source: gao
+date: 2024-06-06
+title: "Federal customer experience: OMB has taken actions to implement
+  cross-agency priority goals"
+deck: "In 2021, the President’s Management Agenda identified federal customer experience as a priority area for improvement. To implement this priority area, the Office of Management and Budget (OMB) set two long-term, cross-agency priority (CAP) goals.  In this study, the Government Accountability Office (GAO) reviews OMB and selected federal agencies' efforts towards these CAP goals. Learn about actions taken by OMB and selected High Impact Service Providers (HISPs), how OMB has facilitated interagency collaboration, and the extent to which OMB has overseen and assessed progress on these CAP goals."
+summary: "In 2021, the President’s Management Agenda identified federal customer experience as a priority area for improvement. To implement this priority area, the Office of Management and Budget (OMB) set two long-term, cross-agency priority (CAP) goals.  In this study, the Government Accountability Office (GAO) reviews OMB and selected federal agencies' efforts towards these CAP goals. Learn about actions taken by OMB and selected High Impact Service Providers (HISPs), how OMB has facilitated interagency collaboration, and the extent to which OMB has overseen and assessed progress on these CAP goals."
+# See all topics at https://digital.gov/topics
+topics:
+  - user-centered-design
+  - human-centered-design
+  - customer-experience
+  - best-practices
+  - governance
+  - accessibility
+  - digital-service-delivery
+slug: federal-customer-experience-omb-has-taken-actions-to-implement-cross-agency-priority-goals
+# Controls how this page appears across the site
+# 0 -- hidden
+# 1 -- visible
+weight: 1
+---
diff --git a/data/images/feedback-communication-gentle-studio-istock-getty-images-1428649542.yml b/data/images/feedback-communication-gentle-studio-istock-getty-images-1428649542.yml
@@ -0,0 +1,12 @@
+
+  # https://s3.amazonaws.com/digitalgov/feedback-communication-gentle-studio-istock-getty-images-1428649542.png
+  # Image shortcode: {{< img src=feedback-communication-gentle-studio-istock-getty-images-1428649542 >}}'
+  date     :  2024-06-26 18:01:25 -0400
+  uid      :  feedback-communication-gentle-studio-istock-getty-images-1428649542
+  width    :  1200
+  height   :  630
+  format   :  png
+  credit   :  
+  caption  :  "Gentle-Studio/iStock via Getty Images"
+  alt      :  "Four columns each have three feedback and communication icons."
+
diff --git a/themes/digital.gov/layouts/partials/core/card-legislation.html b/themes/digital.gov/layouts/partials/core/card-legislation.html
@@ -26,7 +26,7 @@ <h2 class="usa-card__heading">
       {{ end }}
       {{ if .link }}
         <div class="usa-card__footer">
-          <a href="{{- .link | relURL -}}" class="usa-button"> View policy </a>
+          <a href="{{- .link | relURL -}}" class="usa-button">Explore policy</a>
         </div>
       {{ end }}
     </div>

diff --git a/themes/digital.gov/layouts/shortcodes/img.html b/themes/digital.gov/layouts/shortcodes/img.html
@@ -1,3 +1,22 @@
+{{/* =======
+
+  Displays an image with optional metadata
+  See wiki for more details https://github.com/GSA/digitalgov.gov/wiki/Hugo-shortcodes
+  TODO: finish documenting the other properties of this component
+
+  align - set the alignment for the image to be left (default if left blank), center, or right aligned.
+  inline - displays multiples images on the same line
+
+  @example for right aligned image
+  {{< img src="image-1" align="right" alt="UX Summit Image"
+>}}
+
+@example for two images on same line starting justified left align
+{{< img src="image-1" align="center" inline="true" alt="UX Summit Image 1" >}}
+{{< img src="image-2" align="center" inline="true" alt="UX Summit Image 2" >}}
+
+*/}}
+
 <!-- image -->
 {{- $cdnurl := .Site.Params.cdnurl -}}
 {{- $thisuid := (.Get "src" | lower) -}}
@@ -11,30 +30,34 @@
 {{- $imgCaption := $thisimg.caption -}}
 {{- $imgCredit := $thisimg.credit -}}
 {{- $prefix := replaceRE "^(http[s]://).+$" "$1" $thisuid -}}
+{{- $align := .Get "align" | default "" -}}
+{{- $inline := .Get "inline" | default "false" -}}
+
+{{ $imageClasses := slice "image" }}
+{{ if $align }}
+  {{ $imageClasses = $imageClasses | append (printf "image-%s" $align) }}
+{{ end }}
+{{ if eq $inline "true" }}
+  {{ $imageClasses = $imageClasses | append "image-inline" }}
+{{ end }}
 
 
-<div
-  class="image{{- if (.Get "align") -}}
-    image-{{- .Get "align" -}}
-  {{- else }}
-    {{- if lt $imgWidth 600 -}}image-right{{- end -}}
-  {{- end -}}"
->
-  {{- if (or (eq $imgExt "jpg") (or (eq $imgExt "jpeg") (eq $imgExt "png"))) -}}
+<div class="{{ delimit $imageClasses " " }}">
+  {{- if or (eq $imgExt "jpg") (eq $imgExt "jpeg") (eq $imgExt "png") -}}
     <img
       src="{{- if ne $prefix $thisuid -}}
         {{- $thisuid -}}
       {{- else -}}
         {{- $imgBaseCDN -}}_w800.{{- $imgExt -}}
       {{- end -}}"
-      {{ if or (.Get "alt" ) $thisimg.alt }}
+      {{- if or (.Get "alt") $thisimg.alt -}}
         alt="{{- with .Get "alt" -}}
           {{- . -}}
         {{- else -}}
           {{- $thisimg.alt -}}
-        {{ end }}"
+        {{- end -}}"
       {{- end -}}
-      {{- if eq $prefix $thisuid }}
+      {{- if eq $prefix $thisuid -}}
         srcset="
         {{- if ge $imgWidth 200 -}}
           {{- $imgBaseCDN -}}_bu.jpg 48w,
@@ -52,29 +75,27 @@
           {{- $imgBaseCDN -}}.{{- $imgExt }} {{ $imgWidth -}}w
         {{- end -}}
         "
-      {{- end }}
-
-      sizes="(max-width: 800px) 100vw, 800px"
+      {{- end -}}
+      sizes="(max-width: 800px) 100vw, 400px"
     />
   {{- else -}}
     <img
       src="{{- $imgBaseCDN -}}.{{- $imgExt -}}"
-      {{ if or (.Get "alt" ) $thisimg.alt }}
+      {{- if or (.Get "alt") $thisimg.alt -}}
         alt="{{- with .Get "alt" -}}
           {{- . -}}
         {{- else -}}
           {{- $thisimg.alt -}}
-        {{ end }}"
+        {{- end -}}"
       {{- end -}}
     />
   {{- end -}}
   {{- if or $imgCaption $imgCredit -}}
     <p>
-      {{- $imgCaption | markdownify -}}{{- if $imgCredit }}
+      {{- $imgCaption | markdownify -}}{{- if $imgCredit -}}
         <span>—&nbsp;{{ $imgCredit | markdownify -}}</span>
       {{- end -}}
     </p>
   {{- end -}}
-
 </div>
 <!-- image -->
diff --git a/themes/digital.gov/src/scss/new/_images.scss b/themes/digital.gov/src/scss/new/_images.scss
@@ -1,51 +1,74 @@
 @use "uswds-core" as *;
 
-// Images
 .image {
-  @include u-margin-top(2);
-  @include u-margin-bottom(4);
+  margin-bottom: units(4);
+  margin-top: units(2);
 
   // Captions
   p {
-    @include u-margin-top("1px");
-    @include u-padding-x("2px");
-    @include u-font("sans", "2xs");
-    @include u-line-height("sans", 3);
-    @include u-color("gray-cool-60");
-    @include u-text("light");
-    @include u-maxw("full");
+    color: color("gray-cool-60");
+    font-family: family("sans");
+    font-size: size("sans", "2xs");
+    font-weight: font-weight("light");
+    line-height: line-height("sans", 3);
+    margin-top: 1px;
+    max-width: 100%;
+    padding-left: units(2px);
+    padding-right: units(2px);
 
     span {
-      @include u-text("italic");
+      font-style: italic;
     }
   }
 }
 
 .image-right {
-  @include u-margin-top(1);
-  @include u-margin-bottom(3);
-  @include u-margin-left(3);
-  @include u-float("right");
-  @include u-width(15);
+  float: right;
+  margin-bottom: units(3);
+  margin-left: units(3);
+  margin-top: units(1);
+  width: units(15);
 
   @include at-media("tablet") {
-    @include u-width("card");
+    width: units("card");
   }
 }
 
-// Making the older, right-aligned images smaller on desktop because they were cut to smaller sizes back then...
 .image-right-legacy {
   @include at-media("tablet") {
-    @include u-width("card-lg");
+    width: units("card-lg");
   }
 }
 
 .image-left {
-  @include u-margin-y("205");
-  @include u-margin-top("205");
-  @include u-margin-right(2);
-  @include u-float("left");
-  @include u-width("card-lg");
+  float: left;
+  margin-bottom: units(5);
+  margin-right: units(2);
+  margin-top: units(5);
+  width: units("card-lg");
+}
+
+.image-center {
+  display: block;
+  text-align: center;
+
+  img {
+    max-width: 100%;
+    width: units("card-lg");
+  }
+}
+
+.image-inline {
+  display: inline-block;
+  margin: units(1);
+  text-align: center;
+  vertical-align: middle;
+
+  img {
+    display: inline-block;
+    height: auto;
+    max-width: 100%;
+  }
 }
 
 img[alt] {