@navinc/base-react-components/cjs/form-elements/shared.js

Nav's Pattern Library

"use strict";
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_1 = __importDefault(require("../button"));
const copy_1 = __importDefault(require("../copy"));
const text_1 = __importDefault(require("../text"));
const icon_js_1 = __importDefault(require("../icon.js"));
const react_number_format_1 = __importDefault(require("react-number-format"));
const carrot_down_1 = __importDefault(require("../icons/actions/carrot-down"));
exports.HelperIcon = (0, styled_components_1.default)(icon_js_1.default) `
  max-width: 16px;
  max-height: 16px;
  fill: ${({ theme }) => theme.neutral400};
`;
exports.HelperDescription = (0, styled_components_1.default)(copy_1.default).attrs(() => ({ size: 'sm', bold: true })) `
  color: inherit;
`;
exports.HelperItem = styled_components_1.default.div.attrs(({ isLink }) => isLink && { as: button_1.default, variation: 'buttonLink', type: 'button' }) `
  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.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 }, void 0), (0, jsx_runtime_1.jsx)(exports.HelperDescription, Object.assign({ "data-testid": `input:helper-text:${helperText}`, light: true, size: "xs" }, { children: helperText }), void 0)] }), void 0))) ``;
exports.Label = (0, styled_components_1.default)(text_1.default) `
  display: block;
  transition: all 0.2s linear;
  pointer-events: none;
  transform-origin: 0 0;

  &:focus {
    outline: none;
  }

  &::after {
    content: '${({ required }) => (required ? '*' : '')}';
  }
`;
exports.FieldWrapper = styled_components_1.default.div `
  display: grid;

  & > ${copy_1.default} {
    margin-bottom: ${({ theme }) => theme.gu(1)};
  }

  & * {
    font-family: inherit;
  }

  & > ${exports.Label} {
    font-size: 14px;
  }

  & > ${exports.Helper} {
    margin-left: ${({ theme }) => theme.gu(2)};
  }
`;
exports.FieldWrapper.displayName = 'FieldWrapper';
exports.Input = styled_components_1.default.input.withConfig({
    shouldForwardProp: (prop) => !['isInvalid', 'hasSpaceForErrors'].includes(prop),
}) `
  width: 100%;
  border-width: 3px;
  border-style: solid;
  border-color: ${({ isInvalid, theme }) => (isInvalid ? theme.transparentRed : theme.bubbleBlue200)};
  border-radius: 12px;
  font-weight: bold;
  background: ${({ isInvalid, theme }) => (isInvalid ? theme.sebastianRed100 : theme.bubbleBlue100)};
  ${({ disabled, theme }) => disabled && `cursor: not-allowed; background: ${theme.scuttleGray100}`};
  padding: ${({ theme }) => `${theme.gu(3)} ${theme.gu(2)} ${theme.gu(1)} ${theme.gu(2)}`};

  &:focus,
  &:hover {
    outline: none;
    outline-offset: 0;
  }

  &:focus {
    border-color: ${({ theme }) => theme.bubbleBlue300};
  }
`;
exports.CurrencyInput = (0, styled_components_1.default)(exports.Input).attrs(() => ({
    as: react_number_format_1.default,
})) ``;
exports.PercentInput = (0, styled_components_1.default)(exports.Input).attrs(() => ({ as: react_number_format_1.default })) ``;
exports.NumberInput = (0, styled_components_1.default)(exports.Input).attrs(() => ({ as: react_number_format_1.default })) ``;
const ChevronWrapper = styled_components_1.default.div `
  pointer-events: none;
  & > ${icon_js_1.default} {
    fill: ${({ isInvalid, disabled, theme }) => isInvalid ? theme.error : disabled ? theme.scuttleGray500 : theme.azure};
  }
`;
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_1.default, {}, void 0) }), void 0))) ``;
exports.Field = styled_components_1.default.label `
  align-items: stretch;
  color: ${({ theme }) => 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: 12px;
    appearance: none;
  }

  & > ${exports.Label} {
    will-change: transform;
    font-weight: ${({ isVisited }) => (isVisited ? 'normal' : 'bold')};
    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.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 }) => theme.scuttleGray600};
  }

  & > ${exports.Chevron} {
    width: min-content;
    position: absolute;
    right: 16px;
    top: 16px;
  }
`;
exports.Err = (0, styled_components_1.default)(copy_1.default).attrs(() => ({ size: 'sm', bold: true })) `
  color: ${({ theme }) => theme.error};
  text-align: left;
`;
exports.Errors = styled_components_1.default.div `
  ${({ hasSpaceForErrors }) => (hasSpaceForErrors ? 'min-height: 18px;' : '')}

  & > ${exports.Err} {
    margin-left: ${({ theme }) => theme.gu(2)};
  }
`;
//# sourceMappingURL=shared.js.map