@navinc/base-react-components
Version:
Nav's Pattern Library
118 lines (114 loc) • 6.67 kB
TypeScript
import { ReactNode } from 'react';
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;
};
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export declare const StyledBanner: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledBannerProps>> & string;
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export declare const StyledBannerAsLink: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, StyledBannerProps>> & string;
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export declare const TitleCopy: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<{
bold?: boolean;
shouldScaleFont?: boolean;
light?: boolean;
size?: import("./copy.js").SizeKey;
boldType?: "bold" | "regular" | "semiBold";
} & import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>, never>, never>> & string;
/** @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead */
export declare const ActionIcon: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("styled-components").FastOmit<{
variation?: import("./button.js").VariationKey;
buttonAriaLabel?: string;
} & Omit<import("./types.js").InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components/dist/types.js").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, import("./button.js").StyledButtonProps>> & string>, "size"> & Omit<import("./types.js").InferComponentProps<import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<{
name: IconName;
size?: string;
} & import("react").SVGProps<SVGSVGElement>, never>> & string & Omit<({ name, size, ...props }: {
name: IconName;
size?: string;
} & import("react").SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element | null, keyof import("react").Component<any, {}, any>>>, "onClick"> & import("react").RefAttributes<HTMLButtonElement>, never>, {
$currentStyles: Style;
}>> & string;
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;
};
/**
* @deprecated use the wayfinder banner from @navinc/base-react-components/wayfinder instead
Use when you want users to take an action after reading the banner.
#### Props
- type: (string) determines the colors and default icons.
- `missingInfoAction|improveAction|positiveAction|neutralAction|warning`
- icon: (IconComponent) determines the icon next to the text. If no icon is provided it will use the default icon for the type specified
- Any react component that returns an svg
- actionIcon: (IconComponent) OPTIONAL - Overrides the icon used if there is no actionLabel
- Any react component that returns an svg
- copy: (string) the copy inside the banner
- action: (function()) function that fires when the banner/link is clicked on
- actionHref: (string) the link the user is take to when the banner/link is clicked on
- actionLabel: (string) The label of the link. If there is no actionLabel it will show a the actionIcon
- expandedStyles: (object) An object that expands the types available to the banner
- onDismiss: (function()) function that fires when you click the close button
**/
export declare const Banner: import("styled-components/dist/types.js").IStyledComponentBase<"web", import("styled-components").FastOmit<BannerProps<Record<string, Style>>, never>> & string & Omit<(<T extends Record<string, Style>>({ action, actionHref, actionLabel, actionIcon, actionTarget, children, className, copy, expandedStyles, icon, onDismiss, shouldHideBorder, CDNIllustrationIcon: CDNAssetIcon, title, type, }: BannerProps<T>) => import("react/jsx-runtime").JSX.Element), keyof import("react").Component<any, {}, any>>;
export {};