Merge pull request #128 from UrbanInstitute/patch-headline-eyebrow-link

Patch headline eyebrow link
UrbanInstitute · Jan 7, 2025 · 8364b98 · 8364b98
2 parents e871a6a + 40961fb
commit 8364b98
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 12 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,7 @@
 # @UrbanInstitute/dataviz-components Changelog
 
 ## Next
+- Patch: Headline eyebrows in Drupal include a link to the Story or Data tool homepage; tweaked Headline component to do the same.
 - Fix: CSS Theme variable --color-green was #ffb748, which is a kind of yellow. Changed to match style guide.
 
 ## v0.12.4

diff --git a/src/lib/Headline/Headline.svelte b/src/lib/Headline/Headline.svelte
@@ -15,7 +15,7 @@
   export let description = null;
 
   /**
-   * Optional eyebrow to be displayed above the headline.
+   * Optional eyebrow to be displayed above the headline. Determines eyebrow link.
    * @type {string | null}
    */
   export let eyebrow = null;
@@ -55,32 +55,42 @@
   <div class="headline-wrap {variant}">
     {#if $$slots.eyebrow}
       <!--
-        Optional slot for custom content in the eyebrow slot.
-         -->
+      Optional slot for custom content in the eyebrow slot.
+       -->
       <slot name="eyebrow" />
     {:else if eyebrow}
-      <p class="headline-eyebrow">{eyebrow}</p>
+      {#if eyebrow.toLowerCase() == "data tool"}
+        <a href="https://www.urban.org/data-tools" target="_blank"
+          ><p class="headline-eyebrow">{eyebrow}</p></a
+        >
+      {:else if eyebrow.toLowerCase() == "story"}
+        <a href="https://www.urban.org/stories" target="_blank"
+          ><p class="headline-eyebrow">{eyebrow}</p></a
+        >
+      {:else}
+        <p class="headline-eyebrow">{eyebrow}</p>
+      {/if}
     {/if}
     {#if $$slots.headline}
       <!--
-        Optional slot for custom content in the headline slot.
-         -->
+      Optional slot for custom content in the headline slot.
+       -->
       <slot name="headline" />
     {:else}
       <h1 class="headline-page-headline">{headline}</h1>
     {/if}
     {#if $$slots.description}
       <!--
-        Optional slot for custom content in the description slot.
-         -->
+      Optional slot for custom content in the description slot.
+       -->
       <slot name="description" />
     {:else if description}
       <p class="headline-description">{description}</p>
     {/if}
     {#if $$slots.date}
       <!--
-        Optional slot for custom content in the date slot.
-         -->
+      Optional slot for custom content in the date slot.
+       -->
       <slot name="date" />
     {:else if date}
       <p class="headline-date">
@@ -91,8 +101,8 @@
       </p>
     {/if}
     <!--
-      Optional slot for extra content to include below the date and above the share buttons.
-       -->
+    Optional slot for extra content to include below the date and above the share buttons.
+     -->
     <slot name="extra" />
     <hr class="headline-rule" />
   </div>
@@ -148,4 +158,8 @@
     font-size: var(--font-size-small);
     text-transform: uppercase;
   }
+  .headline-wrap p.headline-eyebrow:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
 </style>