From d2542cd4026808e516898586274990edc19d97cb Mon Sep 17 00:00:00 2001 From: Nick Lyons <nick.lyons@gsa.gov> Date: Mon, 24 Jun 2024 16:46:55 -0400 Subject: [PATCH] Created trusted resource component variant --- .../topics/artificial-intelligence/_index.md | 8 ++-- .../partials/core/trusted-resource.html | 41 +++++++++++++++++++ .../layouts/shortcodes/trusted-resource.html | 16 ++++++++ themes/digital.gov/layouts/topics/list.html | 6 ++- .../new/shortcodes/_featured-resource.scss | 26 ++++++++++++ 5 files changed, 93 insertions(+), 4 deletions(-) create mode 100644 themes/digital.gov/layouts/partials/core/trusted-resource.html create mode 100644 themes/digital.gov/layouts/shortcodes/trusted-resource.html diff --git a/content/topics/artificial-intelligence/_index.md b/content/topics/artificial-intelligence/_index.md index 0990898084..3dece7a22d 100644 --- a/content/topics/artificial-intelligence/_index.md +++ b/content/topics/artificial-intelligence/_index.md @@ -27,13 +27,15 @@ legislation: link: "https://www.whitehouse.gov/briefing-room/presidential-actions/2023/10/30/executive-order-on-the-safe-secure-and-trustworthy-development-and-use-of-artificial-intelligence/" # Featured resource to at the top of the page -featured_resources: +trusted_resources: resources: - - link: "https://ai.gov/" + - link: "https://ai.gov/" + title: "AI.GOV" + summary: "Short summary goes here for the reader to understand the nature of the external content." # Featured community to display at the top of the page featured_communities: - "artificial-intelligence" - "communicators" ---- +--- \ No newline at end of file diff --git a/themes/digital.gov/layouts/partials/core/trusted-resource.html b/themes/digital.gov/layouts/partials/core/trusted-resource.html new file mode 100644 index 0000000000..06661a75a0 --- /dev/null +++ b/themes/digital.gov/layouts/partials/core/trusted-resource.html @@ -0,0 +1,41 @@ +{{/* ================== + + Trusted Resource Component + + Displays a rounded box for an an external resource, similar to a featured resource. + Use front matter or a shortcode in markdown to display on page. + + @params {object} data - a dictionary object to display a resource + - link - required to display an external link + - title - required title of the resource + - summary - required to display a short description for the resource +*/}} +{{ $link := .data.link }} +{{ $title := .data.title }} +{{ $summary := .data.summary }} + +{{- if $link -}} + <div class="dg-featured-resource dg-featured-resource--trusted"> + <a href="{{- $link -}}" class="dg-featured-resource__body"> + <div class="dg-featured-resource__text"> + <div class="dg-featured-resource__text-kicker"> + <p>Trusted Resource</p> + <img + src="{{ "uswds/img/usa-icons/launch.svg" | relURL }}" + alt="link" + /> + </div> + <h2 class="dg-featured-resource__text-title"> + {{ if $title }} + {{ $title }} + {{ end }} + </h2> + <p class="dg-featured-resource__text-description"> + {{ if $summary }} + {{ $summary }} + {{ end }} + </p> + </div> + </a> + </div> +{{- end -}} diff --git a/themes/digital.gov/layouts/shortcodes/trusted-resource.html b/themes/digital.gov/layouts/shortcodes/trusted-resource.html new file mode 100644 index 0000000000..a9638f8c20 --- /dev/null +++ b/themes/digital.gov/layouts/shortcodes/trusted-resource.html @@ -0,0 +1,16 @@ +{{/* ==== + + Shortcode for using a trusted-resource component. + See themes/digital.gov/layouts/partials/core/trusted-resource.html + + @example + {{< trusted-resource link = "https://www.ai.gov" title = "title to display" summary = "summary goes here" +>}} + +*/}} +{{ $title := (.Get "title" ) }} +{{ $summary := (.Get "summary" ) }} +{{ $link := (.Get "link" ) }} +{{ $data := (dict "title" $title "summary" $summary "link" $link) }} + +{{ partial "core/trusted-resource.html" (dict "data" $data ) }} diff --git a/themes/digital.gov/layouts/topics/list.html b/themes/digital.gov/layouts/topics/list.html index 609f7ff8e1..d1bbf1674a 100644 --- a/themes/digital.gov/layouts/topics/list.html +++ b/themes/digital.gov/layouts/topics/list.html @@ -72,13 +72,17 @@ {{- partial "core/featured-resource.html" (dict "Site" $.Site "resourcePath" .link "kicker" $kicker) -}} {{ end }} + {{ range .Params.trusted_resources.resources }} + {{- partial "core/trusted-resource.html" (dict "data" . ) -}} + {{ end }} + {{ range .Params.featured_communities }} {{ $community_page := $.GetPage (printf "communities/%s" .) }} {{ $kicker := "" }} {{ if $community_page.Params.kicker }} {{ $kicker = $community_page.Params.kicker }} {{ end }} - {{- partial "core/featured-resource.html" (dict "Site" $.Site "resourcePath" (printf "/communities/%s" .) "kicker" $kicker ) -}} + {{- partial "core/featured-resource.html" (dict "Site" $.Site "resourcePath" (printf "/communities/%s" .) "kicker" $kicker) -}} {{ end }} </div> {{ end }} diff --git a/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss b/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss index 4b95211879..eae0bff7cd 100644 --- a/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss +++ b/themes/digital.gov/src/scss/new/shortcodes/_featured-resource.scss @@ -68,3 +68,29 @@ } } } + +.dg-featured-resource--trusted { + .dg-featured-resource__body { + background: color("blue-5"); + + &:hover { + background: color("blue-10"); + } + } + + .dg-featured-resource__text-kicker { + align-items: center; + display: flex; + flex-direction: row; + + p { + padding-right: units(1); + } + + img { + height: units(2); + margin: 0; + width: units(2); + } + } +}