feat(pong): new design experiment (#11367)

* feat(pong): new design

Author: fiji-flo

Diff for: client/src/app.scss

@@ -208,17 +208,17 @@ pre {
 
 a {
   color: var(--text-link);
+}
 
-  &.external:after {
-    background-color: var(--icon-primary);
-    content: "";
-    display: inline-flex;
-    height: 10px;
-    margin-left: 4px;
-    mask-image: url("./assets/icons/external.svg");
-    mask-size: cover;
-    width: 10px;
-  }
+.external:after {
+  background-color: var(--icon-primary);
+  content: "";
+  display: inline-flex;
+  height: 10px;
+  margin-left: 4px;
+  mask-image: url("./assets/icons/external.svg");
+  mask-size: cover;
+  width: 10px;
 }
 
 button.button[disabled],

Diff for: client/src/blog/post.scss

@@ -67,6 +67,7 @@
         grid-area: place;
         margin-top: 0;
 
+        > .pong-box2,
         > .pong-box {
           margin-top: 2rem;
         }

Diff for: client/src/playground/index.scss

@@ -219,6 +219,7 @@ main.play {
           max-width: 20rem;
           min-height: 10rem;
 
+          .pong-box2,
           .pong-box {
             width: 100%;
 
@@ -230,6 +231,49 @@ main.play {
               margin-top: 0;
             }
           }
+
+          &.new-side {
+            height: 12rem;
+            max-width: 30rem;
+            min-height: 12rem;
+
+            .pong-box2 {
+              height: 21rem;
+              min-height: 0;
+              width: 25rem;
+
+              > div {
+                .pong-cta {
+                  margin: 0.5rem auto 1rem 1rem;
+                }
+
+                .pong-note {
+                  margin: 0.5rem 0.5rem auto auto;
+                }
+
+                .pong {
+                  > img {
+                    height: 100%;
+                    width: auto;
+                  }
+
+                  > div.content {
+                    align-items: end;
+                    background: linear-gradient(
+                      to left,
+                      #111 16rem,
+                      transparent
+                    );
+                    flex-direction: column;
+                    height: 100%;
+                    justify-content: end;
+                    padding-left: 8rem;
+                    width: 100%;
+                  }
+                }
+              }
+            }
+          }
         }
       }
 

Diff for: client/src/ui/organisms/placement/index.scss

@@ -10,6 +10,102 @@ section.place {
     text-decoration: none;
   }
 
+  .pong-box2 {
+    --border-radius: 0.5rem;
+    border: 1px solid var(--border-primary);
+    border-radius: var(--border-radius);
+    margin: 0;
+    min-height: 20rem;
+    overflow: hidden;
+    position: relative;
+    width: 11rem;
+
+    > div {
+      height: 100%;
+      width: 100%;
+
+      .pong-note {
+        background-color: #fff6;
+        border-radius: 0.25rem;
+        color: #fff;
+        font-size: 0.625rem;
+        margin: 0.5rem;
+        padding: 0 0.25rem;
+        position: absolute;
+        right: 0;
+        text-decoration: none;
+        text-decoration: underline;
+        text-transform: uppercase;
+        top: 0;
+        width: max-content;
+
+        &:hover {
+          background-color: #fff;
+          color: #111;
+        }
+      }
+
+      .pong {
+        height: 100%;
+        width: 100%;
+
+        > img {
+          height: auto;
+          width: 100%;
+        }
+
+        > div.content {
+          background: linear-gradient(to top, #111 9rem, transparent);
+          border-radius: var(--border-radius);
+          color: #fff;
+          display: flex;
+          flex-direction: column;
+          gap: 0.25rem;
+          height: 100%;
+          justify-content: end;
+          position: absolute;
+          top: 0;
+          width: 100%;
+
+          strong {
+            font-size: 0.8875rem;
+            line-height: 1.25;
+            padding: 0 1rem;
+          }
+
+          span {
+            font-size: 0.75rem;
+            line-height: 1.25;
+            padding: 0 1rem;
+          }
+
+          .pong-cta {
+            --color: #fff;
+            --icon-primary: var(--color);
+            background-color: #fff1;
+            border: solid 2px;
+            border-radius: 2rem;
+            color: var(--color);
+            font-size: 0.75rem;
+            font-weight: 600;
+            margin: 0.5rem auto 1rem 1rem;
+            padding: 0.5em 1em;
+            transition: all 0.3s ease-in-out;
+
+            &::after {
+              transition: all 0.3s ease-in-out;
+            }
+
+            &:hover {
+              --color: #111;
+              background-color: #fff;
+            }
+          }
+        }
+      }
+    }
+  }
+
   .pong-box {
     background-color: var(--background-secondary);
     border: 1px solid var(--border-primary);
@@ -82,6 +178,10 @@ section.place {
     min-height: 20rem;
   }
 
+  &.new-side {
+    min-height: 22rem;
+  }
+
   &.top {
     align-items: center;
     display: grid;

Diff for: client/src/ui/organisms/placement/index.tsx

@@ -30,6 +30,7 @@ interface PlacementRenderArgs {
   style: object;
   version?: number;
   typ: string;
+  heading?: string;
 }
 
 const INTERSECTION_OPTIONS = {
@@ -52,6 +53,16 @@ export function SidePlacement() {
 
   return !placementData?.side ? (
     <section className="place side"></section>
+  ) : placementData.side.cta ? (
+    <PlacementInner
+      pong={placementData.side}
+      extraClassNames={["side", "new-side"]}
+      imageWidth={125}
+      imageHeight={125}
+      cta={placementData.side.cta}
+      renderer={RenderNewSideBanner}
+      typ="side"
+    ></PlacementInner>
   ) : (
     <PlacementInner
       pong={placementData.side}
@@ -274,7 +285,7 @@ export function PlacementInner({
     };
   }, [isVisible, isIntersecting, sendViewed]);
 
-  const { image, copy, alt, click, version } = pong || {};
+  const { image, copy, alt, click, version, heading } = pong || {};
   return (
     <>
       {!isServer &&
@@ -293,6 +304,7 @@ export function PlacementInner({
           style,
           version,
           typ,
+          heading,
         })}
     </>
   );
@@ -480,3 +492,78 @@ function RenderBottomBanner({
     </div>
   );
 }
+
+function RenderNewSideBanner({
+  place,
+  extraClassNames = [],
+  click,
+  image,
+  alt,
+  imageWidth,
+  imageHeight,
+  copy,
+  cta,
+  user,
+  style,
+  version = 1,
+  typ,
+  heading,
+}: PlacementRenderArgs) {
+  return (
+    <section
+      ref={place}
+      className={["place", ...extraClassNames].join(" ")}
+      style={style}
+    >
+      <p className="pong-box2">
+        <div>
+          <a
+            className="pong"
+            data-glean={`pong: pong->click ${typ}`}
+            href={`/pong/click?code=${encodeURIComponent(
+              click
+            )}&version=${version}`}
+            target="_blank"
+            rel="sponsored noreferrer"
+          >
+            <img
+              src={`/pimg/${encodeURIComponent(image || "")}`}
+              aria-hidden={!Boolean(alt)}
+              alt={alt || ""}
+              width={imageWidth}
+              height={imageHeight}
+            ></img>
+            <div className="content">
+              <strong>{heading}</strong>
+              <span>{copy}</span>
+              {cta && <span className="pong-cta external">{cta}</span>}
+            </div>
+          </a>
+          <a
+            href="/en-US/advertising"
+            className="pong-note"
+            data-glean="pong: pong->about"
+            target="_blank"
+            rel="noreferrer"
+          >
+            Ad
+          </a>
+        </div>
+      </p>
+
+      <a
+        className="no-pong"
+        data-glean={
+          "pong: " + (user?.isSubscriber ? "pong->settings" : "pong->plus")
+        }
+        href={
+          user?.isSubscriber
+            ? "/en-US/plus/settings?ref=nope"
+            : "/en-US/plus?ref=nope#subscribe"
+        }
+      >
+        Don't want to see ads?
+      </a>
+    </section>
+  );
+}

Diff for: libs/pong/pong2.js

@@ -21,13 +21,15 @@ export function createPong2GetHandler(zoneKeys, coder) {
           )}${userAgent ? `&useragent=${encodeURIComponent(userAgent)}` : ""}`
         )
       ).json();
+
       const {
         ads: [
           {
             statlink = null,
             statimp,
             Description,
             Image,
+            LargeImage,
             ImageTitle,
             BackgroundColor,
             BackgroundColorLight,
@@ -40,6 +42,7 @@ export function createPong2GetHandler(zoneKeys, coder) {
             TextColor,
             TextColorLight,
             TextColorDark,
+            Heading,
           },
         ] = [],
       } = res;
@@ -51,10 +54,11 @@ export function createPong2GetHandler(zoneKeys, coder) {
             : {
                 click: coder.encodeAndSign(statlink),
                 view: coder.encodeAndSign(statimp),
-                image: coder.encodeAndSign(Image),
+                image: coder.encodeAndSign(LargeImage || Image),
                 alt: ImageTitle && he.decode(ImageTitle),
                 copy: Description && he.decode(Description),
                 cta: CallToAction && he.decode(CallToAction),
+                heading: Heading && he.decode(Heading),
                 colors: {
                   textColor: TextColor || TextColorLight,
                   backgroundColor: BackgroundColor || BackgroundColorLight,
@@ -91,7 +95,16 @@ export function createPong2GetHandler(zoneKeys, coder) {
           if (v === null) {
             return null;
           }
-          const { copy, image, alt, click, view, cta, colors = {} } = v;
+          const {
+            copy,
+            image,
+            alt,
+            click,
+            view,
+            cta,
+            colors,
+            heading = {},
+          } = v;
           return [
             p,
             {
@@ -103,6 +116,7 @@ export function createPong2GetHandler(zoneKeys, coder) {
               colors,
               click,
               view,
+              heading,
               version: 2,
             },
           ];

Diff for: libs/pong/types.d.ts

@@ -19,4 +19,5 @@ export type Payload = {
   cta?: string;
   colors?: Colors;
   version: number;
+  heading?: string;
 };