Correct the vertical margins on the RadioGroup component (#11769)

ui/components/ui/radio-group/index.scss

@@ -1,9 +1,13 @@
 .radio-group {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  grid-template-rows: 100px;
+  grid-template-rows: 60px;
   width: 300px;
 
+  &--has-recommendation {
+    grid-template-rows: 100px;
+  }
+
   label {
     cursor: pointer;
   }

ui/components/ui/radio-group/radio-group.component.js

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import classNames from 'classnames';
 import { I18nContext } from '../../../contexts/i18n';
 import Typography from '../typography/typography';
 import {
@@ -11,13 +12,22 @@ import {
 export default function RadioGroup({ options, name, selectedValue, onChange }) {
   const t = useContext(I18nContext);
 
+  const hasRecommendation = Boolean(
+    options.find((option) => option.recommended),
+  );
+
   return (
-    <div className="radio-group">
+    <div
+      className={classNames('radio-group', {
+        'radio-group--has-recommendation': hasRecommendation,
+      })}
+    >
       {options.map((option) => {
         const checked = option.value === selectedValue;
         return (
           <div className="radio-group__column" key={`${name}-${option.value}`}>
             <label>
+              {hasRecommendation && (
                 <Typography
                   color={COLORS.SUCCESS3}
                   className="radio-group__column-recommended"
@@ -25,7 +35,7 @@ export default function RadioGroup({ options, name, selectedValue, onChange }) {
                 >
                   {option.recommended ? t('recommendedGasLabel') : ''}
                 </Typography>
-
+              )}
               <div className="radio-group__column-radio">
                 <input
                   type="radio"