Merge pull request #5592 from mozilla/mntor-4022

Update landing page experiment email input
mozilla · Feb 5, 2025 · 7037875 · 7037875
2 parents b5de02b + f8f1214
commit 7037875
Show file tree

Hide file tree

Showing 10 changed files with 28 additions and 13 deletions.
diff --git a/src/app/(proper_react)/(redesign)/(public)/FreeScanCta.tsx b/src/app/(proper_react)/(redesign)/(public)/FreeScanCta.tsx
@@ -20,7 +20,6 @@ import { useViewTelemetry } from "../../../hooks/useViewTelemetry";
 export const FreeScanCta = (
   props: Props & {
     experimentData: ExperimentData["Features"];
-    hasFloatingLabel?: boolean;
     showCtaOnly?: boolean;
   },
 ) => {
@@ -53,7 +52,7 @@ export const FreeScanCta = (
         placeholder={props.placeholder}
         label={props.label}
         ctaLabel={props.ctaLabel}
-        hasFloatingLabel={props.hasFloatingLabel}
+        labelPosition={props.labelPosition}
       />
     );
   }

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingView.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingView.tsx
@@ -72,6 +72,7 @@ export const View = (props: Props) => {
                   field: "entered_email_address_header",
                 }}
                 experimentData={props.experimentData}
+                labelPosition="bottom"
               />
             )}
           </div>
@@ -144,6 +145,7 @@ export const View = (props: Props) => {
                   field: "entered_email_address_second",
                 }}
                 experimentData={props.experimentData}
+                labelPosition="bottom"
               />
             </span>
             <div className={styles.illustration}>
@@ -191,6 +193,7 @@ export const View = (props: Props) => {
                   field: "entered_email_address_third",
                 }}
                 experimentData={props.experimentData}
+                labelPosition="bottom"
               />
             </span>
             <div className={styles.illustration}>
@@ -212,6 +215,7 @@ export const View = (props: Props) => {
             }}
             scanLimitReached={props.scanLimitReached}
             experimentData={props.experimentData}
+            labelPosition="bottom"
           />
         </div>
 
@@ -256,6 +260,7 @@ export const View = (props: Props) => {
             }}
             scanLimitReached={props.scanLimitReached}
             experimentData={props.experimentData}
+            labelPosition="bottom"
           />
         </div>
       </main>
@@ -324,10 +329,10 @@ const Plans = (props: Props) => {
             }}
             scanLimitReached={props.scanLimitReached}
             experimentData={props.experimentData}
+            labelPosition="bottom"
           />
         </div>
       )}
-
       <PlansTable
         aria-labelledby={headingId}
         premiumSubscriptionUrl={{

diff --git a/...oper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaInputBanner.module.scss b/...oper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaInputBanner.module.scss
@@ -24,6 +24,7 @@
 
     @media screen and (min-width: tokens.$screen-md) {
       form {
+        align-items: flex-end;
         flex-direction: row;
         button {
           flex: 0 0 auto;

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaInputBanner.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/CtaInputBanner.tsx
@@ -46,7 +46,6 @@ export const CtaInputBanner = (props: LandingPageProps) => {
             ctaLabel={props.l10n.getString(
               "landing-redesign-hero-cta-button-label",
             )}
-            hasFloatingLabel
           />
         )}
       </div>

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.module.scss b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.module.scss
@@ -67,13 +67,18 @@
     display: flex;
     flex-direction: column;
     gap: tokens.$spacing-md;
+
+    label {
+      color: tokens.$color-purple-05;
+    }
   }
 
   @media screen and (min-width: tokens.$screen-md) {
     max-width: tokens.$content-md;
     padding: 0 tokens.$layout-md;
 
     form {
+      align-items: flex-end;
       flex-direction: row;
       button {
         flex: 0 0 auto;

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/Hero.tsx
@@ -43,7 +43,6 @@ export const Hero = (props: LandingPageProps) => {
               ctaLabel={props.l10n.getString(
                 "landing-redesign-hero-cta-button-label",
               )}
-              hasFloatingLabel
             />
           )}
         </div>

diff --git a/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/InfoBlock.tsx b/src/app/(proper_react)/(redesign)/(public)/LandingViewRedesign/components/InfoBlock.tsx
@@ -89,7 +89,6 @@ export const InfoBlock = (props: LandingPageProps) => {
               <ArrowIcon alt="" />
             </>
           }
-          hasFloatingLabel
           showCtaOnly
         />
       )}

diff --git a/src/app/(proper_react)/(redesign)/(public)/SignUpForm.module.scss b/src/app/(proper_react)/(redesign)/(public)/SignUpForm.module.scss
@@ -9,7 +9,13 @@
   div:first-child {
     display: flex;
     flex: 1;
-    flex-direction: column-reverse;
+    flex-direction: column;
+  }
+
+  &.bottom {
+    div:first-child {
+      flex-direction: column-reverse;
+    }
   }
 
   input {

diff --git a/src/app/(proper_react)/(redesign)/(public)/SignUpForm.tsx b/src/app/(proper_react)/(redesign)/(public)/SignUpForm.tsx
@@ -39,6 +39,7 @@ export type Props = {
   placeholder?: string;
   ctaLabel?: string | ReactNode;
   hasFloatingLabel?: boolean;
+  labelPosition?: "top" | "bottom" | "floating";
 };
 
 export const SignUpForm = (props: Props) => {
@@ -79,7 +80,7 @@ export const SignUpForm = (props: Props) => {
   ) : (
     <form
       ref={refViewTelemetry as RefObject<HTMLFormElement | null>}
-      className={styles.form}
+      className={`${styles.form} ${props.labelPosition ? styles[props.labelPosition] : ""}`}
       onSubmit={onSubmit}
     >
       <InputField
@@ -99,7 +100,7 @@ export const SignUpForm = (props: Props) => {
             field_id: props.eventId.field,
           });
         }}
-        hasFloatingLabel={props.hasFloatingLabel}
+        hasFloatingLabel={props.labelPosition === "floating"}
       />
       <Button
         type="submit"

diff --git a/src/app/components/client/InputField.module.scss b/src/app/components/client/InputField.module.scss
@@ -39,7 +39,8 @@
 
   .inputField {
     background: tokens.$color-white;
-    border: 1px solid tokens.$color-grey-30;
+    border: none;
+    box-shadow: inset 0 0 0 1px tokens.$color-grey-30;
     border-radius: tokens.$border-radius-md;
     color: tokens.$color-black;
     // Add a bit more space: The next spacing step is too much.
@@ -54,19 +55,19 @@
       border-color: tokens.$color-error;
 
       &:focus {
-        border: 1px solid tokens.$color-error;
+        box-shadow: inset 0 0 0 1px tokens.$color-error;
         outline: tokens.$border-focus-width solid tokens.$color-error-focus;
       }
     }
 
     &:focus {
-      border: 1px solid tokens.$color-purple-70;
+      box-shadow: inset 0 0 0 1px tokens.$color-purple-70;
       outline: tokens.$border-focus-width solid tokens.$color-purple-40;
     }
 
     &:disabled {
       background: none;
-      border: 1px solid tokens.$color-grey-10;
+      box-shadow: inset 0 0 0 1px tokens.$color-grey-10;
     }
   }
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,6 @@ export const CtaInputBanner = (props: LandingPageProps) => { @@
                 ctaLabel={props.l10n.getString(
                   "landing-redesign-hero-cta-button-label",
                 )}
-                hasFloatingLabel
               />
             )}
           </div>
@@ Expand Down @@