@navinc/base-react-components
Version:
Nav's Pattern Library
248 lines (232 loc) • 10.3 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Fieldset = exports.Legend = exports.HiddenLegend = exports.visuallyHiddenStyles = 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 = __importStar(require("styled-components"));
const button_js_1 = require("../button.js");
const copy_js_1 = require("../copy.js");
const text_js_1 = require("../text.js");
const icon_js_1 = 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 tooltip_1 = require("../tooltip");
exports.HelperIcon = (0, styled_components_1.default)(icon_js_1.Icon).withConfig({ displayName: "brc-sc-HelperIcon", componentId: "brc-sc-152bxnk" }) `
max-width: 16px;
max-height: 16px;
fill: ${({ theme }) => theme.navNeutral500};
`;
exports.HelperDescription = (0, styled_components_1.default)(copy_js_1.Copy).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.Button, 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 ? `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, { 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, { "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.Text).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-1w6t3tr" }) `
display: flex;
align-items: center;
height: 32px;
transition: all 0.2s linear;
cursor: text;
transform-origin: 0 0;
${tooltip_1.Tooltip} {
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.Copy} {
margin-bottom: ${({ theme }) => theme.gu(1)};
}
& * {
font-family: inherit;
}
& > ${exports.Label} {
font-size: 16px;
}
& > ${exports.Helper} {
margin-left: ${({ theme }) => theme.gu(2)};
}
`;
exports.FieldWrapper.displayName = 'FieldWrapper';
const getBorderColor = (theme, isInvalid, disabled) => {
if (disabled) {
return theme.navNeutral300;
}
else if (isInvalid) {
return theme.navStatusNegative;
}
return theme.navNeutral300;
};
const getBackgroundColor = (theme, isInvalid, disabled, readOnly = false) => {
if (disabled || readOnly) {
return theme.navNeutral100;
}
else if (isInvalid) {
return theme.navStatusNegative100;
}
return theme.navNeutralLight;
};
exports.Input = styled_components_1.default.input.withConfig({
shouldForwardProp: (prop) => !['isInvalid', 'hasSpaceForErrors'].includes(prop),
}) `
width: 100%;
border-width: 1px;
border-style: solid;
border-color: ${({ isInvalid, theme, disabled }) => getBorderColor(theme, isInvalid, disabled)};
border-radius: 8px;
margin: 3px;
font-weight: 800;
line-height: 24px;
background: ${({ isInvalid, theme, disabled, readOnly }) => getBackgroundColor(theme, isInvalid, disabled, readOnly)};
cursor: ${({ disabled }) => disabled && 'not-allowed'};
padding: ${({ theme }) => `${theme.gu(3)} ${theme.gu(2)} ${theme.gu(1)} ${theme.gu(2)}`};
&:focus,
&:hover {
outline: none;
outline-offset: 0;
}
&:focus {
margin: 0;
border-width: 4px;
border-color: ${({ theme }) => theme.navStatusPositive500};
}
`;
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) => {
return disabled ? theme.navNeutral400 : theme.navNeutralDark;
};
const ChevronWrapper = styled_components_1.default.div.withConfig({ displayName: "brc-sc-ChevronWrapper", componentId: "brc-sc-ozhbdy" }) `
pointer-events: none;
& > ${icon_js_1.Icon} {
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, { 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) => {
return isVisited ? 400 : 800;
};
exports.Field = styled_components_1.default.label.withConfig({ displayName: "brc-sc-Field", componentId: "brc-sc-1mfvla" }) `
align-items: stretch;
color: ${({ theme }) => theme.navNeutralDark};
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: 8px;
appearance: none;
}
& > ${exports.Label} {
will-change: transform;
font-weight: ${({ theme, isVisited }) => getLabelFontWeight(theme, isVisited)};
line-height: 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 }) => theme.navNeutralDark};
}
* {
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 }) => theme.navNeutralDark};
}
& > ${exports.Chevron} {
width: min-content;
position: absolute;
right: 16px;
top: 22px;
}
`;
exports.Err = (0, styled_components_1.default)(copy_js_1.Copy).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)};
}
`;
exports.visuallyHiddenStyles = (0, styled_components_1.css) `
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
`;
exports.HiddenLegend = styled_components_1.default.legend.withConfig({ displayName: "brc-sc-HiddenLegend", componentId: "brc-sc-xik3we" }) `
${exports.visuallyHiddenStyles}
`;
exports.Legend = styled_components_1.default.legend.withConfig({ displayName: "brc-sc-Legend", componentId: "brc-sc-g0at4n" }) `
padding: 0;
width: 100%;
`;
exports.Fieldset = styled_components_1.default.fieldset.withConfig({ displayName: "brc-sc-Fieldset", componentId: "brc-sc-3t31l8" }) `
border: none;
padding: 0;
margin: 0;
`;
//# sourceMappingURL=shared.js.map