@navinc/base-react-components/cjs/radio.js

Nav's Pattern Library

"use strict";
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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Radio = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const styled_components_1 = __importDefault(require("styled-components"));
const copy_js_1 = __importDefault(require("./copy.js"));
const utils_1 = require("@navinc/utils");
const is_rebrand_js_1 = __importDefault(require("./is-rebrand.js"));
const getLabelStyling = ({ isInvalid, theme }) => `
  margin: 0;
  padding: 0;
  color: ${isInvalid ? theme.error : 'inherit'};
`;
const getFillColor = (theme, disabled, isInvalid) => {
    if ((0, is_rebrand_js_1.default)(theme))
        return isInvalid ? theme.navStatusNegative100 : theme.navSecondary;
    return disabled ? theme.neutral100 : theme.bubbleBlue100;
};
const getBorderColor = (theme, disabled, isInvalid, checked) => {
    if ((0, is_rebrand_js_1.default)(theme)) {
        if (isInvalid)
            return theme.navStatusNegative;
        return checked ? theme.navPrimary400 : theme.navNeutral300;
    }
    return disabled ? theme.scuttleGray300 : theme.bubbleBlue200;
};
const getIndicatorColor = (theme, checked, isInvalid) => {
    if ((0, is_rebrand_js_1.default)(theme)) {
        if (checked)
            return isInvalid ? theme.navStatusNegative : theme.navPrimary400;
        return 'transparent';
    }
    return checked ? theme.navPrimary : 'transparent';
};
const CopyLabel = (0, styled_components_1.default)(copy_js_1.default).withConfig({
    shouldForwardProp: (prop) => !['isInvalid'].includes(prop),
}) `
  ${getLabelStyling}
`;
const DivLabel = styled_components_1.default.div.withConfig({ displayName: "brc-sc-DivLabel", componentId: "brc-sc-129p17w" }) `
  ${getLabelStyling}
`;
const RadioItem = styled_components_1.default.label.withConfig({ displayName: "brc-sc-RadioItem", componentId: "brc-sc-exqvsd" }) `
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  flex: 1 1 auto;
  margin-bottom: 0;
  cursor: pointer;
  text-align: left;
  ${({ asideContent, hasBorder, theme }) => (asideContent || hasBorder) &&
    `
    border-radius: ${(0, is_rebrand_js_1.default)(theme) ? '8px' : '12px'};
    border: 1px solid ${(0, is_rebrand_js_1.default)(theme) ? theme.navNeutral300 : theme.border};
    padding: ${(0, is_rebrand_js_1.default)(theme) ? '14px 16px' : '8px 16px'};
    min-height:${(0, is_rebrand_js_1.default)(theme) ? '24px' : '62px'};
  `}

  ${({ checked, checkedBackgroundColor }) => checked &&
    checkedBackgroundColor &&
    `
    background-color: ${checkedBackgroundColor};
    border-color: ${checkedBackgroundColor};
  `}

  & > :first-child {
    margin-right: 16px;
  }
`;
const AsideContainer = styled_components_1.default.div.withConfig({ displayName: "brc-sc-AsideContainer", componentId: "brc-sc-1z0xg80" }) `
  display: flex;
  flex: 1;
  justify-content: flex-end;
  margin-left: 8px;
`;
const RadioIndicator = styled_components_1.default.input.attrs(() => ({ type: 'radio' })).withConfig({ displayName: "brc-sc-RadioIndicator", componentId: "brc-sc-oknnwc" }) `
  box-sizing: border-box;
  border-radius: 50%;
  background-color: ${({ checked, isInvalid, theme }) => getIndicatorColor(theme, checked, isInvalid)};
  height: 12px;
  width: 12px;
  appearance: none;
  margin: 0;
  font-size: inherit;
  transition: background-color 300ms ease;
`;
const RadioSpot = styled_components_1.default.div.withConfig({ displayName: "brc-sc-RadioSpot", componentId: "brc-sc-13p9x1i" }) `
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 50%;
  border-style: solid;
  border-width: ${({ checked, theme }) => (checked && !(0, is_rebrand_js_1.default)(theme) ? '2px' : '1px')};
  border-color: ${({ disabled, checked, isInvalid, theme }) => getBorderColor(theme, disabled, isInvalid, checked)};
  background: ${({ disabled, isInvalid, theme }) => getFillColor(theme, disabled, isInvalid)};
  opacity: ${({ disabled, theme }) => disabled && (0, is_rebrand_js_1.default)(theme) && '38%'};
  height: 24px;
  flex: 0 0 auto;
  width: 24px;
  transition: box-shadow 300ms ease;

  &:focus-within {
    box-shadow: ${({ theme }) => (0, is_rebrand_js_1.default)(theme) ? `0 0 0 4px ${theme.navStatusPositive500}` : `0 0 0 8px ${theme.bubbleBlue300}`};

    & > ${RadioIndicator} {
      outline: none;
    }
  }
`;
const Radio = (_a) => {
    var { asideContent, autoFocus, checkedBackgroundColor, children: _children, label, className, checked, disabled, hasBorder, isInvalid } = _a, props = __rest(_a, ["asideContent", "autoFocus", "checkedBackgroundColor", "children", "label", "className", "checked", "disabled", "hasBorder", "isInvalid"]);
    const inputRef = (0, react_1.useRef)(null);
    (0, react_1.useEffect)(() => {
        if (autoFocus && inputRef.current) {
            (0, utils_1.focusWithoutScroll)(inputRef.current);
        }
    }, [autoFocus]);
    const Label = typeof label === 'string' ? CopyLabel : DivLabel;
    return ((0, jsx_runtime_1.jsxs)(RadioItem, Object.assign({ asideContent: asideContent, checked: checked, className: className, hasBorder: hasBorder, checkedBackgroundColor: checkedBackgroundColor }, { children: [(0, jsx_runtime_1.jsx)(RadioSpot, Object.assign({}, { checked, disabled, isInvalid }, { children: (0, jsx_runtime_1.jsx)(RadioIndicator, Object.assign({ ref: inputRef }, { checked, disabled, isInvalid }, props)) })), (0, jsx_runtime_1.jsx)(Label, Object.assign({ isInvalid: isInvalid }, { children: label })), asideContent && (0, jsx_runtime_1.jsx)(AsideContainer, { children: asideContent })] })));
};
exports.Radio = Radio;
const StyledRadio = (0, styled_components_1.default)(exports.Radio).withConfig({ displayName: "brc-sc-StyledRadio", componentId: "brc-sc-1uck2ux" }) ``;
exports.default = StyledRadio;
//# sourceMappingURL=radio.js.map