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

feature/default_network_editable
David Walsh 3 years ago committed by GitHub
parent da79ac382e
commit 00572f5910
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 6
      ui/components/ui/radio-group/index.scss
  2. 28
      ui/components/ui/radio-group/radio-group.component.js

@ -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;
}

@ -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 (
<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>
<Typography
color={COLORS.SUCCESS3}
className="radio-group__column-recommended"
variant={TYPOGRAPHY.H7}
>
{option.recommended ? t('recommendedGasLabel') : ''}
</Typography>
{hasRecommendation && (
<Typography
color={COLORS.SUCCESS3}
className="radio-group__column-recommended"
variant={TYPOGRAPHY.H7}
>
{option.recommended ? t('recommendedGasLabel') : ''}
</Typography>
)}
<div className="radio-group__column-radio">
<input
type="radio"

Loading…
Cancel
Save