Merge pull request #18873 from mozilla/FXA-11619

feat(settings): Add recovery key promo banner

Author: vpomerleau

packages/fxa-react/configs/tailwind.js

@@ -7,7 +7,9 @@ const tailwindcssDir = require('tailwindcss-dir');
 
 const screenSizes = {
   mobileLandscape: '480px',
-  tablet: { raw: '(min-width: 768px) and (min-height: 481px)' },
+  tablet: {
+    raw: '(min-width: 768px) and (min-height: 481px)',
+  },
   desktop: '1024px',
   desktopXl: '1441px',
 };

packages/fxa-settings/src/components/NotificationPromoBanner/en.ftl

@@ -0,0 +1,10 @@
+## Notification Promo Banner component
+account-recovery-notification-cta = Create
+account-recovery-notification-header-value = Don’t lose your data if you forget your password
+account-recovery-notification-header-description = Create an account recovery key to restore your sync browsing data if you ever forget your password.
+recovery-phone-promo-cta = Add recovery phone
+recovery-phone-promo-heading = Add extra protection to your account with a recovery phone
+recovery-phone-promo-description = Now you can sign in with a one-time-password via SMS if you can’t use your two-step authenticator app.
+recovery-phone-promo-info-link = Learn more about recovery and SIM swap risk
+promo-banner-dismiss-button =
+  .aria-label = Dismiss banner

packages/fxa-settings/src/components/NotificationPromoBanner/index.stories.tsx

@@ -0,0 +1,30 @@
+/* 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 React from 'react';
+import { Meta } from '@storybook/react';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+import PromotionBanner, {
+  AccountRecoveryKeyPromoBanner,
+  RecoveryPhonePromoBanner,
+} from '.';
+import { LocationProvider } from '@reach/router';
+
+export default {
+  title: 'Components/PromotionBanner',
+  component: PromotionBanner,
+  subcomponents: { AccountRecoveryKeyPromoBanner, RecoveryPhonePromoBanner },
+  decorators: [
+    withLocalization,
+    (Story) => (
+      <LocationProvider>
+        <Story />
+      </LocationProvider>
+    ),
+  ],
+} as Meta;
+
+export const AccountRecoveryKeyPromo = () => <AccountRecoveryKeyPromoBanner />;
+
+export const RecoveryPhonePromo = () => <RecoveryPhonePromoBanner />;