@retailmenot/anchor/ts/Form/Radio/Radio.component.js

A React UI Library by RetailMeNot

var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
// REACT
import * as React from 'react';
const { forwardRef } = React;
// VENDOR
import styled, { css } from '@xstyled/styled-components';
import classnames from 'classnames';
// ANCHOR
import { space as spaceStyles } from '@xstyled/system';
const HiddenInput = styled('input') `
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
`;
const StyledLabel = styled('label') `
    position: relative;
    display: inline-flex;
    cursor: pointer;
    font-family: base;
    ${({ size }) => css({ width: size, height: size })}

    ${spaceStyles}

    &:before {
        display: block;
        position: absolute;
        box-sizing: border-box;
        content: '';
        top: 0;
        left: 0;
        z-index: 1;
        border-radius: circular;
        background-color: white;
        border: base;

        ${({ size }) => css({
    width: size,
    height: size,
})}
    }

    &:after {
        position: absolute;
        border-radius: circular;
        ${({ disabled, checked, size, fillSize, fillColor }) => css({
    width: fillSize,
    height: fillSize,
    top: `calc((${size} - ${fillSize}) / 2)`,
    left: `calc((${size} - ${fillSize}) / 2)`,
    backgroundColor: fillColor,
    visibility: !checked || disabled ? 'hidden' : undefined,
})}
        content: '';
        z-index: 2;
    }
`;
export const Radio = forwardRef((_a, ref) => {
    var { id, children, className, inputProps, size = '1.375rem', fillSize = '0.75rem', fillColor = '#794a83' } = _a, props = __rest(_a, ["id", "children", "className", "inputProps", "size", "fillSize", "fillColor"]);
    return (React.createElement(StyledLabel, Object.assign({ className: classnames('anchor-radio', className), size: size, fillSize: fillSize, fillColor: fillColor }, props),
        React.createElement(HiddenInput, Object.assign({ ref: ref, type: "radio", id: id }, props, inputProps))));
});
//# sourceMappingURL=Radio.component.js.map