Simplify usage of radio buttons

Allowing for the entire component to be disabled rather than specifying
on a button basis

ui/src/reusable_ui/components/radio_buttons/RadioButtons.tsx

@@ -9,17 +9,13 @@ import {
   BUTTON_SHAPES,
 } from 'src/reusable_ui/constants'
 
-export interface RadioButton {
-  text: string
-  disabled?: boolean
-}
-
 interface Props {
   color?: ComponentColor
   size?: ComponentSize
   shape?: ButtonShape
-  buttons: RadioButton[]
+  disabled?: boolean
-  activeButton: RadioButton
+  buttons: string[]
+  activeButton: string
   onChange: (RadioButton) => void
 }
 
@@ -28,6 +24,7 @@ class RadioButtons extends Component<Props> {
     color: COMPONENT_COLORS.default,
     size: COMPONENT_SIZES.small,
     shape: BUTTON_SHAPES.none,
+    disabled: false,
   }
 
   public render() {
@@ -39,11 +36,11 @@ class RadioButtons extends Component<Props> {
 
     return buttons.map(button => (
       <div
-        key={button.text}
+        key={button}
         className={this.buttonClassName(button)}
         onClick={this.handleButtonClick(button)}
       >
-        {button.text}
+        {button}
       </div>
     ))
   }
@@ -60,18 +57,17 @@ class RadioButtons extends Component<Props> {
     )
   }
 
-  private buttonClassName = (button: RadioButton): string => {
+  private buttonClassName = (button: string): string => {
     const {activeButton} = this.props
 
     return classnames('radio-button', {
-      disabled: button.disabled,
       active: _.isEqual(button, activeButton),
     })
   }
 
-  private handleButtonClick = (button: RadioButton) => () => {
+  private handleButtonClick = (button: string) => () => {
-    const {onChange} = this.props
+    const {onChange, disabled} = this.props
-    if (button.disabled) {
+    if (disabled) {
       return
     }
 

ui/src/style/theme/_radio-buttons.scss

@@ -34,16 +34,6 @@
   &.active {
     background-color: $g5-pepper;
   }
-  &.disabled,
-  &.disabled:hover {
-    background-color: $g2-kevlar;
-    font-style: italic;
-    color: $g7-graphite;
-  }
-  &.disabled.active {
-    background-color: $g5-pepper;
-    color: $g10-wolf;
-  }
 }
 
 /*  Size Modifiers */
@@ -151,6 +141,20 @@
   }
 }
 
+/* Disabled State */
+.radio-buttons.disabled {
+  .radio-button,
+  .radio-button:hover {
+    background-color: $g2-kevlar;
+    font-style: italic;
+    color: $g7-graphite;
+  }
+  .radio-button.active {
+    background-color: $g5-pepper;
+    color: $g10-wolf;
+  }
+}
+
 
 /*
    Todo: Replace all instances of these styles with new pattern then