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.