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

Storybook design system

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Avatar = exports.AvatarType = exports.sizes = 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 _styles = require("./shared/styles");

var _animation = require("./shared/animation");

var _Icon = require("./Icon");

var _excluded = ["isLoading", "username", "src", "size", "type"];
var sizes = {
  large: 40,
  medium: 28,
  small: 20,
  tiny: 16
};
exports.sizes = sizes;
var AvatarType;
exports.AvatarType = AvatarType;

(function (AvatarType) {
  AvatarType["USER"] = "user";
  AvatarType["ORGANIZATION"] = "organization";
})(AvatarType || (exports.AvatarType = AvatarType = {}));

var Image = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e14kqdha2"
} : {
  target: "e14kqdha2",
  label: "Image"
})("background:transparent;border-radius:", function (props) {
  return props.type === AvatarType.USER ? '50%' : '5px';
}, ";display:inline-block;vertical-align:top;overflow:hidden;text-transform:uppercase;height:", sizes.medium, "px;width:", sizes.medium, "px;line-height:", sizes.medium, "px;", function (props) {
  return props.isLoading && /*#__PURE__*/(0, _theming.css)("background:", _styles.color.light, ";filter:grayscale(1);" + (process.env.NODE_ENV === "production" ? "" : ";label:Image;"));
}, " ", function (props) {
  return props.size === 'tiny' && /*#__PURE__*/(0, _theming.css)("height:", sizes.tiny, "px;width:", sizes.tiny, "px;line-height:", sizes.tiny, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:Image;"));
}, " ", function (props) {
  return props.size === 'small' && /*#__PURE__*/(0, _theming.css)("height:", sizes.small, "px;width:", sizes.small, "px;line-height:", sizes.small, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:Image;"));
}, " ", function (props) {
  return props.size === 'large' && /*#__PURE__*/(0, _theming.css)("height:", sizes.large, "px;width:", sizes.large, "px;line-height:", sizes.large, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:Image;"));
}, " ", function (props) {
  return !props.src && /*#__PURE__*/(0, _theming.css)("background:", !props.isLoading && '#37D5D3', ";" + (process.env.NODE_ENV === "production" ? "" : ";label:Image;"));
}, " img{width:100%;height:auto;display:block;}");
var LoadingIcon = ( /*#__PURE__*/0, _theming.styled)(_Icon.Icon, process.env.NODE_ENV === "production" ? {
  target: "e14kqdha1"
} : {
  target: "e14kqdha1",
  label: "LoadingIcon"
})("position:relative;margin:0 auto;display:block;bottom:", function (props) {
  return props.type === AvatarType.USER ? -2 : -4;
}, "px;height:", function (props) {
  return props.type === AvatarType.USER ? 100 : 70;
}, "%;width:", function (props) {
  return props.type === AvatarType.USER ? 100 : 70;
}, "%;vertical-align:top;path{fill:", _styles.color.medium, ";animation:", _animation.glow, " 1.5s ease-in-out infinite;}"); // prettier-ignore

var Initial = (0, _theming.styled)("div", process.env.NODE_ENV === "production" ? {
  target: "e14kqdha0"
} : {
  target: "e14kqdha0",
  label: "Initial"
})("color:", _styles.color.lightest, ";text-align:center;font-size:", _styles.typography.size.s2, "px;line-height:", sizes.medium, "px;", function (props) {
  return props.size === "tiny" && /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s1 - 2, "px;line-height:", sizes.tiny, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:Initial;"));
}, " ", function (props) {
  return props.size === "small" && /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s1, "px;line-height:", sizes.small, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:Initial;"));
}, " ", function (props) {
  return props.size === "large" && /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s3, "px;line-height:", sizes.large, "px;" + (process.env.NODE_ENV === "production" ? "" : ";label:Initial;"));
}, ";");
/**
 * The `Avatar` component is where all your avatars come to play.
 */

var Avatar = function Avatar(_ref) {
  var _ref$isLoading = _ref.isLoading,
      isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
      _ref$username = _ref.username,
      username = _ref$username === void 0 ? 'loading' : _ref$username,
      _ref$src = _ref.src,
      src = _ref$src === void 0 ? null : _ref$src,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? 'medium' : _ref$size,
      _ref$type = _ref.type,
      type = _ref$type === void 0 ? AvatarType.USER : _ref$type,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

  var avatarFigure = /*#__PURE__*/_react["default"].createElement(LoadingIcon, {
    icon: type === AvatarType.USER ? 'useralt' : 'repository',
    type: type
  });

  var a11yProps = {};

  if (isLoading) {
    a11yProps['aria-busy'] = true;
    a11yProps['aria-label'] = 'Loading avatar ...';
  } else if (src) {
    avatarFigure = /*#__PURE__*/_react["default"].createElement("img", {
      src: src,
      alt: username
    });
  } else {
    a11yProps['aria-label'] = username;
    avatarFigure = /*#__PURE__*/_react["default"].createElement(Initial, {
      size: size,
      "aria-hidden": "true"
    }, username.substring(0, 1));
  }

  return /*#__PURE__*/_react["default"].createElement(Image, (0, _extends2["default"])({
    size: size,
    isLoading: isLoading,
    src: src,
    type: type
  }, a11yProps, props), avatarFigure);
};

exports.Avatar = Avatar;