enhance(curriculum): add inline scrim design to custom element (#11866)

client/config/webpack.config.js

@@ -40,12 +40,13 @@ function config(webpackEnv) {
   const env = getClientEnvironment();
 
   // common function to get style loaders
-  const getStyleLoaders = (cssOptions, preProcessor) => {
+  const getStyleLoaders = (cssOptions, preProcessor, extract = true) => {
     const loaders = [
-      isEnvDevelopment && resolve.sync("style-loader"),
-      isEnvProduction && {
-        loader: MiniCssExtractPlugin.loader,
-      },
+      extract && isEnvDevelopment && resolve.sync("style-loader"),
+      extract &&
+        isEnvProduction && {
+          loader: MiniCssExtractPlugin.loader,
+        },
       {
         loader: resolve.sync("css-loader"),
         options: cssOptions,
@@ -243,10 +244,6 @@ function config(webpackEnv) {
               resourceQuery: /raw/,
               type: "asset/source",
             },
-            {
-              resourceQuery: /url/,
-              type: "asset/resource",
-            },
             {
               test: [/\.avif$/, /\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
               type: "asset/resource",
@@ -362,6 +359,22 @@ function config(webpackEnv) {
               sideEffects: true,
             },
             // Opt-in support for SASS (using .scss or .sass extensions).
+            {
+              test: /\.(scss|sass)$/,
+              with: { type: "css" },
+              use: getStyleLoaders(
+                {
+                  importLoaders: 3,
+                  sourceMap: isEnvProduction
+                    ? shouldUseSourceMap
+                    : isEnvDevelopment,
+                  exportType: "css-style-sheet",
+                },
+                "sass-loader",
+                false
+              ),
+              sideEffects: true,
+            },
             {
               test: /\.(scss|sass)$/,
               use: getStyleLoaders(

client/package.json

@@ -4,6 +4,9 @@
   "license": "MPL-2.0",
   "type": "module",
   "babel": {
+    "generatorOpts": {
+      "importAttributesKeyword": "with"
+    },
     "presets": [
       "react-app"
     ]

client/src/curriculum/index.scss

@@ -289,9 +289,15 @@
       }
 
       scrim-inline {
+        aspect-ratio: 1.5;
         display: block;
-        height: 14.25rem;
-        width: 22rem;
+        margin: 0.5rem auto;
+        max-width: 36rem;
+        width: 100%;
+      }
+
+      p:has(> scrim-inline:only-child) {
+        margin: 1rem 0;
       }
     }
   }

client/src/curriculum/landing.tsx

@@ -16,6 +16,7 @@ import "./landing.scss";
 import { ProseSection } from "../../../libs/types/document";
 import { PartnerBanner } from "./partner-banner";
 import { useIsServer } from "../hooks";
+import scrimBg from "../assets/curriculum/landing-scrim.png";
 
 const ScrimInline = lazy(() => import("./scrim-inline"));
 
@@ -141,7 +142,15 @@ function About({ section }) {
         <div className="arrow"></div>
         <section className="scrim-wrapper">
           <div className="scrim-border">
-            <Suspense>{!isServer && <ScrimInline url={SCRIM_URL} />}</Suspense>
+            <Suspense>
+              {!isServer && (
+                <ScrimInline
+                  url={SCRIM_URL}
+                  img={scrimBg}
+                  scrimTitle="MDN + Scrimba partnership announcement scrim"
+                />
+              )}
+            </Suspense>
           </div>
           <p>
             Learn our curriculum with Scrimba's interactive{" "}

client/src/curriculum/scrim-inline.global.css

@@ -0,0 +1,8 @@
+@font-face {
+  font-family: "BarlowCondensed-SemiBold";
+  font-weight: 600;
+  font-display: block;
+  src:
+    local("BarlowCondensed-SemiBold"),
+    url("../assets/fonts/BarlowCondensed-SemiBold.woff2") format("woff2");
+}

client/src/curriculum/scrim-inline.scss

@@ -0,0 +1,184 @@
+:host {
+  display: block;
+  overflow: hidden;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+.visually-hidden {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  white-space: nowrap !important;
+  width: 1px !important;
+}
+
+button {
+  appearance: none;
+  background: none;
+  border: none;
+  padding: 0;
+}
+
+dialog {
+  display: contents;
+
+  &[open] {
+    background-color: #0009;
+    height: 90vh;
+    width: 90vw;
+  }
+}
+
+.inner {
+  background-color: #000;
+  border: 1px solid #000;
+  container-type: size;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+
+.header {
+  align-items: center;
+  background: #000;
+  display: flex;
+  gap: 0.25rem;
+  margin: 0;
+  min-height: 1.75rem;
+  padding: 0 0.5rem;
+  width: 100%;
+
+  span {
+    color: #fff;
+    font-size: var(--type-tiny-font-size);
+    margin-right: auto;
+  }
+}
+
+.toggle,
+.external {
+  background-color: #fff;
+  cursor: pointer;
+  height: 1rem;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  width: 1rem;
+
+  &:hover {
+    background-color: var(--curriculum-color);
+  }
+
+  &:focus-visible {
+    outline-color: var(--accent-primary);
+    outline-offset: 1px;
+    outline-style: auto;
+  }
+}
+
+.toggle {
+  &.enter {
+    mask-image: url("../assets/icons/fullscreen-enter.svg");
+  }
+
+  &.exit {
+    mask-image: url("../assets/icons/cancel.svg");
+  }
+}
+
+.external {
+  mask-image: url("../assets/icons/external.svg");
+  mask-size: 75%;
+}
+
+.body {
+  flex: 1;
+  font-size: 4cqmin;
+  position: relative;
+}
+
+.background {
+  background-color: #453c78;
+  background-image: url("../assets/curriculum/scrimba-logo.svg"),
+    url("../assets/curriculum/scrim-hexagons.svg"),
+    url("../assets/curriculum/scrim-bg.png");
+  background-position:
+    1.5em 1.5em,
+    right,
+    center;
+  background-repeat: no-repeat;
+  background-size:
+    auto 0.6em,
+    contain,
+    cover;
+  inset: 0;
+  position: absolute;
+
+  h1 {
+    bottom: 0;
+    color: #fff;
+    font-family: "BarlowCondensed-SemiBold", "Inter", sans-serif;
+    font-size: 3em;
+    font-weight: 600;
+    left: 0;
+    line-height: 1;
+    margin: 0.5em;
+    position: absolute;
+    text-transform: uppercase;
+    text-wrap: balance;
+    width: 60%;
+  }
+}
+
+.background-noise {
+  filter: url("#noise");
+  inset: 0;
+  mix-blend-mode: soft-light;
+  position: absolute;
+}
+
+.open,
+iframe {
+  border: none;
+  height: 100%;
+  position: absolute;
+  width: 100%;
+}
+
+.open {
+  --color: #8cb4ffcc;
+  background-image: var(--scrim-img);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+  cursor: pointer;
+  font-size: inherit;
+
+  &:hover {
+    --color: #8cb4ffe5;
+  }
+
+  svg {
+    height: 9em;
+    stroke-width: 2px;
+    width: auto;
+
+    circle {
+      fill: var(--color);
+    }
+
+    path {
+      fill: #fff;
+    }
+  }
+}