docs: redesign cards (#8671)

* docs: redesign cards * fix build error
2024-08-20 14:48:17 +02:00
1 parent 48fe819d9e
commit b4d8e265e3
@@ -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>
  )
 }
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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>
+  )
+}
@@ -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} />
+  }
 }
@@ -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>
      )
@@ -0,0 +1,60 @@
+import { IconProps } from "@medusajs/icons/dist/types"
+import React from "react"
+
+export const StripeColoredIcon = (props: IconProps) => {
+  return (
+    <svg
+      width="25"
+      height="24"
+      viewBox="0 0 25 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <rect
+        x="0.5"
+        width="24"
+        height="24"
+        rx="4"
+        fill="url(#pattern0_10420_39617)"
+      />
+      <rect
+        x="0.5"
+        width="24"
+        height="24"
+        rx="4"
+        fill="url(#pattern1_10420_39617)"
+      />
+      <defs>
+        <pattern
+          id="pattern0_10420_39617"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use xlinkHref="#image0_10420_39617" transform="scale(0.001)" />
+        </pattern>
+        <pattern
+          id="pattern1_10420_39617"
+          patternContentUnits="objectBoundingBox"
+          width="1"
+          height="1"
+        >
+          <use xlinkHref="#image1_10420_39617" transform="scale(0.00416667)" />
+        </pattern>
+        <image
+          id="image0_10420_39617"
+          width="1000"
+          height="1000"
+          xlinkHref="data:image/png;base64,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
Line truncated
+        />
+        <image
+          id="image1_10420_39617"
+          width="240"
+          height="240"
+          xlinkHref="data:image/png;base64,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"
+        />
+      </defs>
+    </svg>
+  )
+}
@@ -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"
@@ -4,6 +4,7 @@ export * from "./use-collapsible"
 export * from "./use-collapsible-code-lines"
 export * from "./use-copy"
 export * from "./use-current-learning-path"
+export * from "./use-is-external-link"
 export * from "./use-is-browser"
 export * from "./use-keyboard-shortcut"
 export * from "./use-page-scroll-manager"
@@ -0,0 +1,19 @@
+import { useMemo } from "react"
+
+type UseIsExternalLinkProps = {
+  href?: string
+}
+
+export const useIsExternalLink = ({ href }: UseIsExternalLinkProps) => {
+  const isExternal = useMemo(() => {
+    return (
+      href &&
+      !href.startsWith("/") &&
+      !href.startsWith("https://docs.medusajs.com") &&
+      !href.startsWith("http://localhost:") &&
+      !href.startsWith("#")
+    )
+  }, [href])
+
+  return isExternal
+}