Merge pull request #17903 from mozilla/FXA-9714

feat(settings): New banner component with updated styling
mozilla · Nov 6, 2024 · 1cc8c75 · 1cc8c75
2 parents 5af8f3f + 7745fe4
commit 1cc8c75
Show file tree

Hide file tree

Showing 125 changed files with 1,331 additions and 1,289 deletions.
diff --git a/packages/functional-tests/pages/resetPassword.ts b/packages/functional-tests/pages/resetPassword.ts
@@ -71,11 +71,11 @@ export class ResetPasswordPage extends BaseLayout {
   }
 
   get passwordResetSuccessMessage() {
-    return this.page.getByText('Your password has been reset');
+    return this.page.getByText(/Your password has been reset/);
   }
 
   get passwordResetSuccessRecovyerKeyReminderHeading() {
-    return this.page.getByText('Your password has been reset.');
+    return this.page.getByText(/Your password has been reset/);
   }
 
   get passwordResetSuccessRecovyerKeyReminderMessage() {

diff --git a/packages/functional-tests/pages/settings/layout.ts b/packages/functional-tests/pages/settings/layout.ts
@@ -23,11 +23,13 @@ export abstract class SettingsLayout extends BaseLayout {
   }
 
   get alertBar() {
-    return this.page.getByTestId('alert-bar-content');
+    return this.page.getByRole('alert');
   }
 
   get alertBarDismissButton() {
-    return this.page.getByTestId('alert-bar-dismiss');
+    return this.page
+      .getByRole('alert')
+      .getByRole('button', { name: 'Close message' });
   }
 
   get avatarDropDownMenu() {

diff --git a/packages/functional-tests/tests/oauth/signinTokenCode.spec.ts b/packages/functional-tests/tests/oauth/signinTokenCode.spec.ts
@@ -120,7 +120,9 @@ test.describe('severity-2 #smoke', () => {
       await expect(signinTokenCode.resendCodeButton).toBeVisible();
       await signinTokenCode.resendCodeButton.click();
 
-      await expect(page.getByText(/Email re-?sent/)).toBeVisible();
+      await expect(
+        page.getByText(/A new code was sent to your email./)
+      ).toBeVisible();
 
       // Retrieves the code from the new email
       code = await target.emailClient.getVerifyLoginCode(credentials.email);

diff --git a/packages/functional-tests/tests/resetPassword/resetPassword.spec.ts b/packages/functional-tests/tests/resetPassword/resetPassword.spec.ts
@@ -109,7 +109,9 @@ test.describe('severity-1 #smoke', () => {
 
     resetPassword.resendButton.click();
 
-    await expect(resetPassword.statusBar).toHaveText(/Email re-?sent/);
+    await expect(resetPassword.statusBar).toHaveText(
+      /A new code was sent to your email./
+    );
   });
 
   test('open /reset_password page, enter unknown email, wait for error', async ({

diff --git a/packages/functional-tests/tests/signin/signinBlocked.spec.ts b/packages/functional-tests/tests/signin/signinBlocked.spec.ts
@@ -97,7 +97,9 @@ test.describe('severity-2 #smoke', () => {
       await signinUnblock.resendCodeButton.click();
 
       //Verify success message
-      await expect(page.getByText(/Email re-?sent/)).toBeVisible();
+      await expect(
+        page.getByText(/A new code was sent to your email./)
+      ).toBeVisible();
 
       //Unblock the email
       const code = await target.emailClient.getUnblockCode(credentials.email);

diff --git a/packages/functional-tests/tests/syncV3/signIn.spec.ts b/packages/functional-tests/tests/syncV3/signIn.spec.ts
@@ -48,7 +48,9 @@ test.describe('severity-2 #smoke', () => {
       // Click resend link
       await expect(page).toHaveURL(/signin_token_code/);
       await signinTokenCode.resendCodeButton.click();
-      await expect(page.getByText(/Email re-?sent/)).toBeVisible();
+      await expect(
+        page.getByText(/A new code was sent to your email./)
+      ).toBeVisible();
       const code = await target.emailClient.getVerifyLoginCode(
         credentials.email
       );

diff --git a/packages/fxa-settings/src/components/Banner/en.ftl b/packages/fxa-settings/src/components/Banner/en.ftl
@@ -1,13 +1,7 @@
 ## Banner component
-## Used to show success, error or info messages
 
-# This aria-label applies to the dismiss/close button of the banner
-# This text is for screen-readers
-banner-dismiss-button =
-  .aria-label = Close
+resend-code-success-banner-heading = A new code was sent to your email.
+resend-link-success-banner-heading = A new link was sent to your email.
 
-# This message is displayed in a success banner
-# $accountsEmail is the senderʼs email address (origin of the email containing a new link). (e.g. [email protected])
-link-expired-resent-link-success-message = Email re-sent. Add { $accountsEmail } to your contacts to ensure a smooth delivery.
-# Error message displayed in an error banner. This is a general message when the cause of the error is unclear.
-link-expired-resent-code-error-message = Something went wrong. A new code could not be sent.
+# $accountsEmail is the Mozilla accounts sender email address (e.g. [email protected])
+resend-success-banner-description = Add { $accountsEmail } to your contacts to ensure a smooth delivery.
diff --git a/packages/fxa-settings/src/components/Banner/index.stories.tsx b/packages/fxa-settings/src/components/Banner/index.stories.tsx
@@ -3,53 +3,200 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 import React from 'react';
-import Banner, { BannerType, FancyBanner } from '.';
 import { Meta } from '@storybook/react';
 import AppLayout from '../AppLayout';
-import { Subject } from './mocks';
 import { withLocalization } from 'fxa-react/lib/storybooks';
+import Banner, { ResendCodeSuccessBanner, ResendLinkSuccessBanner } from '.';
+import { sampleDescription, sampleHeading, sampleCtaText } from './mocks';
+
+// TODO in FXA-10621 - This component is a good candidate for using the controls panel once enabled
 
 export default {
   title: 'Components/Banner',
   component: Banner,
+  subcomponents: { ResendCodeSuccessBanner, ResendLinkSuccessBanner },
   decorators: [withLocalization],
 } as Meta;
 
-export const Info = () => (
+export const Variation1aHeading = () => (
+  <AppLayout>
+    <Banner type="error" content={{ localizedHeading: sampleHeading }} />
+  </AppLayout>
+);
+
+export const Variation1bHeadingCta = () => (
+  <AppLayout>
+    <Banner
+      type="error"
+      content={{ localizedHeading: sampleHeading }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+    />
+  </AppLayout>
+);
+
+export const Variation1cHeadingDismiss = () => (
+  <AppLayout>
+    <Banner
+      type="error"
+      content={{ localizedHeading: sampleHeading }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
+  </AppLayout>
+);
+
+export const Variation1dHeadingCtaDismiss = () => (
+  <AppLayout>
+    <Banner
+      type="error"
+      content={{ localizedHeading: sampleHeading }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
+  </AppLayout>
+);
+
+export const Variation2aDescription = () => (
+  <AppLayout>
+    <Banner
+      type="error"
+      content={{ localizedDescription: sampleDescription }}
+    />
+  </AppLayout>
+);
+
+export const Variation2bDescriptionCta = () => (
   <AppLayout>
-    <Banner type={BannerType.info}>
-      <p>This is an "info" type banner inside our AppLayout.</p>
-    </Banner>
+    <Banner
+      type="error"
+      content={{ localizedDescription: sampleDescription }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+    />
   </AppLayout>
 );
 
-export const Success = () => (
+export const Variation2cDescriptionDismiss = () => (
   <AppLayout>
-    <Banner type={BannerType.success}>
-      <p>This is a "success" type banner inside our AppLayout.</p>
-    </Banner>
+    <Banner
+      type="error"
+      content={{ localizedDescription: sampleDescription }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
   </AppLayout>
 );
 
-export const Error = () => (
+export const Variation2dDescriptionCtaDismiss = () => (
   <AppLayout>
-    <Banner type={BannerType.error}>
-      <p>This is an "error" type banner inside our AppLayout.</p>
-    </Banner>
+    <Banner
+      type="error"
+      content={{ localizedDescription: sampleDescription }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
   </AppLayout>
 );
 
-export const DismissibleInfo = () => (
+export const Variation3aHeadingDescription = () => (
   <AppLayout>
-    <Subject />
+    <Banner
+      type="error"
+      content={{
+        localizedHeading: sampleHeading,
+        localizedDescription: sampleDescription,
+      }}
+    />
   </AppLayout>
 );
-export const FancySuccess = () => (
+
+export const Variation3bHeadingDescriptionCta = () => (
   <AppLayout>
-    <FancyBanner
-      type={BannerType.success}
-      message={{ heading: 'Fancy heading', message: 'Fancy message' }}
-      children={''}
+    <Banner
+      type="error"
+      content={{
+        localizedHeading: sampleHeading,
+        localizedDescription: sampleDescription,
+      }}
+      link={{ url: '#', localizedText: sampleCtaText }}
     />
   </AppLayout>
 );
+
+export const Variation3cHeadingDescriptionDismiss = () => (
+  <AppLayout>
+    <Banner
+      type="error"
+      content={{
+        localizedHeading: sampleHeading,
+        localizedDescription: sampleDescription,
+      }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
+  </AppLayout>
+);
+
+export const TypeError = () => (
+  <AppLayout>
+    <Banner
+      type="error"
+      content={{
+        localizedHeading: sampleHeading,
+        localizedDescription: sampleDescription,
+      }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
+  </AppLayout>
+);
+
+export const TypeInfo = () => (
+  <AppLayout>
+    <Banner
+      type="info"
+      content={{
+        localizedHeading: sampleHeading,
+        localizedDescription: sampleDescription,
+      }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
+  </AppLayout>
+);
+
+export const TypeSuccess = () => (
+  <AppLayout>
+    <Banner
+      type="success"
+      content={{
+        localizedHeading: sampleHeading,
+        localizedDescription: sampleDescription,
+      }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
+  </AppLayout>
+);
+
+export const TypeWarning = () => (
+  <AppLayout>
+    <Banner
+      type="warning"
+      content={{
+        localizedHeading: sampleHeading,
+        localizedDescription: sampleDescription,
+      }}
+      link={{ url: '#', localizedText: sampleCtaText }}
+      dismissButton={{ action: () => alert('Dismiss clicked') }}
+    />
+  </AppLayout>
+);
+
+export const ResendCodeBanner = () => (
+  <AppLayout>
+    <ResendCodeSuccessBanner />
+  </AppLayout>
+);
+
+export const ResendLinkBanner = () => (
+  <AppLayout>
+    <ResendLinkSuccessBanner />
+  </AppLayout>
+);