Skip to content

Commit

Permalink
Merge branch 'main' into dependabot/npm_and_yarn/react-3739722284
Browse files Browse the repository at this point in the history
  • Loading branch information
codemist authored Jan 10, 2025
2 parents 39bf517 + 8b97f7c commit a4d1458
Show file tree
Hide file tree
Showing 26 changed files with 991 additions and 291 deletions.
34 changes: 34 additions & 0 deletions config/nimbus.yaml
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,33 @@ features:
value: { "enabled": true }
- channel: production
value: { "enabled": true }
landing-page-redesign-plus-eligible-experiment:
description: Landing page redesign
variables:
enabled:
description: If the feature is enabled
type: Boolean
default: false
variant:
description: The landing page variant to show
type: LandingPageVariant
default: default
defaults:
- channel: local
value: {
"enabled": true,
"variant": redesign,
}
- channel: staging
value: {
"enabled": false,
"variant": default,
}
- channel: production
value: {
"enabled": false,
"variant": default,
}
enums:
OptionalBrokerScanInfoFields:
description: An enum of optional broker scan info fields
Expand All @@ -122,3 +149,10 @@ enums:
description: Only show a CTA button with the label “Get free scan”
ctaOnlyAlternativeLabel:
description: Only show a CTA button with the label “Sign up to get free scan”
LandingPageVariant:
description: An enum of landing page variants
variants:
default:
description: Show the default landing page
redesign:
description: Show the redesigned landing page
55 changes: 28 additions & 27 deletions src/app/(proper_react)/(redesign)/(public)/LandingView.module.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,35 +5,57 @@
flex-direction: column;
height: 100%;
}

.waitlistSection {
display: flex;
flex-direction: column;
align-items: center;
gap: tokens.$spacing-lg;
padding: tokens.$layout-md tokens.$spacing-md;

.waitlistTitle {
text-align: center;
font: tokens.$text-title-2xs;
font-weight: 600;
line-height: 1.4;
font-family: var(--font-inter);
color: tokens.$color-purple-70;
}

a {
align-self: center;
}
}

.navbar {
font: tokens.$text-body-xl;
padding: tokens.$layout-xs;
display: flex;
flex-direction: row;
justify-content: flex-start;
background-color: tokens.$color-grey-05;
.navbarLinksContainer {
ul {
display: flex;
flex-direction: column;
.navbarLinks {
a {
text-decoration: none;
color: tokens.$color-grey-50;
}
}
@media screen and (min-width: tokens.$screen-sm) {
justify-content: flex-end;
.navbarLinksContainer {
ul {
flex-direction: row;
justify-content: flex-end;
.navbarLinks {
a {
margin-left: tokens.$spacing-lg;
}
}
}
@media screen and (min-width: tokens.$screen-md) {
padding: tokens.$layout-xs tokens.$layout-xl;
.navbarLinksContainer {
.navbarLinks {
ul {
a {
margin-left: tokens.$spacing-xl;
}
}
Expand Down Expand Up @@ -396,24 +418,3 @@
align-self: center;
}
}

.waitlistSection {
display: flex;
flex-direction: column;
align-items: center;
gap: tokens.$spacing-lg;
padding: tokens.$layout-md tokens.$spacing-md;

.waitlistTitle {
text-align: center;
font: tokens.$text-title-2xs;
font-weight: 600;
line-height: 1.4;
font-family: var(--font-inter);
color: tokens.$color-purple-70;
}

a {
align-self: center;
}
}
15 changes: 13 additions & 2 deletions src/app/(proper_react)/(redesign)/(public)/LandingView.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { AccountsMetricsFlowProvider } from "../../../../contextProviders/accoun
import { CONST_URL_MONITOR_LANDING_PAGE_ID } from "../../../../constants";

const meta: Meta<typeof View> = {
title: "Pages/Public/Landing page",
title: "Pages/Public/Landing page/Default",
component: (props: ViewProps) => {
const experimentData =
props.experimentData ?? defaultExperimentData["Features"];
Expand All @@ -31,7 +31,18 @@ const meta: Meta<typeof View> = {
service: process.env.OAUTH_CLIENT_ID as string,
}}
>
<PublicShell l10n={getL10n("en")} countryCode={props.countryCode}>
<PublicShell
l10n={getL10n("en")}
countryCode={props.countryCode}
enabledFeatureFlags={[]}
experimentData={{
...defaultExperimentData["Features"],
"landing-page-redesign-plus-eligible-experiment": {
enabled: false,
variant: "default",
},
}}
>
<View {...props} experimentData={experimentData} />
</PublicShell>
</AccountsMetricsFlowProvider>
Expand Down
55 changes: 7 additions & 48 deletions src/app/(proper_react)/(redesign)/(public)/LandingView.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -26,9 +26,10 @@ import { TelemetryLink } from "../../../components/client/TelemetryLink";
import { HeresHowWeHelp } from "./HeresHowWeHelp";
import { ScanLimit } from "./ScanLimit";
import { FaqSection } from "./Faq";
import { AccountDeletionNotification } from "./AccountDeletionNotification";
import { ExperimentData } from "../../../../telemetry/generated/nimbus/experiments";
import { FreeScanCta } from "./FreeScanCta";
import { TopNavBar } from "./TopNavBar";
import { AccountDeletionNotification } from "./AccountDeletionNotification";

export type Props = {
eligibleForPremium: boolean;
Expand All @@ -43,7 +44,11 @@ export const View = (props: Props) => {
<>
<AccountDeletionNotification />
<main className={styles.wrapper}>
{props.eligibleForPremium && <TopNavBar l10n={props.l10n} />}
{props.eligibleForPremium && (
<div className={styles.navbar}>
<TopNavBar />
</div>
)}
<header className={styles.hero}>
<div className={styles.heroContent}>
<h1>{props.l10n.getString("landing-all-hero-title")}</h1>
Expand Down Expand Up @@ -258,52 +263,6 @@ export const View = (props: Props) => {
);
};

export const TopNavBar = ({ l10n }: { l10n: ExtendedReactLocalization }) => {
return (
<div className={styles.navbar}>
<div className={styles.navbarLinksContainer}>
<TelemetryLink
className={styles.navbarLinks}
href="/how-it-works"
eventData={{
link_id: "navbar_how_it_works",
}}
>
{l10n.getString("landing-premium-hero-navbar-link-how-it-works")}
</TelemetryLink>
<TelemetryLink
className={styles.navbarLinks}
href="#pricing"
eventData={{
link_id: "navbar_pricing",
}}
>
{l10n.getString("landing-premium-hero-navbar-link-pricing")}
</TelemetryLink>
<TelemetryLink
data-testid="navbar_faqs"
className={styles.navbarLinks}
href="#faq"
eventData={{
link_id: "navbar_faqs",
}}
>
{l10n.getString("landing-premium-hero-navbar-link-faqs")}
</TelemetryLink>
<TelemetryLink
className={styles.navbarLinks}
href="/breaches"
eventData={{
link_id: "navbar_recent_breaches",
}}
>
{l10n.getString("landing-premium-hero-navbar-link-recent-breaches")}
</TelemetryLink>
</div>
</div>
);
};

const HeroImage = (props: Props) => {
if (!props.eligibleForPremium) {
return (
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
@import "../../../tokens";

.wrapper {
display: flex;
flex-direction: column;
height: 100%;
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */

import type { Meta, StoryObj } from "@storybook/react";
import { View, Props as ViewProps } from "./LandingViewRedesign";
import { getL10n } from "../../../functions/l10n/storybookAndJest";
import { PublicShell } from "./PublicShell";
import { defaultExperimentData } from "../../../../telemetry/generated/nimbus/experiments";
import { AccountsMetricsFlowProvider } from "../../../../contextProviders/accounts-metrics-flow";
import { CONST_URL_MONITOR_LANDING_PAGE_ID } from "../../../../constants";

const meta: Meta<typeof View> = {
title: "Pages/Public/Landing page/Redesign",
component: (props: ViewProps) => {
const experimentData =
props.experimentData ?? defaultExperimentData["Features"];
return (
<AccountsMetricsFlowProvider
enabled={
experimentData["landing-page-redesign-plus-eligible-experiment"]
.enabled
}
metricsFlowParams={{
entrypoint: CONST_URL_MONITOR_LANDING_PAGE_ID,
entrypoint_experiment:
"landing-page-redesign-plus-eligible-experiment",
entrypoint_variation:
experimentData["landing-page-redesign-plus-eligible-experiment"]
.variant,
form_type: "email",
service: process.env.OAUTH_CLIENT_ID as string,
}}
>
<PublicShell
l10n={getL10n("en")}
countryCode={props.countryCode}
enabledFeatureFlags={["LandingPageRedesign"]}
experimentData={{
...defaultExperimentData["Features"],
"landing-page-redesign-plus-eligible-experiment": {
enabled: true,
variant: "redesign",
},
}}
>
<View {...props} experimentData={experimentData} />
</PublicShell>
</AccountsMetricsFlowProvider>
);
},
args: {
l10n: getL10n(),
},
};

export default meta;
type Story = StoryObj<typeof View>;

export const LandingRedesignUs: Story = {
name: "US visitors",
args: {
eligibleForPremium: true,
countryCode: "us",
scanLimitReached: false,
},
};

export const LandingRedesignUsScanLimit: Story = {
name: "US visitors - Scan limit reached",
args: {
eligibleForPremium: true,
countryCode: "us",
scanLimitReached: true,
},
};

export const LandingRedesignNonUs: Story = {
name: "Non-US visitors",
args: {
eligibleForPremium: false,
countryCode: "nz",
},
};

export const LandingRedesignNonUsDe: Story = {
name: "German",
args: {
eligibleForPremium: false,
countryCode: "de",
l10n: getL10n("de"),
},
};

export const LandingRedesignNonUsFr: Story = {
name: "French",
args: {
eligibleForPremium: false,
countryCode: "fr",
l10n: getL10n("fr"),
},
};
Loading

0 comments on commit a4d1458

Please sign in to comment.