refactor: logocloud (#961)

* refactor: logocloud don't ask consumers for assetsbaseurl but ask for site instead * fix: add site for stories
opengovsg · Dec 27, 2024 · 47d5dd6 · 47d5dd6
1 parent 0450936
commit 47d5dd6
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 3 deletions.
diff --git a/packages/components/src/interfaces/complex/LogoCloud.ts b/packages/components/src/interfaces/complex/LogoCloud.ts
@@ -1,6 +1,7 @@
 import type { Static } from "@sinclair/typebox"
 import { Type } from "@sinclair/typebox"
 
+import type { IsomerSiteProps } from "~/types"
 import { AltTextSchema, ImageSrcSchema } from "./Image"
 
 export const LOGO_CLOUD_TYPE = "logocloud"
@@ -25,10 +26,10 @@ export const LogoCloudSchema = Type.Object(
     }),
   },
   {
-    title: "Title",
+    title: "Logocloud component",
   },
 )
 
 export type LogoCloudProps = Static<typeof LogoCloudSchema> & {
-  assetsBaseUrl?: string
+  site: IsomerSiteProps
 }
diff --git a/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.stories.tsx b/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
+import type { IsomerSiteProps } from "~/types"
 import { LogoCloud } from "./LogoCloud"
 
 const meta: Meta<typeof LogoCloud> = {
@@ -24,17 +25,44 @@ const VERTICAL_IMAGE = {
   src: "https://placehold.co/100x1000",
   alt: "placeholder",
 }
+const site: IsomerSiteProps = {
+  siteName: "Isomer Next",
+  siteMap: {
+    id: "1",
+    title: "Home",
+    permalink: "/",
+    lastModified: "",
+    layout: "homepage",
+    summary: "",
+  },
+  theme: "isomer-next",
+  isGovernment: true,
+  logoUrl: "https://www.isomer.gov.sg/images/isomer-logo.svg",
+  navBarItems: [],
+  footerItems: {
+    privacyStatementLink: "https://www.isomer.gov.sg/privacy",
+    termsOfUseLink: "https://www.isomer.gov.sg/terms",
+    siteNavItems: [],
+  },
+  lastUpdated: "1 Jan 2021",
+  search: {
+    type: "searchSG",
+    clientId: "",
+  },
+}
 
 // Default scenario
 export const Default: Story = {
   args: {
     images: [IMAGE],
+    site,
   },
 }
 
 export const ManyImages: Story = {
   args: {
     images: Array(10).fill(IMAGE),
+    site,
   },
 }
 
@@ -54,17 +82,20 @@ export const Agency: Story = {
         src: "https://www.ncss.gov.sg/images/default-source/asset/celebrating-volunteers-logo.png?sfvrsn=44b85185_2 ",
       },
     ],
+    site,
   },
 }
 
 export const HugeHorizontalLogo: Story = {
   args: {
     images: [...Array(4).fill(IMAGE), HORIZONTAL_IMAGE],
+    site,
   },
 }
 
 export const HugeVerticalLogo: Story = {
   args: {
     images: [...Array(4).fill(IMAGE), VERTICAL_IMAGE],
+    site,
   },
 }
diff --git a/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.tsx b/packages/components/src/templates/next/components/complex/LogoCloud/LogoCloud.tsx
@@ -5,7 +5,7 @@ import { ImageClient } from "../Image"
 export const LogoCloud = ({
   images: baseImages,
   title,
-  assetsBaseUrl,
+  site: { assetsBaseUrl },
 }: LogoCloudProps) => {
   const images = baseImages.map(({ src, alt }) => {
     const transformedSrc =