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

Nav's Pattern Library

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import styled from 'styled-components';
import Button from '../button.js';
import Copy from '../copy.js';
import Text from '../text.js';
import Icon from '../icon.js';
import NumberFormat from 'react-number-format';
import CarrotDown from '../icons/actions/carrot-down.js';
import isRebrand from '../is-rebrand';
export const HelperIcon = styled(Icon).withConfig({ displayName: "brc-sc-HelperIcon", componentId: "brc-sc-152bxnk" }) `
  max-width: 16px;
  max-height: 16px;
  fill: ${({ theme }) => (isRebrand(theme) ? theme.navNeutral500 : theme.neutral400)};
`;
export const HelperDescription = styled(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
export const HelperItem = styled.div.attrs(({ isLink }) => isLink && { as: 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 && isRebrand(theme) ? `color: ${theme.navNeutral500}` : `color: ${theme.neutral400};`}
`;
export const Helper = styled(({ className, hasSpaceForHelper, helperLinkAction, helperText, iconName }) => (_jsxs(HelperItem, Object.assign({ className: className, isLink: !!helperLinkAction, onClick: helperLinkAction, hasSpaceForHelper: hasSpaceForHelper }, { children: [iconName && _jsx(HelperIcon, { name: iconName }), _jsx(HelperDescription, Object.assign({ "data-testid": `input:helper-text:${helperText}`, light: true }, { children: helperText }))] })))).withConfig({ displayName: "brc-sc-Helper", componentId: "brc-sc-1g2oo3r" }) ``;
export const Label = styled(Text).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-1w6t3tr" }) `
  display: block;
  transition: all 0.2s linear;
  pointer-events: none;
  transform-origin: 0 0;

  &:focus {
    outline: none;
  }

  &::after {
    content: '${({ required }) => (required ? '*' : '')}';
    font-size: 24px;
  }
`;
export const FieldWrapper = styled.div.withConfig({ displayName: "brc-sc-FieldWrapper", componentId: "brc-sc-11njtq" }) `
  display: grid;

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

  & * {
    font-family: inherit;
  }

  & > ${Label} {
    font-size: ${({ theme }) => (isRebrand(theme) ? '16px' : '14px')};
  }

  & > ${Helper} {
    margin-left: ${({ theme }) => theme.gu(2)};
  }
`;
FieldWrapper.displayName = 'FieldWrapper';
const getBorderColor = (theme, isInvalid, disabled) => {
    if (disabled) {
        return isRebrand(theme) ? theme.navSecondary100 : theme.bubbleBlue200;
    }
    else if (isInvalid) {
        return isRebrand(theme) ? theme.navStatusNegative : theme.transparentRed;
    }
    return isRebrand(theme) ? theme.navNeutral300 : theme.bubbleBlue200;
};
const getBackgroundColor = (theme, isInvalid, disabled) => {
    if (disabled) {
        return isRebrand(theme) ? theme.navSecondary : theme.scuttleGray100;
    }
    else if (isInvalid) {
        return isRebrand(theme) ? theme.navStatusNegative100 : theme.sebastianRed100;
    }
    return isRebrand(theme) ? theme.navSecondary100 : theme.bubbleBlue100;
};
export const Input = styled.input.withConfig({
    shouldForwardProp: (prop) => !['isInvalid', 'hasSpaceForErrors'].includes(prop),
}) `
  width: 100%;
  border-width: ${({ theme }) => (isRebrand(theme) ? '1px' : '3px')};
  border-style: solid;
  border-color: ${({ isInvalid, theme, disabled }) => getBorderColor(theme, isInvalid, disabled)};
  border-radius: ${({ theme }) => (isRebrand(theme) ? '8px' : '12px')};
  margin: ${({ theme }) => isRebrand(theme) && '3px'};
  font-weight: 800;
  line-height: ${({ theme }) => isRebrand(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)}`};

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

  &:focus {
    margin: ${({ theme }) => isRebrand(theme) && '0px'};
    border-width: ${({ theme }) => isRebrand(theme) && '4px'};
    border-color: ${({ theme }) => (isRebrand(theme) ? theme.navStatusPositive500 : theme.bubbleBlue300)};
  }
`;
export const CurrencyInput = styled(Input).attrs(() => ({
    as: NumberFormat,
})).withConfig({ displayName: "brc-sc-CurrencyInput", componentId: "brc-sc-3u2kf0" }) ``;
export const PercentInput = styled(Input).attrs(() => ({ as: NumberFormat })).withConfig({ displayName: "brc-sc-PercentInput", componentId: "brc-sc-ph72pd" }) ``;
export const NumberInput = styled(Input).attrs(() => ({ as: NumberFormat })).withConfig({ displayName: "brc-sc-NumberInput", componentId: "brc-sc-l732kk" }) ``;
const getIconFill = (disabled, theme) => {
    if (isRebrand(theme))
        return disabled ? theme.navNeutral400 : theme.navNeutralDark;
    return disabled ? theme.scuttleGray500 : theme.azure;
};
const ChevronWrapper = styled.div.withConfig({ displayName: "brc-sc-ChevronWrapper", componentId: "brc-sc-ozhbdy" }) `
  pointer-events: none;
  & > ${Icon} {
    fill: ${({ isInvalid, disabled, theme }) => (isInvalid ? theme.navStatusNegative : getIconFill(disabled, theme))};
  }
`;
export const Chevron = styled(({ className, disabled, isInvalid }) => (_jsx(ChevronWrapper, Object.assign({ className: className, disabled: disabled, isInvalid: isInvalid }, { children: _jsx(CarrotDown, {}) })))).withConfig({ displayName: "brc-sc-Chevron", componentId: "brc-sc-u78bxs" }) ``;
const getLabelFontWeight = (theme, isVisited) => {
    if (isRebrand(theme))
        return isVisited ? 400 : 800;
    return isVisited ? 'normal' : 'bold';
};
export const Field = styled.label.withConfig({ displayName: "brc-sc-Field", componentId: "brc-sc-1mfvla" }) `
  align-items: stretch;
  color: ${({ theme }) => (isRebrand(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 }) => (isRebrand(theme) ? '8px' : '12px')};
    appearance: none;
  }

  & > ${Label} {
    will-change: transform;
    font-weight: ${({ theme, isVisited }) => getLabelFontWeight(theme, isVisited)};
    line-height: ${({ theme }) => isRebrand(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 }) => (isRebrand(theme) ? theme.navNeutralDark : theme.scuttleGray600)};
  }

  * {
    font-size: 16px;
  }

  ${Input}:focus ~ ${Label}, &:hover ${Label}, &:active ${Label} {
    transform: scale(0.75);
    font-weight: normal;
    top: ${({ theme }) => theme.gu(1)};
  }

  ${CurrencyInput}:focus + ${Label},
  &:hover ${Label},
  &:active ${Label} {
    color: ${({ theme }) => (isRebrand(theme) ? theme.navNeutralDark : theme.scuttleGray600)};
  }

  & > ${Chevron} {
    width: min-content;
    position: absolute;
    right: 16px;
    top: 16px;
  }
`;
export const Err = styled(Copy).attrs(() => ({ size: 'sm', bold: true })).withConfig({ displayName: "brc-sc-Err", componentId: "brc-sc-vze2v" }) `
  color: ${({ theme }) => theme.navStatusNegative};
  text-align: left;
`;
export const Errors = styled.div.withConfig({ displayName: "brc-sc-Errors", componentId: "brc-sc-1iayozj" }) `
  ${({ hasSpaceForErrors }) => (hasSpaceForErrors ? 'min-height: 18px;' : '')}

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