Merge pull request #19986 from mozilla/FXA-12906

feat(settings): create ButtonPasskeySignin component

Author: MagentaManifold

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

@@ -0,0 +1,11 @@
+## ButtonPasskeySignin
+
+button-passkey-signin = Sign in with passkey
+
+# This is a loading state indicating that we are waiting for the user to
+# interact with their authenticator to approve the sign-in. They should see a
+# device prompt/pop-up with authentication options (or message indicating that
+# no passkeys are available).
+button-passkey-signin-loading = Securely signing in…
+
+##

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

@@ -0,0 +1,39 @@
+/* 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 ButtonPasskeySignin from '.';
+import { withLocalization } from 'fxa-react/lib/storybooks';
+import { Meta } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+
+export default {
+  title: 'components/ButtonPasskeySignin',
+  component: ButtonPasskeySignin,
+  decorators: [withLocalization],
+} as Meta;
+
+export const Default = () => {
+  const [loading, setLoading] = React.useState(false);
+
+  const handleClick = () => {
+    action('clicked')();
+    setLoading(true);
+    setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+  };
+
+  return (
+    <div className="card mx-auto">
+      <ButtonPasskeySignin loading={loading} onClick={handleClick} />
+    </div>
+  );
+};
+
+export const Loading = () => (
+  <div className="card mx-auto">
+    <ButtonPasskeySignin loading={true} onClick={action('clicked')} />
+  </div>
+);

packages/fxa-settings/src/components/ButtonPasskeySignin/index.test.tsx

@@ -0,0 +1,65 @@
+/* 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 { screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
+import ButtonPasskeySignin from '.';
+
+describe('ButtonPasskeySignin', () => {
+  it('renders in default state with passkey icon and text', () => {
+    renderWithLocalizationProvider(<ButtonPasskeySignin />);
+
+    screen.getByText('Sign in with passkey');
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toBeEnabled();
+
+    const passkeyIcon = screen.getByText('icon_passkey.min.svg');
+    expect(passkeyIcon).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  it('renders loading state with spinner and loading text', () => {
+    renderWithLocalizationProvider(<ButtonPasskeySignin loading={true} />);
+
+    screen.getByText('Securely signing in…');
+    const button = screen.getByRole('button');
+    expect(button).toBeInTheDocument();
+    expect(button).toBeDisabled();
+
+    const loadingIcon = screen.getByText('icon_loading_arrow.min.svg');
+    expect(loadingIcon).toBeInTheDocument();
+    expect(loadingIcon).toHaveAttribute('aria-hidden', 'true');
+    expect(loadingIcon).toHaveClass('animate-spin-slow');
+  });
+
+  it('calls onClick handler when clicked in default state', async () => {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+
+    renderWithLocalizationProvider(
+      <ButtonPasskeySignin onClick={handleClick} />
+    );
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onClick handler when loading', async () => {
+    const user = userEvent.setup();
+    const handleClick = jest.fn();
+
+    renderWithLocalizationProvider(
+      <ButtonPasskeySignin onClick={handleClick} loading={true} />
+    );
+
+    const button = screen.getByRole('button');
+    await user.click(button);
+
+    expect(handleClick).not.toHaveBeenCalled();
+  });
+});

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

@@ -0,0 +1,42 @@
+/* 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 { LoadingArrowIcon, PasskeyIcon } from '../Icons';
+import { FtlMsg } from 'fxa-react/lib/utils';
+
+export type ButtonPasskeySigninProps = {
+  loading?: boolean;
+  onClick?: () => void;
+};
+
+const ButtonPasskeySignin = ({
+  loading = false,
+  onClick = () => {},
+}: ButtonPasskeySigninProps) => {
+  const buttonText = loading ? (
+    <>
+      <LoadingArrowIcon className="h-5 w-5 me-4 animate-spin-slow" ariaHidden />
+      <FtlMsg id="button-passkey-signin-loading">Securely signing in…</FtlMsg>
+    </>
+  ) : (
+    <>
+      <PasskeyIcon className="h-5 w-5 me-4" ariaHidden />
+      <FtlMsg id="button-passkey-signin">Sign in with passkey</FtlMsg>
+    </>
+  );
+
+  return (
+    <button
+      type="submit"
+      className="cta-xl w-full justify-center font-header text-grey-900 bg-grey-10 border-grey-200 border text-center inline-flex items-center focus-visible-default outline-offset-2 hover:border-grey-600 active:bg-grey-100 disabled:bg-grey-100 disabled:border-grey-600 disabled:cursor-not-allowed"
+      onClick={onClick}
+      disabled={loading}
+    >
+      {buttonText}
+    </button>
+  );
+};
+
+export default ButtonPasskeySignin;

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

@@ -65,3 +65,13 @@ info-icon-aria-label =
 # Used to select United States as a country code for phone number
 usa-flag-icon-aria-label =
     .aria-label = United States Flag
+
+# Used for loading arrow icon
+icon-loading-arrow-aria-label =
+    .aria-label = Loading
+
+# Used for passkey icon
+icon-passkey-aria-label =
+    .aria-label = Passkey
+
+##

packages/fxa-settings/src/components/Icons/icon_loading_arrow.min.svg

@@ -22,6 +22,8 @@ import { ReactComponent as FlagUsa } from './icon_flag_usa.min.svg';
 import { ReactComponent as InformationOutlineCurrent } from './icon_information_circle_outline_current.min.svg';
 import { ReactComponent as InformationOutlineBlue } from './icon_information_circle_outline_blue.min.svg';
 import { ReactComponent as Lightbulb } from './icon_lightbulb.min.svg';
+import { ReactComponent as LoadingArrow } from './icon_loading_arrow.min.svg';
+import { ReactComponent as Passkey } from './icon_passkey.min.svg';
 
 type AlertMode = 'alert' | 'attention' | 'warning';
 function getAlertAria(mode: AlertMode) {
@@ -289,3 +291,21 @@ export const LightbulbIcon = ({ className, ariaHidden }: ImageProps) => (
     {...{ className, ariaHidden }}
   />
 );
+
+export const LoadingArrowIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    Image={LoadingArrow}
+    ariaLabel="Loading"
+    ariaLabelFtlId="loading-arrow-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);
+
+export const PasskeyIcon = ({ className, ariaHidden }: ImageProps) => (
+  <PreparedIcon
+    Image={Passkey}
+    ariaLabel="Passkey"
+    ariaLabelFtlId="passkey-icon-aria-label"
+    {...{ className, ariaHidden }}
+  />
+);

packages/fxa-settings/src/components/Icons/icon_passkey.min.svg

@@ -288,6 +288,7 @@ config.theme.extend = {
     'wait-and-rotate': 'wait-and-rotate 5s infinite ease-out',
     'fade-in': 'fade-in 1s 1 ease-in',
     'spin-xl': 'spin-xl 1s forwards ease-in-out',
+    'spin-slow': 'spin 1.2s linear infinite',
     'spin-pause': 'spin-pause 4s ease-in-out forwards',
     'fade-out-in': 'fade-out-in 2s forwards',
     'grow-and-stay': 'grow 1s ease-in-out forwards',