@navinc/base-react-components
Version:
Nav's Pattern Library
152 lines (150 loc) • 6.91 kB
JavaScript
;
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.Checkbox = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const copy_js_1 = require("./copy.js");
const shared_js_1 = require("./form-elements/shared.js");
const getFillColor = (theme, checked, isInvalid) => {
if (checked)
return isInvalid ? theme.navStatusNegative : theme.navPrimary400;
return isInvalid ? theme.navStatusNegative100 : theme.navNeutral100;
};
const getBorderColor = (theme, checked, isInvalid) => {
if (checked)
return isInvalid ? theme.navStatusNegative : theme.navPrimary400;
return isInvalid ? theme.navStatusNegative : theme.navNeutral200;
};
const CopyLabel = (0, styled_components_1.default)(copy_js_1.Copy).withConfig({ displayName: "brc-sc-CopyLabel", componentId: "brc-sc-10iybkd" }) `
font-size: 14px;
`;
const DivLabel = styled_components_1.default.div.withConfig({ displayName: "brc-sc-DivLabel", componentId: "brc-sc-187vwim" }) ``;
const CheckboxItem = styled_components_1.default.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: 8px;
border: 1px solid ${theme.navNeutral300};
padding: 14px 16px;
min-height: 24px;
`}
${({ 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_components_1.default.div.withConfig({ displayName: "brc-sc-AsideContainer", componentId: "brc-sc-1e31orn" }) `
display: flex;
flex: 1;
justify-content: flex-end;
margin-left: 8px;
`;
const BottomCheckLine = styled_components_1.default.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_components_1.default.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_components_1.default.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_components_1.default.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_components_1.default.input.attrs(() => ({ type: 'checkbox' })).withConfig({ displayName: "brc-sc-StyledCheckbox", componentId: "brc-sc-10jt6ny" }) `
appearance: none;
background: ${({ checked, isInvalid, theme }) => getFillColor(theme, checked, isInvalid)};
opacity: ${({ disabled }) => disabled && '38%'};
border-radius: 4px;
border-style: solid;
border-width: ${({ checked }) => (checked ? '3px' : '1px')};
border-color: ${({ checked, isInvalid, theme }) => getBorderColor(theme, checked, isInvalid)};
height: 100%;
margin: 0;
padding: 0;
width: 100%;
transition: box-shadow 300ms ease;
&:focus {
outline: none;
box-shadow: 0 0 0 4px ${({ theme }) => theme.navStatusPositive500};
}
`;
const StyledErrors = (0, styled_components_1.default)(shared_js_1.Errors).withConfig({ displayName: "brc-sc-StyledErrors", componentId: "brc-sc-1e9f0d7" }) `
margin-left: -16px;
`;
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 ((0, jsx_runtime_1.jsxs)(CheckboxItem, { className: className, checked: checked, checkedBackgroundColor: checkedBackgroundColor, hasBorder: hasBorder, asideContent: asideContent, children: [(0, jsx_runtime_1.jsxs)(CheckboxContainer, { size: size, children: [(0, jsx_runtime_1.jsx)(StyledCheckbox, Object.assign({ checked, disabled, isInvalid }, props)), (0, jsx_runtime_1.jsxs)(CheckContainer, { checked: checked, children: [(0, jsx_runtime_1.jsx)(BottomCheckLine, {}), (0, jsx_runtime_1.jsx)(LeftCheckLine, {})] })] }), (0, jsx_runtime_1.jsxs)("div", { children: [label && (0, jsx_runtime_1.jsx)(Label, { children: label }), (0, jsx_runtime_1.jsx)(StyledErrors, { hasSpaceForErrors: hasSpaceForErrors, children: !!errors.length && errors.map((err, i) => (0, jsx_runtime_1.jsx)(shared_js_1.Err, { children: err }, `err-${i}`)) })] }), asideContent && (0, jsx_runtime_1.jsx)(AsideContainer, { children: asideContent })] }));
};
exports.Checkbox = (0, styled_components_1.default)(_Checkbox).withConfig({ displayName: "brc-sc-Checkbox", componentId: "brc-sc-pi5e4l" }) ``;
//# sourceMappingURL=checkbox.js.map