text: import React from 'react';
  import PropTypes from 'prop-types';
  import { isNumber, round } from 'lodash';
  
  /**
   * @category communication
   * @component loader-spinner
   * @variations collab-ui-react
   */
  
  const Spinner = props => {
    const {
      className,
      color,
      showCheck,
      percentage,
      showPercentage,
      size,
      ...otherHTMLProps
    } = props;
  
    if(isNumber(percentage)) {
      if (size !== 36 && showPercentage) {
        /* eslint-disable no-console */
        console.warn('[@collab-ui/react] Spinner: Percentage will not be shown for sizes smaller than 36');
        /* eslint-enable no-console */
      }
      return (
        <div className={
          `cui-spinner-progress` +
          ` cui-spinner-progress__percentage-${round(percentage)}` +
          `${(size && ` cui-spinner-progress--${size}`) || ''}` +
          `${(color && ` cui-spinner-progress--${color}`) || ''}` +
          `${(className && ` ${className}`) || ''}`
          }
          {...otherHTMLProps}
        >
          <div className="cui-spinner-progress__circle">
            <div className="cui-spinner-progress__mask cui-spinner-progress__full">
              <div className="cui-spinner-progress__fill"/>
            </div>
            <div className="cui-spinner-progress__mask cui-spinner-progress__half">
              <div className="cui-spinner-progress__fill"/>
              <div className="cui-spinner-progress__fill cui-spinner-progress__fix"/>
            </div>
            <div className={
              `cui-spinner-progress__inset-circle` +
              `${showCheck && percentage === 100 && ' cui-spinner-progress__inset-circle--check' || ''}`
              }
            >
              {
                size === 36 && showPercentage && !showCheck
                && <div className="cui-spinner-progress__percentage">{round(percentage)}</div>
              }
            </div>
          </div>
        </div>
      );
    } else {
      return (
        <i className={
          `cui-spinner` +
          `${(size && ` cui-spinner--${size}`) || ''}` +
          `${(color && ` cui-spinner--${color}`) || ''}` +
          `${(className && ` ${className}`) || ''}`
          }
          {...otherHTMLProps}
        />
      );
    }
  };
  
  Spinner.propTypes = {
    /** @prop Optional CSS class names | '' */
    className: PropTypes.string,
    /** @prop Set Spinner color | '' */
    color: PropTypes.string,
    /** @prop Show percentage value for progress on Spinner | null */
    percentage: PropTypes.number,
    /** @prop Show the check mark if percentage 100 | false */
    showCheck: PropTypes.bool,
    /** @prop Show the number value for progress on Spinner | false */
    showPercentage: PropTypes.bool,
    /** @prop Spinner size | 36 */
    size: PropTypes.oneOf([16, 20, 28, 36]),
  };
  
  Spinner.defaultProps = {
    className: '',
    color: 'black',
    percentage: null,
    showCheck: false,
    showPercentage: false,
    size: 36,
  };
  
  Spinner.displayName = 'Spinner';
  
  export default Spinner;
  
  /**
  * @component loader-spinner
  * @section default
  * @react
  import { Spinner } from '@collab-ui/react';
  
  export default function LoaderSpinnerDefault() {
    return (
      <Spinner />
    );
  }
  
  **/
  
  /**
  * @component loader-spinner
  * @section determinate
  * @react
  import { Spinner } from '@collab-ui/react';
  
  export default function LoaderSpinnerDeterminate() {
    return (
      <Spinner percentage={65}/>
    );
  }
  
  **/
  
  /**
  * @component loader-spinner
  * @section percentage
  * @react
  import { Spinner } from '@collab-ui/react';
  
  export default function LoaderSpinnerPercentage() {
    return (
      <Spinner
        percentage={65}
        showPercentage={true}
      />
    );
  }
  
  **/
  
  /**
  * @component loader-spinner
  * @section check
  * @react
  import { Spinner } from '@collab-ui/react';
  
  export default function LoaderSpinnerCheck() {
    return (
      <Spinner
        percentage={100}
        showCheck
      />
    );
  }
  
  **/