@transferwise/components 46.78.0 → 46.79.1

package/src/dateLookup/DateLookup.tests.story.tsx

@@ -1,21 +1,30 @@
 import { StoryFn } from '@storybook/react';
 import { expect, userEvent, within } from '@storybook/test';
+import { action } from '@storybook/addon-actions';
 import { useState } from 'react';
 
-import DateLookup from './DateLookup';
+import DateLookup, { type DateLookupProps } from './DateLookup';
 
 export default {
   component: DateLookup,
   title: 'Forms/DateLookup/Tests',
 };
 
+const props: DateLookupProps = {
+  value: new Date(1987, 0, 10, 12, 0, 0),
+  onChange: (value: Date | null) => {
+    action(value?.toString() || 'null');
+  },
+};
 type Story = StoryFn<typeof DateLookup>;
 
-const Template: Story = () => {
-  const [value, setValue] = useState<Date | null>(new Date(1987, 0, 10, 12, 0, 0));
+const Template: Story = (args: DateLookupProps) => {
+  const { value: initialValue } = args;
+  const [value, setValue] = useState<Date | null>(initialValue);
 
   return (
     <DateLookup
+      {...args}
       value={value}
       clearable
       placeholder="placeholder"
@@ -27,7 +36,7 @@ const Template: Story = () => {
 };
 
 export const ClearSpace = Template.bind({});
-
+ClearSpace.args = { ...props };
 ClearSpace.play = async ({ canvasElement, step }) => {
   const canvas = within(canvasElement);
 
@@ -46,7 +55,7 @@ ClearSpace.play = async ({ canvasElement, step }) => {
 };
 
 export const ClearEnter = Template.bind({});
-
+ClearEnter.args = { ...props };
 ClearEnter.play = async ({ canvasElement, step }) => {
   const canvas = within(canvasElement);
 
@@ -63,3 +72,29 @@ ClearEnter.play = async ({ canvasElement, step }) => {
     await expect(placeholder).toBeInTheDocument();
   });
 };
+
+export const FocusOnSelectedDay = Template.bind({});
+FocusOnSelectedDay.args = { ...props };
+FocusOnSelectedDay.play = async () => {
+  await userEvent.tab();
+  await userEvent.keyboard(' ');
+};
+
+export const FocusOnToday = Template.bind({});
+FocusOnToday.args = { ...props, value: null };
+FocusOnToday.play = async () => {
+  await userEvent.tab();
+  await userEvent.keyboard(' ');
+};
+
+export const FocusOnFirstNonDisabledDate = Template.bind({});
+FocusOnFirstNonDisabledDate.args = {
+  ...props,
+  value: null,
+  min: new Date(1987, 0, 10, 12, 0, 0),
+  max: new Date(1987, 0, 12, 12, 0, 0),
+};
+FocusOnFirstNonDisabledDate.play = async () => {
+  await userEvent.tab();
+  await userEvent.keyboard(' ');
+};

package/src/dateLookup/DateLookup.tsx

@@ -6,11 +6,11 @@ import {
   MonthFormat,
   Position,
   Breakpoint,
-  SizeSmall,
-  SizeMedium,
-  SizeLarge,
+  type SizeSmall,
+  type SizeMedium,
+  type SizeLarge,
 } from '../common';
-import { isWithinRange, moveToWithinRange } from '../common/dateUtils';
+import { isWithinRange, moveToWithinRange, returnDateView } from '../common/dateUtils';
 import ResponsivePanel from '../common/responsivePanel';
 import { WithInputAttributesProps, withInputAttributes } from '../inputs/contexts';
 import { OverlayIdContext, OverlayIdProvider } from '../provider/overlay/OverlayIdProvider';
@@ -72,13 +72,14 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
 
   constructor(props: DateLookup['props']) {
     super(props);
+    const dateView = returnDateView(props.value, props.min, props.max);
     this.state = {
       selectedDate: getStartOfDay(props.value),
       originalDate: null,
       min: getStartOfDay(props.min),
       max: getStartOfDay(props.max),
-      viewMonth: (props.value || new Date()).getMonth(),
-      viewYear: (props.value || new Date()).getFullYear(),
+      viewMonth: dateView.getMonth(),
+      viewYear: dateView.getFullYear(),
       open: false,
       mode: 'day',
       isMobile: false,
@@ -100,8 +101,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
         props.onChange(moveToWithinRange(selectedDate, min, max));
         return null;
       }
-      const viewDateThatIsWithinRange: Date =
-        selectedDate || ((min || max) && moveToWithinRange(new Date(), min, max)) || new Date();
+      const viewDateThatIsWithinRange: Date = returnDateView(selectedDate, min, max);
       const viewMonth = viewDateThatIsWithinRange.getMonth();
       const viewYear = viewDateThatIsWithinRange.getFullYear();
       return { selectedDate, min, max, viewMonth, viewYear };
@@ -209,9 +209,7 @@ class DateLookup extends PureComponent<DateLookupPropsWithInputAttributes, DateL
     } else {
       date = getStartOfDay(new Date());
     }
-    if (date) {
-      date = moveToWithinRange(date, min, max);
-    }
+    date &&= moveToWithinRange(date, min, max);
     if (date?.getTime() !== selectedDate?.getTime()) {
       this.props.onChange(date);
     }

package/src/dateLookup/dayCalendar/table/DayCalendarTable.tsx

@@ -1,6 +1,6 @@
 import { formatDate } from '@transferwise/formatting';
 import { PureComponent } from 'react';
-import { injectIntl, WrappedComponentProps } from 'react-intl';
+import { injectIntl, type WrappedComponentProps } from 'react-intl';
 
 import { getDayNames, isWithinRange } from '../../../common/dateUtils';
 import { getFocusableTime } from '../../getFocusableTime/getFocusableTime';
@@ -64,6 +64,9 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
   };
 
   isDisabled = (day: number) => {
+    if (day < 0) {
+      return true;
+    }
     const { min, max, viewMonth, viewYear } = this.props;
     const date = new Date(viewYear, viewMonth, day);
 
@@ -72,7 +75,7 @@ class DayCalendarTable extends PureComponent<DayCalendarTableProps> {
 
   isActive = (day: number) => {
     const { selectedDate, viewMonth, viewYear } = this.props;
-    return !!(selectedDate && +new Date(viewYear, viewMonth, day) === +selectedDate);
+    return !!(selectedDate && Number(new Date(viewYear, viewMonth, day)) === Number(selectedDate));
   };
 
   isToday = (day: number) => {

package/src/flowNavigation/{FlowNavigation.story.js → FlowNavigation.story.tsx}

@@ -24,6 +24,10 @@ const avatarProfiles = {
   Business: <BriefcaseIcon />,
   Profile: <ProfileIcon />,
 };
+type ProfileTypeKeys = keyof typeof ProfileType;
+
+const getAvatarProfile = (showAvatar: string) =>
+  showAvatar in avatarProfiles ? avatarProfiles[showAvatar as keyof typeof avatarProfiles] : null;
 
 export const Variants = () => {
   const [activeStep, setActiveStep] = useState(2);
@@ -32,7 +36,11 @@ export const Variants = () => {
   const showCloseButton = boolean('show closeButton', true);
   const showMobileBackButton = boolean('show mobile backButton', true);
   const done = boolean('done', false);
-  const profileType = select('profileType', Object.keys(ProfileType));
+  const profileType: ProfileTypeKeys | undefined = select(
+    'profileType',
+    Object.keys(ProfileType) as ProfileTypeKeys[],
+    undefined,
+  );
   const avatarURL = text(
     'avatarURL',
     'https://wise.com/web-art/assets/illustrations/heart-small@2x.webp',
@@ -44,7 +52,7 @@ export const Variants = () => {
         avatar={
           !showAvatar ? null : (
             <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-              {avatarProfiles[showAvatar]}
+              {getAvatarProfile(showAvatar)}
             </Avatar>
           )
         }
@@ -70,9 +78,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -112,9 +122,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -155,9 +167,11 @@ export const Variants = () => {
             onClick: () => setActiveStep(4),
           },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -171,9 +185,11 @@ export const Variants = () => {
           { label: 'Review', hoverLabel: 'Antonio Dozortevo', onClick: () => setActiveStep(1) },
           { label: 'Pay', hoverLabel: 'Enrico Gusso', onClick: () => setActiveStep(2) },
         ]}
-        onClose={showCloseButton && (() => setClosed(true))}
+        onClose={showCloseButton ? () => setClosed(true) : undefined}
         onGoBack={
-          showMobileBackButton && (() => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0))
+          showMobileBackButton
+            ? () => setActiveStep(activeStep - 1 > 0 ? activeStep - 1 : 0)
+            : undefined
         }
       />
 
@@ -216,7 +232,7 @@ export const SendFlow = () => {
       ...(activeStep > 3 && { onClick: handleStepClick(3) }),
     },
   ];
-  function handleStepClick(step) {
+  function handleStepClick(step: number) {
     return () => {
       setActiveStep(step);
     };
@@ -268,16 +284,18 @@ export const WithOverlayHeaderComparison = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {avatarProfiles[showAvatar]}
+                {getAvatarProfile(showAvatar)}
               </Avatar>
             ) : null
           }
           activeStep={activeStep}
           done={done}
           steps={[]}
-          onClose={showCloseButton && (() => setClosed(true))}
+          onClose={showCloseButton ? () => setClosed(true) : undefined}
           onGoBack={
-            showMobileBackButton && (() => setActiveStep(activeStep > 0 ? activeStep - 1 : 0))
+            showMobileBackButton
+              ? () => setActiveStep(activeStep > 0 ? activeStep - 1 : 0)
+              : undefined
           }
         />
       </div>
@@ -286,11 +304,11 @@ export const WithOverlayHeaderComparison = () => {
           avatar={
             showAvatar ? (
               <Avatar type={AvatarType.ICON} size={Size.MEDIUM}>
-                {avatarProfiles[showAvatar]}
+                {getAvatarProfile(showAvatar)}
               </Avatar>
             ) : null
           }
-          onClose={showCloseButton && (() => setClosed(true))}
+          onClose={showCloseButton ? () => setClosed(true) : undefined}
         />
       </div>
     </>

package/src/index.ts

@@ -59,6 +59,7 @@ export type {
   MoneyInputProps,
 } from './moneyInput';
 export type { NavigationOptionListProps } from './navigationOptionsList';
+export type { NavigationOptionProps } from './navigationOption/NavigationOption';
 export type { OverlayHeaderProps } from './overlayHeader';
 export type { PanelProps } from './common/panel';
 export type { PhoneNumberInputProps } from './phoneNumberInput/PhoneNumberInput';

package/src/inputWithDisplayFormat/InputWithDisplayFormat.story.tsx

@@ -0,0 +1,78 @@
+import { userEvent, within, fn } from '@storybook/test';
+
+import InputWithDisplayFormat, { InputWithDisplayFormatProps } from '.';
+import { Field, FieldProps } from '../field/Field';
+import { Meta, type StoryObj } from '@storybook/react';
+
+type Story = StoryObj<InputWithDisplayFormatProps & { label: string }>;
+
+const meta = {
+  title: 'Forms/InputWithDisplayFormat',
+  component: InputWithDisplayFormat,
+  render: function Render({ label, ...args }: InputWithDisplayFormatProps & FieldProps) {
+    return (
+      <Field label={label} id={args.id}>
+        <InputWithDisplayFormat id={args.id} {...args} />
+      </Field>
+    );
+  },
+  args: {
+    onFocus: fn(),
+    onBlur: fn(),
+    onChange: fn(),
+  },
+} satisfies Meta<typeof InputWithDisplayFormat>;
+export default meta;
+
+export const Basic: Story = {
+  args: {
+    label: 'Sort Code',
+    placeholder: '**-**-**',
+    displayPattern: '**-**-**',
+  },
+};
+
+export const CardNumber: Story = {
+  args: {
+    label: 'Card Number',
+    placeholder: '**** **** **** **** ***',
+    displayPattern: '**** **** **** **** ***',
+  },
+};
+
+export const CVC: Story = {
+  args: {
+    label: 'CVC',
+    placeholder: '***',
+    displayPattern: '***',
+    value: '',
+  },
+};
+
+export const ExpiryDate: Story = {
+  args: {
+    label: 'Expiry Date',
+    placeholder: '** / **',
+    displayPattern: '** / **',
+  },
+};
+
+export const SecurityPin: Story = {
+  args: {
+    label: 'Security Pin',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+};
+
+export const SecurityPinPlay: Story = {
+  args: {
+    label: 'Security Pin Play',
+    placeholder: '*-*-*-*-*-*',
+    displayPattern: '*-*-*-*-*-*',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.type(canvas.getByPlaceholderText('*-*-*-*-*-*'), '123456');
+  },
+};

package/src/navigationOption/{NavigationOption.story.js → NavigationOption.story.tsx}

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { action } from '@storybook/addon-actions';
 import { text, boolean } from '@storybook/addon-knobs';
 import {
@@ -19,8 +20,22 @@ export default {
   tags: ['autodocs'],
 };
 
-const Template = (props) => {
-  const href = text('href', props.href);
+type TemplateTypes = {
+  href?: string;
+  title?: string;
+  content?: string;
+  complex?: boolean;
+  disabled?: boolean;
+  showMediaAtAllSizes?: boolean;
+  showMediaCircle?: boolean;
+  isContainerAligned?: boolean;
+  className?: string;
+  hasTitleOnly?: boolean;
+  media?: ReactNode;
+};
+
+const Template = (props: TemplateTypes) => {
+  const href = text('href', props.href ?? '');
   const title = text('title', props.title ?? 'Navigation option');
   const content = text('content', props.content ?? 'Button and icon are vertically centered.');
   const complex = boolean('complex', props.complex ?? false);
@@ -28,7 +43,7 @@ const Template = (props) => {
   const showMediaAtAllSizes = boolean('showMediaAtAllSizes', props.showMediaAtAllSizes ?? false);
   const showMediaCircle = props.showMediaCircle ?? boolean('showMediaCircle', true);
   const isContainerAligned = boolean('isContainerAligned', false);
-  const className = text('className', props.className);
+  const className = text('className', props.className ?? '');
 
   return (
     <NavigationOption
@@ -140,7 +155,10 @@ export const Multiple = () => (
 
 export const WithIllustration = () => {
   return (
-    <Template media={<Illustration name={Assets.GLOBE} disablePadding />} showMediaCircle={false} />
+    <Template
+      media={<Illustration name={Assets.GLOBE} disablePadding alt="" />}
+      showMediaCircle={false}
+    />
   );
 };
 
@@ -166,7 +184,7 @@ export const WithContainerContent = () => (
   </>
 );
 
-const NavigationOptionTemplate = (props) => {
+const NavigationOptionTemplate = (props: TemplateTypes) => {
   const {
     href,
     title,

package/src/navigationOption/NavigationOption.tsx

@@ -6,7 +6,7 @@ import { Position } from '../common';
 import Option from '../common/Option';
 import { OptionProps, ReferenceType } from '../common/Option/Option';
 
-type NavigationOptionProps = OptionProps;
+export type NavigationOptionProps = OptionProps;
 
 const NavigationOption = forwardRef<ReferenceType, NavigationOptionProps>(
   ({ as: component = 'button', disabled = false, onClick, className, ...rest }, reference) => {