Core Concepts
1. Theming & Design2. Design Tokens3. Media Queries4. Animation5. CSS in JS6. ConfigurationComponents
Content
CardPackages
Toggle theme
React Info Banner🔗
@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.
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;
InfoBannerWithCTA🔗
Renders an InfoBanner with a message and CTA.
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.
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.