Pollicino UI

Usage

Install

npm i pollicino-ui

Use

This UI components are meant to be used independently.

The recommended way of adding them to your project is to create a dedicated file, re-exporting all components that you need.

export { default as Btn } from 'pollicino-ui/lib/Btn';
export { default as Dropdown } from 'pollicino-ui/lib/Dropdown';
//...

Moreover, you will also need to include relevant scss styles. So, in your main scss file, add:

@import '~pollicino-ui/lib/Btn/style';
@import '~pollicino-ui/lib/Dropdown/style';
//...

Providing icons

Some components (Icon, FormFieldPassword, ...) require SVG icons to work. In the examples, I'm using some Material Design icons, but you are free to use whatever set you like. Just configure Webpack to alias assets/icons and add an svg loader like svg-sprite-loader to ensure require works:

// webpack.config.js
module.exports = {
  //...
  resolve: {
    alias: {
      // add an assets alias, and add icons your in assets/icons/*.svg
      assets: path.join(__dirname, 'app', 'assets'),
    },
  },
  //...
  module: {
    rules: [
      { // SVG Icons sprite loader
        test: /\.svg$/,
        include: [path.join(__dirname, 'app', 'assets', 'icons')],
        use: [{ loader: 'svg-sprite-loader', options: { symbolId: 'i-[name]' } }],
      },
      //...

Overriding styles

Colors and some other SCSS variables can be overridden. Just define them before importing the component’s styles. For a full list look at ./scss/_variables.scss

$Pollicino-color-primary: pink;
@import '~pollicino-ui/lib/Btn/style';
// now Btn--primary will be pink 

Contributing

Development

To start react storybook server (watching) run:

npm run watch

The browser entry point is 127.0.0.1:9001.

Testing

Unit tests run with Mocha + Expect for both client and server:

npm run test:unit -s
# or
npm run test:unit:watch # for TDD

Unit + Integration tests run with Webdriver + Selenium:

npm run test # this will also bundle the assets first

Code coverage reports are also available thanks to Nyc:

npm run coverage