Feat: migrate Radio from Javascript to Typescript

src/components/radio/Radio.stories.tsx

@@ -0,0 +1,33 @@
+import { action } from '@storybook/addon-actions'
+import { StoryFn, Meta } from '@storybook/react'
+import Radio from './Radio.js'
+
+const bigPicture = {
+  transform: 'scale(5)',
+  transformOrigin: 'top left'
+}
+
+const meta: Meta<typeof Radio> = {
+  title: 'Radio',
+  component: Radio
+}
+
+export default meta
+
+export const Default: StoryFn<typeof Radio> = () => (
+  <div>
+    <Radio className='ma2' label='Click me!' onChange={action('Checked')} />
+  </div>
+)
+
+export const Disabled: StoryFn<typeof Radio> = () => (
+  <div>
+    <Radio label='Click me!' className='ma2' disabled onChange={action('Checked')} />
+  </div>
+)
+
+export const Big: StoryFn<typeof Radio> = () => (
+  <div>
+    <Radio style={bigPicture} label='Click me!' className='ma2' onChange={action('Checked')} />
+  </div>
+)

src/components/radio/Radio.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import './Radio.css'
+
+interface RadioProps {
+  className?: string
+  label?: React.ReactNode
+  disabled?: boolean
+  checked?: boolean
+  onChange: (checked: boolean) => void
+  [x: string]: any
+}
+
+const Radio: React.FC<RadioProps> = ({ className = '', label = '', disabled = false, checked = false, onChange, ...props }) => {
+  let combinedClassName = `Radio dib sans-serif ${className}`
+  if (!disabled) {
+    combinedClassName += ' pointer'
+  }
+
+  const change = (event: React.ChangeEvent<HTMLInputElement>) => {
+    onChange(event.target.checked)
+  }
+
+  return (
+    <label className={combinedClassName} {...props}>
+      <input className='absolute' type='checkbox' checked={checked} disabled={disabled} onChange={change} />
+      <span className='dib v-mid br-100 w1 h1 pa1 border-box pointer'>
+        <span className='db br-100 w-100 h-100 o-0 bg-aqua'/>
+      </span>
+      <span className='v-mid pl2'>
+        {label}
+      </span>
+    </label>
+  )
+}
+
+export default Radio

src/files/modals/publish-modal/PublishModal.js

@@ -6,7 +6,7 @@ import Button from '../../../components/button/button.tsx'
 import { Modal, ModalActions, ModalBody } from '../../../components/modal/Modal.js'
 import Icon from '../../../icons/StrokeSpeaker.js'
 import { connect } from 'redux-bundler-react'
-import Radio from '../../../components/radio/Radio.js'
+import Radio from '../../../components/radio/Radio.tsx'
 import ProgressBar from '../../../components/progress-bar/ProgressBar.js'
 import GlyphCopy from '../../../icons/GlyphCopy.js'
 import GlyphTick from '../../../icons/GlyphTick.js'