feat(interactive-examples): support HTML examples (#12633)

client/config/jest/rawTransform.js

@@ -0,0 +1,14 @@
+// This is a custom Jest transformer turning raw imports into empty strings.
+// http://facebook.github.io/jest/docs/en/webpack.html
+
+const transform = {
+  process() {
+    return { code: "module.exports = '';" };
+  },
+  getCacheKey() {
+    // The output is always the same.
+    return "rawTransform";
+  },
+};
+
+export default transform;

client/package.json

@@ -54,6 +54,7 @@
       "node"
     ],
     "moduleNameMapper": {
+      "\\?raw$": "<rootDir>/config/jest/rawTransform.js",
       "\\.s?css(\\?css)?$": "<rootDir>/config/jest/cssTransform.js"
     },
     "modulePaths": [],

client/src/document/index.tsx

@@ -34,7 +34,7 @@ import "./index.scss";
 // code could come with its own styling rather than it having to be part of the
 // main bundle all the time.
 import "./interactive-examples.scss";
-import "../lit/interactive-example.global.scss";
+import "../lit/interactive-example/global.scss";
 import { DocumentSurvey } from "../ui/molecules/document-survey";
 import { useIncrementFrequentlyViewed } from "../plus/collections/frequently-viewed";
 import { useInteractiveExamplesActionHandler as useInteractiveExamplesTelemetry } from "../telemetry/interactive-examples";
@@ -63,7 +63,7 @@ export class HTTPError extends Error {
 
 export function Document(props /* TODO: define a TS interface for this */) {
   React.useEffect(() => {
-    import("../lit/interactive-example.js");
+    import("../lit/interactive-example/index.js");
   }, []);
 
   const gleanClick = useGleanClick();

client/src/lit/globals.d.ts

@@ -1,5 +1,6 @@
 import { MDNImageHistory, TeamMember } from "./about";
 import { InteractiveExample } from "./interactive-example";
+import { TabPanel, Tab, TabWrapper } from "./interactive-example/tabs";
 import { ContributorList } from "./community/contributor-list";
 import { ScrimInline } from "./curriculum/scrim-inline";
 import { PlayConsole } from "./play/console";
@@ -12,6 +13,9 @@ declare global {
     "mdn-image-history": MDNImageHistory;
     "team-member": TeamMember;
     "interactive-example": InteractiveExample;
+    "ix-tab": Tab;
+    "ix-tab-panel": TabPanel;
+    "ix-tab-wrapper": TabWrapper;
     "contributor-list": ContributorList;
     "scrim-inline": ScrimInline;
     "play-console": PlayConsole;

client/src/lit/interactive-example/example.css

@@ -0,0 +1,71 @@
+@font-face {
+  font-family: "Inter";
+  src:
+    url("/shared-assets/fonts/Inter.var.woff2")
+      format("woff2 supports variations"),
+    url("/shared-assets/fonts/Inter.var.woff2") format("woff2-variations");
+  font-weight: 1 999;
+  font-stretch: 75% 100%;
+  font-style: oblique 0deg 20deg;
+  font-display: swap;
+}
+
+/* fonts used by the examples rendered inside the shadow dom. Because
+   @font-face does not work in shadow dom:
+   http://robdodson.me/at-font-face-doesnt-work-in-shadow-dom/ */
+@font-face {
+  font-family: "Fira Sans";
+  src:
+    local("FiraSans-Regular"),
+    url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Fira Sans";
+  font-weight: normal;
+  font-style: oblique;
+  src:
+    local("FiraSans-SemiBoldItalic"),
+    url("/shared-assets/fonts/FiraSans-SemiBoldItalic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "Dancing Script";
+  src: url("/shared-assets/fonts/dancing-script/dancing-script-regular.woff2")
+    format("woff2");
+}
+
+@font-face {
+  font-family: molot;
+  src: url("/shared-assets/fonts/molot.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: rapscallion;
+  src: url("/shared-assets/fonts/rapscall.woff2") format("woff2");
+}
+
+body {
+  background-color: #fff;
+  font:
+    400 1rem/1.1876 Inter,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    "Roboto",
+    "Oxygen",
+    "Ubuntu",
+    "Cantarell",
+    "Fira Sans",
+    "Droid Sans",
+    "Helvetica Neue",
+    sans-sans;
+  color: #15141aff;
+  font-size: 0.9rem;
+  line-height: 1.5;
+  padding: 2rem 1rem 1rem;
+  min-width: min-content;
+}
+
+body math {
+  font-size: 1.5rem;
+}

client/src/lit/interactive-example/example.js

@@ -0,0 +1,11 @@
+window.addEventListener("click", (event) => {
+  // open links in parent frame if they have no `_target` set
+  const target = event.target;
+  if (target instanceof HTMLAnchorElement) {
+    const hrefAttr = target.getAttribute("href");
+    const targetAttr = target.getAttribute("target");
+    if (hrefAttr && !hrefAttr.startsWith("#") && !targetAttr) {
+      target.target = "_parent";
+    }
+  }
+});

client/src/lit/interactive-example/global.scss

@@ -0,0 +1,52 @@
+@use "../../ui/vars" as *;
+
+interactive-example {
+  display: block;
+  height: 444px;
+  margin: 1rem 0;
+
+  &[height="shorter"] {
+    height: 364px;
+  }
+
+  &[height="taller"] {
+    height: 654px;
+  }
+
+  &[height="tabbed-shorter"] {
+    height: 351px;
+    margin-top: 1.5rem;
+  }
+
+  &[height="tabbed-standard"] {
+    height: 421px;
+  }
+
+  &[height="tabbed-taller"] {
+    height: 631px;
+  }
+
+  @media (max-width: $screen-lg) {
+    height: 513px;
+
+    &[height="shorter"] {
+      height: 433px;
+    }
+
+    &[height="taller"] {
+      height: 725px;
+    }
+
+    &[height="tabbed-shorter"] {
+      height: 487px;
+    }
+
+    &[height="tabbed-standard"] {
+      height: 548px;
+    }
+
+    &[height="tabbed-taller"] {
+      height: 774px;
+    }
+  }
+}