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