@transferwise/components 46.14.0 → 46.16.0

package/src/moneyInput/MoneyInput.tsx

@@ -90,6 +90,7 @@ const allowedInputKeys = new Set([
 
 export interface MoneyInputProps extends WrappedComponentProps {
   id?: string;
+  'aria-labelledby'?: string;
   currencies: readonly CurrencyItem[];
   selectedCurrency: CurrencyOptionItem;
   onCurrencyChange?: (value: CurrencyOptionItem) => void;
@@ -295,8 +296,16 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
   style = (className: string) => this.props.classNames[className] || className;
 
   render() {
-    const { selectedCurrency, onCurrencyChange, size, addon, id, selectProps, maxLengthOverride } =
-      this.props;
+    const {
+      selectedCurrency,
+      onCurrencyChange,
+      size,
+      addon,
+      id,
+      'aria-labelledby': ariaLabelledBy,
+      selectProps,
+      maxLengthOverride,
+    } = this.props;
     const selectOptions = this.getSelectOptions();
 
     const hasSingleCurrency = () => {
@@ -326,6 +335,7 @@ class MoneyInput extends Component<MoneyInputProps, MoneyInputState> {
     const disabled = !this.props.onAmountChange;
     return (
       <div
+        aria-labelledby={ariaLabelledBy}
         className={classNames(
           this.style('tw-money-input'),
           this.style('input-group'),

package/src/radio/{Radio.story.js → Radio.story.tsx}

@@ -1,5 +1,4 @@
 import { boolean, text } from '@storybook/addon-knobs';
-import { Check } from '@transferwise/icons';
 import { Flag } from '@wise/art';
 import { useState } from 'react';
 
@@ -62,7 +61,6 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          name="lol"
           id="test"
           checked={checked}
           disabled={disabled}
@@ -73,7 +71,6 @@ export const Basic = () => {
       <div className={`form-group  ${hasError ? 'has-error' : ''}`}>
         <Checkbox
           label={label}
-          name="lol"
           id="test"
           checked={checked}
           disabled={disabled}

package/src/radio/{Radio.js → Radio.tsx}

@@ -1,12 +1,27 @@
 import { useTheme } from '@wise/components-theming';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 import Body from '../body/Body';
 import { Typography } from '../common';
 import RadioButton from '../common/RadioButton';
+import { RadioButtonProps } from '../common/RadioButton/RadioButton';
 
-const Radio = ({ label, id, disabled, className, avatar, secondary, ...otherProps }) => {
+export interface RadioProps<T extends string | number = string> extends RadioButtonProps<T> {
+  avatar?: React.ReactNode;
+  label: string;
+  secondary?: string;
+  className?: string;
+}
+
+export default function Radio<T extends string | number = string>({
+  label,
+  id,
+  disabled,
+  className,
+  avatar,
+  secondary,
+  ...otherProps
+}: RadioProps<T>) {
   const { isModern } = useTheme();
   return (
     <div
@@ -39,29 +54,4 @@ const Radio = ({ label, id, disabled, className, avatar, secondary, ...otherProp
       </label>
     </div>
   );
-};
-
-Radio.propTypes = {
-  avatar: PropTypes.element,
-  checked: PropTypes.bool,
-  disabled: PropTypes.bool,
-  id: PropTypes.string,
-  label: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  onChange: PropTypes.func.isRequired,
-  secondary: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  className: PropTypes.string,
-};
-
-Radio.defaultProps = {
-  avatar: undefined,
-  checked: false,
-  disabled: false,
-  id: null,
-  secondary: null,
-  value: '',
-  className: undefined,
-};
-
-export default Radio;
+}

package/src/radio/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Radio';
+export type { RadioProps } from './Radio';

package/src/radioGroup/RadioGroup.spec.js

@@ -40,37 +40,35 @@ describe('RadioGroup', () => {
   it('renders radio options', () => {
     const component = shallow(<RadioGroup radios={RADIOS} {...props} />);
     expect(component.find(Radio)).toHaveLength(RADIOS.length);
-    expect(JSON.stringify(component.find(Radio).at(0).props())).toStrictEqual(
-      JSON.stringify({
-        id: 'id-test-0',
-        value: 'value-test0',
-        label: 'Radio1',
-        name: 'radio-group',
-        disabled: true,
-        checked: false,
-        secondary: 'secondary',
-        onChange: () => props.onChange,
-        avatar,
-      }),
-    );
+
+    const { onChange, ...primitiveProps } = component.find(Radio).at(0).props();
+    expect(primitiveProps).toStrictEqual({
+      id: 'id-test-0',
+      value: 'value-test0',
+      label: 'Radio1',
+      name: 'radio-group',
+      disabled: true,
+      checked: false,
+      secondary: 'secondary',
+      avatar,
+    });
   });
 
   it('renders a single radio option, when radios array contains a single element', () => {
     const component = shallow(<RadioGroup radios={RADIOS.slice(0, 1)} {...props} />);
     expect(component.find(Radio)).toHaveLength(1);
-    expect(JSON.stringify(component.find(Radio).at(0).props())).toStrictEqual(
-      JSON.stringify({
-        id: 'id-test-0',
-        value: 'value-test0',
-        label: 'Radio1',
-        name: 'radio-group',
-        disabled: true,
-        checked: false,
-        secondary: 'secondary',
-        onChange: () => props.onChange,
-        avatar,
-      }),
-    );
+
+    const { onChange, ...primitiveProps } = component.find(Radio).at(0).props();
+    expect(primitiveProps).toStrictEqual({
+      id: 'id-test-0',
+      value: 'value-test0',
+      label: 'Radio1',
+      name: 'radio-group',
+      disabled: true,
+      checked: false,
+      secondary: 'secondary',
+      avatar,
+    });
   });
 
   it('checks specified radio', () => {

package/src/radioGroup/{RadioGroup.story.js → RadioGroup.story.tsx}

@@ -31,14 +31,12 @@ export const Basic = () => {
             value: 'radio-1',
             label: 'Radio1',
             secondary: 'Secondary line 1',
-            name: 'name',
             disabled: false,
             avatar,
           },
           {
             value: 'radio-2',
             label: 'Radio2',
-            name: 'name',
             disabled: false,
             avatar,
           },
@@ -46,7 +44,6 @@ export const Basic = () => {
             value: 'radio-3',
             label: 'Radio3',
             secondary: 'Secondary line 3',
-            name: 'name',
             disabled: true,
             avatar,
           },

package/src/radioGroup/RadioGroup.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+
+import Radio from '../radio';
+import { RadioProps } from '../radio/Radio';
+
+export interface RadioGroupProps<T extends string | number = string> {
+  name: string;
+  radios: Omit<RadioProps<T>, 'name' | 'checked' | 'onChange' | 'className'>[];
+  selectedValue?: T | '';
+  onChange: NonNullable<RadioProps<T>['onChange']>;
+}
+
+export default function RadioGroup<T extends string | number = string>({
+  name,
+  radios,
+  selectedValue: controlledValue,
+  onChange,
+}: RadioGroupProps<T>) {
+  const [uncontrolledValue, setUncontrolledValue] = useState(controlledValue);
+
+  return radios.length > 0 ? (
+    <div role="radiogroup">
+      {radios.map(({ value = '', ...restProps }, index) => (
+        <Radio
+          // eslint-disable-next-line react/no-array-index-key
+          key={index}
+          {...restProps}
+          name={name}
+          value={value}
+          checked={value === uncontrolledValue}
+          onChange={(nextValue) => {
+            setUncontrolledValue(nextValue);
+            onChange(nextValue);
+          }}
+        />
+      ))}
+    </div>
+  ) : null;
+}

package/src/radioGroup/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioGroup';
+export type { RadioGroupProps } from './RadioGroup';

package/src/radioOption/RadioOption.spec.js

@@ -38,9 +38,9 @@ describe('Radio option', () => {
   });
 
   it('passes checked to radio button passed as button', () => {
-    expect(buttonProperty('checked')).toBe(false);
+    expect(buttonProperty('checked')).toBeFalsy();
     component.setProps({ checked: true });
-    expect(buttonProperty('checked')).toBe(true);
+    expect(buttonProperty('checked')).toBeTruthy();
   });
 
   it('passes change handler to radio button passed as button', () => {
@@ -50,9 +50,9 @@ describe('Radio option', () => {
   });
 
   it('passes disabled to radio button passed as button', () => {
-    expect(buttonProperty('disabled')).toBe(false);
+    expect(buttonProperty('disabled')).toBeFalsy();
     component.setProps({ disabled: true });
-    expect(buttonProperty('disabled')).toBe(true);
+    expect(buttonProperty('disabled')).toBeTruthy();
   });
 
   it('renders aligned with container content', () => {

package/src/radioOption/{RadioOption.story.js → RadioOption.story.tsx}

@@ -5,14 +5,14 @@ import { useState } from 'react';
 
 import { Nudge } from '..';
 
-import RadioOption from './RadioOption';
+import RadioOption, { RadioOptionProps } from './RadioOption';
 
 export default {
   component: RadioOption,
   title: 'Option/RadioOption',
 };
 
-const Template = (props) => {
+const Template = (props: Partial<RadioOptionProps>) => {
   const showMediaAtAllSizes = boolean('showMediaAtAllSizes', false);
   const title = text('title', 'title');
   const disabled = boolean('disabled', false);
@@ -32,9 +32,9 @@ const Template = (props) => {
       value="value"
       showMediaAtAllSizes={showMediaAtAllSizes}
       isContainerAligned={isContainerAligned}
-      onChange={() => {
+      onChange={(value) => {
         action('checked');
-        props.onChange();
+        props.onChange?.(value);
       }}
     />
   );

package/src/radioOption/RadioOption.tsx

@@ -0,0 +1,60 @@
+import Option from '../common/Option';
+import RadioButton from '../common/RadioButton';
+import { RadioButtonProps } from '../common/RadioButton/RadioButton';
+
+export interface RadioOptionProps<T extends string | number = string>
+  extends Required<Pick<RadioButtonProps<T>, 'id' | 'name' | 'onChange'>>,
+    Omit<RadioButtonProps<T>, 'readOnly' | 'id' | 'name' | 'onChange'> {
+  'aria-label'?: string;
+  media?: React.ReactNode;
+  title: React.ReactNode;
+  content?: React.ReactNode;
+  complex?: boolean;
+  showMediaCircle?: boolean;
+  showMediaAtAllSizes?: boolean;
+  isContainerAligned?: boolean;
+}
+
+function RadioOption<T extends string | number = string>({
+  'aria-label': ariaLabel,
+  media,
+  title,
+  content,
+  id,
+  name,
+  checked,
+  onChange,
+  complex,
+  disabled,
+  value,
+  showMediaCircle,
+  showMediaAtAllSizes,
+  isContainerAligned,
+}: RadioOptionProps<T>) {
+  return (
+    <Option
+      aria-label={ariaLabel}
+      media={media}
+      title={title}
+      content={content}
+      name={name}
+      complex={complex}
+      disabled={disabled}
+      showMediaCircle={showMediaCircle}
+      showMediaAtAllSizes={showMediaAtAllSizes}
+      isContainerAligned={isContainerAligned}
+      button={
+        <RadioButton
+          id={id}
+          name={name}
+          checked={checked}
+          disabled={disabled}
+          value={value}
+          onChange={onChange}
+        />
+      }
+    />
+  );
+}
+
+export default RadioOption;

package/src/radioOption/index.ts

@@ -0,0 +1,2 @@
+export { default } from './RadioOption';
+export type { RadioOptionProps } from './RadioOption';

package/src/common/RadioButton/RadioButton.js

@@ -1,41 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-const RadioButton = ({ id, value, name, checked, onChange, disabled, readOnly }) => (
-  <>
-    <input
-      type="radio"
-      className="sr-only"
-      id={id}
-      value={value}
-      name={name}
-      checked={checked}
-      disabled={disabled || readOnly}
-      onChange={() => (!checked ? onChange(value) : null)}
-    />
-    <span className={classNames('tw-radio-button', { checked, disabled: disabled || readOnly })}>
-      <span className="tw-radio-check" />
-    </span>
-  </>
-);
-
-RadioButton.propTypes = {
-  id: PropTypes.string,
-  name: PropTypes.string.isRequired,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func,
-  disabled: PropTypes.bool,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  readOnly: PropTypes.bool,
-};
-
-RadioButton.defaultProps = {
-  checked: false,
-  onChange: () => {},
-  disabled: false,
-  id: null,
-  value: '',
-  readOnly: false,
-};
-
-export default RadioButton;

package/src/instructionsList/index.js

@@ -1,3 +0,0 @@
-import InstructionsList from './InstructionsList';
-
-export default InstructionsList;

package/src/radio/index.js

@@ -1,3 +0,0 @@
-import Radio from './Radio';
-
-export default Radio;

package/src/radioGroup/RadioGroup.js

@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-import { Component } from 'react';
-
-import Radio from '../radio';
-
-class RadioGroup extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedValue: props.selectedValue,
-    };
-  }
-
-  handleOnChange = (selectedValue) => {
-    const { onChange } = this.props;
-    this.setState({ selectedValue }, onChange && onChange(selectedValue));
-  };
-
-  render() {
-    const { radios, name } = this.props;
-    const { selectedValue } = this.state;
-    return radios && radios.length > 0 ? (
-      <div role="radiogroup">
-        {radios.map(({ id, avatar, value, label, disabled, secondary, readOnly }, index) => (
-          <Radio
-            // eslint-disable-next-line react/no-array-index-key
-            key={index}
-            id={id}
-            value={value}
-            label={label}
-            name={name}
-            disabled={disabled}
-            checked={selectedValue === value}
-            secondary={secondary}
-            readOnly={readOnly}
-            avatar={avatar}
-            onChange={(value_) => this.handleOnChange(value_)}
-          />
-        ))}
-      </div>
-    ) : null;
-  }
-}
-
-RadioGroup.propTypes = {
-  radios: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      avatar: PropTypes.element,
-      value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-      secondary: PropTypes.string,
-      label: PropTypes.string.isRequired,
-      disabled: PropTypes.bool,
-      readOnly: PropTypes.bool,
-    }),
-  ).isRequired,
-  onChange: PropTypes.func.isRequired,
-  selectedValue: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  name: PropTypes.string.isRequired,
-};
-
-RadioGroup.defaultProps = {
-  selectedValue: null,
-};
-
-export default RadioGroup;

package/src/radioGroup/index.js

@@ -1 +0,0 @@
-export { default } from './RadioGroup';

package/src/radioOption/RadioOption.js

@@ -1,81 +0,0 @@
-import PropTypes from 'prop-types';
-
-import Option from '../common/Option';
-import RadioButton from '../common/RadioButton';
-
-const RadioOption = ({
-  'aria-label': ariaLabel,
-  media,
-  title,
-  content,
-  id,
-  name,
-  checked,
-  onChange,
-  complex,
-  disabled,
-  value,
-  showMediaCircle,
-  showMediaAtAllSizes,
-  isContainerAligned,
-}) => {
-  const sharedProps = {
-    'aria-label': ariaLabel,
-    media,
-    title,
-    content,
-    name,
-    complex,
-    disabled,
-    showMediaCircle,
-    showMediaAtAllSizes,
-    isContainerAligned,
-  };
-  return (
-    <Option
-      {...sharedProps}
-      button={
-        <RadioButton
-          id={id}
-          name={name}
-          checked={checked}
-          disabled={disabled}
-          value={value}
-          onChange={onChange}
-        />
-      }
-    />
-  );
-};
-
-RadioOption.propTypes = {
-  'aria-label': PropTypes.string,
-  media: PropTypes.node,
-  id: PropTypes.string.isRequired,
-  name: PropTypes.string.isRequired,
-  title: PropTypes.node.isRequired,
-  content: PropTypes.node,
-  checked: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  complex: PropTypes.bool,
-  disabled: PropTypes.bool,
-  value: PropTypes.string,
-  showMediaCircle: PropTypes.bool,
-  showMediaAtAllSizes: PropTypes.bool,
-  isContainerAligned: PropTypes.bool,
-};
-
-RadioOption.defaultProps = {
-  'aria-label': undefined,
-  media: null,
-  content: null,
-  checked: false,
-  complex: false,
-  disabled: false,
-  showMediaCircle: true,
-  showMediaAtAllSizes: false,
-  isContainerAligned: false,
-  value: '',
-};
-
-export default RadioOption;

package/src/radioOption/index.js

@@ -1 +0,0 @@
-export { default } from './RadioOption';