Clean up radio button code

app/panel/components/BuildingBlocks/RadioButtonGroup.jsx

@@ -21,53 +21,30 @@ import RadioButton from './RadioButton';
  * @class Implements a radio button group
  * @memberof PanelBuildingBlocks
  */
-class RadioButtonGroup extends React.Component {
-	constructor(props) {
-		super(props);
-		this.state = {
-			buttons: []
-		};
-	}
-
-	componentDidMount() {
-		const buttons = new Array(this.props.items.length).fill(false);
-		buttons[this.props.selectedIndex] = true;
-		this.setState({ buttons });
-	}
-
-	handleClick(indexClicked) {
-		const { buttons } = this.state;
-		const updatedButtons = buttons.map((button, index) => (index === indexClicked));
-		this.setState({ buttons: updatedButtons });
-		this.props.handleItemClick(indexClicked);
-	}
-
-	/**
-	 * React's required render function. Returns JSX
-	 * @return {JSX} JSX for rendering the Toggle Slider used throughout the extension
-	 */
-	render() {
-		const { buttons } = this.state;
-		return (
-			this.props.items.map((item, index) => (
-				<div className="flex-container align-justify RadioButtonGroup__container" key={`${index * 2}`}>
-					<span className="RadioButtonGroup__label">
-						{t(item.text)}
-					</span>
-					<div>
-						<RadioButton checked={buttons[index]} handleClick={() => this.handleClick(index)} />
-					</div>
+const RadioButtonGroup = (props) => {
+	const { indexClicked, handleItemClick } = props;
+	return (
+		props.items.map((item, index) => (
+			<div className="flex-container align-justify RadioButtonGroup__container" key={`${index * 2}`}>
+				<span className="RadioButtonGroup__label">
+					{t(item.text)}
+				</span>
+				<div>
+					<RadioButton
+						checked={index === indexClicked}
+						handleClick={() => handleItemClick(index)}
+					/>
 				</div>
-			))
-		);
-	}
-}
+			</div>
+		))
+	);
+};
 
 // PropTypes ensure we pass required props of the correct type
 RadioButtonGroup.propTypes = {
 	items: PropTypes.arrayOf(PropTypes.object).isRequired, // Number of objects in array is the number of radio buttons
 	handleItemClick: PropTypes.func.isRequired,
-	selectedIndex: PropTypes.number.isRequired
+	indexClicked: PropTypes.number.isRequired
 };
 
 

app/panel/components/Subscription/SubscriptionThemes.jsx

@@ -41,7 +41,7 @@ const SubscriptionThemes = (props) => {
 		}
 	];
 
-	const getSelectedIndex = () => {
+	const getIndexClicked = () => {
 		const index = themes.findIndex(theme => theme.name === props.theme);
 		return index;
 	};
@@ -62,7 +62,7 @@ const SubscriptionThemes = (props) => {
 					<RadioButtonGroup
 						items={themes}
 						handleItemClick={handleThemeClick}
-						selectedIndex={getSelectedIndex(props.theme)}
+						indexClicked={getIndexClicked(props.theme)}
 					/>
 				</div>
 			</div>

app/scss/partials/_radio_button.scss

@@ -12,7 +12,7 @@
  */
 
 .RadioButtonGroup__label {
-	margin-right: 10px !important;
+	margin-right: 10px;
 	font-weight: bolder;
 }
 .RadioButtonGroup__container {
@@ -38,6 +38,5 @@
 		width: 8px;
 		background-color: #2092bf;
 		border-radius: 50%;
-		border: 1px solid #2092bf;
 	}
 }