Merge pull request #18912 from mozilla/FXA-10209

feat(2fa): Update design of DataBlock and GetDataTrio components

Author: MagentaManifold

packages/functional-tests/pages/settings/totp.ts

@@ -34,7 +34,7 @@ export class TotpPage extends SettingsLayout {
   }
 
   get step1ManualCode() {
-    return this.page.getByTestId('manual-code');
+    return this.page.getByTestId('manual-datablock');
   }
 
   get step1QRCode() {
@@ -116,8 +116,11 @@ export class TotpPage extends SettingsLayout {
   }
 
   async getRecoveryCodes(): Promise<string[]> {
-    const codesRaw = await this.step2recoveryCodes.textContent();
-    return codesRaw ? codesRaw.trim().split(/\s+/) : [];
+    await expect(this.step2recoveryCodes).toBeVisible();
+    const codeList = await this.step2recoveryCodes
+      .getByRole('listitem')
+      .allTextContents();
+    return codeList ? codeList : [];
   }
 
   async fillOutStep2Form(): Promise<string[]> {

packages/functional-tests/tests/oauth/totp.spec.ts

@@ -106,7 +106,7 @@ test.describe('severity-1 #smoke', () => {
       await expect(signin.page.getByText('Enter code manually')).toBeVisible();
 
       const secret = (
-        await signin.page.getByTestId('manual-code').innerText()
+        await signin.page.getByTestId('manual-datablock').innerText()
       )?.replace(/\s/g, '');
       const code = await getCode(secret);
 

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

@@ -151,7 +151,7 @@ export const BrandMessaging = ({
         <div className="flex justify-end mx-2 my-1 ms-auto">
           <FtlMsg
             id="brand-banner-dismiss-button-2"
-            attrs={{ ariaLabel: true }}
+            attrs={{ 'aria-label': true }}
           >
             <button
               className="w-4 h-4 rounded-sm focus-visible-default outline-offset-2"

packages/fxa-settings/src/components/DataBlock/code.min.svg

@@ -14,23 +14,21 @@ export default {
   decorators: [withLocalization],
 } as Meta;
 
-export const SingleCodeInlineCopy = () => <Subject isInline />;
-
 export const SingleCode = () => <Subject />;
 
 export const SingleCodeOnIOS = () => <Subject isIOS />;
 
 export const MultipleCodes = () => (
   <Subject
     value={[
-      'C1OFZW7R04',
-      'XVKRLKERT4',
-      'CF0V94X204',
-      'C3THX2SGZ4',
-      'UXC6NRQT54',
-      '24RF9WFA44',
-      'ZBULPFN7J4',
-      'D4J6KY8FL4',
+      'c1ofzw7r04',
+      'xvkrlkert4',
+      'cf0v94x204',
+      'c3thx2sgz4',
+      'uxc6nrqt54',
+      '24rf9wfa44',
+      'zbulpfn7j4',
+      'd4j6ky8fl4',
     ]}
   />
 );

packages/fxa-settings/src/components/DataBlock/code.svg

@@ -5,7 +5,6 @@
 import React from 'react';
 import { fireEvent, screen } from '@testing-library/react';
 import { renderWithLocalizationProvider } from 'fxa-react/lib/test-utils/localizationProvider';
-import { act } from 'react-dom/test-utils';
 import { Subject } from './mocks';
 
 const singleValue = 'ANMD 1S09 7Y2Y 4EES 02CW BJ6Z PYKP H69F';
@@ -38,18 +37,8 @@ it('can render multiple values', () => {
   });
 });
 
-it('can apply spacing to multiple values', () => {
-  renderWithLocalizationProvider(<Subject value={multiValue} separator=" " />);
-
-  expect(screen.getByTestId('datablock').textContent?.trim()).toEqual(
-    multiValue.join(' ')
-  );
-});
-
 it('displays only Copy icon in iOS', () => {
-  renderWithLocalizationProvider(
-    <Subject value={multiValue} separator=" " isIOS />
-  );
+  renderWithLocalizationProvider(<Subject value={multiValue} isIOS />);
 
   expect(screen.getByRole('button', { name: 'Copy' })).toBeInTheDocument();
   expect(
@@ -62,9 +51,7 @@ it('displays only Copy icon in iOS', () => {
 
 it('displays a tooltip on action', async () => {
   renderWithLocalizationProvider(<Subject value={multiValue} />);
-  await act(async () => {
-    fireEvent.click(await screen.findByTestId('databutton-copy'));
-  });
+  fireEvent.click(await screen.findByTestId('databutton-copy'));
   expect(
     await screen.findByTestId('datablock-copy-tooltip')
   ).toBeInTheDocument();

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

@@ -6,12 +6,12 @@ import React, { useState } from 'react';
 import GetDataTrio, {
   DownloadContentType,
   GetDataCopySingleton,
-  GetDataCopySingletonInline,
   GetDataTrioGleanData,
 } from '../GetDataTrio';
 import { Tooltip } from '../Tooltip';
 import { FtlMsg } from 'fxa-react/lib/utils';
 import classNames from 'classnames';
+import { ReactComponent as CodeIcon } from './code.min.svg';
 const actionTypeToNotification = {
   download: 'Downloaded',
   copy: 'Copied',
@@ -25,11 +25,9 @@ export type DataBlockProps = {
   value: string | string[];
   contentType?: DownloadContentType;
   prefixDataTestId?: string;
-  separator?: string;
-  onCopy?: (event: React.ClipboardEvent<HTMLDivElement>) => void;
+  onCopy?: (event: React.ClipboardEvent<HTMLElement>) => void;
   onAction?: actionFn;
   isIOS?: boolean;
-  isInline?: boolean;
   email: string;
   gleanDataAttrs: {
     copy?: GetDataTrioGleanData;
@@ -42,11 +40,9 @@ export const DataBlock = ({
   value,
   contentType,
   prefixDataTestId,
-  separator,
   onCopy,
   onAction = () => {},
   isIOS = false,
-  isInline = false,
   email,
   gleanDataAttrs,
 }: DataBlockProps) => {
@@ -65,58 +61,40 @@ export const DataBlock = ({
   };
 
   return (
-    <div className="flex flex-col items-center">
-      <div
+    <div className="w-full flex flex-col gap-3 items-center bg-white rounded-xl border-2 border-grey-100 px-5 pt-5 pb-3">
+      <ul
         className={classNames(
-          'relative flex font-mono text-center text-sm font-bold text-black bg-gradient-to-tr from-blue-600/10 to-purple-500/10 border border-transparent',
-          valueIsArray ? 'max-w-sm' : 'max-w-lg',
-          isInline
-            ? 'flex-nowrap w-full rounded py-2 px-3'
-            : 'flex-wrap mb-8 rounded-lg px-6 py-4'
+          'relative gap-2 w-full text-black text-sm font-mono font-bold',
+          valueIsArray ? 'grid grid-cols-2 max-w-sm' : 'flex flex-col max-w-lg'
         )}
-        data-testid={dataTestId}
         {...{ onCopy }}
+        data-testid={dataTestId}
       >
-        {valueIsArray ? (
-          (value as string[]).map((item) => (
-            <span key={item} className="flex-50% py-1">
-              {item}
-              {separator || ''}
-            </span>
-          ))
-        ) : (
-          <span
-            className={classNames({
-              'flex flex-col self-center align-middle grow': isInline,
-            })}
+        {(valueIsArray ? value : [value]).map((item) => (
+          <li
+            key={item}
+            className="px-3 py-[10px] flex items-center gap-3 rounded-lg bg-gradient-to-tr from-blue-600/10 to-purple-500/10 text-center justify-center mobileLandscape:justify-start"
           >
-            {value}
-          </span>
-        )}
+            <CodeIcon
+              className="w-6 h-auto hidden mobileLandscape:block"
+              aria-hidden
+            />
+            {item}
+          </li>
+        ))}
         {performedAction && tooltipVisible && (
           <FtlMsg id={`datablock-${performedAction}`} attrs={{ message: true }}>
             <Tooltip
               prefixDataTestId={`datablock-${performedAction}`}
               message={actionTypeToNotification[performedAction]}
-              anchorPosition={isInline ? 'end' : 'middle'}
-              position={isInline ? 'top' : 'bottom'}
+              anchorPosition="middle"
+              position="bottom"
               className="mt-1"
             ></Tooltip>
           </FtlMsg>
         )}
-        {isInline && (
-          <GetDataCopySingletonInline
-            {...{
-              value,
-              onAction: actionCb,
-              setTooltipVisible,
-              email,
-              gleanDataAttrs,
-            }}
-          />
-        )}
-      </div>
-      {isIOS && !isInline && (
+      </ul>
+      {isIOS ? (
         <GetDataCopySingleton
           {...{
             value,
@@ -126,8 +104,7 @@ export const DataBlock = ({
             gleanDataAttrs,
           }}
         />
-      )}
-      {!isIOS && !isInline && (
+      ) : (
         <GetDataTrio
           {...{
             value,

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

@@ -0,0 +1,3 @@
+# Tooltip notification when an account recovery key or one-time use code is copied.
+datablock-inline-copy =
+  .message = Copied

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

@@ -5,14 +5,13 @@
 import React from 'react';
 import { Meta } from '@storybook/react';
 import { withLocalization } from 'fxa-react/lib/storybooks';
-import DataBlockManual from '.';
+import { Subject } from './mocks';
+import DataBlockInline from '.';
 
 export default {
-  title: 'Components/DataBlockManual',
-  component: DataBlockManual,
+  title: 'Components/DataBlockInline',
+  component: DataBlockInline,
   decorators: [withLocalization],
 } as Meta;
 
-export const Default = () => (
-  <DataBlockManual secret={'MMMMOOOOZZZZIIIILLLLLLLLAAAAYAAY'} />
-);
+export const SingleCodeInlineCopy = () => <Subject />;