@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: "data/report" | "data/todo" | "actions/download" | "actions/close" | "actions/done" | "actions/logout" | "actions/minus" | "actions/plus" | "actions/print" | "actions/warning" | "buildings/business" | "buildings/bank" | "buildings/city" | "buildings/home" | "business/map" | "business/email" | "business/document" | "business/archive" | "business/calendar" | "business/history" | "business/imac" | "business/iphone" | "business/matchfactor" | "feedback/alert" | "feedback/visible" | "feedback/balloon" | "feedback/diamond" | "feedback/flag" | "feedback/hot" | "feedback/invisible" | "feedback/party" | "feedback/star" | "financing/calculation" | "financing/calculator" | "financing/cart" | "financing/cash" | "financing/coins" | "financing/decrease" | "financing/gift" | "financing/increase" | "financing/lending" | "financing/wallet" | "food/apple" | "food/burger" | "food/cake" | "food/donut" | "food/pizza" | "food/popsicle" | "food/soup" | "food/strawberry" | "food/turkey" | "food/watermelon" | "medical/stethoscope" | "others/placeholder" | "others/airplane" | "others/lightbulb" | "people/man" | "people/profile" | "people/users" | "people/woman" | "seasons/leaf" | "seasons/raindrop" | "seasons/snowflake" | "seasons/sun" | "seasons/umbrella" | "system/link" | "system/search" | "system/attachment" | "system/bookmark" | "system/edit" | "system/mic" | "system/pen" | "system/pencil" | "system/share" | "system/trash" | "system/unlink" | "tech/filter" | "tech/car" | "tech/dashboard" | "tech/gear" | "tech/locked" | "tech/pin" | "tech/settings" | "tech/tool" | "tech/unlocked" | "data/bar-graph" | "data/chart-down" | "data/chart-up" | "data/line-graph" | "data/report-fail" | "data/report-success" | "data/reports-multiple" | "data/round-chart" | "actions/arrow-back" | "actions/arrow-down" | "actions/arrow-forward" | "actions/arrow-up" | "actions/carrot-down" | "actions/carrot-left" | "actions/carrot-right" | "actions/carrot-up" | "actions/check-circle" | "actions/circle-block" | "actions/circle-delete" | "actions/circle-faq" | "actions/circle-info" | "actions/circle-minus" | "actions/circle-play" | "actions/circle-plus" | "actions/circle-warning" | "actions/cloud-download" | "actions/cloud-upload" | "actions/export-icon" | "actions/link-out" | "actions/more-dots-horizontal" | "actions/sort-horizontal" | "actions/sort-vertical" | "business/calendar-date" | "business/delivery-box" | "feedback/alert-notification" | "feedback/alert-off" | "feedback/star-fill" | "feedback/star-fill-half" | "feedback/thumbs-down" | "feedback/thumbs-up" | "financing/card-add" | "financing/card-coins" | "financing/card-lock" | "financing/card-multiple" | "financing/card-ok" | "financing/cart-add" | "financing/cash-register" | "financing/coin-bag" | "financing/coin-stack" | "financing/credit-card" | "financing/money-bag" | "financing/money-circle" | "financing/piggy-bank" | "food/coffee-cup" | "food/coffee-mug" | "others/shopping-bag" | "seasons/cloud-sun" | "seasons/tree-palm" | "seasons/tree-point" | "seasons/tree-round" | "system/certified-ribbon" | "system/mic-off";
    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 {};