-
+
You’re signed in to Firefox
diff --git a/packages/fxa-settings/src/components/images/index.test.tsx b/packages/fxa-settings/src/components/PreparedImage/index.test.tsx
similarity index 73%
rename from packages/fxa-settings/src/components/images/index.test.tsx
rename to packages/fxa-settings/src/components/PreparedImage/index.test.tsx
index 71f0077f0a8..7dd79f6f883 100644
--- a/packages/fxa-settings/src/components/images/index.test.tsx
+++ b/packages/fxa-settings/src/components/PreparedImage/index.test.tsx
@@ -5,7 +5,7 @@
import React from 'react';
import { screen } from '@testing-library/react';
import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
-import { HeartsVerifiedImage } from '.';
+import { HeartsVerifiedImage } from '../images';
it('applies localization by default', () => {
renderWithLocalizationProvider();
@@ -30,7 +30,7 @@ it('applies a11y by default', () => {
).toBeInTheDocument();
});
-it('can be hidden from screenreaders when desired', () => {
+it('can be hidden from screen readers when desired', () => {
renderWithLocalizationProvider();
const image = screen.getByTestId('aria-hidden-image');
expect(image).toBeInTheDocument();
@@ -45,3 +45,17 @@ it('applies custom classNames when desired', () => {
);
expect(screen.getByRole('img')).toHaveClass(MOCK_CLASS);
});
+
+describe('images without l10n', () => {
+ it('applies basic styles by default', () => {
+ renderWithLocalizationProvider();
+ expect(screen.getByRole('img')).toHaveClass('w-3/5');
+ });
+ it('applies custom classNames when desired', () => {
+ const MOCK_CLASS = 'w-full';
+ renderWithLocalizationProvider(
+
+ );
+ expect(screen.getByRole('img')).toHaveClass(MOCK_CLASS);
+ });
+});
diff --git a/packages/fxa-settings/src/components/PreparedImage/index.tsx b/packages/fxa-settings/src/components/PreparedImage/index.tsx
new file mode 100644
index 00000000000..b7514c0b171
--- /dev/null
+++ b/packages/fxa-settings/src/components/PreparedImage/index.tsx
@@ -0,0 +1,59 @@
+/* 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 { FtlMsg } from 'fxa-react/lib/utils';
+
+interface PreparedImageBaseProps {
+ className?: string;
+ Image: React.ElementType;
+}
+
+interface PreparedImageAriaHiddenProps extends PreparedImageBaseProps {
+ ariaHidden: true;
+}
+
+interface PreparedImageAriaVisibleProps extends PreparedImageBaseProps {
+ ariaHidden?: false;
+ ariaLabel: string;
+ ariaLabelFtlId: string;
+}
+
+export type PreparedImageProps =
+ | PreparedImageAriaHiddenProps
+ | PreparedImageAriaVisibleProps;
+
+// Use this component to add your image into the collection of images exported below.
+// If the component is not being reused across directories, it should remain in the directory
+// where it is being used. If you are introducing an image which was previously shared and
+// had localized alt-text, or a localized aria-label, please add the existing ftl id to spare
+// translating it again. Don't forget to add new FTL strings into the `en.ftl` file!
+
+export const PreparedImage = (props: PreparedImageProps) => {
+ const { className = 'm-auto w-3/5', ariaHidden, Image } = props;
+ const showAriaLabel =
+ !ariaHidden && props?.ariaLabel && props?.ariaLabelFtlId;
+
+ return (
+ <>
+ {showAriaLabel ? (
+
+
+
+ ) : (
+
+ )}
+
+ );
+};
+
+export type ImageProps = {
+ className?: string;
+ ariaHidden?: boolean;
+};
diff --git a/packages/fxa-settings/src/components/Ready/index.tsx b/packages/fxa-settings/src/components/Ready/index.tsx
index 04a453453df..7ffefe3e800 100644
--- a/packages/fxa-settings/src/components/Ready/index.tsx
+++ b/packages/fxa-settings/src/components/Ready/index.tsx
@@ -7,7 +7,7 @@ import { navigate, RouteComponentProps } from '@reach/router';
import { FtlMsg } from 'fxa-react/lib/utils';
import { logViewEvent, usePageViewEvent } from '../../lib/metrics';
import { REACT_ENTRYPOINT } from '../../constants';
-import { HeartsVerifiedImage } from '../../components/images';
+import { HeartsVerifiedImage } from '../images';
import CardHeader from '../CardHeader';
import Banner, { BannerType } from '../Banner';
import { MozServices } from '../../lib/types';
diff --git a/packages/fxa-settings/src/components/images/graphic_push_factor_auth.svg b/packages/fxa-settings/src/components/images/graphic_push_factor_auth.svg
index d0c7ec952e5..e059857a937 100644
--- a/packages/fxa-settings/src/components/images/graphic_push_factor_auth.svg
+++ b/packages/fxa-settings/src/components/images/graphic_push_factor_auth.svg
@@ -1,68 +1,4 @@
-
+]]>
\ No newline at end of file
diff --git a/packages/fxa-settings/src/components/images/icon_checkmark_circle_full.svg b/packages/fxa-settings/src/components/images/icon_checkmark_circle_full.svg
deleted file mode 100644
index d0bf3e6424b..00000000000
--- a/packages/fxa-settings/src/components/images/icon_checkmark_circle_full.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-
diff --git a/packages/fxa-settings/src/components/images/index.stories.tsx b/packages/fxa-settings/src/components/images/index.stories.tsx
index 108e7655f59..718028939e9 100644
--- a/packages/fxa-settings/src/components/images/index.stories.tsx
+++ b/packages/fxa-settings/src/components/images/index.stories.tsx
@@ -15,8 +15,6 @@ import {
BackupCodesImage,
RecoveryKeyImage,
TwoFactorAuthImage,
- CheckmarkCircleOutlineIcon,
- CheckmarkCircleFullIcon,
PasswordSuccessImage,
BackupRecoveryPhoneImage,
BackupRecoveryPhoneCodeImage,
@@ -35,8 +33,6 @@ export default {
BackupCodesImage,
RecoveryKeyImage,
TwoFactorAuthImage,
- CheckmarkCircleOutlineIcon,
- CheckmarkCircleFullIcon,
PasswordSuccessImage,
BackupRecoveryPhoneImage,
BackupRecoveryPhoneCodeImage,
@@ -62,10 +58,6 @@ export const BackupCodes = () => ;
export const TwoFactorAuth = () => ;
-export const CircleCheckOutline = () => ;
-
-export const CircleCheckFull = () => ;
-
export const PasswordSuccess = () => ;
export const BackupRecoveryPhone = () => ;
diff --git a/packages/fxa-settings/src/components/images/index.tsx b/packages/fxa-settings/src/components/images/index.tsx
index 851056dca23..772f515559e 100644
--- a/packages/fxa-settings/src/components/images/index.tsx
+++ b/packages/fxa-settings/src/components/images/index.tsx
@@ -3,6 +3,7 @@
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
import React from 'react';
+import { ImageProps, PreparedImage } from '../PreparedImage';
import { ReactComponent as HeartsBroken } from './graphic_hearts_broken.svg';
import { ReactComponent as HeartsVerified } from './graphic_hearts_verified.svg';
import { ReactComponent as BackupCodes } from './graphic_backup_codes.min.svg';
@@ -13,62 +14,10 @@ import { ReactComponent as Key } from './graphic_recovery_key.min.svg';
import { ReactComponent as Password } from './graphic_password.min.svg';
import { ReactComponent as Lightbulb } from './graphic_recovery_key_hint.min.svg';
import { ReactComponent as EmailCode } from './graphic_email_code.svg';
-import { ReactComponent as CircleCheckOutline } from './icon_checkmark_circle_outline.svg';
-import { ReactComponent as CircleCheckFull } from './icon_checkmark_circle_full.svg';
import { ReactComponent as PasswordSuccess } from './graphic_password_success.min.svg';
import { ReactComponent as BackupRecoveryPhone } from './graphic_backup_recovery_phone.min.svg';
import { ReactComponent as BackupRecoveryPhoneCode } from './graphic_phone_code.min.svg';
-import { FtlMsg } from 'fxa-react/lib/utils';
-
-// Use this component to add your image into the collection of images exported below.
-// If the component is not being reused across directories, it should remain in the directory
-// where it is being used. If you are introducing an image which was previously shared and
-// had localized alt-text, or a localized aria-label, please add the existing ftl id to spare
-// translating it again. Don't forget to add new FTL strings into the `en.ftl` file!
-
-interface PreparedImageBaseProps {
- className?: string;
- Image: React.ElementType;
-}
-
-interface PreparedImageAriaHiddenProps extends PreparedImageBaseProps {
- ariaHidden: true;
-}
-
-interface PreparedImageAriaVisibleProps extends PreparedImageBaseProps {
- ariaHidden?: false;
- ariaLabel: string;
- ariaLabelFtlId: string;
-}
-
-type PreparedImageProps =
- | PreparedImageAriaHiddenProps
- | PreparedImageAriaVisibleProps;
-
-export const PreparedImage = (props: PreparedImageProps) => {
- const { className = 'm-auto w-3/5', ariaHidden, Image } = props;
- const showAriaLabel =
- !ariaHidden && props?.ariaLabel && props?.ariaLabelFtlId;
-
- return (
- <>
- {showAriaLabel ? (
-
-
-
- ) : (
-
- )}
-
- );
-};
-
-export type ImageProps = {
- className?: string;
- ariaHidden?: boolean;
-};
-
export const HeartsBrokenImage = ({ className, ariaHidden }: ImageProps) => (
(
{...{ className, ariaHidden }}
/>
);
-
-export const CheckmarkCircleOutlineIcon = ({ className }: ImageProps) => (
-
-);
-
-export const CheckmarkCircleFullIcon = ({ className }: ImageProps) => (
-
-);
diff --git a/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx
index a38c5ee15d4..f4827ab6b68 100644
--- a/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx
+++ b/packages/fxa-settings/src/pages/InlineRecoveryKeySetup/index.tsx
@@ -7,10 +7,8 @@ import { RouteComponentProps } from '@reach/router';
import InlineRecoveryKeySetupCreate from '../../components/InlineRecoveryKeySetupCreate';
import RecoveryKeySetupDownload from '../../components/RecoveryKeySetupDownload';
import AppLayout from '../../components/AppLayout';
-import {
- CheckmarkCircleOutlineIcon,
- RecoveryKeyImage,
-} from '../../components/images';
+import { RecoveryKeyImage } from '../../components/images';
+import { CheckmarkCircleOutlineBlackIcon } from '../../components/Icons';
import { FtlMsg, hardNavigate } from 'fxa-react/lib/utils';
import Banner, { BannerType } from '../../components/Banner';
import { Constants } from '../../lib/constants';
@@ -63,7 +61,10 @@ export const InlineRecoveryKeySetup = ({
<>
-
+
Account recovery key created
diff --git a/packages/fxa-settings/src/pages/ResetPassword/ResetPasswordConfirmed/index.tsx b/packages/fxa-settings/src/pages/ResetPassword/ResetPasswordConfirmed/index.tsx
index 5b36993cc1b..18a3ce1ecd0 100644
--- a/packages/fxa-settings/src/pages/ResetPassword/ResetPasswordConfirmed/index.tsx
+++ b/packages/fxa-settings/src/pages/ResetPassword/ResetPasswordConfirmed/index.tsx
@@ -6,10 +6,8 @@ import React from 'react';
import { RouteComponentProps } from '@reach/router';
import AppLayout from '../../../components/AppLayout';
import { ResetPasswordConfirmedProps } from './interfaces';
-import {
- CheckmarkCircleFullIcon,
- PasswordSuccessImage,
-} from '../../../components/images';
+import { PasswordSuccessImage } from '../../../components/images';
+import { CheckmarkCircleFullGreenIcon } from '../../../components/Icons';
import { FtlMsg } from 'fxa-react/lib/utils';
import Banner, { BannerType } from '../../../components/Banner';
@@ -26,7 +24,10 @@ const ResetPasswordConfirmed = ({
)}
-
+