@volvo-cars/react-info-banner

React Info Banner

Questions? Ask in Slack #vcc-ui

@volvo-cars/react-info-banner

The package exposes two primary components; <InfoBanner/> and <InfoBannerWithCTA/>, which enable you to quickly add design-compliant Information or Promotional banners.

Installation

💡 This package includes Typescript definitions

InfoBanner

Renders an InfoBanner wrapper around the passed children.

<View>
  <InfoBanner>Info Message</InfoBanner>
</View>

The ref is forwarded to the root element.

Name	Description	Type	Default Value
children	JSX element to be wrapped	ReactNode	undefined
offsetY	top offset. Use to account for any existing fixed/sticky elements	number	0
sticky	Whether element should be sticky or static	boolean	false
zIndex	Use to override zIndex if conflicts with existing elements occur	number	10
onDismiss	Optional. If provided, renders a close icon wrapped in a Click handler	func	undefined

InfoLink

Additionally, InfoLink is also exported so that previous generation InfoBanner can be maintained;

<View>
  <InfoBanner>
    Info message <InfoLink href="#">Info link</InfoLink>
  </InfoBanner>
</View>

InfoBannerWithCTA

Renders an InfoBanner with a message and CTA.

<View>
  <InfoBannerWithCTA href="#" linkText="Link Text">
    Info Message
  </InfoBannerWithCTA>
</View>

The ref is forwarded to the root element.

Name	Description	Type	Default Value
href	Optional. If provided, wraps the children in a a element OR	string	undefined
onClick	Optional. If provided, wraps the children in a button element	func	undefined
children	JSX element to be wrapped	ReactNode	undefined
offsetY	top offset. Use to account for any existing fixed/sticky elements	number	0
sticky	Whether element should be sticky or static	boolean	false
zIndex	Use to override zIndex if conflicts with existing elements occur	number	10
onDismiss	Optional. If provided, renders a close icon wrapped in a Click handler	func	undefined

Anchor or button default attributes are also available.

useDismiss

Controls the dismissal and visibility state of an InfoBanner.

By default stores the dismissal state in React state. If given the persistToCookie option, it will persist the dismissal state across page loads in a session cookie. You may pass a function returning a boolean, for example persistToCookie={checkFunctionalCookieConsent}.

If a key is given, the dismissal will be valid globally on the entire domain under that key. This is useful if you have multiple pages showing the same InfoBanner or multiple dismissable InfoBanners on the same page. Use a globally unique key, prefixed with your application name. If no key is given the dismissal will be valid for any banner on the same exact path.

const DismissableInfoBanner = ({ children }) => {
  const { dismiss, visible } = useDismiss();
  return visible ? (
    <InfoBanner onDismiss={dismiss}>{children}</InfoBanner>
  ) : (
    'Dismissed'
  );
};

render(<DismissableInfoBanner>Info message</DismissableInfoBanner>);

Name	Description	Type	Default Value
persistToCookie	Enable persisting dismissal state in cookie.	boolean or () => boolean	false
key	Unique key for dismissal state in cookie.	string	undefined

Examples

Further example implementations, including Static, Sticky and Sticky with offset can be found in the Storybook.