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 { .radio-group {
display: grid; display: grid;
grid-template-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr);
grid-template-rows: 100px; grid-template-rows: 60px;
width: 300px; width: 300px;
&--has-recommendation {
grid-template-rows: 100px;
}
label { label {
cursor: pointer; cursor: pointer;
} }

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

Loading…
Cancel
Save