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:

1. pass - Display as is, in uppercase
2. fail - Display as is, in uppercase
3. alert - Display as is, in uppercase
4. flag - Display as is, in uppercase
5. inc - Display with a period appended in uppercase, EG: INC.
6. ok - Display with a non breaking space prepended and appended in uppercase, EG:  OK 
7. 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

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import ResultStatusLabel from './component/result_status_label'
 
class App extends Component {
    constructor(props){
        super(props);
 
    }
 
    render() {
        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.render(<App />,document.querySelector('.container'));
 

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