@transferwise/components 46.14.0 → 46.15.0

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