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

Patreon Studio Design System

import cx from 'classnames';
import React from 'react';
import { Box } from '~/components/Box';
import { convertLegacyUnitValue } from '~/utilities/legacy-units';
import styles from './RadioGroup.module.css';
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 className={styles.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;
            const marginBottom = !inline && !isLast ? spacingValue : 0;
            const marginRight = inline ? spacingValue + 1 : 0;
            return (<div className={cx(styles.radioWrapper, alignButton === 'right' && styles.alignButtonRight)} style={{
                    '--RadioGroup-marginBottom': convertLegacyUnitValue(marginBottom),
                    '--RadioGroup-marginRight': convertLegacyUnitValue(marginRight),
                }}>
                {React.cloneElement(radioButton, {
                    checked,
                    name,
                    alignButton,
                    onChange,
                })}
              </div>);
        })}
        </Box>
      </fieldset>
    </div>);
}
//# sourceMappingURL=index.jsx.map