@zohodesk/components/es/AvatarTeam/AvatarTeam.js

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

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 /*#__PURE__*/React.createElement("span", {
      className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
      "data-id": dataId,
      "data-test-id": dataId,
      "data-selector-id": dataSelectorId,
      ...AvatarTeamProps
    }, /*#__PURE__*/React.createElement(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
    }), /*#__PURE__*/React.createElement("span", {
      className: `${style.team} ${isFilled ? `${style[`${palette}Filled`]}` : style.nofill} 
          ${style[`${size}team`]} ${customAvatarTeam}`
    }));
  }

}
AvatarTeam.defaultProps = defaultProps;
AvatarTeam.propTypes = propTypes; // if (__DOCS__) {
//   AvatarTeam.docs = {
//     componentGroup: 'Avatar Group',
//     folderName: 'Style Guide',
//     external: true
//   };
// }