@volvo-cars/care-by-volvo-components

Care by Volvo Components

These are components that are being used by multiple projects for describing Care by Volvo.

The philosophy of the components is that they should be ready out of the box, you only need to provide the data.

List of components

• CardList
• ContactInfo
• FeatureList
• IconCardList
• InfoBlock

Install

Install the package:

npm install @volvo-cars/care-by-volvo-components

Usage

The data and content are not provided in this package. You will need to fetch content from the VCC Content Delivery API.

Analytics

For analytics to work you will need to make sure a product_id is defined in the window object in your app, e.g.:

if (!window.hasOwnProperty('product_id')) window.product_id = 'VC-WPI';

CardList

This component is describing what distincts Care by Volvo from it's competitors. It essentially contains copy.

import { CardList } from "@volvo-cars/care-by-volvo-components"

const myApp() (
  ...
  <CardList data={dataFromContentDeliveryAPI} />
  ...
)

ContactInfo

This is a component displays a few ways for visitors to get in touch with Volvo (chat, phone and email).

import { ContactInfo } from "@volvo-cars/care-by-volvo-components"

const myApp() (
  ...
  <ContactInfo data={dataFromContentDeliveryAPI} page="home" />
  ...
)

FeatureList

This component is an accordion on the landing page, that displays what is included in Care by Volvo.

import { FeatureList } from "@volvo-cars/care-by-volvo-components"

const myApp() (
  ...
  <FeatureList data={dataFromContentDeliveryAPI} />
  ...
)

IconCardList

This is an component that describes how the subscription works. It contains of a title, a icon and a body text. It turns into a Carousel on mobile devices.

import { IconCardList } from "@volvo-cars/care-by-volvo-components"

const myApp() (
  ...
  <IconCardList 
    data={dataFromContentDeliveryAPI}
    hideCta={false}
    scrollToSelector={'#choose-your-volvo'} 
  />
  ...
)

Note

The IconCardList has pure-react-carousel as a dependency and importing the accompanying CSS file is therefore required.

import 'pure-react-carousel/dist/react-carousel.es.css';

InfoBlock

This is an component that shortly describes what Care by Volvo is. It is essentially just a title and a body text.

import { InfoBlock } from "@volvo-cars/care-by-volvo-components"

const myApp() (
  ...
  <InfoBlock data={dataFromContentDeliveryAPI} />
  ...
)