The Contacto Material Style Guide

This is a comprehensive collection of all UI components that are used in the contacto console application. This is developed based on the style guide provided by the design team. These components can be further extended into other apps by just modifying the CSS variable list. This collection almost has all required components to build a standard application. On each component you will find different stories, which are different states of the UI component. Buliding them here makes it easy to develop hard-to-reach states. These stories are different states of a component which can be independantly developed and tested and finally consumed without flaws.

How to use?

Install the component package npm install @contacto-io/style-guide
Add @import "~@contacto-io/material-style-guide/build/style-guide.css"; to your main CSS file (Eg. App.scss)
Import the component that is required - import { Button } from '@contacto-io/style-guide'
Visit the particular component page on the storybook app.
Navigate to your required story.
Copy the code and modify the props as required.
Since all the components are wrapper components upon Material UI, please visit material docs for additional information.

Technical Requirements

Dependencies

For the compoenents to work properly, make sure the consumer project has these dependencies installed. The following are the peer dependencies for this component library.

  "peerDependencies": {
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "prop-types": "^15.7.2",
    "@material-ui/core": "^4.9.3",
  }

CSS variables

This style guide completely depends on CSS variables that are commonly defined by the design team. Make sure that the variables are included on the top for the style guide to work properly.

CSS Variable list

Icons

The icons used are taken from the google icon package. We use Material Rounded Icons throughout our App. For icon names, please visit Google Material Icon Website

Dev Setup

Make sure you have the .npmrc file with the proper access credentials. You need to have a token that has read/publish package access
```
//npm.pkg.github.com/:_authToken=YOUR_GIT_TOKEN_WITH_READ_PUBLISH_PACKAGE_ACCESS
```
To run the setup locally use npm run storybook

Publishing

Once your changes are done
Bump the version number in package.json (important)
Run npm run build
In order to publish use npm publish command. This will only work if you have write access in your git token

samuellawerentz/material-style-guide