@navinc/base-react-components/cjs/banner.d.ts

Nav's Pattern Library

import { ReactNode } from 'react';
import { PolymorphicStyledComponent } from './types.js';
import { IconName } from './icons/index.js';
type Style = {
    primaryColor: string;
    secondaryColor: string;
    defaultIcon: IconName;
    defaultActionIcon: IconName;
};
declare const styles: {
    readonly missingInfoAction: {
        readonly primaryColor: "navNeutral400";
        readonly secondaryColor: "navNeutral100";
        readonly defaultIcon: "system/search";
        readonly defaultActionIcon: "actions/carrot-right";
    };
    readonly improveAction: {
        readonly primaryColor: "navPrimary400";
        readonly secondaryColor: "navPrimary100";
        readonly defaultIcon: "actions/circle-info";
        readonly defaultActionIcon: "actions/carrot-right";
    };
    readonly positiveAction: {
        readonly primaryColor: "navStatusPositive";
        readonly secondaryColor: "navStatusPositive200";
        readonly defaultIcon: "feedback/thumbs-up";
        readonly defaultActionIcon: "actions/carrot-right";
    };
    readonly neutralAction: {
        readonly primaryColor: "navNeutral400";
        readonly secondaryColor: "navNeutral100";
        readonly defaultIcon: "actions/circle-info";
        readonly defaultActionIcon: "actions/carrot-right";
    };
    readonly warning: {
        readonly primaryColor: "navSecondary600";
        readonly secondaryColor: "navSecondary";
        readonly defaultIcon: "actions/circle-warning";
        readonly defaultActionIcon: "actions/close";
    };
    readonly error: {
        readonly primaryColor: "navStatusNegative";
        readonly secondaryColor: "navStatusNegative200";
        readonly defaultIcon: "actions/circle-warning";
        readonly defaultActionIcon: "actions/close";
    };
};
type StyledBannerProps = {
    $currentStyles: Style;
    hasLabel?: boolean;
    onDismiss?: () => void;
    hasAction?: boolean;
    shouldHideBorder?: boolean;
};
export declare const StyledBanner: import("styled-components").StyledComponent<"aside", import("styled-components").DefaultTheme, StyledBannerProps, never>;
export declare const StyledBannerAsLink: PolymorphicStyledComponent<import("styled-components").StyledComponent<"aside", import("styled-components").DefaultTheme, StyledBannerProps, never>, import("react").DetailedHTMLFactory<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>>;
export declare const TitleCopy: import("styled-components").StyledComponent<({ bold: _bold, shouldScaleFont: _shouldScaleFont, boldType: _boldType, light: _light, ...props }: import("./copy.js").CopyProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
export declare const ActionIcon: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<{
    variation?: import("./button.js").VariationKey | undefined;
    buttonAriaLabel?: string | undefined;
} & Omit<import("./types.js").InferComponentProps<import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, import("./button.js").StyledButtonProps, never>>, "size"> & import("./types.js").InferComponentProps<import("styled-components").StyledComponent<({ name, size, ...props }: {
    name: IconName;
    size?: string | undefined;
} & import("react").SVGProps<SVGSVGElement>) => JSX.Element | null, import("styled-components").DefaultTheme, {}, never>> & import("react").RefAttributes<unknown>>, import("styled-components").DefaultTheme, {
    $currentStyles: Style;
}, never>;
type BannerProps<T extends Record<string, Style>> = {
    action?: () => void;
    actionHref?: string;
    actionLabel?: ReactNode;
    actionIcon?: IconName;
    actionTarget?: string;
    children?: ReactNode;
    className?: string;
    copy?: ReactNode;
    expandedStyles?: T;
    icon?: IconName;
    onDismiss?: () => void;
    shouldHideBorder?: boolean;
    CDNIllustrationIcon?: string;
    title?: ReactNode;
    type?: keyof typeof styles & keyof T;
};
export declare const Banner: import("styled-components").StyledComponent<(<T extends Record<string, Style>>({ action, actionHref, actionLabel, actionIcon, actionTarget, children, className, copy, expandedStyles, icon, onDismiss, shouldHideBorder, CDNIllustrationIcon: CDNAssetIcon, title, type, }: BannerProps<T>) => JSX.Element), import("styled-components").DefaultTheme, {}, never>;
export {};