@patreon/studio/module/components/Radio/RadioGroup/index.jsx

Patreon Studio Design System

import React from 'react';
import styled from 'styled-components';
import { convertLegacyUnitValue } from '../../../utilities/legacy-units';
import { Box } from '../../Box';
export function RadioGroup({ children, id, 'data-tag': dataTag, hideLabel = false, inline = false, label, name, onChange, spacing = 2, currentValue, alignButton = 'left', }) {
    let flexDirection = 'column';
    let flexWrap = 'wrap';
    if (inline) {
        flexDirection = 'row';
        flexWrap = 'nowrap';
    }
    const showLabel = label && !hideLabel;
    const ariaLabel = hideLabel && typeof label === 'string' ? label : undefined;
    const spacingValue = React.Children.count(children) > 0 ? spacing : 0;
    return (<div aria-label={ariaLabel} data-tag="radio-group-wrap" role="radiogroup">
      <Fieldset name={name}>
        {showLabel && <legend data-tag="label">{label}</legend>}
        <Box data-tag={dataTag} id={id} alignContent="flex-start" alignItems="flex-start" display="flex" flexDirection={flexDirection} flexWrap={flexWrap} justifyContent="flex-start" mt={showLabel ? (inline ? 2 : spacingValue + 0.5) : 0}>
          {React.Children.map(children, (radioButton, i) => {
            const checked = radioButton.props.value === currentValue;
            const isLast = i === React.Children.count(children) - 1;
            return (<RadioWrapper mb={!inline && !isLast ? spacingValue : 0} mr={inline ? spacingValue + 1 : 0} role="radio" alignButton={alignButton}>
                {React.cloneElement(radioButton, {
                    checked,
                    name,
                    alignButton,
                    onChange,
                })}
              </RadioWrapper>);
        })}
        </Box>
      </Fieldset>
    </div>);
}
const Fieldset = styled.fieldset `
  border: 0;
  padding: 0;
  margin: 0;
`;
const RadioWrapper = styled.div `
  margin-bottom: ${(props) => convertLegacyUnitValue(props.mb)};
  margin-right: ${(props) => convertLegacyUnitValue(props.mr)};
  ${(props) => (props.alignButton === 'right' ? 'width: 100%;' : '')}
`;
//# sourceMappingURL=index.jsx.map