add story or data tool home page link to eyebrow

UrbanInstitute · Jan 7, 2025 · a884889 · a884889
1 parent e871a6a
commit a884889
Showing 1 changed file with 16 additions and 12 deletions.
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,34 @@
   <div class="headline-wrap {variant}">
     {#if $$slots.eyebrow}
       <!--
-        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.
-         -->
       <slot name="headline" />
     {:else}
       <h1 class="headline-page-headline">{headline}</h1>
     {/if}
     {#if $$slots.description}
       <!--
-        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.
-         -->
       <slot name="date" />
     {:else if date}
       <p class="headline-date">
@@ -91,8 +93,6 @@
       </p>
     {/if}
     <!--
-      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 +148,8 @@
     font-size: var(--font-size-small);
     text-transform: uppercase;
   }
+  .headline-wrap p.headline-eyebrow:hover {
+    text-decoration: underline;
+    cursor: pointer;
+  }
 </style>