Add stories for header and footer components

src/emails/StorybookEmailRenderer.tsx

@@ -55,7 +55,7 @@ export const StorybookEmailRenderer = (props: Props) => {
         padding: 20px;
         display: flex;
         flex-direction: column;
-        align-items: center;
+        align-items: stretch;
         gap: 20px;
       }
       .wrapper .plaintext {
@@ -89,7 +89,7 @@ export const StorybookEmailRenderer = (props: Props) => {
                   `
                 : renderResult.html,
           }}
-          className={props.emulateDarkMode ? "dark-mode-enforced" : ""}
+          className={`body ${props.emulateDarkMode ? "dark-mode-enforced" : ""}`}
         />
       </section>
       <section className="plaintext">

src/emails/components/EmailFooter.stories.tsx

@@ -0,0 +1,43 @@
+/* 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 { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { EmailFooter, Props } from "./EmailFooter";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Footer",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <EmailFooter {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const RepeatEmail: Story = {
+  name: "Repeat email",
+  args: {
+    isOneTimeEmail: false,
+  },
+};
+
+export const OneTimeEmail: Story = {
+  name: "One-time email",
+  args: {
+    isOneTimeEmail: true,
+  },
+};

src/emails/components/EmailHeader.stories.tsx

@@ -0,0 +1,33 @@
+/* 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 { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { EmailHeader, Props } from "./EmailHeader";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Header",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <EmailHeader {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const EmailHeaderStory: Story = {
+  name: "Header",
+};

src/emails/components/EmailHero.stories.tsx

@@ -0,0 +1,37 @@
+/* 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 { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { EmailHero, Props } from "./EmailHero";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Hero",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <EmailHero {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const EmailHeroStory: Story = {
+  name: "Hero",
+  args: {
+    heading: "Email heading",
+    subheading: "Email subheading",
+  },
+};

src/emails/components/RedesignedEmailFooter.stories.tsx

@@ -0,0 +1,40 @@
+/* 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 { FC } from "react";
+import { StorybookEmailRenderer } from "../StorybookEmailRenderer";
+import { RedesignedEmailFooter, Props } from "./EmailFooter";
+import { getL10n } from "../../app/functions/l10n/storybookAndJest";
+
+const meta: Meta<FC<Props>> = {
+  title: "Emails/Components/Redesigned footer",
+  component: (props: Props) => (
+    <StorybookEmailRenderer plainTextVersion={null}>
+      <mjml>
+        <mj-body>
+          <RedesignedEmailFooter {...props} />
+        </mj-body>
+      </mjml>
+    </StorybookEmailRenderer>
+  ),
+  args: {
+    l10n: getL10n("en"),
+    utm_campaign: "storybook",
+  },
+};
+
+export default meta;
+type Story = StoryObj<FC<Props>>;
+
+export const RepeatEmail: Story = {
+  name: "Without unsubscribe link",
+};
+
+export const WithUnsubscribeLink: Story = {
+  name: "With unsubscribe link",
+  args: {
+    unsubscribeLink: "https://example.com/unsubscribe",
+  },
+};

src/emails/templates/boilerplate/BoilerplateEmail.tsx

@@ -4,8 +4,8 @@
 
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
 
 export type Props = {
   subscriber: SanitizedSubscriberRow;

src/emails/templates/breachAlert/BreachAlertEmail.tsx

@@ -4,8 +4,11 @@
 
 import type { SubscriberRow } from "knex/types/tables";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter, RedesignedEmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
+import {
+  EmailFooter,
+  RedesignedEmailFooter,
+} from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
 import { HibpLikeDbBreach } from "../../../utils/hibp";
 import { BreachCard } from "../../components/BreachCard";
 import { FeatureFlagName } from "../../../db/tables/featureFlags";
@@ -19,7 +22,7 @@ import { DashboardSummary } from "../../../app/functions/server/dashboard";
 import { ResolutionRelevantBreachDataTypes } from "../../../app/functions/universal/breach";
 import { EmailBanner } from "../../components/EmailBanner";
 import { DataPointCount } from "../../components/EmailDataPointCount";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;

src/emails/templates/firstDataBrokerRemovalFixed/FirstDataBrokerRemovalFixed.tsx

@@ -3,9 +3,9 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;

src/emails/templates/monthlyActivityFree/MonthlyActivityFreeEmail.tsx

@@ -3,15 +3,15 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import type { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { RedesignedEmailFooter } from "../EmailFooter";
+import { RedesignedEmailFooter } from "../../components/EmailFooter";
 import { EmailHero } from "../../components/EmailHero";
 import { DataPointCount } from "../../components/EmailDataPointCount";
 import { DashboardSummary } from "../../../app/functions/server/dashboard";
 import { EmailBanner } from "../../components/EmailBanner";
 import { getPremiumSubscriptionUrl } from "../../../app/functions/server/getPremiumSubscriptionInfo";
 import { isEligibleForPremium } from "../../../app/functions/universal/premium";
 import { getSignupLocaleCountry } from "../../functions/getSignupLocaleCountry";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { sumSanitizedDataPoints } from "../../functions/reduceSanitizedDataPoints";
 import { modifyAttributionsForUrl } from "../../../app/functions/universal/attributions";

src/emails/templates/monthlyActivityPlus/MonthlyActivityPlusEmail.tsx

@@ -5,9 +5,9 @@
 import { DashboardSummary } from "../../../app/functions/server/dashboard";
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   subscriber: SanitizedSubscriberRow;

src/emails/templates/signupReport/SignupReportEmail.tsx

@@ -4,11 +4,11 @@
 
 import { Fragment } from "react";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
 import { HibpLikeDbBreach } from "../../../utils/hibp";
 import { BreachCard } from "../../components/BreachCard";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;

src/emails/templates/verifyEmailAddress/VerifyEmailAddressEmail.tsx

@@ -4,9 +4,9 @@
 
 import { SanitizedSubscriberRow } from "../../../app/functions/server/sanitize";
 import { ExtendedReactLocalization } from "../../../app/functions/l10n";
-import { EmailFooter } from "../EmailFooter";
-import { EmailHeader } from "../EmailHeader";
-import { HeaderStyles, MetaTags } from "../HeaderStyles";
+import { EmailFooter } from "../../components/EmailFooter";
+import { EmailHeader } from "../../components/EmailHeader";
+import { HeaderStyles, MetaTags } from "../../components/HeaderStyles";
 
 export type Props = {
   l10n: ExtendedReactLocalization;