@navinc/base-react-components
Version:
Nav's Pattern Library
215 lines (197 loc) • 10.3 kB
JavaScript
;
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Errors = exports.Err = exports.Field = exports.Chevron = exports.NumberInput = exports.PercentInput = exports.CurrencyInput = exports.Input = exports.FieldWrapper = exports.Label = exports.Helper = exports.HelperItem = exports.HelperDescription = exports.HelperIcon = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const styled_components_1 = __importDefault(require("styled-components"));
const button_js_1 = __importDefault(require("../button.js"));
const copy_js_1 = __importDefault(require("../copy.js"));
const text_js_1 = __importDefault(require("../text.js"));
const icon_js_1 = __importDefault(require("../icon.js"));
const react_number_format_1 = __importDefault(require("react-number-format"));
const carrot_down_js_1 = __importDefault(require("../icons/actions/carrot-down.js"));
const is_rebrand_1 = __importDefault(require("../is-rebrand"));
const tooltip_1 = __importDefault(require("../tooltip"));
exports.HelperIcon = (0, styled_components_1.default)(icon_js_1.default).withConfig({ displayName: "brc-sc-HelperIcon", componentId: "brc-sc-152bxnk" }) `
max-width: 16px;
max-height: 16px;
fill: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? theme.navNeutral500 : theme.neutral400)};
`;
exports.HelperDescription = (0, styled_components_1.default)(copy_js_1.default).attrs(() => ({ size: 'sm', bold: true })).withConfig({ displayName: "brc-sc-HelperDescription", componentId: "brc-sc-1lfhxik" }) `
color: inherit;
`;
// TODO: hasSpaceForHelper is unused and might be a mistake
exports.HelperItem = styled_components_1.default.div.attrs(({ isLink }) => isLink && { as: button_js_1.default, variation: 'buttonLink', type: 'button' }).withConfig({ displayName: "brc-sc-HelperItem", componentId: "brc-sc-1kmuylm" }) `
display: grid;
padding-top: 4px;
grid-template-columns: min-content 1fr;
grid-gap: 4px;
text-align: left;
${({ hasSpaceForErrors }) => (hasSpaceForErrors ? 'min-height: 18px;' : '')}
${({ theme, isLink }) => !isLink && (0, is_rebrand_1.default)(theme) ? `color: ${theme.navNeutral500}` : `color: ${theme.neutral400};`}
`;
exports.Helper = (0, styled_components_1.default)(({ className, hasSpaceForHelper, helperLinkAction, helperText, iconName }) => ((0, jsx_runtime_1.jsxs)(exports.HelperItem, Object.assign({ className: className, isLink: !!helperLinkAction, onClick: helperLinkAction, hasSpaceForHelper: hasSpaceForHelper }, { children: [iconName && (0, jsx_runtime_1.jsx)(exports.HelperIcon, { name: iconName }), (0, jsx_runtime_1.jsx)(exports.HelperDescription, Object.assign({ "data-testid": `input:helper-text:${helperText}`, light: true }, { children: helperText }))] })))).withConfig({ displayName: "brc-sc-Helper", componentId: "brc-sc-1g2oo3r" }) ``;
exports.Label = (0, styled_components_1.default)(text_js_1.default).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-1w6t3tr" }) `
display: flex;
align-items: center;
height: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? '32px' : '48px')};
transition: all 0.2s linear;
cursor: text;
transform-origin: 0 0;
${tooltip_1.default} {
margin-left: 4px;
cursor: default;
}
&:focus {
outline: none;
}
&::after {
content: '${({ required }) => (required ? '*' : '')}';
font-size: 24px;
}
`;
exports.FieldWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-FieldWrapper", componentId: "brc-sc-11njtq" }) `
display: grid;
& > ${copy_js_1.default} {
margin-bottom: ${({ theme }) => theme.gu(1)};
}
& * {
font-family: inherit;
}
& > ${exports.Label} {
font-size: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? '16px' : '14px')};
}
& > ${exports.Helper} {
margin-left: ${({ theme }) => theme.gu(2)};
}
`;
exports.FieldWrapper.displayName = 'FieldWrapper';
const getBorderColor = (theme, isInvalid, disabled) => {
if (disabled) {
return (0, is_rebrand_1.default)(theme) ? theme.navSecondary100 : theme.bubbleBlue200;
}
else if (isInvalid) {
return (0, is_rebrand_1.default)(theme) ? theme.navStatusNegative : theme.transparentRed;
}
return (0, is_rebrand_1.default)(theme) ? theme.navNeutral300 : theme.bubbleBlue200;
};
const getBackgroundColor = (theme, isInvalid, disabled) => {
if (disabled) {
return (0, is_rebrand_1.default)(theme) ? theme.navSecondary : theme.scuttleGray100;
}
else if (isInvalid) {
return (0, is_rebrand_1.default)(theme) ? theme.navStatusNegative100 : theme.sebastianRed100;
}
return (0, is_rebrand_1.default)(theme) ? theme.navSecondary100 : theme.bubbleBlue100;
};
exports.Input = styled_components_1.default.input.withConfig({
shouldForwardProp: (prop) => !['isInvalid', 'hasSpaceForErrors'].includes(prop),
}) `
width: 100%;
border-width: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? '1px' : '3px')};
border-style: solid;
border-color: ${({ isInvalid, theme, disabled }) => getBorderColor(theme, isInvalid, disabled)};
border-radius: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? '8px' : '12px')};
margin: ${({ theme }) => (0, is_rebrand_1.default)(theme) && '3px'};
font-weight: 800;
line-height: ${({ theme }) => (0, is_rebrand_1.default)(theme) && '24px'};
background: ${({ isInvalid, theme, disabled }) => getBackgroundColor(theme, isInvalid, disabled)};
cursor: ${({ disabled }) => disabled && 'not-allowed'};
padding: ${({ theme }) => `${theme.gu(3)} ${theme.gu(2)} ${theme.gu(1)} ${theme.gu(2)}`};
&:read-only {
border-color: ${({ theme, readOnly }) => getBorderColor(theme, false, readOnly)};
background: ${({ theme, readOnly }) => getBackgroundColor(theme, false, readOnly)};
}
&:focus,
&:hover {
outline: none;
outline-offset: 0;
}
&:focus {
margin: ${({ theme }) => (0, is_rebrand_1.default)(theme) && '0px'};
border-width: ${({ theme }) => (0, is_rebrand_1.default)(theme) && '4px'};
border-color: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? theme.navStatusPositive500 : theme.bubbleBlue300)};
}
`;
exports.CurrencyInput = (0, styled_components_1.default)(exports.Input).attrs(() => ({
as: react_number_format_1.default,
})).withConfig({ displayName: "brc-sc-CurrencyInput", componentId: "brc-sc-3u2kf0" }) ``;
exports.PercentInput = (0, styled_components_1.default)(exports.Input).attrs(() => ({ as: react_number_format_1.default })).withConfig({ displayName: "brc-sc-PercentInput", componentId: "brc-sc-ph72pd" }) ``;
exports.NumberInput = (0, styled_components_1.default)(exports.Input).attrs(() => ({ as: react_number_format_1.default })).withConfig({ displayName: "brc-sc-NumberInput", componentId: "brc-sc-l732kk" }) ``;
const getIconFill = (disabled, theme) => {
if ((0, is_rebrand_1.default)(theme))
return disabled ? theme.navNeutral400 : theme.navNeutralDark;
return disabled ? theme.scuttleGray500 : theme.azure;
};
const ChevronWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-ChevronWrapper", componentId: "brc-sc-ozhbdy" }) `
pointer-events: none;
& > ${icon_js_1.default} {
fill: ${({ isInvalid, disabled, theme }) => (isInvalid ? theme.navStatusNegative : getIconFill(disabled, theme))};
}
`;
exports.Chevron = (0, styled_components_1.default)(({ className, disabled, isInvalid }) => ((0, jsx_runtime_1.jsx)(ChevronWrapper, Object.assign({ className: className, disabled: disabled, isInvalid: isInvalid }, { children: (0, jsx_runtime_1.jsx)(carrot_down_js_1.default, {}) })))).withConfig({ displayName: "brc-sc-Chevron", componentId: "brc-sc-u78bxs" }) ``;
const getLabelFontWeight = (theme, isVisited) => {
if ((0, is_rebrand_1.default)(theme))
return isVisited ? 400 : 800;
return isVisited ? 'normal' : 'bold';
};
exports.Field = styled_components_1.default.label.withConfig({ displayName: "brc-sc-Field", componentId: "brc-sc-1mfvla" }) `
align-items: stretch;
color: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? theme.navNeutralDark : theme.scuttleGray600)};
cursor: pointer;
display: flex;
flex: 1 1 auto;
margin-bottom: 0;
overflow: hidden;
position: relative;
text-align: left;
white-space: nowrap;
& > * {
width: 100%;
border-radius: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? '8px' : '12px')};
appearance: none;
}
& > ${exports.Label} {
will-change: transform;
font-weight: ${({ theme, isVisited }) => getLabelFontWeight(theme, isVisited)};
line-height: ${({ theme }) => (0, is_rebrand_1.default)(theme) && '20px'};
top: ${({ isVisited, theme }) => (isVisited ? theme.gu(1) : theme.gu(2))};
transform: ${({ isVisited }) => (isVisited ? 'scale(0.75)' : 'scale(1)')};
left: ${({ theme }) => theme.gu(2)};
position: absolute;
transition: all 0.2s ease;
color: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? theme.navNeutralDark : theme.scuttleGray600)};
}
* {
font-size: 16px;
}
${exports.Input}:focus ~ ${exports.Label}, &:hover ${exports.Label}, &:active ${exports.Label} {
transform: scale(0.75);
font-weight: normal;
top: ${({ theme }) => theme.gu(1)};
}
${exports.CurrencyInput}:focus + ${exports.Label},
&:hover ${exports.Label},
&:active ${exports.Label} {
color: ${({ theme }) => ((0, is_rebrand_1.default)(theme) ? theme.navNeutralDark : theme.scuttleGray600)};
}
& > ${exports.Chevron} {
width: min-content;
position: absolute;
right: 16px;
top: 16px;
}
`;
exports.Err = (0, styled_components_1.default)(copy_js_1.default).attrs(() => ({ size: 'sm', bold: true })).withConfig({ displayName: "brc-sc-Err", componentId: "brc-sc-vze2v" }) `
color: ${({ theme }) => theme.navStatusNegative};
text-align: left;
`;
exports.Errors = styled_components_1.default.div.withConfig({ displayName: "brc-sc-Errors", componentId: "brc-sc-1iayozj" }) `
${({ hasSpaceForErrors }) => (hasSpaceForErrors ? 'min-height: 18px;' : '')}
& > ${exports.Err} {
margin-left: ${({ theme }) => theme.gu(2)};
}
`;
//# sourceMappingURL=shared.js.map