All files / AvatarTeam AvatarTeam.js

100% Statements 7/7
100% Branches 12/12
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 78 79 80 81 82 83 84 85 86                                                                          24x 24x 24x 24x 24x                                                                   1x 1x                  
import React from 'react';
import { defaultProps } from './props/defaultProps';
import { propTypes } from './props/propTypes';
import Avatar from '../Avatar/Avatar';
import style from './AvatarTeam.module.css';
/* once avatar support firstname lastname and pattern
pass lastName as team name and pattern ["FIRST_NAME","LAST_NAME"] as props
 
Not going to export to external then can kept inside supportapp
*/
 
/*
eslint css-modules/no-unused-class: [2, { markAsUsed: ["primary", "secondary",
"small", "xsmall", "medium", "xmedium", "large", "xlarge"] }]
*/
 
export default class AvatarTeam extends React.Component {
  render() {
    let {
      src,
      name,
      size,
      palette,
      textPalette,
      onClick,
      title,
      isFilled,
      dataId,
      needTitle,
      customClass,
      borderOnActive,
      borderOnHover,
      dataSelectorId,
      customProps,
      needInnerBorder,
      needBorder,
      needDefaultBorder
    } = this.props;
    let { AvatarTeamProps = {}, AvatarProps = {} } = customProps;
    let { customAvatar = '', customAvatarTeam = '' } = customClass;
    let border = borderOnHover || onClick;
    return (
      <span
        className={`${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `}
        data-id={dataId}
        data-test-id={dataId}
        data-selector-id={dataSelectorId}
        {...AvatarTeamProps}
      >
        <Avatar
          name={name}
          onClick={onClick}
          palette={palette}
          textPalette={textPalette}
          size={size}
          src={src}
          title={title}
          needTitle={needTitle}
          customClass={customAvatar}
          borderOnActive={borderOnActive}
          borderOnHover={border}
          needInnerBorder={needInnerBorder}
          needBorder={needBorder}
          needDefaultBorder={needDefaultBorder}
          {...AvatarProps}
        />
        <span
          className={`${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
          ${style[`${size}team`]} ${customAvatarTeam}`}
        />
      </span>
    );
  }
}
 
AvatarTeam.defaultProps = defaultProps;
AvatarTeam.propTypes = propTypes;
 
// if (__DOCS__) {
//   AvatarTeam.docs = {
//     componentGroup: 'Avatar Group',
//     folderName: 'Style Guide',
//     external: true
//   };
// }