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

    react-npm-result-status-labelpublic

    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
    

    install

    npm i react-npm-result-status-label

    Downloadsweekly downloads

    12

    version

    1.5.0

    license

    ISC

    repository

    githubgithub

    last publish

    collaborators

    • avatar