@neo4j-ndl/react
Version:
React implementation of Neo4j Design System
109 lines (108 loc) • 3.86 kB
TypeScript
/**
*
* Copyright (c) "Neo4j"
* Neo4j Sweden AB [http://neo4j.com]
*
* This file is part of Neo4j.
*
* Neo4j is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License as published by
* the Free Software Foundation, either version 3 of the License, or
* (at your option) any later version.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import React from 'react';
import { type PolymorphicForwardRefExoticComponent, type PolymorphicPropsWithRef } from '../_common/types';
/**
*
*
* Types
*
*
*/
export type BannerActionsProps = {
/** Label of the action item */
label: string;
disabled?: boolean;
fill?: 'outlined' | 'text';
} & ({
as: 'button';
/** Event handler when the action button is clicked. If set, the element is rendered as `button` */
onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
} | {
as?: 'a';
href?: string;
target?: React.ComponentPropsWithoutRef<'a'>['target'];
} | {
as: React.ElementType;
});
export interface BannerCommonProps {
/** Title of the banner */
title?: string | React.ReactNode;
/**
* The banner name or label. Used for accessibility only.
* Required if title is not a string or if title is not set.
*/
name?: string;
/** Description of the banner. Will be ignored if `children` is passed */
description?: string | React.ReactNode;
/** Shows status icon. Icon is automatically picked based on `type` value */
hasIcon?: boolean;
/** Shows Action buttons in the footer */
actions?: React.ComponentProps<typeof BannerActions>[];
children?: React.ReactNode;
className?: string;
/** Sets the role to alert or alertdialog */
isAlert?: boolean;
}
type BannerInlineProps = {
/** How the banner is used */
usage?: 'inline';
/** Type of the banner */
type?: BannerType;
};
type BannerGlobalProps = {
/** How the banner is used */
usage: 'global';
/** Type of the banner */
type?: BannerType;
};
type BannerFullWidthProps = {
/**
* How the banner is used
* (deprecated, will be removed in v4)
*/
usage: 'full-width';
/** Type of the banner */
type?: Exclude<BannerType, 'success'>;
};
type BannerUsageProps = BannerInlineProps | BannerGlobalProps | BannerFullWidthProps;
type CloseableBannerProps = {
/** Shows close icon. Expects onClose to be passed */
isCloseable: true;
/** Event handler when close icon is clicked */
onClose: (e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>) => void;
};
type NonCloseableBannerProps = {
isCloseable?: false;
onClose?: never;
};
type BannerCloseProps = CloseableBannerProps | NonCloseableBannerProps;
export type BannerProps = BannerCommonProps & BannerCloseProps & BannerUsageProps;
export type BannerType = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
declare const BannerActions: PolymorphicForwardRefExoticComponent<'a', BannerActionsProps>;
declare const BannerNamespace: Omit<React.ForwardRefExoticComponent<BannerProps & {
[key: string]: unknown;
}>, "$$typeof"> & Omit<React.ExoticComponent<BannerProps & {
[key: string]: unknown;
}>, never> & (<InstanceT extends React.ElementType = "div">(props: PolymorphicPropsWithRef<InstanceT, BannerProps>) => React.ReactElement | null) & {
Actions: PolymorphicForwardRefExoticComponent<"a", BannerActionsProps>;
};
export { BannerNamespace as Banner };