NotificationCardShell

The NotificationCardShell provides a wrapper for creating a custom notification card. The shell provides the new notification highlight functionality seen in the Notification Center.

Props

Prop	Type	Required	Default value	Description
notification	INotification	No		The Notification to be displayed. The <NotificationCenter> and <NotificationToasts> components will pass this value in at run time
uiContext	"center"|"toasts"	No		The context in which the custom notification card will be rendered. The <NotificationCenter> and <NotificationToasts> components will pass this value in at run time
removeNotification	Function	No		The function that gets called when removing a toast from view. The <NotificationCenter> and <NotificationToasts> components will pass this value in at run time.

<NotificationCardShell> accepts child components to render.

The <NotificationCardShell> accepts child components to render. If there are no children, the default Finsemble Notification will be rendered.

Usage

import {
    NotificationCardPropType,
    NotificationCardHeaderShell,
    NotificationCardShell,
    NotificationCardHeaderLogo,
    NotificationCardBodyShell,
    NotificationCardBodyContentLogo
} from "@finsemble/finsemble-core";

export const CustomNotificationCard: React.FunctionComponent<NotificationCardPropType> = (props) => {
    return (
        <NotificationCardShell {...props}>
            <NotificationCardHeaderShell {...props}>
                {/* The Component children should be empty if you want the default Finsemble Notification Header */}
                <NotificationCardHeaderLogo headerLogo={props.notification.headerLogo} />
                <div className="notification-card__title">Custom</div>
                {/* NotificationCardHeaderShell will render the notification context menu */}
            </NotificationCardHeaderShell>
            <NotificationCardBodyShell {...props}>
                {/* The Component children should be empty if you want the default Finsemble Notification Header */}
                <NotificationCardBodyContentLogo contentLogo={props.notification.contentLogo} />
                <div className="notification-card__body_text">Custom</div>
                {/* NotificationCardBodyShell will render the notification Actions */}
            </NotificationCardBodyShell>
        </NotificationCardShell>
    );
};

Related UI Components:

NotificationCardHeaderShell, NotificationCardBodyShell