All files / Button Button.js

100% Statements 7/7
90.9% Branches 10/11
100% Functions 1/1
100% Lines 7/7

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77                                                        28x   28x   28x         28x   28x                                                     1x   1x                
import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import cssJSLogic from './css/cssJSLogic';
import { mergeStyle } from '@zohodesk/utils';
import style from './css/Button.module.css';
/*
Button text and children props?
use children for both cases
toLowerCase check needed?
*/
/* eslint css-modules/no-unused-class: [2, { markAsUsed: ['small','medium','large','xlarge','button_medium','button_small','primary','primaryfilled','danger','dangerfilled','plainprimary', 'plainsecondary', 'secondary', 'secondaryfilled', 'successFilled','tertiaryFilled'] }] */
export default function Button(props) {
  let {
    text,
    disabled,
    onClick,
    status,
    children,
    dataId,
    needAppearance,
    getRef,
    title,
    dataSelectorId,
    customProps,
    customStyle,
    a11y,
    id
  } = props;
 
  const finalStyle = mergeStyle(style, customStyle);
 
  const { buttonClass, loaderParentClass, loaderChildClass } = cssJSLogic({
    props,
    style: finalStyle
  });
 
  let statusLower = status.toLowerCase();
 
  return (
    <button
      className={buttonClass}
      data-id={disabled ? `${dataId}_disabled` : dataId}
      data-test-id={disabled ? `${dataId}_disabled` : dataId}
      disabled={disabled || statusLower === 'loading'}
      onClick={onClick}
      data-title={title}
      type='button'
      ref={getRef}
      data-selector-id={dataSelectorId}
      {...customProps}
      {...a11y}
      id={id}
    >
      {children ? children : text}
      {statusLower !== 'none' && needAppearance && (
        <div className={finalStyle.overlay}>
          <div className={loaderParentClass}>
            <div className={loaderChildClass} />
          </div>
        </div>
      )}
    </button>
  );
}
 
Button.defaultProps = defaultProps;
 
Button.propTypes = propTypes;
 
// if (__DOCS__) {
//   Button.docs = {
//     componentGroup: 'Form Elements',
//     folderName: 'Style Guide'
//   };
// }