@transferwise/components 46.13.0 → 46.15.0

package/src/common/RadioButton/RadioButton.tsx

@@ -0,0 +1,43 @@
+import classNames from 'classnames';
+
+export interface RadioButtonProps<T extends string | number = string> {
+  id?: string;
+  name: string;
+  checked?: boolean;
+  onChange?: (value: T | '') => void;
+  disabled?: boolean;
+  value?: T | '';
+  readOnly?: boolean;
+}
+
+export default function RadioButton<T extends string | number = string>({
+  id,
+  value = '',
+  name,
+  checked,
+  onChange,
+  disabled,
+  readOnly,
+}: RadioButtonProps<T>) {
+  return (
+    <>
+      <input
+        type="radio"
+        className="sr-only"
+        id={id}
+        value={value}
+        name={name}
+        checked={checked}
+        disabled={disabled || readOnly}
+        onChange={() => {
+          if (!checked) {
+            onChange?.(value);
+          }
+        }}
+      />
+      <span className={classNames('tw-radio-button', { checked, disabled: disabled || readOnly })}>
+        <span className="tw-radio-check" />
+      </span>
+    </>
+  );
+}

package/src/common/commonProps.ts

@@ -14,7 +14,7 @@ export type AriaLabelProperty = {
 
 export type LinkProps = {
   href: string;
-  target?: '_blank' | '_self' | '_parent' | '_top';
+  target?: React.HTMLAttributeAnchorTarget;
   onClick?: React.MouseEventHandler<HTMLElement>;
 };
 

package/src/common/dateUtils/getDayNames/getDayNames.spec.js

@@ -6,11 +6,11 @@ jest.mock('@transferwise/formatting', () => ({
 
 describe('getDayNames', () => {
   it('returns all weekdays', () => {
-    expect(getDayNames()).toHaveLength(7);
+    expect(getDayNames('en')).toHaveLength(7);
   });
 
   it('starts with Monday and ends with Sunday', () => {
-    const days = getDayNames();
+    const days = getDayNames('en');
     expect(days[0]).toBe(1);
     expect(days[days.length - 1]).toBe(0);
   });

package/src/common/dateUtils/getDayNames/{getDayNames.js → getDayNames.ts}

@@ -1,7 +1,10 @@
 import { formatDate } from '@transferwise/formatting';
 
-export function getDayNames(locale, format = 'short') {
-  const days = [];
+export function getDayNames(
+  locale: string,
+  format: Intl.DateTimeFormatOptions['weekday'] = 'short',
+) {
+  const days: string[] = [];
   const date = new Date(2018, 0, 1); // 2018 started with Monday
   while (days.length < 7) {
     days.push(formatDate(date, locale, { weekday: format }));

package/src/common/dateUtils/getMonthNames/getMonthNames.spec.js

@@ -1,8 +1,4 @@
-import { getMonthNames } from '..';
-
-jest.mock('@transferwise/formatting', () => ({
-  formatDate: (month) => month.getMonth(),
-}));
+import { getMonthNames } from './getMonthNames';
 
 describe('getMonthNames', () => {
   it('returns all months', () => {
@@ -10,8 +6,13 @@ describe('getMonthNames', () => {
   });
 
   it('starts with January and ends with December', () => {
-    const months = getMonthNames();
-    expect(months[0]).toBe(0);
-    expect(months[months.length - 1]).toBe(11);
+    const months = getMonthNames('en', 'long');
+    expect(months[0]).toBe('January');
+    expect(months.at(-1)).toBe('December');
+  });
+
+  it('gets localized month names', () => {
+    const months = getMonthNames('fr', 'long');
+    expect(months[0]).toBe('janvier');
   });
 });

package/src/common/dateUtils/getMonthNames/{getMonthNames.js → getMonthNames.ts}

@@ -1,13 +1,15 @@
 import { formatDate } from '@transferwise/formatting';
 
-export const getMonthNames = (locale, format = 'long') => {
-  const months = [];
+export const getMonthNames = (
+  locale: string,
+  format: Intl.DateTimeFormatOptions['month'] = 'long',
+): string[] => {
+  const months: string[] = [];
   const date = new Date(2018, 0, 1);
   const monthFormat = { month: format };
   while (months.length < 12) {
     months.push(formatDate(date, locale, monthFormat));
     date.setMonth(date.getMonth() + 1);
   }
-
   return months;
 };

package/src/common/dateUtils/isDateValid/{isDateValid.spec.js → isDateValid.spec.ts}

@@ -1,4 +1,4 @@
-import { isDateValid } from '.';
+import { isDateValid } from '..';
 
 describe('isDateValid', () => {
   it('should return false for invalid format', () => {

package/src/common/dateUtils/isDateValid/isDateValid.ts

@@ -0,0 +1,13 @@
+export const isDateValid = (date: Date | string | null) => {
+  if (date === null) {
+    return false;
+  } else if (date instanceof Date) {
+    return validDateObject(date);
+  } else {
+    return validDateString(date);
+  }
+};
+
+export const validDateString = (dateString: string) => validDateObject(new Date(dateString));
+
+const validDateObject = (dateObject: Date) => !isNaN(dateObject.getTime());

package/src/common/dateUtils/isMonthAndYearFormat/isMonthAndYearFormat.spec.js

@@ -1,15 +1,11 @@
-import { isMonthAndYearFormat } from '.';
+import { isMonthAndYearFormat } from '..';
 
 describe('isDateValid', () => {
-  it('should return false if day is provided', () => {
+  it('should return false if day is provided as string', () => {
     expect(isMonthAndYearFormat('1998-02-04')).toBe(false);
   });
 
-  it('should return true if day is not provided', () => {
+  it('should return true if day is not provided as string', () => {
     expect(isMonthAndYearFormat('1998-02')).toBe(true);
   });
-
-  it('should return false if argument provided is not a string', () => {
-    expect(isMonthAndYearFormat([])).toBe(false);
-  });
 });

package/src/common/dateUtils/isMonthAndYearFormat/{isMonthAndYearFormat.js → isMonthAndYearFormat.ts}

@@ -1,4 +1,4 @@
 import { validDateString } from '../isDateValid';
 
-export const isMonthAndYearFormat = (dateString) =>
+export const isMonthAndYearFormat = (dateString: string) =>
   validDateString(dateString) && dateString.split('-').length < 3;

package/src/common/dateUtils/isWithinRange/{isWithinRange.spec.js → isWithinRange.spec.ts}

@@ -1,14 +1,6 @@
 import { isWithinRange } from '..';
 
 describe('isWithinRange', () => {
-  it('returns true when no dates are provided', () => {
-    expect(isWithinRange()).toBe(true);
-  });
-
-  it('returns true when no min and max', () => {
-    expect(isWithinRange(new Date())).toBe(true);
-  });
-
   it('returns true when date is between min and max', () => {
     const date = new Date('1995-12-20');
     const min = new Date('1995-12-19');
@@ -27,7 +19,6 @@ describe('isWithinRange', () => {
     const date = new Date('1995-12-20');
     const min = new Date('1995-12-21');
     const max = new Date('1995-12-22');
-    expect(isWithinRange(date, min)).toBe(false);
     expect(isWithinRange(date, min, max)).toBe(false);
   });
 
@@ -35,7 +26,6 @@ describe('isWithinRange', () => {
     const date = new Date('1995-12-23');
     const min = new Date('1995-12-20');
     const max = new Date('1995-12-22');
-    expect(isWithinRange(date, null, max)).toBe(false);
     expect(isWithinRange(date, min, max)).toBe(false);
   });
 });

package/src/common/dateUtils/isWithinRange/{isWithinRange.js → isWithinRange.ts}

@@ -1,3 +1,3 @@
-export function isWithinRange(date, min, max) {
+export function isWithinRange(date: Date, min: Date, max: Date) {
   return !date || ((!min || date >= min) && (!max || date <= max));
 }

package/src/common/dateUtils/moveToWithinRange/{moveToWithinRange.js → moveToWithinRange.ts}

@@ -1,6 +1,6 @@
-import { isWithinRange } from '../isWithinRange';
+import { isWithinRange } from '..';
 
 // Makes sure that date is between min and max dates, returns a cloned min or max
-export function moveToWithinRange(date, min, max) {
+export function moveToWithinRange(date: Date, min: Date, max: Date) {
   return isWithinRange(date, min, max) ? date : new Date(min && date < min ? +min : +max);
 }

package/src/dateInput/DateInput.spec.js

@@ -4,44 +4,12 @@ import { useIntl } from 'react-intl';
 import { DateInput, Input } from '..';
 import { mockMatchMedia, mockResizeObserver } from '../test-utils';
 
-const MONTHS_FR = [
-  'janvier',
-  'février',
-  'mars',
-  'avril',
-  'mai',
-  'juin',
-  'juillet',
-  'août',
-  'septembre',
-  'octobre',
-  'novembre',
-  'décembre',
-];
-
-const MONTHS_EN = [
-  'January',
-  'February',
-  'March',
-  'April',
-  'May',
-  'June',
-  'July',
-  'August',
-  'September',
-  'October',
-  'November',
-  'December',
-];
-
 const LOCALES = {
-  fr: 'fr-FR',
   jp: 'ja-JP',
 };
-
 const DEFAULT_LOCALE = 'en-GB';
-
-const FEBRUARY_OPTION = { value: MONTHS_EN[1] };
+const FEBRUARY_INDEX = 1;
+const AUGUST_INDEX = 7;
 
 const DAY_SELECTOR = 'ForwardRef(Input)[name="day"]';
 const MONTH_SELECTOR = 'SelectInput';
@@ -73,12 +41,6 @@ jest.mock('./DateInput.messages', () => ({
 }));
 
 jest.mock('react-intl');
-jest.mock('@transferwise/formatting', () => {
-  return {
-    formatDate: (month, locale) =>
-      locale === LOCALES.fr ? MONTHS_FR[month.getMonth()] : MONTHS_EN[month.getMonth()],
-  };
-});
 
 describe('Date Input Component', () => {
   let selectMonth;
@@ -111,7 +73,7 @@ describe('Date Input Component', () => {
     });
 
     it('sets month field to 0', () => {
-      expect(selectMonth.props().value).toBeUndefined();
+      expect(selectMonth.props().value).toBeNull();
     });
 
     it('sets year field to empty', () => {
@@ -143,7 +105,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(1);
-        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
+        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
         expect(inputYear.prop('value')).toBe(1971);
       });
     });
@@ -157,7 +119,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(22);
-        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
+        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -171,7 +133,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe('');
-        expect(selectMonth.prop('value').label).toBe(MONTHS_EN[7]);
+        expect(selectMonth.prop('value')).toBe(AUGUST_INDEX);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -185,7 +147,7 @@ describe('Date Input Component', () => {
         inputYear = component.find(YEAR_SELECTOR);
 
         expect(inputDay.prop('value')).toBe(28);
-        expect(selectMonth.prop('value').label).toBe(FEBRUARY_OPTION.value);
+        expect(selectMonth.prop('value')).toBe(FEBRUARY_INDEX);
         expect(inputYear.prop('value')).toBe(1990);
       });
     });
@@ -220,17 +182,6 @@ describe('Date Input Component', () => {
   });
 
   describe('when locale is provided', () => {
-    it('updates selectMonth based on locale', () => {
-      useIntl.mockReturnValue({
-        locale: LOCALES.fr,
-        formatMessage: (message) => message.defaultMessage,
-      });
-      component = shallow(<DateInput {...props} />);
-      selectMonth = component.find(MONTH_SELECTOR);
-
-      expect(selectMonth.props().items[0].value.label).toStrictEqual(MONTHS_FR[0]);
-    });
-
     it('shows day before month if locale not US', () => {
       component = shallow(<DateInput {...props} />);
 

package/src/dateInput/DateInput.story.tsx

@@ -1,9 +1,12 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { userEvent, within } from '@storybook/test';
+import * as React from 'react';
 
-import { DateInput, Info, InlineAlert, Title, Typography } from '..';
+import { DateInput, DateMode, Info, InlineAlert, Title, Typography } from '..';
 import { lorem10, storyConfig } from '../test-utils';
 
+import { DateInputProps } from './DateInput';
+
 export default {
   component: DateInput,
   title: 'Forms/DateInput',
@@ -14,17 +17,15 @@ export default {
     yearLabel: 'Year input',
     yearAutoComplete: 'bday-year',
     selectProps: {
-      buttonProps: {
-        'aria-label': 'Select month',
-      },
+      placeholder: 'Month',
     },
   },
   tags: ['autodocs'],
 } satisfies Meta<typeof DateInput>;
 
-type Story = StoryObj<typeof DateInput>;
+type Story = StoryObj<DateInputProps>;
 
-export const Basic: Story = {};
+export const Basic: StoryObj = {};
 
 Basic.play = async ({ canvasElement }) => {
   const canvas = within(canvasElement);
@@ -65,8 +66,10 @@ export const WithLabel: Story = {
           label (rare use case)
         </Title>
         <fieldset>
-          <legend className="control-label">Expiry Date</legend>
-          <DateInput {...args} />
+          <legend className="control-label">
+            Expiry Date for Credit Card (example of MONTH_YEAR mode)
+          </legend>
+          <DateInput {...args} mode={DateMode.MONTH_YEAR} />
         </fieldset>
       </>
     );