fix: Add images to alerts that are rendered on react pages (#2181)

mbta · Oct 2, 2024 · 02f0f4a · 02f0f4a
1 parent 6ba2846
commit 02f0f4a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/assets/ts/__v3api.d.ts b/assets/ts/__v3api.d.ts
@@ -257,16 +257,18 @@ export type TimePeriodPairs = [string, string];
 export interface Alert {
   id: string;
   active_period: TimePeriodPairs[];
+  banner: string | null;
   header: string;
-  informed_entity: InformedEntitySet;
+  description: string;
   effect: string;
-  severity: number;
+  image?: string;
+  image_alternative_text?: string;
+  informed_entity: InformedEntitySet;
   lifecycle: Lifecycle;
-  updated_at: string;
-  description: string;
   priority: Priority;
+  severity: number;
+  updated_at: string;
   url: string | null;
-  banner: string | null;
 }
 
 interface DatesNotes {

diff --git a/assets/ts/components/Alerts.tsx b/assets/ts/components/Alerts.tsx
@@ -174,6 +174,15 @@ const alertDescription = (alert: AlertType): ReactElement<HTMLElement> => (
     aria-labelledby={`alert-${alert.id}`}
     ref={panel => panel && panel.focus()}
   >
+    {alert.image && (
+      <a href={alert.image} target="_blank" rel="noopener noreferrer">
+        <img
+          src={alert.image}
+          alt={alert.image_alternative_text}
+          className="w-100"
+        />
+      </a>
+    )}
     <div className="c-alert-item__description">
       <div
         // eslint-disable-next-line react/no-danger