node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org »

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.

npm Version Build 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: &nbsp;OK&nbsp;
  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