Banner Component

About

This is a component published as its own package from our component library monorepo: https://github.com/BenefitsDataTrust/ui-components. Setup instructions, as well as higher-level goals and concerns can be found from the main project README.

Description

Handles display of banners according to style guide conventions.

• https://zeroheight.com/990ea04ab/p/41ba0c-banners/b/01ee5c

API

| prop | type | required | default | explanation | |-----------|--------|----------|---------|--------------| | children | React node | yes | n/a | The component/text to render inside the button | | className | string | no | "" | Adds an optional classname to the component | | id | string | no | "" | Adds an optional id to the component | | variant | enum("success", "error", "informational", "warning") | no | "error" | Changes icon and color style for chosen variant | | alertMessage | string | no | no | Message to display in the banner | | isDismissable | boolean | no | false | Determines whether or not the banner can be dismissed | | isFixed | boolean | no | false | Uses fixed positioning (necessary for positioning if not using with a container) | | autoDismiss | number | no | 0 | Dismisses the banner on a timer according to the milliseconds specified | | action | React component | no | null | Renders a component, intended to be an action on the banner (will apply styles to button internally) | | position | enum("top", "bottom") | no | "top" | Positions the banner on the page | | zIndex | number | no | 1 | Determines z-index style for the component |