Merge pull request #17952 from mozilla/FXA-10203

task(settings): Add new icons for 2FA flows

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

@@ -7,7 +7,7 @@ import React, { ReactElement } from 'react';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import { ReactComponent as IconClose } from '@fxa/shared/assets/images/close.svg';
 import { FIREFOX_NOREPLY_EMAIL } from '../../constants';
-import { CheckmarkCircleOutlineIcon } from '../images';
+import { CheckmarkCircleOutlineBlackIcon } from '../Icons';
 
 export enum BannerType {
   info = 'info',
@@ -118,7 +118,7 @@ export const FancyBanner = (
     ((messageType) => {
       switch (messageType) {
         case BannerType.success:
-          return <CheckmarkCircleOutlineIcon />;
+          return <CheckmarkCircleOutlineBlackIcon mode="success" />;
         default:
           return null;
       }

packages/fxa-settings/src/components/ConfirmWithLink/index.tsx

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { FtlMsg } from 'fxa-react/lib/utils';
-import { MailImage } from '../../components/images';
+import { MailImage } from '../images';
 import CardHeader from '../CardHeader';
 import { ResendStatus } from '../../lib/types';
 import Banner, { BannerType, ResendEmailSuccessBanner } from '../Banner';

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

@@ -0,0 +1,51 @@
+
+## Images - these are all aria labels used for illustrations
+## Aria labels are used as alternate text that can be read aloud by screen readers.
+
+alert-icon-aria-label =
+    .aria-label = Alert
+
+authenticator-app-aria-label =
+    .aria-label = Authenticator Application
+
+backup-codes-icon-aria-label =
+    .aria-label = Backup codes enabled
+
+backup-codes-disabled-icon-aria-label =
+    .aria-label = Backup codes disabled
+
+# An icon of phone with text message. A back recovery phone number
+backup-recovery-sms-icon-aria-label =
+    .aria-label = Recovery SMS enabled
+
+# Disabled version of backup-recovery-sms-icon-aria-label
+backup-recovery-sms-disabled-icon-aria-label =
+    .aria-label = Recovery SMS disabled
+
+# used indicate a general checkmark, as in something checked off in a list!
+checkmark-icon-aria-label =
+    .aria-label = Check
+
+# used indicate a check mark for a successful state/action
+checkmark-success-icon-aria-label =
+    .aria-label = Success
+
+# used indicate a check mark for an enabled state/option
+checkmark-enabled-icon-aria-label =
+    .aria-label = Enabled
+
+# Used to decorate a code you enter for verification purposes
+code-icon-aria-label =
+    .aria-label = Code
+
+# Used to select Canada as country code for phone number
+canadian-flag-icon-aria-label =
+    .aria-label = Canadian Flag
+
+# Used to select United States as a country code for phone number
+usa-flag-icon-aria-label =
+    .aria-label = United States Flag
+
+# Used as information icon for informative messaging
+info-icon-aria-label =
+    .aria-label = Information

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

@@ -0,0 +1,70 @@
+/* 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 {
+  AlertIcon,
+  AuthenticatorAppIcon,
+  BackupCodesIcon,
+  BackupCodesDisabledIcon,
+  BackupRecoverySmsIcon,
+  BackupRecoverySmsDisabledIcon,
+  CheckmarkGreenIcon,
+  CheckmarkCircleFullGreenIcon,
+  CheckmarkCircleOutlineBlackIcon,
+  CodeIcon,
+  FlagCanadaIcon,
+  FlagUsaIcon,
+  InformationCircleOutlineBlueIcon,
+  InformationCircleOutlineBlackIcon,
+} from '.';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+
+export default {
+  title: 'Components/Icons',
+  subcomponents: {
+    AlertIcon,
+    AuthenticatorAppIcon,
+    BackupCodesIcon,
+    BackupCodesDisabledIcon,
+    BackupRecoverySmsIcon,
+    BackupRecoverySmsDisabledIcon,
+    CheckmarkIcon: CheckmarkGreenIcon,
+    CheckmarkCircleFullIcon: CheckmarkCircleFullGreenIcon,
+    CheckmarkCircleOutlineIcon: CheckmarkCircleOutlineBlackIcon,
+    CodeIcon,
+    FlagCanadaIcon,
+    FlagUsaIcon,
+    InformationCircleOutlineBlueIcon,
+    InformationCircleOutlineBlackIcon,
+  },
+  decorators: [withLocalization],
+} as Meta;
+
+export const Alert = () => <AlertIcon />;
+export const AuthenticatorApp = () => <AuthenticatorAppIcon />;
+export const BackupCodes = () => <BackupCodesIcon />;
+export const BackupCodesDisabled = () => <BackupCodesDisabledIcon />;
+export const BackupRecoverySms = () => <BackupRecoverySmsIcon />;
+export const BackupRecoverySmsDisabled = () => (
+  <BackupRecoverySmsDisabledIcon />
+);
+export const Checkmark = () => <CheckmarkGreenIcon mode="check" />;
+export const CheckmarkCircleFull = () => (
+  <CheckmarkCircleFullGreenIcon mode="enabled" />
+);
+export const CheckmarkCircleOutline = () => (
+  <CheckmarkCircleOutlineBlackIcon mode="success" />
+);
+export const Code = () => <CodeIcon />;
+export const FlagCanada = () => <FlagCanadaIcon />;
+export const FlagUsa = () => <FlagUsaIcon />;
+export const InformationCircleOutlineBlue = () => (
+  <InformationCircleOutlineBlueIcon />
+);
+export const InformationCircleBlack = () => (
+  <InformationCircleOutlineBlackIcon />
+);

packages/fxa-settings/src/components/Icons/index.tsx

@@ -0,0 +1,201 @@
+/* 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 { ImageProps, PreparedImage as PreparedIcon } from '../PreparedImage';
+import { ReactComponent as Alert } from './icon_alert.svg';
+import { ReactComponent as AuthenticatorApp } from './icon_authenticator_app.svg';
+import { ReactComponent as BackupCodes } from './icon_backup_codes.svg';
+import { ReactComponent as BackupCodesDisabled } from './icon_backup_codes_disabled.svg';
+import { ReactComponent as BackupRecoverySmsDisabled } from './icon_backup_recovery_sms_disabled.svg';
+import { ReactComponent as BackupRecoverySms } from './icon_backup_recovery_sms.svg';
+import { ReactComponent as CheckmarkGreen } from './icon_checkmark_green.svg';
+import { ReactComponent as CheckmarkCircleFullGreen } from './icon_checkmark_circle_full_green.svg';
+import { ReactComponent as CheckmarkCircleOutlineBlack } from './icon_checkmark_circle_outline_black.svg';
+import { ReactComponent as Code } from './icon_code.svg';
+import { ReactComponent as FlagCanada } from './icon_flag_canada.svg';
+import { ReactComponent as FlagUsa } from './icon_flag_usa.svg';
+import { ReactComponent as InformationCircleOutlineBlue } from './icon_information_circle_outline_blue.svg';
+import { ReactComponent as InformationCircleOutlineBlack } from './icon_information_circle_outline_black.svg';
+
+export const AlertIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    Image={Alert}
+    ariaLabel="Alert"
+    ariaLabelFtlId="alert-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const AuthenticatorAppIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    Image={AuthenticatorApp}
+    ariaLabel="Authenticator Application"
+    ariaLabelFtlId="authenticator-app-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const BackupCodesIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    Image={BackupCodes}
+    ariaLabel="Backup codes enabled"
+    ariaLabelFtlId="backup-codes-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const BackupCodesDisabledIcon = ({
+  className,
+  ariaHidden,
+}: ImageProps) => (
+  <PreparedIcon
+    Image={BackupCodesDisabled}
+    ariaLabel="Backup codes disabled"
+    ariaLabelFtlId="backup-codes-disabled-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const BackupRecoverySmsIcon = ({
+  className,
+  ariaHidden,
+}: ImageProps) => (
+  <PreparedIcon
+    Image={BackupRecoverySms}
+    ariaLabel="Recovery SMS enabled"
+    ariaLabelFtlId="backup-recovery-sms-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const BackupRecoverySmsDisabledIcon = ({
+  className,
+  ariaHidden,
+}: ImageProps) => (
+  <PreparedIcon
+    Image={BackupRecoverySmsDisabled}
+    ariaLabel="Recovery SMS Disabled"
+    ariaLabelFtlId="backup-recovery-sms-disabled-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+type CheckmarkMode = 'enabled' | 'success' | 'check';
+function getCheckMarkAria(mode: CheckmarkMode) {
+  switch (mode) {
+    case 'enabled':
+      return {
+        ariaLabel: 'Enabled',
+        ariaLabelFtlId: 'checkmark-enabled-icon-aria-label',
+      };
+    case 'success':
+      return {
+        ariaLabel: 'Success',
+        ariaLabelFtlId: 'checkmark-success-icon-aria-label',
+      };
+    case 'check':
+    default:
+      return {
+        ariaLabel: 'Check',
+        ariaLabelFtlId: 'checkmark-icon-aria-label',
+      };
+  }
+}
+
+export type CheckmarkProps = ImageProps & { mode: CheckmarkMode };
+export const CheckmarkGreenIcon = ({
+  className,
+  ariaHidden,
+  mode,
+}: CheckmarkProps) => (
+  <PreparedIcon
+    Image={CheckmarkGreen}
+    {...{
+      className,
+      ariaHidden,
+      ...getCheckMarkAria(mode),
+    }}
+  />
+);
+
+export const CheckmarkCircleFullGreenIcon = ({
+  className,
+  ariaHidden,
+  mode,
+}: CheckmarkProps) => (
+  <PreparedIcon
+    Image={CheckmarkCircleFullGreen}
+    {...{
+      className,
+      ariaHidden,
+      ...getCheckMarkAria(mode),
+    }}
+  />
+);
+export const CheckmarkCircleOutlineBlackIcon = ({
+  className,
+  ariaHidden,
+  mode,
+}: CheckmarkProps) => (
+  <PreparedIcon
+    Image={CheckmarkCircleOutlineBlack}
+    {...{
+      className,
+      ariaHidden,
+      ...getCheckMarkAria(mode),
+    }}
+  />
+);
+
+export const CodeIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    Image={Code}
+    ariaLabel="Code"
+    ariaLabelFtlId="code-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const FlagCanadaIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    ariaLabel="Canadian Flag"
+    ariaLabelFtlId="canadian-flag-icon-aria-label"
+    Image={FlagCanada}
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const FlagUsaIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    ariaLabel="United States Flag"
+    ariaLabelFtlId="usa-flag-icon-aria-label"
+    Image={FlagUsa}
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const InformationCircleOutlineBlueIcon = ({
+  className,
+  ariaHidden,
+}: ImageProps) => (
+  <PreparedIcon
+    Image={InformationCircleOutlineBlue}
+    ariaLabel="Information"
+    ariaLabelFtlId="info-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const InformationCircleOutlineBlackIcon = ({
+  className,
+  ariaHidden,
+}: ImageProps) => (
+  <PreparedIcon
+    Image={InformationCircleOutlineBlack}
+    ariaLabel="Information"
+    ariaLabelFtlId="info-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);