feat(placement): new gradient (#12197)

* feat(placement): new gradien * fix colors * support strings and numbers
mdn · Nov 28, 2024 · 6f891d9 · 6f891d9
1 parent a5cb491
commit 6f891d9
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 74 deletions.
diff --git a/client/src/playground/index.scss b/client/src/playground/index.scss
@@ -217,67 +217,6 @@ main.play {
       align-items: center;
       display: flex;
       flex-direction: column;
-      @media (min-width: 25rem) {
-        .place {
-          align-self: flex-end;
-          max-width: 20rem;
-          min-height: 10rem;
-
-          .pong-box2,
-          .pong-box {
-            width: 100%;
-
-            .pong {
-              flex-direction: row;
-            }
-
-            .pong-note {
-              margin-top: 0;
-            }
-          }
-
-          &.new-side {
-            height: 12rem;
-            max-width: 30rem;
-            min-height: 12rem;
-
-            .pong-box2 {
-              height: 21rem;
-              min-height: 0;
-              width: 25rem;
-
-              .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,
-                    var(--place-new-side-background) 16rem,
-                    transparent
-                  );
-                  flex-direction: column;
-                  height: 100%;
-                  justify-content: end;
-                  padding-left: 8rem;
-                  width: 100%;
-                }
-              }
-            }
-          }
-        }
-      }
 
       button.flag-example {
         align-self: flex-end;

diff --git a/client/src/playground/index.tsx b/client/src/playground/index.tsx
@@ -414,7 +414,7 @@ export default function Playground() {
             sandbox="allow-scripts allow-same-origin allow-forms"
           ></iframe>
           <Console vConsole={vConsole} />
-          <SidePlacement />
+          <SidePlacement extraClasses={["horizontal"]} />
         </section>
       </main>
     </>

diff --git a/client/src/ui/organisms/placement/index.scss b/client/src/ui/organisms/placement/index.scss
@@ -71,6 +71,7 @@ section.place {
         background: linear-gradient(
           to top,
           var(--place-new-side-background) 9rem,
+          transparent 12rem,
           transparent
         );
         border-radius: var(--border-radius);
@@ -435,3 +436,63 @@ div.empty-place {
     }
   }
 }
+
+@media (min-width: 25rem) {
+  .place.horizontal {
+    align-self: flex-end;
+    max-width: 20rem;
+    min-height: 10rem;
+
+    .pong-box2,
+    .pong-box {
+      width: 100%;
+
+      .pong {
+        flex-direction: row;
+      }
+
+      .pong-note {
+        margin-top: 0;
+      }
+    }
+
+    &.new-side {
+      height: 12rem;
+      max-width: 30rem;
+      min-height: 12rem;
+
+      .pong-box2 {
+        height: 21rem;
+        min-height: 0;
+        width: 25rem;
+
+        .pong-cta {
+          margin: 0.5rem auto 1rem 1rem;
+        }
+
+        .pong-note {
+          margin: 0.5rem 0.5rem auto auto;
+        }
+
+        .pong {
+          > img {
+            height: 100%;
+            position: absolute;
+            width: auto;
+            z-index: 1;
+          }
+
+          > div.content {
+            align-items: end;
+            background: var(--place-new-side-background);
+            flex-direction: column;
+            height: 100%;
+            justify-content: end;
+            padding-left: 10rem;
+            width: 100%;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/client/src/ui/organisms/placement/index.tsx b/client/src/ui/organisms/placement/index.tsx
@@ -37,7 +37,11 @@ function viewed(pong?: PlacementData) {
     );
 }
 
-export function SidePlacement() {
+export function SidePlacement({
+  extraClasses = [],
+}: {
+  extraClasses?: string[];
+} = {}) {
   const placementData = usePlacement();
   const { textColor, backgroundColor, textColorDark, backgroundColorDark } =
     placementData?.side?.colors || {};
@@ -54,11 +58,11 @@ export function SidePlacement() {
   );
 
   return !placementData?.side ? (
-    <section className="place side"></section>
+    <section className={["place", "side", ...extraClasses].join(" ")}></section>
   ) : placementData.side.cta && placementData.side.heading ? (
     <PlacementInner
       pong={placementData.side}
-      extraClassNames={["side", "new-side"]}
+      extraClassNames={["side", "new-side", ...extraClasses]}
       imageWidth={125}
       imageHeight={125}
       cta={placementData.side.cta}
@@ -69,7 +73,7 @@ export function SidePlacement() {
   ) : (
     <PlacementInner
       pong={placementData.side}
-      extraClassNames={["side"]}
+      extraClassNames={["side", ...extraClasses]}
       imageWidth={130}
       imageHeight={100}
       renderer={RenderSideOrTopBanner}

diff --git a/libs/pong/pong2.js b/libs/pong/pong2.js
@@ -2,6 +2,16 @@
 import he from "he";
 import anonymousIpByCC from "./cc2ip.js";
 
+function fixupColor(hash) {
+  if (typeof hash !== "string" && typeof hash !== "number") {
+    return undefined;
+  } else if (hash?.startsWith?.("rgb") || hash?.startsWith?.("#")) {
+    return hash;
+  } else {
+    return `#${hash}`;
+  }
+}
+
 export function createPong2GetHandler(zoneKeys, coder) {
   return async (body, countryCode, userAgent) => {
     let { pongs = null } = body;
@@ -71,14 +81,16 @@ export function createPong2GetHandler(zoneKeys, coder) {
                 cta: CallToAction && he.decode(CallToAction),
                 heading: Heading && he.decode(Heading),
                 colors: {
-                  textColor: TextColor || TextColorLight,
-                  backgroundColor: BackgroundColor || BackgroundColorLight,
-                  ctaTextColor: CtaTextColorLight,
-                  ctaBackgroundColor: CtaBackgroundColorLight,
-                  textColorDark: TextColorDark,
-                  backgroundColorDark: BackgroundColorDark,
-                  ctaTextColorDark: CtaTextColorDark,
-                  ctaBackgroundColorDark: CtaBackgroundColorDark,
+                  textColor: fixupColor(TextColor || TextColorLight),
+                  backgroundColor: fixupColor(
+                    BackgroundColor || BackgroundColorLight
+                  ),
+                  ctaTextColor: fixupColor(CtaTextColorLight),
+                  ctaBackgroundColor: fixupColor(CtaBackgroundColorLight),
+                  textColorDark: fixupColor(TextColorDark),
+                  backgroundColorDark: fixupColor(BackgroundColorDark),
+                  ctaTextColorDark: fixupColor(CtaTextColorDark),
+                  ctaBackgroundColorDark: fixupColor(CtaBackgroundColorDark),
                 },
               },
       };