Jovio-components-react NPM

Jovio Components React

The Jovio Component library provides base styles and a collection of React components that allows anyone to build pages with consistent mark up, styles and behavior following Jovio's Design System.

We use SASS and BEM to write and structure our CSS.

List of available components

You can see a full list of components and other style definitions here. Usage information is available when you click the "Show Info" button in the top right corner of the selected component.

Requirements

These components require the use of webpack to make sure your project allows loading SCSS, fonts, images, etc.
Address Input component uses Google Maps Places API . Refer to the components documentation for additional setup.

Getting Started

Install the jovio-components-react package:

npm install jovio-components-react

To make sure assets are properly loaded add this alias to your webpack configuration:

alias: {
      "./jovio-components-assets": path.resolve("node_modules/jovio-components-react/src/scss/jovio-components-assets"),
    }

At the top of your main SCSS file import the jovio-components-react styles:

@import '~jovio-components-react/src/scss/styles.scss';

If you are using the Icon component you will need some extra configuration, this will load the icon images and create a sprite that will be injected inside the body of your page. Install the svg-sprite-loader package and add the following to your webpack config:

const SpriteLoaderPlugin = require('svg-sprite-loader/plugin');

//inside module.rules add the sprite plugin
plugins: [
  new SpriteLoaderPlugin()
]

// Add the following loader rule
{
  test: /\.svg$/,
  loader: 'svg-sprite-loader',
  include: '/jovio-components-assets/icons'
}

And in the main container of your app add:

const files = require.context('!svg-sprite-loader!jovio-components-assets/icons', true, /\.svg$/);
files.keys().forEach(files);

You can take a look at the code in the jovio-standalone project

Which browsers are supported?

jovio-components-react is supported in the following browsers:

IE11
IE Edge latest (17)
Firefox latest (60)
Chrome latest (67)
Safari latest (11.1)

This means both JS and CSS will work and look as expected in supported browsers. JS provided supports ES5 which works in older browsers, but styles were only tested in latest version.