From ccc7714e98d586271d824ebc9d4bd59b3f301e9c Mon Sep 17 00:00:00 2001
From: Gareth Jones <gareth@clickhouse.com>
Date: Mon, 3 Jun 2024 13:31:23 -0400
Subject: [PATCH] Allowing cards to accept custom icons (#430)

* Allowing cards to accept custom icons

* consistent naming
---
 src/App.tsx                                   |  3 ++
 .../CardPrimary/CardPrimary.test.tsx          | 14 +++++++++
 src/components/CardPrimary/CardPrimary.tsx    | 19 +++++++++---
 .../CardSecondary/CardSecondary.test.tsx      | 14 +++++++++
 .../CardSecondary/CardSecondary.tsx           | 29 +++++++++++++++----
 5 files changed, 69 insertions(+), 10 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 11ac8665..f51a2368 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -290,6 +290,7 @@ const App = () => {
           <CardSecondary
             title="Card title"
             icon="building"
+            iconUrl="https://upload.wikimedia.org/wikipedia/sco/3/3c/Cardiff_City_crest.svg"
             description="This is a card description"
             badgeText="experiment"
             infoText="Read More"
@@ -308,6 +309,7 @@ const App = () => {
         <Container alignItems="start">
           <CardPrimary
             title="Card title"
+            size="sm"
             icon="building"
             description="This is a card description"
             infoText="Read More"
@@ -316,6 +318,7 @@ const App = () => {
           <CardPrimary
             title="Card title"
             icon="building"
+            iconUrl="https://upload.wikimedia.org/wikipedia/sco/3/3c/Cardiff_City_crest.svg"
             description="This is a card description"
             infoText="Read More"
             infoUrl="#"
diff --git a/src/components/CardPrimary/CardPrimary.test.tsx b/src/components/CardPrimary/CardPrimary.test.tsx
index d1eda219..c34454c2 100644
--- a/src/components/CardPrimary/CardPrimary.test.tsx
+++ b/src/components/CardPrimary/CardPrimary.test.tsx
@@ -92,5 +92,19 @@ describe("CardPrimary Component", () => {
 
       expect(queryAllByTestId("card-top-badge").length).toEqual(0);
     });
+
+    it("should render an image when iconUrl is provided", () => {
+      const iconUrl = "https://example.com/icon.png";
+      renderCard({
+        iconUrl,
+        title: "Card with custom icon",
+        description: "",
+        infoUrl: "",
+        infoText: "",
+      });
+
+      const imgElement = screen.getByAltText("card icon");
+      expect(imgElement).toHaveAttribute("src", iconUrl);
+    });
   });
 });
diff --git a/src/components/CardPrimary/CardPrimary.tsx b/src/components/CardPrimary/CardPrimary.tsx
index b015f05c..05123ed0 100644
--- a/src/components/CardPrimary/CardPrimary.tsx
+++ b/src/components/CardPrimary/CardPrimary.tsx
@@ -12,6 +12,7 @@ export interface CardPrimaryProps
     WithTopBadgeProps {
   title?: string;
   icon?: IconName;
+  iconUrl?: string;
   hasShadow?: boolean;
   disabled?: boolean;
   description?: ReactNode;
@@ -109,7 +110,8 @@ const Header = styled.div<{
         : theme.click.global.color.text.default};
   }
 
-  svg {
+  svg,
+  img {
     height: ${({ $size = "md", theme }) => theme.click.card.primary.size.icon[$size].all};
     width: ${({ $size = "md", theme }) => theme.click.card.primary.size.icon[$size].all};
   }
@@ -136,6 +138,7 @@ const Card = ({
   alignContent,
   title,
   icon,
+  iconUrl,
   hasShadow = false,
   description,
   infoUrl,
@@ -173,11 +176,19 @@ const Card = ({
           $disabled={disabled}
           $alignContent={alignContent}
         >
-          {icon && (
-            <Icon
-              name={icon}
+          {iconUrl ? (
+            <img
+              src={iconUrl}
+              alt="card icon"
               aria-hidden
             />
+          ) : (
+            icon && (
+              <Icon
+                name={icon}
+                aria-hidden
+              />
+            )
           )}
           {title && <Title type="h3">{title}</Title>}
         </Header>
diff --git a/src/components/CardSecondary/CardSecondary.test.tsx b/src/components/CardSecondary/CardSecondary.test.tsx
index 4d27c9ee..f10478dc 100644
--- a/src/components/CardSecondary/CardSecondary.test.tsx
+++ b/src/components/CardSecondary/CardSecondary.test.tsx
@@ -45,4 +45,18 @@ describe("CardSecondary Component", () => {
 
     expect(screen.getAllByText(badgeText).length).toEqual(1);
   });
+
+  it("should render an image when iconUrl is provided", () => {
+    const iconUrl = "https://example.com/icon.png";
+    renderCard({
+      iconUrl,
+      title: "Card with custom icon",
+      description: "",
+      infoUrl: "",
+      infoText: "",
+    });
+
+    const imgElement = screen.getByAltText("card icon");
+    expect(imgElement).toHaveAttribute("src", iconUrl);
+  });
 });
diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
index 40058492..b5ec4a3a 100644
--- a/src/components/CardSecondary/CardSecondary.tsx
+++ b/src/components/CardSecondary/CardSecondary.tsx
@@ -15,7 +15,8 @@ export type BadgeState =
 
 export interface CardSecondaryProps extends HTMLAttributes<HTMLDivElement> {
   title: string;
-  icon: IconName;
+  icon?: IconName;
+  iconUrl?: string;
   badgeState?: BadgeState;
   hasShadow?: boolean;
   disabled?: boolean;
@@ -51,6 +52,11 @@ const Content = styled.div`
   flex: 1;
 `;
 
+const CustomIcon = styled.img`
+  height: ${({ theme }) => theme.click.image.lg.size.height};
+  width: ${({ theme }) => theme.click.image.lg.size.width};
+`;
+
 const InfoLink = styled.a`
   display: flex;
   align-items: center;
@@ -112,6 +118,7 @@ const Wrapper = styled.div<{
 export const CardSecondary = ({
   title,
   icon,
+  iconUrl,
   badgeState,
   badgeText = "",
   hasShadow = false,
@@ -130,11 +137,21 @@ export const CardSecondary = ({
     >
       <Header>
         <HeaderLeft $disabled={disabled}>
-          <Icon
-            name={icon}
-            size="lg"
-            area-hidden=""
-          />
+          {iconUrl ? (
+            <CustomIcon
+              src={iconUrl}
+              alt="card icon"
+              aria-hidden
+            />
+          ) : (
+            icon && (
+              <Icon
+                name={icon}
+                aria-hidden
+                size="lg"
+              />
+            )
+          )}
           <Title type="h3">{title}</Title>
         </HeaderLeft>
         {badgeText && (