diff --git a/ui/components/ui/radio-group/index.scss b/ui/components/ui/radio-group/index.scss index 3c9685920..fc90ac975 100644 --- a/ui/components/ui/radio-group/index.scss +++ b/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; } diff --git a/ui/components/ui/radio-group/radio-group.component.js b/ui/components/ui/radio-group/radio-group.component.js index 31c98c6df..eb53782fc 100644 --- a/ui/components/ui/radio-group/radio-group.component.js +++ b/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,21 +12,30 @@ import { export default function RadioGroup({ options, name, selectedValue, onChange }) { const t = useContext(I18nContext); + const hasRecommendation = Boolean( + options.find((option) => option.recommended), + ); + return ( -
+
{options.map((option) => { const checked = option.value === selectedValue; return (