Created trusted resource component variant

GSA · Jun 24, 2024 · d2542cd · d2542cd
1 parent 2d5756a
commit d2542cd
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 4 deletions.
diff --git 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"
 
----
+---
diff --git a/themes/digital.gov/layouts/partials/core/trusted-resource.html 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
@@ -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
@@ -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
@@ -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);
+    }
+  }
+}