All files / lib/Loading index.js

100% Statements 6/6
50% Branches 1/2
100% Functions 1/1
100% Lines 6/6
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                  89x     3x   3x                 89x         89x       89x                                                                
import React from 'react';
import PropTypes from 'prop-types';
 
/**
 * @category communication
 * @component loading-spinner
 * @variations collab-ui-react
 */
 
const Loading = props => {
  const {
    small,
  } = props;
 
  return (
    <div className={`cui-loading ${small ? 'cui-loading--small' : ''}`}>
      <span className='cui-loading__icon'/>
      <span className='cui-loading__icon'/>
      <span className='cui-loading__icon'/>
    </div>
  );
};
 
Loading.propTypes = {
  /** @prop Prop to make the Loading animation small | false */
  small: PropTypes.bool,
};
 
Loading.defaultProps = {
  small: false,
};
 
Loading.displayName = 'Loading';
 
export default Loading;
 
/**
* @name Default Loading
* @description Loadings are useful.
*
* @category communication
* @component loader-spinner
* @section default
*
* @js
import { Loading } from '@collab-ui/react';
 
export default function LoaderSpinnerDefault() {
  return (
    <div className="row">
      <div className="docs-example docs-example--spacing" style={{fontSize: '1rem', display: 'flex'}}>
        <Loading />
      </div>
      <div className="docs-example docs-example--spacing" style={{fontSize: '2rem', display: 'flex'}}>
        <Loading />
      </div>
      <div className="docs-example docs-example--spacing" style={{fontSize: '3rem', display: 'flex'}}>
        <Loading />
      </div>
    </div>
  );
}
 
**/