ui v2: radio button (#728)

frontend/packages/core/src/Input/radio-group.tsx

@@ -1,13 +1,14 @@
-import React from "react";
+import * as React from "react";
 import {
   FormControl as MuiFormControl,
   FormControlLabel,
   FormLabel as MuiFormLabel,
-  Radio as MuiRadio,
   RadioGroup as MuiRadioGroup,
 } from "@material-ui/core";
 import styled from "styled-components";
 
+import Radio from "./radio";
+
 const FormLabel = styled(MuiFormLabel)`
   ${({ theme }) => `
   && {
@@ -34,14 +35,6 @@ const FormControl = styled(MuiFormControl)`
   `}
 `;
 
-const Radio = styled(MuiRadio)`
-  ${({ theme }) => `
-  &.Mui-checked {
-    color: ${theme.palette.accent.main};
-  }
-  `}
-`;
-
 interface RadioGroupOption {
   label: string;
   value?: string;
@@ -95,12 +88,12 @@ const RadioGroup: React.FC<RadioGroupProps> = ({
         defaultValue={options[defaultIdx]?.value || options[defaultIdx].label}
         onChange={updateSelectedOption}
       >
-        {options.map(option => {
+        {options.map((option, idx) => {
           return (
             <FormControlLabel
               key={option.label}
               value={option?.value || option.label}
-              control={<Radio />}
+              control={<Radio selected={idx === selectedIdx} />}
               label={option.label}
             />
           );

frontend/packages/core/src/Input/radio.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import styled from "@emotion/styled";
+import type { RadioProps as MuiRadioProps } from "@material-ui/core";
+import { Radio as MuiRadio } from "@material-ui/core";
+
+const StyledRadio = styled(MuiRadio)(
+  {
+    ".MuiIconButton-label": {
+      height: "24px",
+      width: "24px",
+      borderRadius: "100px",
+      boxSizing: "border-box",
+    },
+  },
+  props => ({
+    "&:hover > .MuiIconButton-label > div": {
+      border: props.checked ? "1px solid #283CD2" : "1px solid #2E45DC",
+    },
+  })
+);
+
+const Icon = styled.div(
+  {
+    height: "24px",
+    width: "24px",
+    border: "1px solid rgba(13, 16, 48, 0.38)",
+    borderRadius: "100px",
+    boxSizing: "border-box",
+  },
+  props => ({
+    border: props["data-disabled"] ? "1px solid #DFE2E4" : "1px solid rgba(13, 16, 48, 0.38)",
+  })
+);
+
+const SelectedIcon = styled.div({
+  height: "24px",
+  width: "24px",
+  background: "#2E45DC",
+  border: "1px solid #283CD2",
+  borderRadius: "100px",
+  boxSizing: "border-box",
+});
+
+const SelectedCenter = styled.div({
+  height: "12px",
+  width: "12px",
+  background: "#FFFFFF",
+  borderRadius: "100px",
+  boxSizing: "border-box",
+  margin: "5px 5px",
+});
+
+export interface RadioProps extends Pick<MuiRadioProps, "disabled" | "value"> {
+  selected?: boolean;
+}
+
+const Radio: React.FC<RadioProps> = ({ selected, disabled, value }) => {
+  return (
+    <StyledRadio
+      checked={selected}
+      icon={<Icon data-disabled={disabled} />}
+      checkedIcon={
+        <SelectedIcon>
+          <SelectedCenter />
+        </SelectedIcon>
+      }
+      color="primary"
+      value={value}
+      disabled={disabled}
+    />
+  );
+};
+
+export default Radio;

frontend/packages/core/src/Input/stories/radio.stories.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+import type { Meta } from "@storybook/react";
+
+import type { RadioProps } from "../radio";
+import Radio from "../radio";
+
+export default {
+  title: "Core/Input/Radio",
+  component: Radio,
+} as Meta;
+
+const Template = (props: RadioProps) => <Radio {...props} />;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  selected: false,
+};
+
+export const Selected = Template.bind({});
+Selected.args = {
+  selected: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+};