docs: update design + colors (#7593)

Update design and colors in docs to match those in Figma
2024-06-04 10:41:24 +03:00
parent ecfbfcc707
commit c38f6d07c2
45 changed files with 1511 additions and 804 deletions
--- a/www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Actions/Copy/index.tsx
@@ -0,0 +1,42 @@
+import React, { useEffect, useState } from "react"
+import { CopyButton } from "../../../.."
+import clsx from "clsx"
+import { CheckMini, SquareTwoStack } from "@medusajs/icons"
+
+export type CodeBlockCopyActionProps = {
+  source: string
+  inHeader: boolean
+  iconColor: string
+}
+
+export const CodeBlockCopyAction = ({
+  source,
+  inHeader,
+  iconColor,
+}: CodeBlockCopyActionProps) => {
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    if (copied) {
+      setTimeout(() => {
+        setCopied(false)
+      }, 1000)
+    }
+  }, [copied])
+
+  return (
+    <CopyButton
+      text={source}
+      tooltipClassName="font-base"
+      className={clsx(
+        "h-fit",
+        !inHeader && "p-[6px]",
+        inHeader && "px-[6px] pb-[6px]"
+      )}
+      onCopy={() => setCopied(true)}
+    >
+      {!copied && <SquareTwoStack className={clsx(iconColor)} />}
+      {copied && <CheckMini className={clsx(iconColor)} />}
+    </CopyButton>
+  )
+}
--- a/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Actions/index.tsx
@@ -0,0 +1,109 @@
+"use client"
+
+import clsx from "clsx"
+import React, { useMemo } from "react"
+import { CodeBlockStyle, Link, Tooltip } from "@/components"
+import { ExclamationCircle, PlaySolid } from "@medusajs/icons"
+import { useColorMode } from "@/providers"
+import { GITHUB_ISSUES_PREFIX } from "@/constants"
+import { CodeBlockCopyAction } from "./Copy"
+
+export type CodeBlockActionsProps = {
+  source: string
+  isSingleLine?: boolean
+  inHeader: boolean
+  canShowApiTesting?: boolean
+  blockStyle: CodeBlockStyle
+  onApiTesting: React.Dispatch<React.SetStateAction<boolean>>
+  noReport?: boolean
+  noCopy?: boolean
+}
+
+export const CodeBlockActions = ({
+  source,
+  inHeader,
+  isSingleLine = false,
+  canShowApiTesting = false,
+  blockStyle,
+  onApiTesting,
+  noReport = false,
+  noCopy = false,
+}: CodeBlockActionsProps) => {
+  const { colorMode } = useColorMode()
+  const iconColor = useMemo(
+    () =>
+      clsx(
+        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
+        blockStyle === "subtle" && [
+          colorMode === "light" && "text-medusa-fg-muted",
+          colorMode === "dark" && "text-medusa-fg-secondary",
+        ]
+      ),
+    [blockStyle, colorMode]
+  )
+
+  return (
+    <div
+      className={clsx(
+        "absolute hidden md:flex md:justify-end",
+        "xs:rounded xs:absolute xs:right-0 xs:top-0 xs:w-[calc(10%+24px)] xs:h-full xs:bg-transparent",
+        !inHeader && [
+          "md:right-docs_0.5",
+          isSingleLine && "md:top-docs_0.25",
+          !isSingleLine && "md:top-docs_0.5",
+        ],
+        inHeader && "md:right-docs_1 md:top-docs_0.5"
+      )}
+    >
+      {canShowApiTesting && (
+        <Tooltip
+          text="Test API"
+          tooltipClassName="font-base"
+          className={clsx(
+            "h-fit",
+            !inHeader && "p-[6px]",
+            inHeader && "px-[6px] pb-[6px]"
+          )}
+        >
+          <PlaySolid
+            className={clsx("cursor-pointer", iconColor)}
+            onClick={() => onApiTesting(true)}
+          />
+        </Tooltip>
+      )}
+      {!noReport && (
+        <Tooltip
+          text="Report Issue"
+          tooltipClassName="font-base"
+          className={clsx(
+            "h-fit",
+            !inHeader && "p-[6px]",
+            inHeader && "px-[6px] pb-[6px]"
+          )}
+        >
+          <Link
+            href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
+              `Docs(Code Issue): `
+            )}`}
+            target="_blank"
+            className={clsx(
+              "bg-transparent border-none cursor-pointer rounded",
+              "[&:not(:first-child)]:ml-docs_0.5",
+              "inline-flex justify-center items-center invisible xs:visible"
+            )}
+            rel="noreferrer"
+          >
+            <ExclamationCircle className={clsx(iconColor)} />
+          </Link>
+        </Tooltip>
+      )}
+      {!noCopy && (
+        <CodeBlockCopyAction
+          source={source}
+          inHeader={inHeader}
+          iconColor={iconColor}
+        />
+      )}
+    </div>
+  )
+}
--- a/www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Header/index.tsx
@@ -5,6 +5,7 @@ import clsx from "clsx"
 import { CodeBlockStyle } from ".."
 import { useColorMode } from "@/providers"
 import { Badge, BadgeVariant } from "@/components"
+import { CodeBlockActions, CodeBlockActionsProps } from "../Actions"

 export type CodeBlockHeaderMeta = {
  badgeLabel?: string
@@ -12,73 +13,69 @@ export type CodeBlockHeaderMeta = {
 }

 type CodeBlockHeaderProps = {
-  children?: React.ReactNode
  title?: string
  blockStyle?: CodeBlockStyle
+  actionsProps: CodeBlockActionsProps
 } & CodeBlockHeaderMeta

 export const CodeBlockHeader = ({
-  children,
  title,
  blockStyle = "loud",
  badgeLabel,
+  actionsProps,
  badgeColor,
 }: CodeBlockHeaderProps) => {
  const { colorMode } = useColorMode()

-  const borderColor = useMemo(
+  const bgColor = useMemo(
    () =>
      clsx(
-        blockStyle === "loud" && [
-          colorMode === "light" && "border-medusa-code-border",
-          colorMode === "dark" && "border-medusa-border-base",
-        ],
+        blockStyle === "loud" && "bg-medusa-contrast-bg-base",
        blockStyle === "subtle" && [
-          colorMode === "light" && "border-medusa-border-base",
-          colorMode === "dark" && "border-medusa-code-border",
+          colorMode === "light" && "bg-medusa-bg-component",
+          colorMode === "dark" && "bg-medusa-code-bg-header",
        ]
      ),
    [blockStyle, colorMode]
  )
+  const titleColor = useMemo(
+    () =>
+      clsx(
+        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
+        blockStyle === "subtle" && [
+          colorMode === "light" && "text-medusa-fg-subtle",
+          colorMode === "dark" && "text-medusa-contrast-fg-secondary",
+        ]
+      ),
+    [blockStyle, colorMode]
+  )
+
  return (
    <div
      className={clsx(
-        "py-docs_0.75 rounded-t-docs_DEFAULT px-docs_1 mb-0",
-        "flex gap-docs_2 items-start justify-between",
-        blockStyle === "loud" && [
-          colorMode === "light" && "bg-medusa-code-bg-header",
-          colorMode === "dark" && "bg-medusa-bg-base",
-        ],
+        "py-docs_0.5 px-docs_1 mb-0",
+        "rounded-t-docs_lg relative",
        blockStyle === "subtle" && [
-          colorMode === "light" && "bg-medusa-bg-component",
-          colorMode === "dark" && "bg-medusa-code-bg-header",
+          "border border-solid border-b-0",
+          colorMode === "light" && "border-medusa-border-base",
+          colorMode === "dark" && "border-medusa-code-border",
        ],
-        borderColor && `border border-b-0 ${borderColor}`
+        bgColor
      )}
    >
-      {children}
-      {title && (
-        <div
-          className={clsx(
-            "txt-compact-small-plus",
-            blockStyle === "loud" && [
-              colorMode === "light" && "text-medusa-code-text-subtle",
-              colorMode === "dark" && "text-medusa-fg-muted",
-            ],
-            blockStyle === "subtle" && [
-              colorMode === "light" && "text-medusa-fg-subtle",
-              colorMode === "dark" && "text-medusa-code-text-subtle",
-            ]
-          )}
-        >
-          {title}
-        </div>
-      )}
-      {badgeLabel && (
-        <Badge variant={badgeColor || "orange"} className="font-base">
-          {badgeLabel}
-        </Badge>
-      )}
+      <div className={clsx("xs:max-w-[83%]", "flex gap-docs_0.75 items-start")}>
+        {badgeLabel && (
+          <Badge variant={badgeColor || "code"} className="font-base">
+            {badgeLabel}
+          </Badge>
+        )}
+        {title && (
+          <div className={clsx("text-compact-x-small font-base", titleColor)}>
+            {title}
+          </div>
+        )}
+      </div>
+      <CodeBlockActions {...actionsProps} />
    </div>
  )
 }
--- a/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/Line/index.tsx
@@ -21,7 +21,6 @@ type CodeBlockLineProps = {
  highlights?: Highlight[]
  lineNumber: number
  showLineNumber: boolean
-  bgColorClassName: string
  lineNumberColorClassName: string
  noLineNumbers?: boolean
 } & Pick<RenderProps, "getLineProps" | "getTokenProps">
@@ -33,7 +32,6 @@ export const CodeBlockLine = ({
  getLineProps,
  getTokenProps,
  showLineNumber,
-  bgColorClassName,
  lineNumberColorClassName,
 }: CodeBlockLineProps) => {
  const lineProps = getLineProps({ line, key: lineNumber })
@@ -204,10 +202,9 @@ export const CodeBlockLine = ({
  }) => (
    <span
      className={clsx(
-        // TODO change code colors and class names based on figma colors
        isHighlighted && [
-          "lg:py-px lg:px-[6px] lg:border-medusa-code-icon lg:rounded-docs_sm",
-          "lg:bg-medusa-code-border lg:cursor-pointer",
+          "lg:py-px lg:px-[6px] lg:border-medusa-contrast-border-top lg:rounded-docs_sm",
+          "lg:bg-medusa-contrast-bg-highlight lg:cursor-pointer",
        ]
      )}
    >
@@ -235,7 +232,7 @@ export const CodeBlockLine = ({
      {...lineProps}
      className={clsx(
        "table-row",
-        isHighlightedLine && "bg-medusa-code-bg-header",
+        isHighlightedLine && "bg-medusa-contrast-bg-highlight",
        lineProps.className
      )}
    >
@@ -244,7 +241,6 @@ export const CodeBlockLine = ({
          className={clsx(
            "mr-docs_1 table-cell select-none",
            "sticky left-0 w-[1%] px-docs_1 text-right",
-            bgColorClassName,
            lineNumberColorClassName
          )}
        >
--- a/www/packages/docs-ui/src/components/CodeBlock/index.tsx
+++ b/www/packages/docs-ui/src/components/CodeBlock/index.tsx
@@ -3,14 +3,13 @@
 import React, { useMemo, useState } from "react"
 import clsx from "clsx"
 import { HighlightProps, Highlight, themes } from "prism-react-renderer"
-import { ApiRunner, CopyButton, Tooltip, Link } from "@/components"
+import { ApiRunner } from "@/components"
 import { useColorMode } from "@/providers"
-import { ExclamationCircle, PlaySolid, SquareTwoStack } from "@medusajs/icons"
 import { CodeBlockHeader, CodeBlockHeaderMeta } from "./Header"
 import { CodeBlockLine } from "./Line"
 import { ApiAuthType, ApiDataOptions, ApiMethod } from "types"
 import { CSSTransition } from "react-transition-group"
-import { GITHUB_ISSUES_PREFIX } from "../.."
+import { CodeBlockActions, CodeBlockActionsProps } from "./Actions"

 export type Highlight = {
  line: number
@@ -20,6 +19,7 @@ export type Highlight = {

 export type CodeBlockMetaFields = {
  title?: string
+  hasTabs?: boolean
  npm2yarn?: boolean
  highlights?: string[][]
  apiTesting?: boolean
@@ -48,6 +48,7 @@ export type CodeBlockProps = {

 export const CodeBlock = ({
  source,
+  hasTabs = false,
  lang = "",
  className,
  collapsed = false,
@@ -67,6 +68,10 @@ export const CodeBlock = ({

  const { colorMode } = useColorMode()
  const [showTesting, setShowTesting] = useState(false)
+  const hasInnerCodeBlock = useMemo(
+    () => hasTabs || title.length > 0,
+    [hasTabs, title]
+  )
  const canShowApiTesting = useMemo(
    () =>
      apiTesting !== undefined &&
@@ -78,10 +83,7 @@ export const CodeBlock = ({
  const bgColor = useMemo(
    () =>
      clsx(
-        blockStyle === "loud" && [
-          colorMode === "light" && "bg-medusa-code-bg-base",
-          colorMode === "dark" && "bg-medusa-bg-component",
-        ],
+        blockStyle === "loud" && "bg-medusa-contrast-bg-base",
        blockStyle === "subtle" && [
          colorMode === "light" && "bg-medusa-bg-subtle",
          colorMode === "dark" && "bg-medusa-code-bg-base",
@@ -93,13 +95,10 @@ export const CodeBlock = ({
  const lineNumbersColor = useMemo(
    () =>
      clsx(
-        blockStyle === "loud" && [
-          colorMode === "light" && "text-medusa-code-text-subtle",
-          colorMode === "dark" && "text-medusa-fg-muted",
-        ],
+        blockStyle === "loud" && "text-medusa-contrast-fg-secondary",
        blockStyle === "subtle" && [
          colorMode === "light" && "text-medusa-fg-muted",
-          colorMode === "dark" && "text-medusa-code-text-subtle",
+          colorMode === "dark" && "text-medusa-contrast-fg-secondary",
        ]
      ),
    [blockStyle, colorMode]
@@ -108,10 +107,7 @@ export const CodeBlock = ({
  const borderColor = useMemo(
    () =>
      clsx(
-        blockStyle === "loud" && [
-          colorMode === "light" && "border-medusa-code-border",
-          colorMode === "dark" && "border-medusa-border-base",
-        ],
+        blockStyle === "loud" && "border-transparent",
        blockStyle === "subtle" && [
          colorMode === "light" && "border-medusa-border-base",
          colorMode === "dark" && "border-medusa-code-border",
@@ -120,21 +116,48 @@ export const CodeBlock = ({
    [blockStyle, colorMode]
  )

-  const iconColor = useMemo(
+  const boxShadow = useMemo(
+    () =>
+      clsx(
+        blockStyle === "loud" &&
+          "shadow-elevation-code-block dark:shadow-elevation-code-block-dark",
+        blockStyle === "subtle" && "shadow-none"
+      ),
+    [blockStyle]
+  )
+
+  const innerBgColor = useMemo(
    () =>
      clsx(
        blockStyle === "loud" && [
-          colorMode === "light" && "text-medusa-code-icon",
-          colorMode === "dark" && "text-medusa-fg-muted",
+          hasInnerCodeBlock && "bg-medusa-contrast-bg-subtle",
+          !hasInnerCodeBlock && "bg-medusa-contrast-bg-base",
        ],
-        blockStyle === "subtle" && [
-          colorMode === "light" && "text-medusa-fg-muted",
-          colorMode === "dark" && "text-medusa-code-icon",
-        ]
+        blockStyle === "subtle" && bgColor
      ),
-    [blockStyle, colorMode]
+    [blockStyle, bgColor, hasInnerCodeBlock]
  )

+  const innerBorderClasses = useMemo(
+    () =>
+      clsx(
+        blockStyle === "loud" && [
+          hasInnerCodeBlock &&
+            "border border-solid border-medusa-contrast-border-bot rounded-docs_DEFAULT",
+          !hasInnerCodeBlock && "border-transparent rounded-docs_DEFAULT",
+        ],
+        blockStyle === "subtle" && "border-transparent rounded-docs_DEFAULT"
+      ),
+    [blockStyle, hasInnerCodeBlock]
+  )
+
+  const language = useMemo(() => {
+    const lowerLang = lang.toLowerCase()
+
+    // due to a hydration error in json, for now we just assign it to plain
+    return lowerLang === "json" ? "plain" : lowerLang
+  }, [lang])
+
  if (!source.length) {
    return <></>
  }
@@ -147,164 +170,120 @@ export const CodeBlock = ({
      tooltipText: highlight.length >= 3 ? highlight[2] : undefined,
    }))

+  const actionsProps: Omit<CodeBlockActionsProps, "inHeader"> = {
+    source,
+    canShowApiTesting,
+    onApiTesting: setShowTesting,
+    blockStyle,
+    noReport,
+    noCopy,
+  }
+
  return (
    <>
-      {title && (
-        <CodeBlockHeader
-          title={title}
-          blockStyle={blockStyle}
-          badgeLabel={rest.badgeLabel}
-          badgeColor={rest.badgeColor}
-        />
-      )}
      <div
        className={clsx(
-          "relative mb-docs_1 rounded-b-docs_DEFAULT",
-          "w-full max-w-full border",
-          bgColor,
-          borderColor,
-          collapsed && "max-h-[400px] overflow-auto",
-          !title && "rounded-t-docs_DEFAULT",
+          hasInnerCodeBlock && "rounded-docs_lg",
+          !hasInnerCodeBlock && "rounded-docs_DEFAULT",
+          !hasTabs && boxShadow,
          (blockStyle === "loud" || colorMode !== "light") &&
            "code-block-highlight-dark",
          blockStyle === "subtle" &&
            colorMode === "light" &&
-            "code-block-highlight-light",
-          className
+            "code-block-highlight-light"
        )}
      >
-        <Highlight
-          theme={
-            blockStyle === "loud" || colorMode === "dark"
-              ? {
-                  ...themes.vsDark,
-                  plain: {
-                    ...themes.vsDark.plain,
-                    backgroundColor:
-                      blockStyle === "loud"
-                        ? colorMode === "light"
-                          ? "#111827"
-                          : "#27282D"
-                        : "#1B1B1F",
-                  },
-                }
-              : {
-                  ...themes.vsLight,
-                  plain: {
-                    ...themes.vsLight.plain,
-                    backgroundColor: "#F9FAFB",
-                  },
-                }
-          }
-          code={source.trim()}
-          language={lang.toLowerCase()}
-          {...rest}
+        {title && (
+          <CodeBlockHeader
+            title={title}
+            blockStyle={blockStyle}
+            badgeLabel={rest.badgeLabel}
+            badgeColor={rest.badgeColor}
+            actionsProps={{
+              ...actionsProps,
+              inHeader: true,
+            }}
+          />
+        )}
+        <div
+          className={clsx(
+            "relative mb-docs_1",
+            "w-full max-w-full border",
+            bgColor,
+            borderColor,
+            collapsed && "max-h-[400px] overflow-auto",
+            hasInnerCodeBlock && "p-[5px] !pt-0 rounded-b-docs_lg",
+            !hasInnerCodeBlock && "rounded-docs_DEFAULT",
+            className
+          )}
        >
-          {({ className: preClassName, style, tokens, ...rest }) => (
-            <>
-              <pre
-                style={{ ...style, fontStretch: "100%" }}
-                className={clsx(
-                  "relative !my-0 break-words bg-transparent !outline-none",
-                  "overflow-auto break-words rounded-docs_DEFAULT p-0 xs:max-w-[83%]",
-                  preClassName
-                )}
-              >
-                <code
+          <Highlight
+            theme={
+              blockStyle === "loud" || colorMode === "dark"
+                ? themes.vsDark
+                : themes.vsLight
+            }
+            code={source.trim()}
+            language={language}
+            {...rest}
+          >
+            {({
+              className: preClassName,
+              style: { backgroundColor, ...style },
+              tokens,
+              ...rest
+            }) => (
+              <div className={clsx(innerBorderClasses, innerBgColor)}>
+                <pre
+                  style={{ ...style, fontStretch: "100%" }}
                  className={clsx(
-                    "text-code-body font-monospace table min-w-full pb-docs_1.5 print:whitespace-pre-wrap",
-                    tokens.length > 1 && "pt-docs_1 pr-docs_1",
-                    tokens.length <= 1 && "!py-docs_0.25 px-[6px]"
+                    "relative !my-0 break-words bg-transparent !outline-none",
+                    "overflow-auto break-words p-0",
+                    "rounded-docs_DEFAULT",
+                    !hasInnerCodeBlock &&
+                      tokens.length <= 1 &&
+                      "px-docs_0.5 py-[6px]",
+                    !title.length && "xs:max-w-[83%]",
+                    preClassName
                  )}
                >
-                  {tokens.map((line, i) => {
-                    const highlightedLines = transformedHighlights.filter(
-                      (highlight) => highlight.line - 1 === i
-                    )
+                  <code
+                    className={clsx(
+                      "text-code-body font-monospace table min-w-full print:whitespace-pre-wrap",
+                      tokens.length > 1 && "py-docs_0.75",
+                      tokens.length <= 1 && "!py-[6px] px-docs_0.5"
+                    )}
+                  >
+                    {tokens.map((line, i) => {
+                      const highlightedLines = transformedHighlights.filter(
+                        (highlight) => highlight.line - 1 === i
+                      )

-                    return (
-                      <CodeBlockLine
-                        line={line}
-                        lineNumber={i}
-                        highlights={highlightedLines}
-                        showLineNumber={!noLineNumbers && tokens.length > 1}
-                        key={i}
-                        bgColorClassName={bgColor}
-                        lineNumberColorClassName={lineNumbersColor}
-                        {...rest}
-                      />
-                    )
-                  })}
-                </code>
-              </pre>
-              <div
-                className={clsx(
-                  "absolute hidden md:flex md:justify-end",
-                  "xs:rounded xs:absolute xs:right-0 xs:top-0 xs:w-[calc(10%+24px)] xs:h-full xs:bg-transparent",
-                  tokens.length === 1 && "md:right-[6px] md:top-0",
-                  tokens.length > 1 && "md:right-docs_1 md:top-docs_1"
-                )}
-              >
-                {canShowApiTesting && (
-                  <Tooltip
-                    text="Test API"
-                    tooltipClassName="font-base"
-                    className={clsx(
-                      "h-fit",
-                      tokens.length === 1 && "p-[6px]",
-                      tokens.length > 1 && "px-[6px] pb-[6px]"
-                    )}
-                  >
-                    <PlaySolid
-                      className={clsx("cursor-pointer", iconColor)}
-                      onClick={() => setShowTesting(true)}
-                    />
-                  </Tooltip>
-                )}
-                {!noReport && (
-                  <Tooltip
-                    text="Report Issue"
-                    tooltipClassName="font-base"
-                    className={clsx(
-                      "h-fit",
-                      tokens.length === 1 && "p-[6px]",
-                      tokens.length > 1 && "px-[6px] pb-[6px]"
-                    )}
-                  >
-                    <Link
-                      href={`${GITHUB_ISSUES_PREFIX}&title=${encodeURIComponent(
-                        `Docs(Code Issue): `
-                      )}`}
-                      target="_blank"
-                      className={clsx(
-                        blockStyle === "loud" && "hover:bg-medusa-code-bg-base",
-                        "bg-transparent border-none cursor-pointer rounded",
-                        "[&:not(:first-child)]:ml-docs_0.5",
-                        "inline-flex justify-center items-center invisible xs:visible"
-                      )}
-                      rel="noreferrer"
-                    >
-                      <ExclamationCircle className={clsx(iconColor)} />
-                    </Link>
-                  </Tooltip>
-                )}
-                {!noCopy && (
-                  <CopyButton
-                    text={source}
-                    tooltipClassName="font-base"
-                    className={clsx(
-                      "h-fit",
-                      tokens.length === 1 && "p-[6px]",
-                      tokens.length > 1 && "px-[6px] pb-[6px]"
-                    )}
-                  >
-                    <SquareTwoStack className={clsx(iconColor)} />
-                  </CopyButton>
+                      return (
+                        <CodeBlockLine
+                          line={line}
+                          lineNumber={i}
+                          highlights={highlightedLines}
+                          showLineNumber={!noLineNumbers && tokens.length > 1}
+                          key={i}
+                          lineNumberColorClassName={lineNumbersColor}
+                          {...rest}
+                        />
+                      )
+                    })}
+                  </code>
+                </pre>
+                {!title && (
+                  <CodeBlockActions
+                    {...actionsProps}
+                    inHeader={false}
+                    isSingleLine={tokens.length <= 1}
+                  />
                )}
              </div>
-            </>
-          )}
-        </Highlight>
+            )}
+          </Highlight>
+        </div>
      </div>
      {canShowApiTesting && (
        <CSSTransition