isom-1646 - infocards and infocols should behave consistently when op…

…ens in a new link (#954) * add diagonal top-right arrow for external URL * update storybook * update preview-tw * opens in new tab if external url * fix - pass isExternalLink into InfoCardContainer
opengovsg · Dec 29, 2024 · f8d78ed · f8d78ed
1 parent 47d5dd6
commit f8d78ed
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 51 deletions.
diff --git a/apps/studio/public/assets/css/preview-tw.css b/apps/studio/public/assets/css/preview-tw.css
@@ -1418,10 +1418,6 @@ video {
   -webkit-line-clamp: 3;
 }
 
-.\!block {
-  display: block !important;
-}
-
 .block {
   display: block;
 }
@@ -1821,6 +1817,13 @@ video {
     scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.rotate-\[-45deg\] {
+  --tw-rotate: -45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y))
+    rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y))
+    scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .scale-100 {
   --tw-scale-x: 1;
   --tw-scale-y: 1;
@@ -3156,11 +3159,6 @@ video {
   color: rgb(26 86 229 / var(--tw-text-opacity));
 }
 
-.text-link-hover {
-  --tw-text-opacity: 1;
-  color: rgb(21 71 190 / var(--tw-text-opacity));
-}
-
 .text-site-secondary {
   --tw-text-opacity: 1;
   color: rgb(78 69 65 / var(--tw-text-opacity));
@@ -5510,12 +5508,6 @@ video {
   margin-top: 2.25rem;
 }
 
-.\[\&\:not\(\:first-child\)\]\:first-of-type\:mt-7:first-of-type:not(
-    :first-child
-  ) {
-  margin-top: 1.75rem;
-}
-
 .\[\&\:not\(\:last-child\)\]\:mb-0:not(:last-child) {
   margin-bottom: 0px;
 }

diff --git a/packages/components/src/interfaces/complex/InfoCards.ts b/packages/components/src/interfaces/complex/InfoCards.ts
@@ -165,13 +165,15 @@ export const InfoCardsSchema = Type.Intersect(
 
 export type SingleCardNoImageProps = Static<typeof SingleCardNoImageSchema> & {
   site: IsomerSiteProps
+  isExternalLink?: boolean
   LinkComponent?: LinkComponentType
 }
 export type SingleCardWithImageProps = Static<
   typeof SingleCardWithImageSchema
 > & {
   site: IsomerSiteProps
   layout: IsomerPageLayoutType
+  isExternalLink?: boolean
   LinkComponent?: LinkComponentType
 }
 export type InfoCardsProps = Static<typeof InfoCardsSchema> & {

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
@@ -68,7 +68,7 @@ const generateArgs = ({
       imageUrl: "https://placehold.co/200x300",
       imageAlt: "alt text",
       imageFit: "contain",
-      url: "https://www.google.com",
+      url: "/faq",
     },
     {
       title: "Card with short title",

diff --git a/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx b/packages/components/src/templates/next/components/complex/InfoCards/InfoCards.tsx
@@ -88,6 +88,11 @@ const createInfoCardsStyles = tv({
         grid: "md:grid-cols-2 lg:grid-cols-3",
       },
     },
+    isExternalLink: {
+      true: {
+        cardTitleArrow: "rotate-[-45deg]",
+      },
+    },
   },
   defaultVariants: {
     layout: "default",
@@ -103,14 +108,19 @@ const InfoCardContainer = ({
   site,
   LinkComponent,
   children,
+  isExternalLink,
 }: PropsWithChildren<
-  Pick<SingleCardNoImageProps, "url" | "site" | "LinkComponent">
+  Pick<
+    SingleCardNoImageProps,
+    "url" | "site" | "isExternalLink" | "LinkComponent"
+  >
 >): JSX.Element => {
   return url ? (
     <Link
       href={getReferenceLinkHref(url, site.siteMap, site.assetsBaseUrl)}
       className={compoundStyles.cardContainer()}
       LinkComponent={LinkComponent}
+      isExternal={isExternalLink}
     >
       {children}
     </Link>
@@ -159,9 +169,10 @@ const InfoCardText = ({
   title,
   description,
   url,
+  isExternalLink,
 }: Pick<
   SingleCardWithImageProps,
-  "title" | "description" | "url"
+  "title" | "description" | "url" | "isExternalLink"
 >): JSX.Element => (
   <div className={compoundStyles.cardTextContainer()}>
     <h3 className={infoCardTitleStyle({ isClickableCard: !!url })}>
@@ -170,7 +181,9 @@ const InfoCardText = ({
       {url && (
         <BiRightArrowAlt
           aria-hidden
-          className={compoundStyles.cardTitleArrow()}
+          className={compoundStyles.cardTitleArrow({
+            isExternalLink,
+          })}
         />
       )}
     </h3>
@@ -185,9 +198,20 @@ const InfoCardNoImage = ({
   site,
   LinkComponent,
 }: SingleCardNoImageProps): JSX.Element => {
+  const isExternalLink = isExternalUrl(url)
   return (
-    <InfoCardContainer url={url} site={site} LinkComponent={LinkComponent}>
-      <InfoCardText title={title} description={description} url={url} />
+    <InfoCardContainer
+      url={url}
+      site={site}
+      isExternalLink={isExternalLink}
+      LinkComponent={LinkComponent}
+    >
+      <InfoCardText
+        title={title}
+        description={description}
+        url={url}
+        isExternalLink={isExternalLink}
+      />
     </InfoCardContainer>
   )
 }
@@ -203,8 +227,14 @@ const InfoCardWithImage = ({
   site,
   LinkComponent,
 }: SingleCardWithImageProps): JSX.Element => {
+  const isExternalLink = isExternalUrl(url)
   return (
-    <InfoCardContainer url={url} site={site} LinkComponent={LinkComponent}>
+    <InfoCardContainer
+      url={url}
+      site={site}
+      isExternalLink={isExternalLink}
+      LinkComponent={LinkComponent}
+    >
       <InfoCardImage
         imageFit={imageFit}
         imageUrl={imageUrl}
@@ -213,7 +243,12 @@ const InfoCardWithImage = ({
         site={site}
         layout={layout}
       />
-      <InfoCardText title={title} description={description} url={url} />
+      <InfoCardText
+        title={title}
+        description={description}
+        url={url}
+        isExternalLink={isExternalLink}
+      />
     </InfoCardContainer>
   )
 }

diff --git a/packages/components/src/templates/next/components/complex/InfoCols/InfoCols.tsx b/packages/components/src/templates/next/components/complex/InfoCols/InfoCols.tsx
@@ -8,6 +8,7 @@ import {
   getReferenceLinkHref,
   getTailwindVariantLayout,
   groupFocusVisibleHighlight,
+  isExternalUrl,
 } from "~/utils"
 import { ComponentContent } from "../../internal/customCssClass"
 import { Link } from "../../internal/Link"
@@ -48,6 +49,11 @@ const createInfoColsStyles = tv({
         headerSubtitle: "prose-body-base",
       },
     },
+    isExternalLink: {
+      true: {
+        infoBoxButtonIcon: "rotate-[-45deg]",
+      },
+    },
   },
   defaultVariants: {
     layout: "default",
@@ -72,37 +78,43 @@ const InfoBoxes = ({
   return (
     <div className={compoundStyles.infoBoxesContainer()}>
       {infoBoxes.map(
-        ({ title, icon, description, buttonUrl, buttonLabel }, idx) => (
-          <Link
-            LinkComponent={LinkComponent}
-            href={getReferenceLinkHref(
-              buttonUrl,
-              site.siteMap,
-              site.assetsBaseUrl,
-            )}
-            key={idx}
-            className={compoundStyles.infoBox()}
-          >
-            {icon && <InfoBoxIcon icon={icon} aria-hidden="true" />}
+        ({ title, icon, description, buttonUrl, buttonLabel }, idx) => {
+          const isExternalLink = isExternalUrl(buttonUrl)
+          return (
+            <Link
+              LinkComponent={LinkComponent}
+              href={getReferenceLinkHref(
+                buttonUrl,
+                site.siteMap,
+                site.assetsBaseUrl,
+              )}
+              key={idx}
+              className={compoundStyles.infoBox()}
+              isExternal={isExternalLink}
+            >
+              {icon && <InfoBoxIcon icon={icon} aria-hidden="true" />}
 
-            <h3 className={compoundStyles.infoBoxTitle()}>{title}</h3>
+              <h3 className={compoundStyles.infoBoxTitle()}>{title}</h3>
 
-            {description && (
-              <p className={compoundStyles.infoBoxDescription()}>
-                {description}
-              </p>
-            )}
+              {description && (
+                <p className={compoundStyles.infoBoxDescription()}>
+                  {description}
+                </p>
+              )}
 
-            {buttonLabel && buttonUrl && (
-              <div className={compoundStyles.infoBoxButton()}>
-                {buttonLabel}
-                <BiRightArrowAlt
-                  className={compoundStyles.infoBoxButtonIcon()}
-                />
-              </div>
-            )}
-          </Link>
-        ),
+              {buttonLabel && buttonUrl && (
+                <div className={compoundStyles.infoBoxButton()}>
+                  {buttonLabel}
+                  <BiRightArrowAlt
+                    className={compoundStyles.infoBoxButtonIcon({
+                      isExternalLink,
+                    })}
+                  />
+                </div>
+              )}
+            </Link>
+          )
+        },
       )}
     </div>
   )