boros

TDCX Design System

Usage no npm install needed!

<script type="module">
  import boros from 'https://cdn.skypack.dev/boros';
</script>

README

Boros - Design System for TDCX

pipeline status coverage report

Boros is the design system for TDCX built on Material-UI.

Install

npm install boros --save

Usage

Basic:

Apply Boros default theme (in the top level of your react tree)
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
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.

API

The Components API is the same as Material-UI.

Contributing

The following commands should get you started:

npm install
npm start

open http://localhost:3001/ in browser

Testing

To run the tests locally just run jest in the root folder

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.