@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, css } from 'styled-components';
import { Button } from '../button.js';
import { Copy } from '../copy.js';
import { Text } from '../text.js';
import { Icon } from '../icon.js';
import CarrotDown from '../icons/actions/carrot-down.js';
import { Tooltip } from '../tooltip.js';
import { addClassNameTo } from '../add-classname-to.js';
export const HelperIcon = styled(Icon).withConfig({ displayName: "brc-sc-HelperIcon", componentId: "brc-sc-19eqpdz" }) `
  max-width: 16px;
  max-height: 16px;
  fill: ${({ theme }) => theme.onSurfaceVariant};
`;
export const HelperDescription = styled(Copy).attrs(() => ({ size: 'xs' })).withConfig({ displayName: "brc-sc-HelperDescription", componentId: "brc-sc-ogtsah" }) `
  color: ${({ theme }) => theme.onSurfaceVariant};
`;
export const HelperItem = styled.div.attrs(({ isLink }) => isLink ? { as: Button, variation: 'buttonLink', type: 'button' } : {}).withConfig({ displayName: "brc-sc-HelperItem", componentId: "brc-sc-34o9dh" }) `
  display: grid;
  padding-top: ${({ theme }) => theme.spacing.space50};
  grid-template-columns: min-content 1fr;
  grid-gap: 4px;
  text-align: left;
  ${({ theme, isLink }) => (!isLink ? `color: ${theme.navNeutral500}` : `color: ${theme.neutral400};`)}
`;
export const Helper = styled(({ className, helperLinkAction, helperText, iconName }) => (
// eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions -- "isLink" prop decides if it is a button
_jsxs(HelperItem, { className: className, isLink: !!helperLinkAction, onClick: helperLinkAction, children: [iconName && _jsx(HelperIcon, { name: iconName }), _jsx(HelperDescription, { "data-testid": `input:helper-text:${helperText}`, light: true, children: helperText })] }))).withConfig({ displayName: "brc-sc-Helper", componentId: "brc-sc-12d8fsx" }) ``;
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const Label = styled(Text).withConfig({ displayName: "brc-sc-Label", componentId: "brc-sc-1de56v1" }) `
  display: flex;
  align-items: center;
  height: 32px;
  transition: all 0.2s linear;
  cursor: text;
  transform-origin: 0 0;

  ${Tooltip} {
    margin-left: 4px;
    cursor: default;
  }

  &:focus {
    outline: none;
  }

  &::after {
    content: '${({ required }) => (required ? '*' : '')}';
    font-size: 24px;
  }
`;
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const FieldWrapper = styled.div.withConfig({ displayName: "brc-sc-FieldWrapper", componentId: "brc-sc-1tbtg2z" }) `
  display: grid;

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

  & * {
    font-family: inherit;
  }

  & > ${Label} {
    font-size: 16px;
  }
`;
FieldWrapper.displayName = 'FieldWrapper';
const getBorderColor = (theme, isInvalid) => isInvalid ? theme.error : theme.outlineVariant;
const getBackgroundColor = (theme, isInvalid, disabled, readOnly = false) => {
    if (disabled || readOnly) {
        return theme.surfaceDim;
    }
    else if (isInvalid) {
        return theme.surface;
    }
    return theme.surface;
};
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const Input = styled(addClassNameTo('input', 'body1')).withConfig({
    shouldForwardProp: (prop) => !['isInvalid', 'hasSpaceForErrors'].includes(prop),
}) `
  width: 100%;
  border-width: 1px;
  border-style: solid;
  border-color: ${({ isInvalid, theme }) => getBorderColor(theme, isInvalid)};
  border-radius: ${({ theme }) => theme.spacing.space100};
  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)}`};

  &:hover:not(:disabled) {
    border: 1px solid ${({ theme }) => theme.outline};
  }

  &:active:not(:disabled) {
    border: 1px solid ${({ theme }) => theme.primary};
  }

  &:focus:not(:disabled) {
    border: 1px solid ${({ theme }) => theme.primary};
  }

  &::placeholder {
    color: ${({ theme }) => theme.onSurfaceDim};
  }
`;
const getIconFill = (disabled, theme) => {
    return disabled ? theme.navNeutral400 : theme.navNeutralDark;
};
const ChevronWrapper = styled.div.withConfig({ displayName: "brc-sc-ChevronWrapper", componentId: "brc-sc-z496nq" }) `
  pointer-events: none;
  & > ${Icon} {
    fill: ${({ isInvalid, disabled, theme }) => (isInvalid ? theme.navStatusNegative : getIconFill(disabled, theme))};
  }
`;
export const Chevron = styled(({ className, disabled, isInvalid }) => (_jsx(ChevronWrapper, { className: className, disabled: disabled, isInvalid: isInvalid, children: _jsx(CarrotDown, {}) }))).withConfig({ displayName: "brc-sc-Chevron", componentId: "brc-sc-pv07ox" }) ``;
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const Field = styled.label.withConfig({ displayName: "brc-sc-Field", componentId: "brc-sc-nozufk" }) `
  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;
  }

  & > ${Label} {
    will-change: transform;
    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;
    width: calc(100% - 32px);
    overflow: hidden;
  }

  * {
    font-size: 16px;
  }

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

  & > ${Chevron} {
    width: min-content;
    position: absolute;
    right: 16px;
    top: 22px;
  }
`;
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const Err = styled(Copy).attrs(() => ({ size: 'xs' })).withConfig({ displayName: "brc-sc-Err", componentId: "brc-sc-kk7cbt" }) `
  color: ${({ theme }) => theme.error};
  text-align: left;
`;
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const Errors = styled.div.withConfig({ displayName: "brc-sc-Errors", componentId: "brc-sc-9c57ys" }) `
  padding-top: ${({ theme, hasHelperText }) => (hasHelperText ? '0' : theme.spacing.space50)};
  ${({ hasSpaceForErrors }) => (hasSpaceForErrors ? 'min-height: 20px;' : '')}
`;
export const visuallyHiddenStyles = css `
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
`;
export const HiddenLegend = styled.legend.withConfig({ displayName: "brc-sc-HiddenLegend", componentId: "brc-sc-r5dhsu" }) `
  ${visuallyHiddenStyles}
`;
export const Legend = styled.legend.withConfig({ displayName: "brc-sc-Legend", componentId: "brc-sc-q1xhmt" }) `
  padding: 0;
  width: 100%;
`;
/**
 * @deprecated This component is deprecated and will be removed in a future release. Avoid using it in new code.
 */
export const Fieldset = styled.fieldset.withConfig({ displayName: "brc-sc-Fieldset", componentId: "brc-sc-18ygx5q" }) `
  border: none;
  padding: 0;
  margin: 0;
`;
//# sourceMappingURL=shared.js.map