Feat/curr get cloudinary url

src/components/atoms/OakIcon/OakIcon.test.tsx

@@ -3,7 +3,7 @@ import "@testing-library/jest-dom";
 import { render } from "@testing-library/react";
 import { create } from "react-test-renderer";
 
-import { OakIcon, isValidIconName } from "./OakIcon";
+import { OakIcon, generateOakIconURL, isValidIconName } from "./OakIcon";
 
 describe("OakIcon", () => {
   it("renders", () => {
@@ -69,3 +69,23 @@ describe("isValidIconName", () => {
     expect(isValidIconName("banana-sandwich")).toBe(false);
   });
 });
+
+describe("generateOakIconURL", () => {
+  it("is valid url when the string is a valid icon name", () => {
+    expect(generateOakIconURL("home")).toBe(
+      "https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699887218/icons/gvqxjxcw07ei2kkmwnes.svg",
+    );
+  });
+
+  it("is returns url for question mark when the string is not a valid icon name", () => {
+    expect(generateOakIconURL("banana-sandwich")).toBe(
+      "https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1706872277/icons/question-mark.svg",
+    );
+  });
+
+  it("is returns url for books when the string is not a valid subject icon name", () => {
+    expect(generateOakIconURL("subject-potions")).toBe(
+      "https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699953657/icons/hz4l3iq6i68kazvkvorq.svg",
+    );
+  });
+});

src/components/atoms/OakIcon/OakIcon.tsx

@@ -25,6 +25,20 @@ export function isValidIconName(iconName: string): iconName is OakIconName {
   return oakIconNames.includes(iconName as OakIconName);
 }
 
+/**
+ * returns a Icon URL from Cloudinary if is a valid icon, otherwise returns undefined
+ */
+export function generateOakIconURL(iconName: string) {
+  const urlPath = `https://${process.env.NEXT_PUBLIC_OAK_ASSETS_HOST}/${process.env.NEXT_PUBLIC_OAK_ASSETS_PATH}`;
+  if (isValidIconName(iconName)) {
+    return `${urlPath}/${icons[iconName]}`;
+  } else if (iconName.includes("subject")) {
+    return `${urlPath}/${icons["books"]}`;
+  } else {
+    return `${urlPath}/${icons["question-mark"]}`;
+  }
+}
+
 /**
  * A wrapper around OakImage which uses the image-map.json file to map icon names to image paths.
  */
@@ -42,7 +56,7 @@ export const OakIcon = (props: OakIconProps) => {
 
   return (
     <OakImage
-      src={`https://${process.env.NEXT_PUBLIC_OAK_ASSETS_HOST}/${process.env.NEXT_PUBLIC_OAK_ASSETS_PATH}/${icons[iconName]}`}
+      src={generateOakIconURL(iconName)}
       alt={alt ?? iconName}
       $width={$width}
       $height={$height}