Add UCSF Acute Care Innovation Center Logo.

src/components/grid-aware/PartnersAndSponsorsBlock/PartnersAndSponsorsBlock.tsx

@@ -2,11 +2,33 @@ import * as React from "react";
 
 import * as s from "./PartnersAndSponsorsBlock.module.css";
 
-type LogoPropType = Readonly<{
+export type LogoPropType = Readonly<{
+  /// The URL of the image
   url: string;
+  /// Alternative text for the image
   alt: string;
+  /// An link for a URL to go to when clicking on the logo
+  link?: string;
 }>;
 
+type WithOptionalLinkProps = {
+  link: string | undefined;
+  children: React.ReactNode;
+};
+
+// Component that makes it easier to wrap content with an optional link.
+//
+// If `link` is defined, then wrap `children` with an <a> tag pointing to that
+// link. Otherwise, just render `children`.
+const WithOptionalLink = ({ link, children }: WithOptionalLinkProps) =>
+  link ? (
+    <a href={link} target="_blank" rel="noreferrer">
+      {children}
+    </a>
+  ) : (
+    <>{children}</>
+  );
+
 type PartnersAndSponsorsBlockProps = {
   title: string;
   partnersAndSponsors: readonly LogoPropType[];
@@ -27,7 +49,9 @@ const PartnersAndSponsorsBlock = ({
       <div className={s.logosWrapper}>
         {partnersAndSponsors.map((logo) => (
           <div className={s.logoContainer} key={logo.alt}>
-            <img className={s.logo} src={logo.url} alt={logo.alt} />
+            <WithOptionalLink link={logo.link}>
+              <img className={s.logo} src={logo.url} alt={logo.alt} />
+            </WithOptionalLink>
           </div>
         ))}
       </div>

src/data/partnersAndSponsorsLogos.ts

@@ -1,3 +1,4 @@
+import type { LogoPropType } from "../components/grid-aware/PartnersAndSponsorsBlock/PartnersAndSponsorsBlock";
 import benetechLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/benetech-logo.png";
 import bridgeLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/bridge-logo.png";
 import ciscoLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/cisco-logo.png";
@@ -15,14 +16,10 @@ import our415Logo from "../components/grid-aware/PartnersAndSponsorsBlock/storie
 import pagerdutyLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/pagerduty-logo.png";
 import pcsLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/pcs-logo.png";
 import uberLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/uber-logo.png";
+import ucsfAcuteCareInnovationCenterLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/ucsf-acute-care-innovation-center-logo.png";
 import weworkLogo from "../components/grid-aware/PartnersAndSponsorsBlock/stories/wework-logo.png";
 
-export type LogoType = Readonly<{
-  url: string;
-  alt: string;
-}>;
-
-const partnersAndSponsorsLogos: readonly LogoType[] = [
+const partnersAndSponsorsLogos: readonly LogoPropType[] = [
   {
     url: mohcdLogo,
     alt: "Logo of Mayor's Office of Housing and Community Development organization.",
@@ -95,6 +92,11 @@ const partnersAndSponsorsLogos: readonly LogoType[] = [
     url: gsmaLogo,
     alt: "Logo of GSMA.",
   },
+  {
+    url: ucsfAcuteCareInnovationCenterLogo,
+    alt: "Logo of UCSF Acute Care Innovation Center.",
+    link: "https://acutecare.ucsf.edu/",
+  },
 ] as const;
 
 export default partnersAndSponsorsLogos;

src/pages/impact/index.tsx

@@ -11,6 +11,7 @@ import Layout from "../../components/layout";
 import articleSpotlightImage from "../images/mission-hotel.jpeg";
 import linkSFLogo from "./link-sf.png";
 import our415Logo from "./our-415-logo.svg";
+import ucsfAcuteCareInnovationCenterLogo from "./ucsf-acute-care-innovation-center-logo.png";
 
 export default () => (
   <Layout>
@@ -122,14 +123,28 @@ export default () => (
     />
     <StatsBlock
       title="Hosted Partners"
-      subtitle="ShelterTech is proud to provide the data on the SF Service Guide platform for other organizations to use on their own websites. We have worked closely with Our 415 and Link-SF to provide a custom experience catered to their users’ needs, leveraging our data curation pipeline to keep that information accurate and up to date."
+      subtitle="ShelterTech is proud to provide the data on the SF Service Guide platform for other organizations to use on their own websites. We have worked closely with Our 415, Link-SF, and UCSF Acute Care Innovation Center to provide a custom experience catered to their users’ needs, leveraging our data curation pipeline to keep that information accurate and up to date."
       statCards={[
         {
           number: <img src={our415Logo} alt="Our 415 Logo." />,
         },
         {
           number: <img src={linkSFLogo} alt="Link-SF Logo." />,
         },
+        {
+          number: (
+            <a
+              href="https://acutecare.ucsf.edu/"
+              target="_blank"
+              rel="noreferrer"
+            >
+              <img
+                src={ucsfAcuteCareInnovationCenterLogo}
+                alt="UCSF Acute Care Innovation Center Logo."
+              />
+            </a>
+          ),
+        },
       ]}
       theme="white"
       titleColor="blue"

src/stylesheets/global.css

@@ -111,6 +111,7 @@ iframe,
 img,
 svg,
 video {
+  max-width: 100%;
   vertical-align: middle;
 }