chore(docs/learn): add user research survey banner (#9405)

https://mozilla-hub.atlassian.net/browse/MP-538

prevent images being inlined, our csp doesn't support it

client/config/webpack.config.js

@@ -53,9 +53,7 @@ const shouldInlineRuntimeChunk = process.env.INLINE_RUNTIME_CHUNK !== "false";
 const emitErrorsAsWarnings = process.env.ESLINT_NO_DEV_ERRORS === "true";
 const disableESLintPlugin = process.env.DISABLE_ESLINT_PLUGIN === "true";
 
-const imageInlineSizeLimit = parseInt(
-  process.env.IMAGE_INLINE_SIZE_LIMIT || "10000"
-);
+const imageInlineSizeLimit = 0; // our CSP doesn't support inline images
 
 // Check if TypeScript is setup
 const useTypeScript = fs.existsSync(paths.appTsConfig);

client/src/document/index.tsx

@@ -45,6 +45,7 @@ import { useIncrementFrequentlyViewed } from "../plus/collections/frequently-vie
 import { useInteractiveExamplesActionHandler as useInteractiveExamplesTelemetry } from "../telemetry/interactive-examples";
 import { SidePlacement } from "../ui/organisms/placement";
 import { BaselineIndicator } from "./baseline-indicator";
+import { UserResearchSurvey } from "../ui/molecules/user-research-survey";
 // import { useUIStatus } from "../ui-context";
 
 // Lazy sub-components
@@ -257,6 +258,7 @@ export function Document(props /* TODO: define a TS interface for this */) {
             </React.Suspense>
           )}
           <article className="main-page-content" lang={doc.locale}>
+            <UserResearchSurvey doc={doc} />
             <header>
               <h1>{doc.title}</h1>
               {doc.baseline && <BaselineIndicator status={doc.baseline} />}

client/src/ui/molecules/user-research-survey/index.scss

@@ -0,0 +1,46 @@
+.user-research-banner {
+  --icon-primary: #696969;
+  background: #e6deff;
+  border-radius: 0.5rem;
+  color: #1b1b1b;
+  margin-bottom: 2rem;
+  padding: 1rem;
+  padding-left: 5.5rem;
+  padding-right: 3rem;
+  position: relative;
+
+  &::before {
+    background-image: url("../../../assets/icons/user-research.png");
+    background-position: center center;
+    background-repeat: no-repeat;
+    background-size: contain;
+    content: "";
+    display: block;
+    height: 3.5rem;
+    left: 1rem;
+    position: absolute;
+    width: 3.5rem;
+  }
+
+  .dismiss {
+    position: absolute;
+    right: 1rem;
+    top: 1rem;
+
+    button {
+      cursor: pointer;
+    }
+
+    .icon {
+      margin-top: -0.25rem;
+    }
+  }
+
+  a {
+    color: #6800cf !important;
+
+    &.external::after {
+      display: none;
+    }
+  }
+}

client/src/ui/molecules/user-research-survey/index.tsx

@@ -0,0 +1,50 @@
+import { useEffect, useState } from "react";
+import { Doc } from "../../../../../libs/types/document";
+import { Icon } from "../../atoms/icon";
+
+import "./index.scss";
+
+const LOCAL_STORAGE_KEY = "user_research.2023_07.hidden";
+
+export function UserResearchSurvey({ doc }: { doc: Doc }) {
+  const [hidden, setHidden] = useState(true);
+
+  useEffect(() => {
+    if (/en-US\/docs\/Learn(\/|$)/i.test(doc.mdn_url)) {
+      setHidden(
+        Boolean(JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY) || "false"))
+      );
+    }
+  }, [doc.mdn_url]);
+
+  const dismiss = () => {
+    setHidden(true);
+    localStorage.setItem(LOCAL_STORAGE_KEY, "true");
+  };
+
+  return hidden ? null : (
+    <div className="user-research-banner">
+      We want to hear from you! Help guide development on MDN and participate in
+      our{" "}
+      <a
+        href="https://survey.alchemer.com/s3/7444036/MDN-User-Research"
+        className="external"
+        target="_blank"
+        rel="noreferrer"
+      >
+        user research survey
+      </a>
+      .
+      <div className="dismiss">
+        <button
+          type="button"
+          aria-label={"Hide this survey"}
+          onClick={() => dismiss()}
+          title={"Hide this survey"}
+        >
+          <Icon name={"cancel"} />
+        </button>
+      </div>
+    </div>
+  );
+}