Important: This component is only intended to be used as a notice that we are not in the production environment. If you need a banner for some other purpose use a more customizable banner component (notice-banner coming soon).
There are two customizable text elements in the banner — some text followed by a link. Both are customizable via the config. To set the CSS, just override the stylesheet. The banners can be configured to be dismissable (true by default). The banner at the top of this page is not dismissable.
By default, when the nonprod-banner close button [X] is clicked it will be hidden. It is configured to store it's state in localStorage. If the banner is configured to use sessionStorage, it will appear at least once per session. The banner can be configured to not be dismissable.
The default position of the nonprod-banner is fixed at the bottom of the window. In the HTML, it is actually positioned at the very top above the header. If you set the bannerPosition config property to relative instead of bottom, the banner will be set to a simple relative position and it will appear in it's natural DOM order above the header. You can always use CSS to override the position, but the order of the components in the DOM will remain unchanged. If you set the banner relative, it will be displayed right away so there is no CLS.
