boros/README.md

TDCX Design System

# Boros - Design System for TDCX

[![pipeline status](http://gitlab.teledirectgroup.com/ali.elkhateeb/boros/badges/master/pipeline.svg)](http://gitlab.teledirectgroup.com/ali.elkhateeb/boros/commits/master)
[![coverage report](http://gitlab.teledirectgroup.com/ali.elkhateeb/boros/badges/master/coverage.svg)](http://gitlab.teledirectgroup.com/ali.elkhateeb/boros/commits/master)

Boros is the design system for TDCX built on [Material-UI](https://www.material-ui.com).

## Install

`npm install boros --save`

## Usage

#### Basic:
##### Apply Boros default theme (in the top level of your react tree)
```js
import {BorosThemeProvider, Button} from 'boros';

const App = () => {
    return <BorosThemeProvider>
        <Button variant="contained" color="primary">Button</Button>
    </BorosThemeProvider>;
};
```

#### Advanced:
##### Apply Boros theme but override some of the attributes
```js
import {createMuiTheme} from "@material-ui/core";
import {BorosThemeProvider, Button} from 'boros'; 

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#FFFFFF',        
        }    
    }
});

const App = () => {
    return <BorosThemeProvider theme={theme}>
        <Button variant="contained" color="primary">Button</Button>
    </BorosThemeProvider>;
};
```
You can find the list of attributes [here](https://material-ui.com/customization/default-theme/?expand-path=$.palette#explore).

## API

The Components API is the same as [Material-UI](https://www.material-ui.com).

## Contributing
The following commands should get you started:

```sh
npm install
npm start
```
open http://localhost:3001/ in browser

## Testing
To run the tests locally just run `jest` in the root folder
```sh
npm run test
```
You'll see the coverage data in your console, please maintain coverage above `90%` at least, preferably `100%`.

## License
The files included in this repository are licensed under the ISC license.