docs: redesign cards (#8671)

* docs: redesign cards

* fix build error

www/packages/docs-ui/src/components/BorderedIcon/index.tsx

@@ -17,6 +17,7 @@ export const BorderedIcon = ({
   iconWrapperClassName,
   iconClassName,
   iconColorClassName = "",
+  wrapperClassName,
 }: BorderedIconProps) => {
   return (
     <span
@@ -26,23 +27,25 @@ export const BorderedIcon = ({
         iconWrapperClassName
       )}
     >
-      {!IconComponent && (
-        <img
-          src={icon || ""}
-          className={clsx(iconClassName, "bordered-icon")}
-          alt=""
-        />
-      )}
-      {IconComponent && (
-        <IconComponent
-          className={clsx(
-            "text-medusa-fg-subtle rounded-docs_sm",
-            iconClassName,
-            "bordered-icon",
-            iconColorClassName
-          )}
-        />
-      )}
+      <span className={clsx("rounded-docs_xs", wrapperClassName)}>
+        {!IconComponent && (
+          <img
+            src={icon || ""}
+            className={clsx(iconClassName, "bordered-icon")}
+            alt=""
+          />
+        )}
+        {IconComponent && (
+          <IconComponent
+            className={clsx(
+              "text-medusa-fg-subtle rounded-docs_xs",
+              iconClassName,
+              "bordered-icon",
+              iconColorClassName
+            )}
+          />
+        )}
+      </span>
     </span>
   )
 }

www/packages/docs-ui/src/components/Card/Layout/Default/index.tsx

@@ -0,0 +1,78 @@
+import React from "react"
+import clsx from "clsx"
+import { Badge, BorderedIcon, Link } from "@/components"
+import { ArrowUpRightOnBox, TriangleRightMini } from "@medusajs/icons"
+import { CardProps } from "../../.."
+import { useIsExternalLink } from "../../../.."
+
+export const CardDefaultLayout = ({
+  icon,
+  image,
+  title,
+  text,
+  href,
+  className,
+  contentClassName,
+  iconClassName,
+  children,
+  badge,
+}: CardProps) => {
+  const isExternal = useIsExternalLink({ href })
+
+  return (
+    <div
+      className={clsx(
+        "bg-medusa-bg-component w-full rounded-docs_DEFAULT",
+        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+        "py-docs_0.5 px-docs_0.75 relative",
+        "flex justify-start items-center gap-docs_0.75 transition-shadow",
+        href &&
+          "hover:shadow-elevation-card-hover dark:hover:shadow-elevation-card-hover-dark",
+        className
+      )}
+    >
+      {icon && (
+        <BorderedIcon
+          wrapperClassName={clsx(
+            "p-[4.5px] bg-medusa-bg-component-hover",
+            iconClassName
+          )}
+          IconComponent={icon}
+        />
+      )}
+      {image && (
+        <BorderedIcon
+          wrapperClassName={clsx(
+            "p-[4.5px] bg-medusa-bg-component-hover",
+            iconClassName
+          )}
+          icon={image}
+        />
+      )}
+      <div className={clsx("flex flex-col flex-1", contentClassName)}>
+        {title && (
+          <div className="text-compact-small-plus text-medusa-fg-base truncate">
+            {title}
+          </div>
+        )}
+        {text && (
+          <span className="text-compact-small text-medusa-fg-subtle">
+            {text}
+          </span>
+        )}
+        {children}
+      </div>
+      {badge && <Badge {...badge} />}
+      <span className="text-medusa-fg-muted">
+        {isExternal ? <ArrowUpRightOnBox /> : <TriangleRightMini />}
+      </span>
+
+      {href && (
+        <Link
+          href={href}
+          className="absolute left-0 top-0 h-full w-full rounded"
+        />
+      )}
+    </div>
+  )
+}

www/packages/docs-ui/src/components/Card/Layout/Filler/index.tsx

@@ -0,0 +1,30 @@
+import React from "react"
+import { CardProps } from "../../../.."
+import clsx from "clsx"
+import Link from "next/link"
+
+export const CardFillerLayout = ({ text, href, className }: CardProps) => {
+  return (
+    <div
+      className={clsx(
+        "flex justify-center items-center w-full",
+        "gap-docs_0.75 px-docs_0.75 py-docs_0.5 rounded-docs_DEFAULT",
+        "border border-dashed border-medusa-border-strong",
+        "bg-medusa-bg-component text-medusa-fg-subtle",
+        className
+      )}
+    >
+      <div>
+        <span className="text-compact-small">{text}</span>
+        {href && (
+          <>
+            {" "}
+            <Link href={href} className="text-compact-small-plus">
+              Show All↗
+            </Link>
+          </>
+        )}
+      </div>
+    </div>
+  )
+}

www/packages/docs-ui/src/components/Card/Layout/Large/index.tsx

@@ -0,0 +1,63 @@
+import React from "react"
+import { CardProps } from "../.."
+import { useIsExternalLink } from "../../../.."
+import clsx from "clsx"
+import { ArrowRightMini, ArrowUpRightOnBox } from "@medusajs/icons"
+import Link from "next/link"
+
+export const CardLargeLayout = ({
+  title,
+  text,
+  image,
+  icon,
+  href,
+  className,
+}: CardProps) => {
+  const isExternal = useIsExternalLink({ href })
+  const IconComponent = icon
+
+  return (
+    <div
+      className={clsx(
+        "relative flex flex-col gap-docs_0.75",
+        "justify-start group",
+        className
+      )}
+    >
+      <div
+        className={clsx(
+          "rounded-docs_DEFAULT bg-medusa-bg-component w-[290px] h-[144px]",
+          "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark",
+          href &&
+            "group-hover:shadow-elevation-card-hover group-hover:dark:shadow-elevation-card-hover-dark",
+          "px-docs_0.75 py-docs_0.5 flex justify-center items-center"
+        )}
+      >
+        {IconComponent && (
+          <IconComponent className="w-docs_2 h-docs_2 text-medusa-fg-subtle" />
+        )}
+        {image && (
+          <img src={image} alt={title || text || ""} className="w-[144px]" />
+        )}
+      </div>
+      <div className="flex flex-col">
+        <div className="flex gap-docs_0.25 items-center text-medusa-fg-base">
+          {title && <span className="text-compact-small-plus">{title}</span>}
+          {href && isExternal && <ArrowUpRightOnBox />}
+          {href && !isExternal && <ArrowRightMini />}
+        </div>
+        {text && (
+          <span className="text-compact-small text-medusa-fg-subtle">
+            {text}
+          </span>
+        )}
+      </div>
+      {href && (
+        <Link
+          href={href}
+          className="absolute left-0 top-0 h-full w-full rounded"
+        />
+      )}
+    </div>
+  )
+}

www/packages/docs-ui/src/components/Card/index.tsx

@@ -1,79 +1,31 @@
 import React from "react"
-import { ArrowUpRightOnBox } from "@medusajs/icons"
-import clsx from "clsx"
-import { Badge, BadgeProps, Link } from "@/components"
+import { BadgeProps } from "@/components"
+import { CardDefaultLayout } from "./Layout/Default"
+import { IconProps } from "@medusajs/icons/dist/types"
+import { CardLargeLayout } from "./Layout/Large"
+import { CardFillerLayout } from "./Layout/Filler"
 
 export type CardProps = {
-  startIcon?: React.ReactNode
-  endIcon?: React.ReactNode
+  type?: "default" | "large" | "filler"
+  icon?: React.FC<IconProps>
+  image?: string
   title?: string
   text?: string
   href?: string
   className?: string
   contentClassName?: string
+  iconClassName?: string
   children?: React.ReactNode
-  showLinkIcon?: boolean
-  isExternal?: boolean
   badge?: BadgeProps
 }
 
-export const Card = ({
-  startIcon,
-  endIcon,
-  title,
-  text,
-  href,
-  className,
-  contentClassName,
-  children,
-  showLinkIcon = true,
-  isExternal = false,
-  badge,
-}: CardProps) => {
-  return (
-    <div
-      className={clsx(
-        "bg-medusa-bg-subtle w-full rounded",
-        "shadow-elevation-card-rest dark:shadow-elevation-card-rest-dark p-docs_0.75 relative",
-        "flex items-start gap-docs_0.75 transition-shadow",
-        href &&
-          "hover:shadow-elevation-card-hover dark:hover:shadow-elevation-card-hover-dark",
-        className
-      )}
-    >
-      {startIcon}
-      <div className="flex items-start gap-docs_1 justify-between flex-1 max-w-full">
-        <div className={clsx("flex flex-col max-w-full", contentClassName)}>
-          {title && (
-            <span className={clsx(badge && "flex gap-docs_0.5")}>
-              <span className="text-compact-medium-plus text-medusa-fg-base block truncate">
-                {title}
-              </span>
-              {badge && <Badge {...badge} />}
-            </span>
-          )}
-          {text && (
-            <span className="text-compact-medium text-medusa-fg-subtle">
-              {text}
-            </span>
-          )}
-          {children}
-        </div>
-
-        {href && (
-          <>
-            {showLinkIcon && (
-              <ArrowUpRightOnBox className="text-medusa-fg-subtle min-w-[20px]" />
-            )}
-            <Link
-              href={href}
-              className="absolute left-0 top-0 h-full w-full rounded"
-              target={isExternal ? "_blank" : undefined}
-            />
-          </>
-        )}
-      </div>
-      {endIcon}
-    </div>
-  )
+export const Card = ({ type = "default", ...props }: CardProps) => {
+  switch (type) {
+    case "large":
+      return <CardLargeLayout {...props} />
+    case "filler":
+      return <CardFillerLayout {...props} />
+    default:
+      return <CardDefaultLayout {...props} />
+  }
 }

www/packages/docs-ui/src/components/ChildDocs/index.tsx

@@ -141,7 +141,6 @@ export const ChildDocs = ({
             return {
               title: childItem.title,
               href,
-              showLinkIcon: false,
             }
           }) || []
         }
@@ -170,14 +169,13 @@ export const ChildDocs = ({
                   itemChildren?.map((childItem) => ({
                     title: childItem.title,
                     href: childItem.type === "link" ? childItem.path : "",
-                    showLinkIcon: false,
                   })) || []
                 }
               />
             </>
           )}
           {!HeadingComponent && item.type === "link" && (
-            <Card title={item.title} href={item.path} showLinkIcon={false} />
+            <Card title={item.title} href={item.path} />
           )}
         </React.Fragment>
       )

www/packages/docs-ui/src/components/Icons/index.tsx

@@ -3,5 +3,6 @@ export * from "./CircleDottedLine"
 export * from "./DecisionProcess"
 export * from "./QuestionMark"
 export * from "./ShadedBg"
+export * from "./StripeColored"
 export * from "./ThumbDown"
 export * from "./ThumbUp"