[polaris.shopify.com] Include HTML source for examples

.changeset/nine-goats-leave.md

@@ -0,0 +1,5 @@
+---
+'polaris.shopify.com': minor
+---
+
+Simplified rendering of code blocks on site by using the same component for every code example. This makes the experience more consistent and ensures that every code block has features like copy/paste.

polaris.shopify.com/src/components/Code/Code.module.scss

@@ -0,0 +1,103 @@
+@import "../../styles/mixins.scss";
+
+.Code {
+  border-radius: var(--border-radius-400);
+  max-width: calc(100vw - 1.5rem);
+  cursor: text;
+  background: var(--surface);
+  color: var(--text-strong);
+  box-shadow: var(--card-shadow);
+}
+
+.TopBar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  border-bottom: 1px solid var(--border-color-light);
+}
+
+.Tabs {
+  padding-left: 1rem;
+  display: flex;
+
+  .Tab {
+    padding-top: 0.66rem;
+    padding-bottom: 0.66rem;
+    border-radius: var(--border-radius-300);
+    background: transparent;
+    font-size: var(--font-size-100);
+    color: var(--text-subdued);
+  }
+
+  button.Tab {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+    color: var(--text-strong);
+
+    &[aria-selected="true"] {
+      position: relative;
+
+      &:not(:focus-visible) {
+        &:after {
+          content: "";
+          display: block;
+          position: absolute;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          background: var(--text-strong);
+          height: 3px;
+          border-radius: var(--border-radius-200) var(--border-radius-200) 0 0;
+        }
+      }
+    }
+  }
+
+  &:focus-visible {
+    box-shadow: var(--focus-outline);
+  }
+}
+
+.CopyButton {
+  padding: 0.5rem 1rem;
+  background: transparent;
+  border-radius: var(--border-radius-200);
+  opacity: 0.5;
+  display: flex;
+  align-items: center;
+
+  &:hover,
+  &:focus {
+    opacity: 1;
+  }
+
+  svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  &:focus-visible {
+    box-shadow: none;
+    opacity: 1;
+  }
+}
+
+.ActualCode {
+  display: block;
+  font-family: var(--font-family-mono);
+  white-space: pre-wrap;
+  padding: 0.85rem 1rem;
+  font-size: 14px;
+  line-height: 1.6;
+  overflow: auto;
+  max-height: 50vh;
+
+  @include custom-scrollbars;
+}
+
+.LineNumber {
+  display: none;
+  opacity: 0.5;
+  margin-right: 0.5rem;
+  user-select: none;
+}

polaris.shopify.com/src/components/Code/Code.tsx

@@ -0,0 +1,109 @@
+import Tooltip from "../Tooltip";
+import Prism from "prismjs";
+import { useCopyToClipboard } from "../../utils/hooks";
+import styles from "./Code.module.scss";
+import { Tab } from "@headlessui/react";
+import Image from "../Image";
+import { useState } from "react";
+
+interface Props {
+  code:
+    | {
+        title: string;
+        code: string;
+      }
+    | {
+        title: string;
+        code: string;
+      }[];
+}
+
+function Code({ code }: Props) {
+  const [selectedIndex, setSelectedIndex] = useState(0);
+
+  return (
+    <div className={styles.Code}>
+      {Array.isArray(code) ? (
+        <Tab.Group selectedIndex={selectedIndex} onChange={setSelectedIndex}>
+          <div className={styles.TopBar}>
+            <Tab.List className={styles.Tabs}>
+              {code.map(({ title }) => (
+                <Tab key={title} className={styles.Tab}>
+                  {title}
+                </Tab>
+              ))}
+            </Tab.List>
+            {code[selectedIndex] && (
+              <CopyButton code={code[selectedIndex].code} />
+            )}
+          </div>
+
+          <Tab.Panels>
+            {code.map(({ title, code }) => (
+              <Tab.Panel key={title}>
+                <HighlightedCode code={code} />
+              </Tab.Panel>
+            ))}
+          </Tab.Panels>
+        </Tab.Group>
+      ) : (
+        <>
+          <div className={styles.TopBar}>
+            <div className={styles.Tabs}>
+              <div className={styles.Tab}>{code.title}</div>
+            </div>
+            <CopyButton code={code.code} />
+          </div>
+          <HighlightedCode code={code.code} />
+        </>
+      )}
+    </div>
+  );
+}
+
+function HighlightedCode({ code }: { code: string }) {
+  return (
+    <pre>
+      <code
+        className={styles.ActualCode}
+        dangerouslySetInnerHTML={{
+          __html: Prism.highlight(
+            code,
+            Prism.languages.javascript,
+            "javasript"
+          ),
+        }}
+      ></code>
+    </pre>
+  );
+}
+
+function CopyButton({ code }: { code: string }) {
+  const [copy, didJustCopy] = useCopyToClipboard(code);
+
+  return (
+    <div className={styles.CopyButtonWrapper}>
+      <Tooltip
+        ariaLabel="Copy to clipboard"
+        renderContent={() => <p>{didJustCopy ? "Copied" : "Copy"}</p>}
+      >
+        <button
+          type="button"
+          className={styles.CopyButton}
+          onClick={copy}
+          aria-label="Copy to clipboard"
+        >
+          <Image
+            src="/icons/ClipboardMinor.svg"
+            alt="Clipboard icon"
+            width={16}
+            height={16}
+            icon
+          />
+        </button>
+      </Tooltip>
+    </div>
+  );
+}
+
+export default Code;

polaris.shopify.com/src/components/Code/index.ts

@@ -0,0 +1,3 @@
+import Code from "./Code";
+
+export default Code;