@navinc/base-react-components/dist/checkbox.js

Nav's Pattern Library

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;
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import Copy from './copy.js';
import { Err, Errors } from './form-elements/shared.js';
import isRebrand from './is-rebrand.js';
const getFillColor = (theme, checked, isInvalid, disabled) => {
    if (isRebrand(theme)) {
        if (checked)
            return isInvalid ? theme.navStatusNegative : theme.navPrimary400;
        return isInvalid ? theme.navStatusNegative100 : theme.navSecondary;
    }
    if (disabled)
        return theme.scuttleGray100;
    if (checked)
        return theme.navPrimary;
    if (isInvalid)
        return theme.sebastianRed100;
    return theme.bubbleBlue100;
};
const getBorderColor = (theme, checked, isInvalid, disabled) => {
    if (isRebrand(theme)) {
        if (checked)
            return isInvalid ? theme.navStatusNegative : theme.navPrimary400;
        return isInvalid ? theme.navStatusNegative : theme.navSecondary300;
    }
    if (checked)
        return theme.bubbleBlue300;
    if (disabled)
        return theme.scuttleGray200;
    if (isInvalid)
        return theme.sebastianRed100;
    return theme.bubbleBlue200;
};
const CopyLabel = styled(Copy).withConfig({ displayName: "brc-sc-CopyLabel", componentId: "brc-sc-10iybkd" }) `
  font-size: 14px;
`;
const DivLabel = styled.div.withConfig({ displayName: "brc-sc-DivLabel", componentId: "brc-sc-187vwim" }) ``;
const CheckboxItem = styled.label.withConfig({ displayName: "brc-sc-CheckboxItem", componentId: "brc-sc-1g0uvj3" }) `
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  flex: 1 1 auto;
  margin-bottom: 0;
  cursor: pointer;
  text-align: left;
  ${({ asideContent, hasBorder, theme }) => (hasBorder || asideContent) &&
    `
    border-radius: ${isRebrand(theme) ? '8px' : '12px'};
    border: 1px solid ${isRebrand(theme) ? theme.navNeutral300 : theme.border};
    padding: ${isRebrand(theme) ? '14px 16px' : '8px 16px'};
    min-height:${isRebrand(theme) ? '24px' : '62px'};
  `}

  ${({ checked, checkedBackgroundColor }) => checked &&
    checkedBackgroundColor &&
    `
    background-color: ${checkedBackgroundColor};
    border-color: ${checkedBackgroundColor};
  `}
`;
const sizeVariants = {
    sm: {
        checkRight: '7px',
        checkBottom: '7.5px',
        checkboxSize: '20px',
        thickness: '2.5px',
    },
    md: {
        checkRight: '8px',
        checkBottom: '9px',
        checkboxSize: '24px',
        thickness: '3px',
    },
};
const AsideContainer = styled.div.withConfig({ displayName: "brc-sc-AsideContainer", componentId: "brc-sc-1e31orn" }) `
  display: flex;
  flex: 1;
  justify-content: flex-end;
  margin-left: 8px;
`;
const BottomCheckLine = styled.div.withConfig({ displayName: "brc-sc-BottomCheckLine", componentId: "brc-sc-ijpt3l" }) `
  background-color: ${({ theme }) => theme.navNeutralLight};
  border-radius: 100px;
  position: absolute;
  bottom: 0;
  width: 100%;
`;
const LeftCheckLine = styled.div.withConfig({ displayName: "brc-sc-LeftCheckLine", componentId: "brc-sc-1y2azna" }) `
  background-color: ${({ theme }) => theme.navNeutralLight};
  border-radius: 100px;
  bottom: 0;
  height: 50%;
  left: 0;
  position: absolute;
`;
const CheckContainer = styled.div.withConfig({ displayName: "brc-sc-CheckContainer", componentId: "brc-sc-qjw7i1" }) `
  ${({ checked }) => !checked && 'display: none;'}
  height: 60%;
  transform: rotate(-45deg);
  position: absolute;
  width: 50%;
`;
const CheckboxContainer = styled.div.withConfig({ displayName: "brc-sc-CheckboxContainer", componentId: "brc-sc-gn6s1q" }) `
  position: relative;
  ${({ size = 'md' }) => {
    const { checkRight, checkBottom, checkboxSize, thickness } = sizeVariants[size] || sizeVariants.md;
    return `
      ${CheckContainer} {
        right: ${checkRight};
        bottom: ${checkBottom};
      }

      ${LeftCheckLine} {
        width: ${thickness}
      }

      ${BottomCheckLine} {
        height: ${thickness}
      }

      height: ${checkboxSize};
      width: ${checkboxSize};
      min-width: ${checkboxSize};
      min-height: ${checkboxSize};
    `;
}}
  margin-right: 16px;
`;
const StyledCheckbox = styled.input.attrs(() => ({ type: 'checkbox' })).withConfig({ displayName: "brc-sc-StyledCheckbox", componentId: "brc-sc-10jt6ny" }) `
  appearance: none;
  background: ${({ checked, isInvalid, disabled, theme }) => getFillColor(theme, checked, isInvalid, disabled)};
  opacity: ${({ disabled, theme }) => disabled && isRebrand(theme) && '38%'};
  border-radius: 4px;
  border-style: solid;
  border-width: ${({ checked }) => (checked ? '3px' : '1px')};
  border-color: ${({ checked, isInvalid, disabled, theme }) => getBorderColor(theme, checked, isInvalid, disabled)};
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
  transition: box-shadow 300ms ease;
  ${({ theme, isInvalid }) => !isRebrand(theme) && isInvalid && `box-shadow: 0 0 0 4px ${theme.sebastianRed200};`};

  &:focus {
    outline: none;
    box-shadow: 0 0 0 4px ${({ theme }) => (isRebrand(theme) ? theme.navStatusPositive500 : theme.bubbleBlue300)};
  }
`;
const Checkbox = (_a) => {
    var { asideContent, label, checked, checkedBackgroundColor, disabled, className, hasBorder, hasSpaceForErrors, errors = [], size, isInvalid } = _a, props = __rest(_a, ["asideContent", "label", "checked", "checkedBackgroundColor", "disabled", "className", "hasBorder", "hasSpaceForErrors", "errors", "size", "isInvalid"]);
    const Label = typeof label === 'string' ? CopyLabel : DivLabel;
    return (_jsxs(CheckboxItem, Object.assign({ className: className, checked: checked, checkedBackgroundColor: checkedBackgroundColor, hasBorder: hasBorder, asideContent: asideContent }, { children: [_jsxs(CheckboxContainer, Object.assign({ size: size }, { children: [_jsx(StyledCheckbox, Object.assign({}, { checked, disabled, isInvalid }, props)), _jsxs(CheckContainer, Object.assign({ checked: checked }, { children: [_jsx(BottomCheckLine, {}), _jsx(LeftCheckLine, {})] }))] })), _jsxs("div", { children: [label && _jsx(Label, { children: label }), _jsx(Errors, Object.assign({ hasSpaceForErrors: hasSpaceForErrors }, { children: !!errors.length && errors.map((err, i) => _jsx(Err, { children: err }, `err-${i}`)) }))] }), asideContent && _jsx(AsideContainer, { children: asideContent })] })));
};
export default styled(Checkbox).withConfig({ componentId: "brc-sc-13fou5s" }) ``;
//# sourceMappingURL=checkbox.js.map