From f8d78ed9a5c2630113da077c1e1cd6902181e7a3 Mon Sep 17 00:00:00 2001 From: Adrian Goh Jun Wei Date: Sun, 29 Dec 2024 17:43:35 +0800 Subject: [PATCH] isom-1646 - infocards and infocols should behave consistently when opens 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 --- apps/studio/public/assets/css/preview-tw.css | 22 ++---- .../src/interfaces/complex/InfoCards.ts | 2 + .../complex/InfoCards/InfoCards.stories.tsx | 2 +- .../complex/InfoCards/InfoCards.tsx | 49 +++++++++++-- .../components/complex/InfoCols/InfoCols.tsx | 68 +++++++++++-------- 5 files changed, 92 insertions(+), 51 deletions(-) diff --git a/apps/studio/public/assets/css/preview-tw.css b/apps/studio/public/assets/css/preview-tw.css index ca673a2f7d..49f2e4bb4e 100644 --- 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 index 833118768e..02349b3131 100644 --- a/packages/components/src/interfaces/complex/InfoCards.ts +++ b/packages/components/src/interfaces/complex/InfoCards.ts @@ -165,6 +165,7 @@ export const InfoCardsSchema = Type.Intersect( export type SingleCardNoImageProps = Static & { site: IsomerSiteProps + isExternalLink?: boolean LinkComponent?: LinkComponentType } export type SingleCardWithImageProps = Static< @@ -172,6 +173,7 @@ export type SingleCardWithImageProps = Static< > & { site: IsomerSiteProps layout: IsomerPageLayoutType + isExternalLink?: boolean LinkComponent?: LinkComponentType } export type InfoCardsProps = Static & { 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 index a3c1758c7e..dd1a8bb4a0 100644 --- 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 index 1e44e37149..2707fa7cab 100644 --- 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 + Pick< + SingleCardNoImageProps, + "url" | "site" | "isExternalLink" | "LinkComponent" + > >): JSX.Element => { return url ? ( {children} @@ -159,9 +169,10 @@ const InfoCardText = ({ title, description, url, + isExternalLink, }: Pick< SingleCardWithImageProps, - "title" | "description" | "url" + "title" | "description" | "url" | "isExternalLink" >): JSX.Element => (

@@ -170,7 +181,9 @@ const InfoCardText = ({ {url && ( )}

@@ -185,9 +198,20 @@ const InfoCardNoImage = ({ site, LinkComponent, }: SingleCardNoImageProps): JSX.Element => { + const isExternalLink = isExternalUrl(url) return ( - - + + ) } @@ -203,8 +227,14 @@ const InfoCardWithImage = ({ site, LinkComponent, }: SingleCardWithImageProps): JSX.Element => { + const isExternalLink = isExternalUrl(url) return ( - + - + ) } diff --git a/packages/components/src/templates/next/components/complex/InfoCols/InfoCols.tsx b/packages/components/src/templates/next/components/complex/InfoCols/InfoCols.tsx index 1c0e910b15..3dad7f45eb 100644 --- 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 (
{infoBoxes.map( - ({ title, icon, description, buttonUrl, buttonLabel }, idx) => ( - - {icon &&
)