react-npm-result-status-label
A React component to display an analysis or observation result in a coloured label according to result status.
Overview
A minimal usage will just display the result using default background colours.
let statusResult = "PASS";
<ResultStatusLabel>{statusResult}</ResultStatusLabel>;
Other options can be passed in as params
like so:
let params = {
'bgColorMap' : {
'pass' : '#3cb521',
'ok' : '#3cb521',
'fail' : '#cd0200',
'alert' : '#d47500',
'inc' : '#d47500',
'flag' : '#474949',
'label' : '#ffffff'
},
'textColorMap' : {
'pass' : '#ffffff',
'ok' : '#ffffff',
'fail' : '#ffffff',
'alert' : '#ffffff',
'inc' : '#ffffff',
'flag' : '#ffffff',
'label' : '#000000'
},
cssClass: ['class1', 'class2']
};
<ResultStatusLabel params=params>PASS</ResultStatusLabel>;
Params in more detail:
colourMap
- Optional parameter to specify colour of backgrounds for a given status type, and the text the status is displayed in.
If the bgColorMap
is not specified, the following default colours should be used:
Value | bgColorMap | textColorMap |
---|---|---|
pass |
#3cb521 |
#ffffff |
ok |
#3cb521 |
#ffffff |
fail |
#cd0200 |
#ffffff |
alert |
#d47500 |
#ffffff |
inc |
#d47500 |
#ffffff |
flag |
#474949 |
#ffffff |
label |
#ffffff |
#000000 |
This colourMap
can contains one or more flags. If a given status flag is provided, then it should override that status colour only. All others will remain as the default colour.
cssClass
- Optional parameter to add one or more css classes to the surrounding div.
Business Rules:
The statusResult
(value given in this.props.children
) is case insensitive, and can only be one of the following values:
pass
- Display as is, in uppercasefail
- Display as is, in uppercasealert
- Display as is, in uppercaseflag
- Display as is, in uppercaseinc
- Display with a period appended in uppercase, EG:INC.
ok
- Display with a non breaking space prepended and appended in uppercase, EG: OK
- Any other value, Display four question marks in uppercase, EG:
????
Features
- Display obeservation result in color label with color background.
- Runs in the browser and Node.js.
- Built on standards.
Example
;; { superprops; } { let params = 'bgColorMap' : 'pass' : '#fff521' 'ok' : '#3cb521' 'fail' : '#cd0200' 'alert' : '#d47500' 'inc' : '#3cb521' 'flag' : '#474949' 'label' : '#ffffff' 'textColorMap' : 'pass' : '#ffffff' 'ok' : '#ffffff' 'fail' : '#ffffff' 'alert' : '#ffffff' 'inc' : '#cd0200' 'flag' : '#ffffff' 'label' : '#ffffff' 'cssClass': 'bold' 'center' ; return <div> <h2>Lable Status</h2> <ResultStatusLabel>ok</ResultStatusLabel> <br /> <ResultStatusLabel>fail</ResultStatusLabel> <br /> <ResultStatusLabel params=params>inc</ResultStatusLabel> </div> ; } ReactDOM;
This example would render: "OK" label with default background "#3cb521" and color "#ffffff". "FAIL" label with default background "#cd0200" and color "#ffffff". "INC." label with background "#3cb521" and color "#cd0200".
Technology Stack:
- react
- mocha
Usage:
Clone the repo as a new project:
git clone https://github.com/lobdev/react-npm-result-status-label <result-status-label>
Start Server:
First you have to replace the lib/component/result_status_label.js to server.js in package.json
cd result-status-label
npm i
npm start
Run App:
npm start command automatically initiate browser at 3000 port
http:://localhost:3000
Run tests:
cd result-status-label
npm i
npm test
Developer Notes:
Make sure you configure your editor/IDE to use:
.editorconfig
.eslintrc