woocommerce/plugins/woocommerce-blocks/assets/js/base/components/notice-banner/index.tsx

100 lines
2.9 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/**
* External dependencies
*/
import classnames from 'classnames';
import { __ } from '@wordpress/i18n';
import { Icon, close } from '@wordpress/icons';
/**
* Internal dependencies
*/
import './style.scss';
import { getDefaultPoliteness, getStatusIcon } from './utils';
import Button from '../button';
import { useSpokenMessage } from '../../hooks';
export interface NoticeBannerProps {
// The displayed message of a notice. Also used as the spoken message for assistive technology, unless `spokenMessage` is provided as an alternative message.
children: React.ReactNode;
// Additional class name to give to the notice.
className?: string | undefined;
// Determines whether the notice can be dismissed by the user.
isDismissible?: boolean | undefined;
// Function called when dismissing the notice.
onRemove?: ( () => void ) | undefined;
// Determines the level of politeness for the notice for assistive technology.
politeness?: 'polite' | 'assertive' | undefined;
// Optionally provided to change the spoken message for assistive technology.
spokenMessage?: string | React.ReactNode | undefined;
// Status determines the color of the notice and the icon.
status: 'success' | 'error' | 'info' | 'warning' | 'default';
// Optional summary text shown above notice content, used when several notices are listed together.
summary?: string | undefined;
}
/**
* NoticeBanner: An informational UI displayed near the top of the store pages.
*
* Notices are informational UI displayed near the top of store pages. WooCommerce blocks, themes, and plugins all use
* notices to indicate the result of an action, or to draw the users attention to necessary information.
*/
const NoticeBanner = ( {
className,
status = 'default',
children,
spokenMessage = children,
onRemove = () => void 0,
isDismissible = true,
politeness = getDefaultPoliteness( status ),
summary,
}: NoticeBannerProps ) => {
useSpokenMessage( spokenMessage, politeness );
const dismiss = ( event: React.SyntheticEvent ) => {
if (
typeof event?.preventDefault === 'function' &&
event.preventDefault
) {
event.preventDefault();
}
onRemove();
};
return (
<div
className={ classnames(
className,
'wc-block-components-notice-banner',
'is-' + status,
{
'is-dismissible': isDismissible,
}
) }
>
<Icon icon={ getStatusIcon( status ) } />
<div className="wc-block-components-notice-banner__content">
{ summary && (
<p className="wc-block-components-notice-banner__summary">
{ summary }
</p>
) }
{ children }
</div>
{ !! isDismissible && (
<Button
className="wc-block-components-notice-banner__dismiss"
icon={ close }
label={ __(
'Dismiss this notice',
'woo-gutenberg-products-block'
) }
onClick={ dismiss }
showTooltip={ false }
/>
) }
</div>
);
};
export default NoticeBanner;