Announcement component
State
- Test coverage: --%
- Known bugs: --
- Storybook: https://storybook.knet.lqd.dk/?path=/story/announcement--all-props
- Zeroheight: --
Usage
Import like this:
import { Announcement } from '@tdcerhverv/announcement';
Use like this:
<AnnouncementElement {...props}/>
<AnnouncementService {...props}/>
<AnnouncementPage {...props}/>
Note: The component uses SVG icons as React components. For this reason you must use something like @svgr/parcel-plugin-svgr
(for Parcel) or svg-react-loader
(for Webpack) depending on your application bundler.
Both is added as a peer dependency, but you only need one of them.
The new selfservice website uses Parcel and Storybook uses Webpack if you need help and inspiration to set it up.
Props
export interface IAnnouncement {
type: AnnouncementType;
title: string;
message: ReactNode;
link?: string; // used in conjuction with linkText
linkText?: string; // used in conjuction with link
linkTarget?: '_blank' | '_self' | '_parent' | '_top';
onClose?: () => void;
className?: string;
}
Note: title
is not required nor used for the small announcement.
Note: Both link
and linkText
must be supplied for the link to show.
And the AnnouncementType
:
export type AnnouncementType =
| 'empty'
| 'info'
| 'positive'
| 'warning'
| 'negative';
Detailed usage
TODO...
Tags
announcement, notification, alert, warning, info