From af4a2518d2a2d40d31386fcb224c82a2b3522e94 Mon Sep 17 00:00:00 2001 From: Sonali Singh Date: Thu, 17 Oct 2024 15:19:44 +0100 Subject: [PATCH 1/4] feat: add function to generate icon URL --- src/components/atoms/OakIcon/OakIcon.tsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/components/atoms/OakIcon/OakIcon.tsx b/src/components/atoms/OakIcon/OakIcon.tsx index 46de5832..cebeb9fe 100644 --- a/src/components/atoms/OakIcon/OakIcon.tsx +++ b/src/components/atoms/OakIcon/OakIcon.tsx @@ -25,6 +25,15 @@ 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) { + if (isValidIconName(iconName)) { + return `https://${process.env.NEXT_PUBLIC_OAK_ASSETS_HOST}/${process.env.NEXT_PUBLIC_OAK_ASSETS_PATH}/${icons[iconName]}`; + } +} + /** * A wrapper around OakImage which uses the image-map.json file to map icon names to image paths. */ From 517f91f31668f9faf23526e3de815e08ec876e09 Mon Sep 17 00:00:00 2001 From: Sonali Singh Date: Thu, 17 Oct 2024 15:43:59 +0100 Subject: [PATCH 2/4] test: add test for generating oak icon url --- src/components/atoms/OakIcon/OakIcon.test.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/src/components/atoms/OakIcon/OakIcon.test.tsx b/src/components/atoms/OakIcon/OakIcon.test.tsx index b7c20da0..547009a5 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,12 @@ 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", + ); + expect(generateOakIconURL("banana-sandwich")).toBe(undefined); + }); +}); From 31f268581dd048a105f647b7cfb3bec5509f14f1 Mon Sep 17 00:00:00 2001 From: Sonali Singh Date: Thu, 17 Oct 2024 16:38:27 +0100 Subject: [PATCH 3/4] fix: default to question mark or books depending on context --- src/components/atoms/OakIcon/OakIcon.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/components/atoms/OakIcon/OakIcon.tsx b/src/components/atoms/OakIcon/OakIcon.tsx index cebeb9fe..66a4874b 100644 --- a/src/components/atoms/OakIcon/OakIcon.tsx +++ b/src/components/atoms/OakIcon/OakIcon.tsx @@ -29,8 +29,13 @@ export function isValidIconName(iconName: string): iconName is 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 `https://${process.env.NEXT_PUBLIC_OAK_ASSETS_HOST}/${process.env.NEXT_PUBLIC_OAK_ASSETS_PATH}/${icons[iconName]}`; + return `${urlPath}/${icons[iconName]}`; + } else if (iconName.includes("subject")) { + return `${urlPath}/${icons["books"]}`; + } else { + return `${urlPath}/${icons["question-mark"]}`; } } @@ -51,7 +56,7 @@ export const OakIcon = (props: OakIconProps) => { return ( Date: Thu, 17 Oct 2024 16:41:23 +0100 Subject: [PATCH 4/4] test: add tests for default icons --- src/components/atoms/OakIcon/OakIcon.test.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/atoms/OakIcon/OakIcon.test.tsx b/src/components/atoms/OakIcon/OakIcon.test.tsx index 547009a5..c8fc7112 100644 --- a/src/components/atoms/OakIcon/OakIcon.test.tsx +++ b/src/components/atoms/OakIcon/OakIcon.test.tsx @@ -75,6 +75,17 @@ describe("generateOakIconURL", () => { expect(generateOakIconURL("home")).toBe( "https://res.cloudinary.com/mock-cloudinary-cloud/image/upload/v1699887218/icons/gvqxjxcw07ei2kkmwnes.svg", ); - expect(generateOakIconURL("banana-sandwich")).toBe(undefined); + }); + + 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", + ); }); });