Notification action
Usage
Overview
The ApplicationHeader pattern uses the NotificationAction component. The NotificationAction component is only to be used in that context.
Content
General writing guidelines
When writing for this component, observe the following best practices:
- Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
- Use present tense verbs and active voice in most situations.
- Use common contractions to lend your copy a more natural and informal tone.
- Use plain language. Avoid unnecessary jargon and complex language.
- Keep words and sentences short.
Related components and patterns
Components
Code
<NotificationAction
footerLink={{
href: '/',
label: 'Footer link',
}}
headerLink={{
label: 'Mark all as read',
}}
id="notification-action"
renderTrigger={(toggle, ref, isShown) => (
<Button
onClick={toggle}
ref={ref}
aria-expanded={isShown}
label="Show Example"
/>
)}
title="This is popover">
lorem ipsum dolor sit amet
</NotificationAction>
Import statement
import { NotificationAction } from '@jutro/components';
Component contract
Make sure to understand the Design System components API surface, and the implications and trade-offs. Learn more in our introduction to the component API.
Properties
idrequired- Type
stringDescriptionUnique identifier for the component.
renderTriggerrequired- Type
stringDescriptionFunction to render a trigger element. The trigger element takes three arguments: An object of props for the component; An onCLick callback function; A boolean variable to control the state of visibility, like
isVisible. align- Type
stringDescriptionPopover alignment (relative to trigger element).
Default value"'auto' | 'auto-end' | 'auto-start' | 'bottom' | 'bottom-end' | 'bottom-start' | 'left' | 'left-end' | 'left-start' | 'right' | 'right-end' | 'right-start' | 'top' | 'top-end' | 'top-start'" children- Type
nodeDescriptionNotification popover content.
className- Type
stringDescriptionCSS class name for this component.
footerLink- Type
{ label: IntlMessageShape, onClick: () => void, href: IntlMessageShape }DescriptionObject for the footer link.
headerLink- Type
{ label: IntlMessageShape, onClick: () => void, href: IntlMessageShape }DescriptionObject for the header link.
isFlipEnabled- Type
booleanDescriptionIf set to
true, the popover flips when it is about to overflow the visible area.Default valuetrue onClosed- Type
() => voidDescriptionFunction called when the notification disappears.
title- TypeDescription
Notification popover title.
Hooks
No hooks are available for NotificationAction.
Translation keys
There are no translations for NotificationAction.
For information on how to manage translations, see our section about Internationalization.
Escape Hatches
For more information, see our documentation about escape hatches.
Examples
Check out the Usage section for details about how to design a NotificationAction properly, and the different configuration options we provide.
Basic notification action example
The notification action component is a panel with a list of notifications that you can choose. The panel itself has a header and footer, and it can appear as a result of some event, or at the click of a button. You can implement the logic for each notification and for the panel itself. You can also add an onClick event or target url to headers and footers to handle any navigation needed.
<NotificationAction
renderTrigger={(toggle, ref, isShown) => (
<Button
onClick={toggle}
ref={ref}
aria-expanded={isShown}
label="Show Example"
/>
)}
footerLink={{
href: '/',
label: 'Footer link',
}}
headerLink={{
label: 'Header link',
}}
id="notification-action"
title="This is a popover">
lorem ipsum dolor sit amet
</NotificationAction>
Text truncation example
If the text in the header, footer or title section is too long, it will truncate its content. It will not truncate the content of notification text.
<NotificationAction
renderTrigger={(toggle, ref, isShown) => (
<Button
onClick={toggle}
ref={ref}
aria-expanded={isShown}
label="Show Example"
/>
)}
footerLink={{
href: '/',
label:
'very long text very long text very long text very long text very long text very long text',
}}
headerLink={{
label:
'very long text very long text very long text very long text very long text very long text',
}}
id="notification-action"
title="very long text very long text very long text very long text very long text very long text">
very long text very long text very long text very long text very long text
</NotificationAction>
OnClick example
The header and footer links can be set to run a function when clicked.
function MakeToast (text: string) {
ToastProvider.toast({
message: text,
autoClose: 3000,
})
}
<ToastProvider />
<NotificationAction
renderTrigger={(toggle, ref, isShown) => (
<Button
onClick={toggle}
ref={ref}
aria-expanded={isShown}
label="Show Example"
/>
)}
footerLink={{
label: 'Footer link',
onClick: () => {MakeToast("Footer clicked")}
}}
headerLink={{
label: 'Header link',
onClick: () => {MakeToast("Header clicked")}
}}
id="notification-action"
title="This is a popover"
>
lorem ipsum dolor sit amet
</NotificationAction>
Changelog
10.9.0
-
A new opt-in feature was introduced that disables automatic event publishing for the NotificationAction component. You can enable this feature by adding
JUTRO_DISABLE_AUTO_EVENTS_PUBLISHING=trueto the.envfile in the root of your Jutro application. When this is enabled, legacy components no longer publish events by default. For more information on events and how to set up new events, see the Events documentation.