isom-1688 add view all articles link to infocards (#923)

* add url and label to infocards schema * add infocards UI * add homepage stories * update preview-tw
opengovsg · Dec 10, 2024 · bcf4c53 · bcf4c53
1 parent 90f44c4
commit bcf4c53
Show file tree

Hide file tree

Showing 5 changed files with 56 additions and 0 deletions.
diff --git a/apps/studio/public/assets/css/preview-tw.css b/apps/studio/public/assets/css/preview-tw.css
@@ -4720,6 +4720,10 @@ video {
     padding-right: 0px;
   }
 
+  .sm\:pt-12 {
+    padding-top: 3rem;
+  }
+
   .sm\:text-4xl {
     font-size: 2.25rem;
     line-height: 2.5rem;

diff --git a/packages/components/src/interfaces/complex/InfoCards.ts b/packages/components/src/interfaces/complex/InfoCards.ts
@@ -98,6 +98,27 @@ const InfoCardsBaseSchema = Type.Object({
       },
     ),
   ),
+  // TODO: Remove "label" and "url"
+  // Context: This one is a stopgap measure in lieu of linking collections to the homepage
+  // Will be hidden in Studio for now
+  label: Type.Optional(
+    Type.String({
+      title: "Link text",
+      maxLength: 50,
+      description:
+        "Add a link under your block. Avoid generic text such as “Click here” or “Learn more”",
+      format: "hidden",
+    }),
+  ),
+  url: Type.Optional(
+    Type.String({
+      title: "Link destination",
+      description: "When this is clicked, open:",
+      // should be link but needs to be hidden for now
+      // shall not overcomlicate the schema for now since it's unavailable in Studio
+      format: "hidden",
+    }),
+  ),
 })
 
 const InfoCardsWithImageSchema = Type.Object(

diff --git a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.stories.tsx b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.stories.tsx
@@ -51,11 +51,13 @@ const generateArgs = ({
   maxColumns,
   withoutImage = false,
   isImageFitContain = false,
+  hasCTA = false,
 }: {
   layout?: IsomerPageLayoutType
   maxColumns: "1" | "2" | "3"
   withoutImage?: boolean
   isImageFitContain?: boolean
+  hasCTA?: boolean
 }): InfoCardsProps => {
   const cards = [
     {
@@ -124,6 +126,12 @@ const generateArgs = ({
     maxColumns: maxColumns,
     variant: withoutImage ? "cardsWithoutImages" : "cardsWithImages",
     cards: cards,
+    ...(hasCTA
+      ? {
+          label: "This is a CTA",
+          url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
+        }
+      : {}),
   } as InfoCardsProps
 }
 
@@ -164,3 +172,7 @@ export const NoImage: Story = {
 export const WithContainImageFit: Story = {
   args: generateArgs({ maxColumns: "3", isImageFitContain: true }),
 }
+
+export const WithLink: Story = {
+  args: generateArgs({ maxColumns: "3", withoutImage: true, hasCTA: true }),
+}
diff --git a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx
@@ -15,6 +15,7 @@ import {
 } from "~/utils"
 import { ComponentContent } from "../../internal/customCssClass"
 import { Link } from "../../internal/Link"
+import { LinkButton } from "../../internal/LinkButton"
 import { ImageClient } from "../Image"
 
 const infoCardTitleStyle = tv({
@@ -42,6 +43,7 @@ const createInfoCardsStyles = tv({
     cardTitleArrow:
       "mb-0.5 ml-1 inline h-auto w-6 transition ease-in group-hover:translate-x-1",
     cardDescription: "prose-body-base text-base-content",
+    urlButtonContainer: "mx-auto block pt-8 sm:pt-12", // temp: following headingContainer's mb
   },
   variants: {
     layout: {
@@ -219,6 +221,8 @@ const InfoCards = ({
   variant,
   cards,
   maxColumns,
+  label,
+  url,
   layout,
   site,
   LinkComponent,
@@ -288,6 +292,19 @@ const InfoCards = ({
       <div className={compoundStyles.grid({ maxColumns })}>
         <InfoCardtoRender />
       </div>
+
+      {!!url && !!label && (
+        <div className={compoundStyles.urlButtonContainer()}>
+          <LinkButton
+            href={getReferenceLinkHref(url, site.siteMap, site.assetsBaseUrl)}
+            size="base"
+            variant="outline"
+            isWithFocusVisibleHighlight
+          >
+            {label}
+          </LinkButton>
+        </div>
+      )}
     </section>
   )
 }

diff --git a/packages/components/src/templates/next/layouts/Homepage/Homepage.stories.tsx b/packages/components/src/templates/next/layouts/Homepage/Homepage.stories.tsx
@@ -286,6 +286,8 @@ export const Default: Story = {
         subtitle:
           "Section subtitle, maximum 150 chars. These are some of the things we are working on. As a ministry, we focus on delivering value to the members of public.",
         variant: "cardsWithImages",
+        label: "This is a CTA",
+        url: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
         cards: [
           {
             title: "Card with short title",