react-npm-result-status-label

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 uppercase
• fail - Display as is, in uppercase
• alert - Display as is, in uppercase
• flag - Display as is, in uppercase
• inc - 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

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