@transferwise/components 46.13.0 → 46.15.0

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/tile/Tile.js

@@ -65,7 +65,7 @@ Tile.propTypes = {
   className: PropTypes.string,
   description: PropTypes.node,
   disabled: PropTypes.bool,
-  href: PropTypes.string.isRequired,
+  href: PropTypes.string,
   target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
   /** Accepts only Avatar and images */
   media: PropTypes.node.isRequired,

package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts

@@ -1,6 +0,0 @@
-export function explodeDate(date: any): {
-    year: any;
-    month: any;
-    day: any;
-};
-//# sourceMappingURL=explodeDate.d.ts.map

package/build/types/dateInput/utils/explodeDate/explodeDate.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"explodeDate.d.ts","sourceRoot":"","sources":["../../../../../src/dateInput/utils/explodeDate/explodeDate.js"],"names":[],"mappings":"AAAO;;;;EAMN"}

package/build/types/dateInput/utils/explodeDate/index.d.ts

@@ -1,2 +0,0 @@
-export { explodeDate } from "./explodeDate";
-//# sourceMappingURL=index.d.ts.map

package/build/types/dateInput/utils/explodeDate/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/dateInput/utils/explodeDate/index.js"],"names":[],"mappings":""}

package/build/types/decision/decisionEnums.d.ts

@@ -1,9 +0,0 @@
-export declare enum Presentation {
-    LIST = "LIST",
-    LIST_BLOCK = "LIST_BLOCK",
-    LIST_BLOCK_GRID = "LIST_BLOCK_GRID"
-}
-export declare enum Type {
-    NAVIGATION = "NAVIGATION"
-}
-//# sourceMappingURL=decisionEnums.d.ts.map

package/build/types/decision/decisionEnums.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"decisionEnums.d.ts","sourceRoot":"","sources":["../../../src/decision/decisionEnums.ts"],"names":[],"mappings":"AACA,oBAAY,YAAY;IACtB,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAGD,oBAAY,IAAI;IACd,UAAU,eAAe;CAC1B"}

package/build/types/sizeSwapper/SizeSwapper.d.ts

@@ -1,3 +0,0 @@
-export default SizeSwapper;
-declare const SizeSwapper: import("react").ForwardRefExoticComponent<import("react").RefAttributes<any>>;
-//# sourceMappingURL=SizeSwapper.d.ts.map

package/build/types/sizeSwapper/SizeSwapper.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SizeSwapper.d.ts","sourceRoot":"","sources":["../../../src/sizeSwapper/SizeSwapper.js"],"names":[],"mappings":";AASA,yGAqCG"}

package/build/types/sizeSwapper/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from "./SizeSwapper";
-//# sourceMappingURL=index.d.ts.map

package/build/types/sizeSwapper/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/sizeSwapper/index.js"],"names":[],"mappings":""}

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/common/dateUtils/isDateValid/isDateValid.js

@@ -1,6 +0,0 @@
-export const isDateValid = (date) => validDateObject(date) || validDateString(date);
-
-export const validDateString = (dateString) =>
-  typeof dateString === 'string' && validDateObject(new Date(dateString));
-
-const validDateObject = (dateObject) => dateObject instanceof Date && !isNaN(dateObject); // eslint-disable-line no-restricted-globals

package/src/dateInput/index.js

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

package/src/dateInput/utils/explodeDate/explodeDate.js

@@ -1,7 +0,0 @@
-export const explodeDate = (date) => {
-  const year = date.getFullYear();
-  const month = date.getMonth();
-  const day = date.getDate();
-
-  return { year, month, day };
-};

package/src/dateInput/utils/explodeDate/explodeDate.spec.js

@@ -1,11 +0,0 @@
-import { explodeDate } from '.';
-
-describe('explodeDate', () => {
-  it('returns exploded model for valid format', () => {
-    expect(explodeDate(new Date('1995-12-17T03:24:00'))).toStrictEqual({
-      day: 17,
-      month: 11,
-      year: 1995,
-    });
-  });
-});

package/src/dateInput/utils/explodeDate/index.js

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

package/src/decision/Decision.js

@@ -1,148 +0,0 @@
-import classNames from 'classnames';
-import PropTypes from 'prop-types';
-
-import { Size, Breakpoint } from '../common';
-import NavigationOption from '../navigationOption';
-import SizeSwapper from '../sizeSwapper';
-import Tile from '../tile';
-
-import { Presentation, Type } from './decisionEnums';
-
-const Decision = ({
-  options,
-  presentation,
-  type,
-  showMediaCircleInList,
-  isContainerAligned,
-  size,
-}) => {
-  if (type === Type.NAVIGATION) {
-    const { LIST_BLOCK, LIST_BLOCK_GRID } = Presentation;
-    if (presentation === LIST_BLOCK || presentation === LIST_BLOCK_GRID) {
-      const isSmall = size === Size.SMALL;
-      const isGrid = presentation === LIST_BLOCK_GRID;
-      const items = [
-        {
-          items: [],
-          layout: SizeSwapper.Layout.COLUMN,
-        },
-        {
-          items: [],
-          breakpoint: isSmall ? Breakpoint.EXTRA_SMALL : Breakpoint.SMALL,
-          wrap: isGrid,
-        },
-      ];
-
-      options.forEach(
-        ({ description, disabled, href, target, media: { block, list }, onClick, title }, key) => {
-          items[0].items.push(
-            <NavigationOption
-              // eslint-disable-next-line react/no-array-index-key
-              key={`nav-${key}`}
-              complex={false}
-              content={description}
-              disabled={disabled}
-              href={href}
-              target={target}
-              media={list}
-              showMediaAtAllSizes
-              showMediaCircle={showMediaCircleInList}
-              isContainerAligned={isContainerAligned}
-              title={title}
-              onClick={onClick}
-            />,
-          );
-          items[1].items.push(
-            <Tile
-              // eslint-disable-next-line react/no-array-index-key
-              key={`tile-${key}`}
-              className={classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
-                'np-decision__tile--fixed-width': isGrid,
-              })}
-              description={description}
-              disabled={disabled}
-              href={href}
-              target={target}
-              media={block}
-              size={isSmall ? Size.SMALL : Size.MEDIUM}
-              title={title}
-              onClick={onClick}
-            />,
-          );
-        },
-      );
-
-      return (
-        <div
-          className={classNames('np-decision', {
-            'np-decision--small': isSmall,
-            'np-decision--grid': isGrid,
-          })}
-        >
-          <SizeSwapper items={items} />
-        </div>
-      );
-    }
-    // LIST
-    return options.map(
-      ({ title, description, disabled, href, target, media: { list }, onClick }, key) => (
-        <NavigationOption
-          // eslint-disable-next-line react/no-array-index-key
-          key={`nav-${key}`}
-          complex={false}
-          content={description}
-          disabled={disabled}
-          href={href}
-          target={target}
-          media={list}
-          showMediaAtAllSizes
-          showMediaCircle={showMediaCircleInList}
-          isContainerAligned={isContainerAligned}
-          title={title}
-          onClick={onClick}
-        />
-      ),
-    );
-  }
-  return <></>;
-};
-
-Decision.propTypes = {
-  /**  A list of elements to be rendered */
-  options: PropTypes.arrayOf(
-    PropTypes.shape({
-      description: PropTypes.node,
-      disabled: PropTypes.bool,
-      href: PropTypes.string,
-      target: PropTypes.oneOf(['_self', '_blank', '_parent', '_top']),
-      media: PropTypes.shape({
-        block: PropTypes.node.isRequired,
-        list: PropTypes.node.isRequired,
-      }),
-      onClick: PropTypes.func,
-      title: PropTypes.node.isRequired,
-    }),
-  ).isRequired,
-  /**  Handles the display mode of the component */
-  presentation: PropTypes.oneOf(['LIST', 'LIST_BLOCK', 'LIST_BLOCK_GRID']),
-  /** Size currently affects only Tile dimension */
-  size: PropTypes.oneOf(['sm', 'md']),
-  /** Decide which kind of element type needs to be rendered ex: Navigation Options or in the future Radio or Checkbox Options */
-  type: PropTypes.oneOf(['NAVIGATION']),
-
-  /** Display media in a circle in list presentation */
-  showMediaCircleInList: PropTypes.bool,
-
-  /** Sets navigation options to be aligned with the parent container */
-  isContainerAligned: PropTypes.bool,
-};
-
-Decision.defaultProps = {
-  presentation: Presentation.LIST,
-  size: Size.MEDIUM,
-  type: Type.NAVIGATION,
-  showMediaCircleInList: true,
-  isContainerAligned: false,
-};
-
-export default Decision;

package/src/decision/decisionEnums.ts

@@ -1,11 +0,0 @@
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum Presentation {
-  LIST = 'LIST',
-  LIST_BLOCK = 'LIST_BLOCK',
-  LIST_BLOCK_GRID = 'LIST_BLOCK_GRID',
-}
-
-// TODO: consider to move this enum into component file once we migrate it on TypeScript or replace with some common enum
-export enum Type {
-  NAVIGATION = 'NAVIGATION',
-}

package/src/decision/index.js

@@ -1,2 +0,0 @@
-export { Presentation as DecisionPresentation, Type as DecisionType } from './decisionEnums';
-export { default } from './Decision';

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';