@storybook/design-system/dist/components/AvatarList.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.AvatarList = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _react = _interopRequireDefault(require("react"));

var _theming = require("@storybook/theming");

var _Avatar = require("./Avatar");

var _WithTooltip = _interopRequireDefault(require("./tooltip/WithTooltip"));

var _TooltipNote = require("./tooltip/TooltipNote");

var _styles = require("./shared/styles");

var _excluded = ["isLoading", "users", "userCount", "size"];

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var UserAvatar = ( /*#__PURE__*/0, _theming.styled)(_Avatar.Avatar, process.env.NODE_ENV === "production" ? {
  target: "e1k855q73"
} : {
  target: "e1k855q73",
  label: "UserAvatar"
})("box-shadow:", _styles.color.lightest, " 0 0 0 2px;display:block;");
var UserEllipses = (0, _theming.styled)("li", process.env.NODE_ENV === "production" ? {
  target: "e1k855q72"
} : {
  target: "e1k855q72",
  label: "UserEllipses"
})("display:inline-flex;font-size:", _styles.typography.size.s1, "px;color:", _styles.color.mediumdark, ";margin-left:6px;white-space:nowrap;");
var User = (0, _theming.styled)("li", process.env.NODE_ENV === "production" ? {
  target: "e1k855q71"
} : {
  target: "e1k855q71",
  label: "User"
})(process.env.NODE_ENV === "production" ? {
  name: "1lv1yo7",
  styles: "display:inline-flex"
} : {
  name: "1lv1yo7",
  styles: "display:inline-flex",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});
var Users = (0, _theming.styled)("ul", process.env.NODE_ENV === "production" ? {
  target: "e1k855q70"
} : {
  target: "e1k855q70",
  label: "Users"
})("display:inline-flex;flex-wrap:nowrap;flex-direction:row;align-items:center;justify-content:flex-end;vertical-align:top;margin:0;padding:0;list-style:none;", User, "{position:relative;&:not(:first-child){margin-left:-6px;}&:nth-child(1){z-index:3;}&:nth-child(2){z-index:2;}&:nth-child(3){z-index:1;}}");

// Either pass the full list of users, or a userCount if known
var AvatarList = function AvatarList(_ref) {
  var _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      _ref$users = _ref.users,
      users = _ref$users === void 0 ? [{
    id: 'loading',
    avatarUrl: null,
    name: 'loading'
  }, {
    id: 'loading2',
    avatarUrl: null,
    name: 'loading'
  }, {
    id: 'loading3',
    avatarUrl: null,
    name: 'loading'
  }] : _ref$users,
      _ref$userCount = _ref.userCount,
      userCount = _ref$userCount === void 0 ? null : _ref$userCount,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  var count = userCount || users.length;
  return /*#__PURE__*/_react["default"].createElement(Users, (0, _extends2["default"])({
    "aria-label": "users"
  }, props), users.slice(0, 3).map(function (_ref2) {
    var id = _ref2.id,
        name = _ref2.name,
        avatarUrl = _ref2.avatarUrl;
    return /*#__PURE__*/_react["default"].createElement(User, {
      key: id
    }, /*#__PURE__*/_react["default"].createElement(_WithTooltip["default"], {
      hasChrome: false,
      placement: "bottom",
      trigger: "hover",
      tooltip: /*#__PURE__*/_react["default"].createElement(_TooltipNote.TooltipNote, {
        note: name
      })
    }, /*#__PURE__*/_react["default"].createElement(UserAvatar, {
      size: size,
      username: name,
      src: avatarUrl,
      isLoading: isLoading
    })));
  }), count > 3 && /*#__PURE__*/_react["default"].createElement(UserEllipses, {
    "aria-label": "".concat(count - 3, " more user(s)")
  }, " + ", count - 3, " "));
};

exports.AvatarList = AvatarList;