Support links in location hour paragraph component

package.json

@@ -19,13 +19,13 @@
     "@next/third-parties": "15.1.6",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/typography": "^0.5.16",
-    "@tanstack/react-query": "^5.64.2",
-    "@types/node": "^22.10.10",
+    "@tanstack/react-query": "^5.66.0",
+    "@types/node": "^22.13.1",
     "@types/react": "^19.0.8",
     "autoprefixer": "^10.4.20",
     "axios": "^1.7.9",
     "critters": "^0.0.25",
-    "decanter": "^7.3.0",
+    "decanter": "^7.3.1",
     "graphql": "^16.10.0",
     "graphql-request": "^7.1.2",
     "graphql-tag": "^2.12.6",
@@ -52,18 +52,18 @@
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
-    "@graphql-codegen/cli": "5.0.3",
+    "@graphql-codegen/cli": "5.0.4",
     "@graphql-codegen/import-types-preset": "^3.0.0",
     "@graphql-codegen/typescript-graphql-request": "^6.2.0",
-    "@graphql-codegen/typescript-operations": "4.4.0",
+    "@graphql-codegen/typescript-operations": "4.4.1",
     "@types/qs": "^6.9.18",
-    "eslint": "^9.18.0",
+    "eslint": "^9.19.0",
     "eslint-config-next": "15.1.6",
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-prettier": "^5.2.3",
     "prettier": "^3.4.2",
     "prettier-plugin-tailwindcss": "^0.6.11",
-    "typescript-eslint": "^8.21.0"
+    "typescript-eslint": "^8.23.0"
   },
   "packageManager": "[email protected]",
   "resolutions": {

src/components/paragraph/sul-location-hour/sul-location-hour.tsx

@@ -2,6 +2,7 @@ import {HTMLAttributes} from "react"
 import {NodeSulLibrary, ParagraphSulLocationHour} from "@/lib/gql/__generated__/drupal.d"
 import {graphqlClient} from "@/lib/gql/fetcher"
 import SulLocationHoursClient from "@/components/paragraph/sul-location-hour/sul-location-hours.client"
+import formatHtml from "@/lib/format-html"
 
 type Props = HTMLAttributes<HTMLDivElement> & {
   paragraph: ParagraphSulLocationHour
@@ -10,6 +11,12 @@ const SulLocationHour = async ({paragraph, ...props}: Props) => {
   const librariesQuery = await graphqlClient({next: {tags: ["node:sul_library"]}}).Libraries()
   const libraries = librariesQuery.nodeSulLibraries.nodes.filter(node => !!node.suLibraryHours) as NodeSulLibrary[]
 
-  return <SulLocationHoursClient libraries={libraries} alert={paragraph.sulLocHoursAlert?.processed} {...props} />
+  return (
+    <SulLocationHoursClient
+      libraries={libraries}
+      alert={formatHtml(paragraph.sulLocHoursAlert?.processed)}
+      {...props}
+    />
+  )
 }
 export default SulLocationHour

src/components/paragraph/sul-location-hour/sul-location-hours.client.tsx

@@ -4,7 +4,7 @@ import Card from "@/components/patterns/card"
 import {ClockIcon} from "@heroicons/react/24/outline"
 import {MapPinIcon} from "@heroicons/react/24/solid"
 import Image from "next/image"
-import {HTMLAttributes, useId, useState} from "react"
+import {HTMLAttributes, ReactNode, useId, useState} from "react"
 import {ErrorBoundary} from "react-error-boundary"
 import CachedClientFetch from "@/components/utils/cached-client-fetch"
 import useTodayLibraryHours from "@/lib/hooks/useTodayLibraryHours"
@@ -16,7 +16,7 @@ import MoonStarsIcon from "@/components/patterns/icons/MoonStarsIcon"
 
 type HoursProps = HTMLAttributes<HTMLDivElement> & {
   libraries: NodeSulLibrary[]
-  alert?: string
+  alert?: string | ReactNode
 }
 
 const SulLocationHoursClient = ({libraries, alert, ...props}: HoursProps) => {
@@ -35,7 +35,14 @@ interface option {
   label: string
 }
 
-const LibrariesTodayHours = ({libraries, alert, ...props}: {libraries: HoursProps["libraries"]; alert?: string}) => {
+const LibrariesTodayHours = ({
+  libraries,
+  alert,
+  ...props
+}: {
+  libraries: HoursProps["libraries"]
+  alert?: string | ReactNode
+}) => {
   const formId = useId()
   const [selectedLibrary, setSelectedLibrary] = useState(
     libraries.find(library => library.suLibraryHours === "green")?.id ?? libraries[0].id
@@ -66,7 +73,7 @@ const LibrariesTodayHours = ({libraries, alert, ...props}: {libraries: HoursProp
             <span className="absolute bottom-0 z-10 w-full bg-cardinal-red p-10">
               <span className="mx-auto flex w-fit items-center gap-10 text-12 font-semibold leading-normal text-white sm:text-16">
                 <MoonStarsIcon className="ml-10" />
-                {alert}
+                <span className="[&_a:hocus]:text-black [&_a]:text-white">{alert}</span>
               </span>
             </span>
           </span>