diff --git a/src/components/atoms/OakIcon/OakIcon.test.tsx b/src/components/atoms/OakIcon/OakIcon.test.tsx index b7c20da0..c8fc7112 100644 --- a/src/components/atoms/OakIcon/OakIcon.test.tsx +++ b/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", + ); + }); +}); diff --git a/src/components/atoms/OakIcon/OakIcon.tsx b/src/components/atoms/OakIcon/OakIcon.tsx index 46de5832..66a4874b 100644 --- a/src/components/atoms/OakIcon/OakIcon.tsx +++ b/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 (