feat: add prop size to the RadioButtonGroup component

src/components/RadioButtonGroup/__test__/buttonItems.spec.js

@@ -21,6 +21,7 @@ describe('<ButtonItems />', () => {
                 ariaDescribedby="error-1"
                 onChange={() => {}}
                 variant="inverse"
+                size="small"
             />,
         );
         expect(component.find('RadioButtonItem').props()).toEqual({
@@ -34,6 +35,7 @@ describe('<ButtonItems />', () => {
             onChange: expect.any(Function),
             isChecked: false,
             required: undefined,
+            size: 'small',
             variant: 'inverse',
         });
     });

src/components/RadioButtonGroup/buttonItems.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import RadioButtonItem from './radioButtonItem';
 
 export default function ButtonItems(props) {
-    const { options, ariaDescribedby, onChange, value, name, required, variant } = props;
+    const { options, ariaDescribedby, onChange, value, name, required, variant, size } = props;
 
     const isChecked = option => option.value === value;
 
@@ -19,6 +19,7 @@ export default function ButtonItems(props) {
                 ariaDescribedby={ariaDescribedby}
                 name={name}
                 variant={variant}
+                size={size}
                 {...option}
             />
         );

src/components/RadioButtonGroup/index.js

@@ -111,6 +111,7 @@ class RadioButtonGroup extends Component {
             id,
             onChange,
             variant,
+            size,
         } = this.props;
         const { options, markerLeft, markerWidth } = this.state;
         const markerStyle = {
@@ -126,11 +127,12 @@ class RadioButtonGroup extends Component {
                         {label}
                     </StyledLabel>
                 </RenderIf>
-                <StyledButtonItemsContainer variant={variant}>
+                <StyledButtonItemsContainer variant={variant} size={size}>
                     <Marker
                         variant={variant}
                         isVisible={this.isMarkerActive()}
                         style={markerStyle}
+                        size={size}
                     />
 
                     <ButtonItems
@@ -141,6 +143,7 @@ class RadioButtonGroup extends Component {
                         required={required}
                         ariaDescribedby={this.getErrorMessageId()}
                         variant={variant}
+                        size={size}
                     />
                 </StyledButtonItemsContainer>
                 <RenderIf isTrue={!!error}>
@@ -173,6 +176,12 @@ RadioButtonGroup.propTypes = {
             disabled: PropTypes.bool,
         }),
     ),
+    /**
+     * The size of the RadioButton.
+     * Options includes x-small, small, medium and large.
+     * This value defaults to medium.
+     */
+    size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
     /** Specifies that an radio group must be filled out before submitting the form. */
     error: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
     /** A CSS class for the outer element, in addition to the component's base classes. */
@@ -193,6 +202,7 @@ RadioButtonGroup.defaultProps = {
     onChange: () => {},
     required: false,
     options: [],
+    size: 'medium',
     error: null,
     id: undefined,
 };

src/components/RadioButtonGroup/marker.js

@@ -5,16 +5,16 @@ import StyledMarkerContainer from './styled/markerContainer';
 import StyledMarker from './styled/marker';
 
 export default function Marker(props) {
-    const { style, isVisible, variant } = props;
+    const { style, isVisible, variant, size } = props;
     const markerStyle = {
         ...style,
         opacity: isVisible ? 1 : 0,
     };
 
     return (
         <RenderIf isTrue={isVisible}>
-            <StyledMarkerContainer>
-                <StyledMarker variant={variant} style={markerStyle} />
+            <StyledMarkerContainer size={size}>
+                <StyledMarker variant={variant} size={size} style={markerStyle} />
             </StyledMarkerContainer>
         </RenderIf>
     );
@@ -24,10 +24,12 @@ Marker.propTypes = {
     style: PropTypes.object,
     isVisible: PropTypes.any,
     variant: PropTypes.oneOf(['default', 'inverse', 'brand']),
+    size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
 };
 
 Marker.defaultProps = {
     style: undefined,
     isVisible: false,
     variant: 'default',
+    size: 'medium',
 };

src/components/RadioButtonGroup/radioButtonItem.js

@@ -23,12 +23,14 @@ export default class RadioButtonItem extends Component {
             name,
             required,
             variant,
+            size,
         } = this.props;
 
         return (
             <StyledButtonItem
                 data-id="radio-button-group_radio-container"
                 variant={variant}
+                size={size}
                 isChecked={isChecked}
                 disabled={disabled}
                 ref={itemRef}
@@ -50,6 +52,7 @@ export default class RadioButtonItem extends Component {
                     isChecked={isChecked}
                     variant={variant}
                     htmlFor={this.radioId}
+                    size={size}
                 >
                     {label}
                 </StyledButtonItemLabel>
@@ -69,6 +72,7 @@ RadioButtonItem.propTypes = {
     required: PropTypes.bool.isRequired,
     itemRef: PropTypes.object.isRequired,
     variant: PropTypes.oneOf(['default', 'inverse', 'brand']),
+    size: PropTypes.oneOf(['x-small', 'small', 'medium', 'large']),
 };
 
 RadioButtonItem.defaultProps = {
@@ -79,4 +83,5 @@ RadioButtonItem.defaultProps = {
     isChecked: false,
     name: undefined,
     variant: 'default',
+    size: 'medium',
 };

src/components/RadioButtonGroup/styled/buttonItem.js

@@ -4,11 +4,12 @@ import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 import { replaceAlpha } from '../../../styles/helpers/color';
 import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
 
+const sizeMap = { large: '3rem', medium: '2.5rem', small: '1.8rem', 'x-small': '1.3rem' };
 const StyledButtonItem = attachThemeAttrs(styled.span)`
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    height: 2.5rem;
+    height: ${props => sizeMap[props.size] || sizeMap.medium};
     border-radius: ${BORDER_RADIUS_2};
     border: solid 1px transparent;
     transition: transform 600ms cubic-bezier(0.02, 0.94, 0.09, 0.97),

src/components/RadioButtonGroup/styled/buttonItemLabel.js

@@ -1,9 +1,31 @@
 import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
-import { FONT_SIZE_TEXT_LARGE } from '../../../styles/fontSizes';
-import { PADDING_LARGE } from '../../../styles/paddings';
+import {
+    FONT_SIZE_TEXT_LARGE,
+    FONT_SIZE_TEXT_MEDIUM,
+    FONT_SIZE_TEXT_SMALL,
+    FONT_SIZE_TEXT_X_SMALL,
+} from '../../../styles/fontSizes';
+import {
+    PADDING_X_LARGE,
+    PADDING_LARGE,
+    PADDING_SMALL,
+    PADDING_X_SMALL,
+} from '../../../styles/paddings';
 import { COLOR_GRAY_4 } from '../../../styles/colors';
 
+const fontSizeMap = {
+    large: FONT_SIZE_TEXT_LARGE,
+    medium: FONT_SIZE_TEXT_MEDIUM,
+    small: FONT_SIZE_TEXT_SMALL,
+    'x-small': FONT_SIZE_TEXT_X_SMALL,
+};
+const paddingMap = {
+    large: PADDING_X_LARGE,
+    medium: PADDING_LARGE,
+    small: PADDING_SMALL,
+    'x-small': PADDING_X_SMALL,
+};
 const StyledButtonItemLabel = attachThemeAttrs(styled.label).attrs(props => {
     const { getContrastText, brand, text } = props.palette;
     const brandMainContrastText = getContrastText(brand.main);
@@ -15,9 +37,9 @@ const StyledButtonItemLabel = attachThemeAttrs(styled.label).attrs(props => {
     };
 })`
     display: inline-flex;
-    font-size: ${FONT_SIZE_TEXT_LARGE};
+    font-size: ${props => fontSizeMap[props.size] || fontSizeMap.medium};
     color: ${props => props.inverseLabel};
-    padding: 0 ${PADDING_LARGE};
+    padding: 0 ${props => paddingMap[props.size] || paddingMap.medium};
     font-weight: 400;
     box-sizing: border-box;
 

src/components/RadioButtonGroup/styled/buttonItemsContainer.js

@@ -4,6 +4,7 @@ import { replaceAlpha } from '../../../styles/helpers/color';
 import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
 import { COLOR_GRAY_2 } from '../../../styles/colors';
 
+const sizeMap = { large: '3rem', medium: '2.5rem', small: '1.8rem', 'x-small': '1.3rem' };
 const StyledButtonItemsContainer = attachThemeAttrs(styled.div).attrs(props => {
     const isDark = props.palette.isDark;
     const inverse = {
@@ -19,8 +20,8 @@ const StyledButtonItemsContainer = attachThemeAttrs(styled.div).attrs(props => {
     border-radius: ${BORDER_RADIUS_2};
     border: solid 1px ${props => props.palette.border.divider};
     background-color: ${props => replaceAlpha(props.palette.background.highlight, 0.4)};
-    line-height: 2.5rem;
-    height: 2.5rem;
+    line-height: ${props => sizeMap[props.size] || sizeMap.medium};
+    height: ${props => sizeMap[props.size] || sizeMap.medium};
 
     > :first-child {
         margin-left: -1px;

src/components/RadioButtonGroup/styled/marker.js

@@ -3,15 +3,15 @@ import styled from 'styled-components';
 import attachThemeAttrs from '../../../styles/helpers/attachThemeAttrs';
 import { BORDER_RADIUS_2 } from '../../../styles/borderRadius';
 
+const sizeMap = { large: '3.1rem', medium: '2.6rem', small: '1.81rem', 'x-small': '1.31rem' };
 const StyledMarker = attachThemeAttrs(styled.span)`
     position: absolute;
-    background: ${props => props.palette.background.main};
+    background-color: ${props => props.palette.background.main};
     opacity: 0;
     top: 0;
     bottom: 0;
     margin: auto;
-    height: 2.6rem;
-    margin-top: -0.05rem;
+    height: ${props => sizeMap[props.size] || sizeMap.medium};
     border-color: ${props => props.palette.border.main};
     border-radius: ${BORDER_RADIUS_2};
     border: solid 1px transparent;

src/components/RadioButtonGroup/styled/markerContainer.js

@@ -1,13 +1,14 @@
 import styled from 'styled-components';
 
+const sizeMap = { large: '3rem', medium: '2.5rem', small: '1.8rem', 'x-small': '1.3rem' };
 const StyledMarkerContainer = styled.div`
     display: inline-flex;
     justify-content: center;
     align-items: center;
     position: absolute;
     width: 100%;
-    line-height: 2.5rem;
-    height: 2.5rem;
+    line-height: ${props => sizeMap[props.size] || sizeMap.medium};
+    height: ${props => sizeMap[props.size] || sizeMap.medium};
 `;
 
 export default StyledMarkerContainer;