Skip to content

Commit 1cc8c75

Browse files
vpomerleauvpomerleau
authored
Merge pull request #17903 from mozilla/FXA-9714
feat(settings): New banner component with updated styling
2 parents 5af8f3f + 7745fe4 commit 1cc8c75

File tree

125 files changed

+1331
-1289
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

125 files changed

+1331
-1289
lines changed

‎packages/functional-tests/pages/resetPassword.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,11 +71,11 @@ export class ResetPasswordPage extends BaseLayout {
7171
}
7272

7373
get passwordResetSuccessMessage() {
74-
return this.page.getByText('Your password has been reset');
74+
return this.page.getByText(/Your password has been reset/);
7575
}
7676

7777
get passwordResetSuccessRecovyerKeyReminderHeading() {
78-
return this.page.getByText('Your password has been reset.');
78+
return this.page.getByText(/Your password has been reset/);
7979
}
8080

8181
get passwordResetSuccessRecovyerKeyReminderMessage() {

‎packages/functional-tests/pages/settings/layout.ts

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,11 +23,13 @@ export abstract class SettingsLayout extends BaseLayout {
2323
}
2424

2525
get alertBar() {
26-
return this.page.getByTestId('alert-bar-content');
26+
return this.page.getByRole('alert');
2727
}
2828

2929
get alertBarDismissButton() {
30-
return this.page.getByTestId('alert-bar-dismiss');
30+
return this.page
31+
.getByRole('alert')
32+
.getByRole('button', { name: 'Close message' });
3133
}
3234

3335
get avatarDropDownMenu() {

‎packages/functional-tests/tests/oauth/signinTokenCode.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,9 @@ test.describe('severity-2 #smoke', () => {
120120
await expect(signinTokenCode.resendCodeButton).toBeVisible();
121121
await signinTokenCode.resendCodeButton.click();
122122

123-
await expect(page.getByText(/Email re-?sent/)).toBeVisible();
123+
await expect(
124+
page.getByText(/A new code was sent to your email./)
125+
).toBeVisible();
124126

125127
// Retrieves the code from the new email
126128
code = await target.emailClient.getVerifyLoginCode(credentials.email);

‎packages/functional-tests/tests/resetPassword/resetPassword.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,9 @@ test.describe('severity-1 #smoke', () => {
109109

110110
resetPassword.resendButton.click();
111111

112-
await expect(resetPassword.statusBar).toHaveText(/Email re-?sent/);
112+
await expect(resetPassword.statusBar).toHaveText(
113+
/A new code was sent to your email./
114+
);
113115
});
114116

115117
test('open /reset_password page, enter unknown email, wait for error', async ({

‎packages/functional-tests/tests/signin/signinBlocked.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,9 @@ test.describe('severity-2 #smoke', () => {
9797
await signinUnblock.resendCodeButton.click();
9898

9999
//Verify success message
100-
await expect(page.getByText(/Email re-?sent/)).toBeVisible();
100+
await expect(
101+
page.getByText(/A new code was sent to your email./)
102+
).toBeVisible();
101103

102104
//Unblock the email
103105
const code = await target.emailClient.getUnblockCode(credentials.email);

‎packages/functional-tests/tests/syncV3/signIn.spec.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,9 @@ test.describe('severity-2 #smoke', () => {
4848
// Click resend link
4949
await expect(page).toHaveURL(/signin_token_code/);
5050
await signinTokenCode.resendCodeButton.click();
51-
await expect(page.getByText(/Email re-?sent/)).toBeVisible();
51+
await expect(
52+
page.getByText(/A new code was sent to your email./)
53+
).toBeVisible();
5254
const code = await target.emailClient.getVerifyLoginCode(
5355
credentials.email
5456
);

‎packages/fxa-settings/src/components/Banner/en.ftl

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,7 @@
11
## Banner component
2-
## Used to show success, error or info messages
32

4-
# This aria-label applies to the dismiss/close button of the banner
5-
# This text is for screen-readers
6-
banner-dismiss-button =
7-
.aria-label = Close
3+
resend-code-success-banner-heading = A new code was sent to your email.
4+
resend-link-success-banner-heading = A new link was sent to your email.
85
9-
# This message is displayed in a success banner
10-
# $accountsEmail is the senderʼs email address (origin of the email containing a new link). (e.g. [email protected])
11-
link-expired-resent-link-success-message = Email re-sent. Add { $accountsEmail } to your contacts to ensure a smooth delivery.
12-
# Error message displayed in an error banner. This is a general message when the cause of the error is unclear.
13-
link-expired-resent-code-error-message = Something went wrong. A new code could not be sent.
6+
# $accountsEmail is the Mozilla accounts sender email address (e.g. [email protected])
7+
resend-success-banner-description = Add { $accountsEmail } to your contacts to ensure a smooth delivery.

‎packages/fxa-settings/src/components/Banner/index.stories.tsx

Lines changed: 168 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -3,53 +3,200 @@
33
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
44

55
import React from 'react';
6-
import Banner, { BannerType, FancyBanner } from '.';
76
import { Meta } from '@storybook/react';
87
import AppLayout from '../AppLayout';
9-
import { Subject } from './mocks';
108
import { withLocalization } from 'fxa-react/lib/storybooks';
9+
import Banner, { ResendCodeSuccessBanner, ResendLinkSuccessBanner } from '.';
10+
import { sampleDescription, sampleHeading, sampleCtaText } from './mocks';
11+
12+
// TODO in FXA-10621 - This component is a good candidate for using the controls panel once enabled
1113

1214
export default {
1315
title: 'Components/Banner',
1416
component: Banner,
17+
subcomponents: { ResendCodeSuccessBanner, ResendLinkSuccessBanner },
1518
decorators: [withLocalization],
1619
} as Meta;
1720

18-
export const Info = () => (
21+
export const Variation1aHeading = () => (
22+
<AppLayout>
23+
<Banner type="error" content={{ localizedHeading: sampleHeading }} />
24+
</AppLayout>
25+
);
26+
27+
export const Variation1bHeadingCta = () => (
28+
<AppLayout>
29+
<Banner
30+
type="error"
31+
content={{ localizedHeading: sampleHeading }}
32+
link={{ url: '#', localizedText: sampleCtaText }}
33+
/>
34+
</AppLayout>
35+
);
36+
37+
export const Variation1cHeadingDismiss = () => (
38+
<AppLayout>
39+
<Banner
40+
type="error"
41+
content={{ localizedHeading: sampleHeading }}
42+
dismissButton={{ action: () => alert('Dismiss clicked') }}
43+
/>
44+
</AppLayout>
45+
);
46+
47+
export const Variation1dHeadingCtaDismiss = () => (
48+
<AppLayout>
49+
<Banner
50+
type="error"
51+
content={{ localizedHeading: sampleHeading }}
52+
link={{ url: '#', localizedText: sampleCtaText }}
53+
dismissButton={{ action: () => alert('Dismiss clicked') }}
54+
/>
55+
</AppLayout>
56+
);
57+
58+
export const Variation2aDescription = () => (
59+
<AppLayout>
60+
<Banner
61+
type="error"
62+
content={{ localizedDescription: sampleDescription }}
63+
/>
64+
</AppLayout>
65+
);
66+
67+
export const Variation2bDescriptionCta = () => (
1968
<AppLayout>
20-
<Banner type={BannerType.info}>
21-
<p>This is an "info" type banner inside our AppLayout.</p>
22-
</Banner>
69+
<Banner
70+
type="error"
71+
content={{ localizedDescription: sampleDescription }}
72+
link={{ url: '#', localizedText: sampleCtaText }}
73+
/>
2374
</AppLayout>
2475
);
2576

26-
export const Success = () => (
77+
export const Variation2cDescriptionDismiss = () => (
2778
<AppLayout>
28-
<Banner type={BannerType.success}>
29-
<p>This is a "success" type banner inside our AppLayout.</p>
30-
</Banner>
79+
<Banner
80+
type="error"
81+
content={{ localizedDescription: sampleDescription }}
82+
dismissButton={{ action: () => alert('Dismiss clicked') }}
83+
/>
3184
</AppLayout>
3285
);
3386

34-
export const Error = () => (
87+
export const Variation2dDescriptionCtaDismiss = () => (
3588
<AppLayout>
36-
<Banner type={BannerType.error}>
37-
<p>This is an "error" type banner inside our AppLayout.</p>
38-
</Banner>
89+
<Banner
90+
type="error"
91+
content={{ localizedDescription: sampleDescription }}
92+
link={{ url: '#', localizedText: sampleCtaText }}
93+
dismissButton={{ action: () => alert('Dismiss clicked') }}
94+
/>
3995
</AppLayout>
4096
);
4197

42-
export const DismissibleInfo = () => (
98+
export const Variation3aHeadingDescription = () => (
4399
<AppLayout>
44-
<Subject />
100+
<Banner
101+
type="error"
102+
content={{
103+
localizedHeading: sampleHeading,
104+
localizedDescription: sampleDescription,
105+
}}
106+
/>
45107
</AppLayout>
46108
);
47-
export const FancySuccess = () => (
109+
110+
export const Variation3bHeadingDescriptionCta = () => (
48111
<AppLayout>
49-
<FancyBanner
50-
type={BannerType.success}
51-
message={{ heading: 'Fancy heading', message: 'Fancy message' }}
52-
children={''}
112+
<Banner
113+
type="error"
114+
content={{
115+
localizedHeading: sampleHeading,
116+
localizedDescription: sampleDescription,
117+
}}
118+
link={{ url: '#', localizedText: sampleCtaText }}
53119
/>
54120
</AppLayout>
55121
);
122+
123+
export const Variation3cHeadingDescriptionDismiss = () => (
124+
<AppLayout>
125+
<Banner
126+
type="error"
127+
content={{
128+
localizedHeading: sampleHeading,
129+
localizedDescription: sampleDescription,
130+
}}
131+
dismissButton={{ action: () => alert('Dismiss clicked') }}
132+
/>
133+
</AppLayout>
134+
);
135+
136+
export const TypeError = () => (
137+
<AppLayout>
138+
<Banner
139+
type="error"
140+
content={{
141+
localizedHeading: sampleHeading,
142+
localizedDescription: sampleDescription,
143+
}}
144+
link={{ url: '#', localizedText: sampleCtaText }}
145+
dismissButton={{ action: () => alert('Dismiss clicked') }}
146+
/>
147+
</AppLayout>
148+
);
149+
150+
export const TypeInfo = () => (
151+
<AppLayout>
152+
<Banner
153+
type="info"
154+
content={{
155+
localizedHeading: sampleHeading,
156+
localizedDescription: sampleDescription,
157+
}}
158+
link={{ url: '#', localizedText: sampleCtaText }}
159+
dismissButton={{ action: () => alert('Dismiss clicked') }}
160+
/>
161+
</AppLayout>
162+
);
163+
164+
export const TypeSuccess = () => (
165+
<AppLayout>
166+
<Banner
167+
type="success"
168+
content={{
169+
localizedHeading: sampleHeading,
170+
localizedDescription: sampleDescription,
171+
}}
172+
link={{ url: '#', localizedText: sampleCtaText }}
173+
dismissButton={{ action: () => alert('Dismiss clicked') }}
174+
/>
175+
</AppLayout>
176+
);
177+
178+
export const TypeWarning = () => (
179+
<AppLayout>
180+
<Banner
181+
type="warning"
182+
content={{
183+
localizedHeading: sampleHeading,
184+
localizedDescription: sampleDescription,
185+
}}
186+
link={{ url: '#', localizedText: sampleCtaText }}
187+
dismissButton={{ action: () => alert('Dismiss clicked') }}
188+
/>
189+
</AppLayout>
190+
);
191+
192+
export const ResendCodeBanner = () => (
193+
<AppLayout>
194+
<ResendCodeSuccessBanner />
195+
</AppLayout>
196+
);
197+
198+
export const ResendLinkBanner = () => (
199+
<AppLayout>
200+
<ResendLinkSuccessBanner />
201+
</AppLayout>
202+
);

0 commit comments

Comments
 (0)