@navinc/base-react-components
Version:
Nav's Pattern Library
83 lines (82 loc) • 4.1 kB
TypeScript
import { ReactNode } from 'react';
import { PolymorphicStyledComponent } from './types.js';
import { IconName } from './icons/index.js';
declare 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";
};
};
declare 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<(props: {
name: IconName;
} & import("react").SVGProps<SVGSVGElement>) => JSX.Element, import("styled-components").DefaultTheme, {
currentStyles: Style;
}, never>;
declare 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: <T extends Record<string, Style>>({ action, actionHref, actionLabel, actionIcon, actionTarget, children, className, copy, expandedStyles, icon, onDismiss, shouldHideBorder, CDNIllustrationIcon, title, type, }: BannerProps<T>) => JSX.Element;
declare const StyledBannerExp: import("styled-components").StyledComponent<(<T extends Record<string, Style>>({ action, actionHref, actionLabel, actionIcon, actionTarget, children, className, copy, expandedStyles, icon, onDismiss, shouldHideBorder, CDNIllustrationIcon, title, type, }: BannerProps<T>) => JSX.Element), import("styled-components").DefaultTheme, {}, never>;
export default StyledBannerExp;