Rewrite in Typescript: Radio

src/scripts/Radio.js → src/scripts/Radio.tsx

@@ -1,16 +1,18 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { InputHTMLAttributes } from 'react';
 import classnames from 'classnames';
 
-const Radio = ({
-  className,
-  label,
-  name,
-  value,
-  checked,
-  defaultChecked,
-  ...props
-}) => {
+export type RadioProps = {
+  className?: string;
+  label?: string;
+  name?: string;
+  value?: string | number;
+  checked?: boolean;
+  defaultChecked?: boolean;
+};
+
+export const Radio: React.FC<
+  RadioProps & InputHTMLAttributes<HTMLInputElement>
+> = ({ className, label, name, value, checked, defaultChecked, ...props }) => {
   const radioClassNames = classnames(className, 'slds-radio');
   return (
     <label className={radioClassNames}>
@@ -27,14 +29,3 @@ const Radio = ({
     </label>
   );
 };
-
-Radio.propTypes = {
-  className: PropTypes.string,
-  label: PropTypes.string,
-  name: PropTypes.string,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  checked: PropTypes.bool,
-  defaultChecked: PropTypes.bool,
-};
-
-export default Radio;

src/scripts/index.js

@@ -17,7 +17,6 @@ import Form from './Form';
 import FormElement from './FormElement';
 import Input from './Input';
 import Textarea from './Textarea';
-import Radio from './Radio';
 import RadioGroup from './RadioGroup';
 import Checkbox from './Checkbox';
 import CheckboxGroup from './CheckboxGroup';
@@ -76,7 +75,6 @@ export {
   FormElement,
   Input,
   Textarea,
-  Radio,
   RadioGroup,
   Checkbox,
   CheckboxGroup,
@@ -123,5 +121,6 @@ export * from './BreadCrumbs';
 export * from './Button';
 export * from './ButtonGroup';
 export * from './MediaObject';
+export * from './Radio';
 
 export * from './ComponentSettings';

stories/RadioStories.js → stories/RadioStories.tsx

@@ -10,21 +10,21 @@ storiesOf('Radio', module)
     () => (
       <RadioGroup
         label={text('label', 'Radio Group Label')}
-        error={text('error')}
-        required={boolean('required')}
+        error={text('error', '')}
+        required={boolean('required', false)}
         onChange={action('change')}
       >
         <Radio
           label='Radio Label One'
           value='1'
-          disabled={boolean('disabled #1')}
-          checked={text('value') === '1'}
+          disabled={boolean('disabled #1', false)}
+          checked={text('value', '') === '1'}
         />
         <Radio
           label='Radio Label Two'
           value='2'
-          disabled={boolean('disabled #2')}
-          checked={text('value') === '2'}
+          disabled={boolean('disabled #2', false)}
+          checked={text('value', '') === '2'}
         />
       </RadioGroup>
     ),

test/storyshots/__snapshots__/storyshots.test.js.snap

@@ -39152,6 +39152,7 @@ exports[`Storyshots Radio Controlled with knobs 1`] = `
           >
             <input
               checked={false}
+              disabled={false}
               type="radio"
               value="1"
             />
@@ -39169,6 +39170,7 @@ exports[`Storyshots Radio Controlled with knobs 1`] = `
           >
             <input
               checked={false}
+              disabled={false}
               type="radio"
               value="2"
             />