orcs-design-system/es/components/Avatar/index.js

TeamForm's Design System, aka: ORCS

import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
const _excluded = ["titleLevel"],
  _excluded2 = ["sizing", "image", "croppedAreaPercent", "gradient", "fallbackGradient", "imageAlt", "initials", "title", "titleLevel", "subtitle", "subtitleContent", "type", "theme", "shape", "localTime", "uppercase", "customSize", "headerAvatar", "onClick", "loading"];
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React, { useMemo } from "react";
import styled, { ThemeProvider, keyframes } from "styled-components";
import { space, layout, variant, position, compose } from "styled-system";
import PropTypes from "prop-types";
import Header, { Text } from "../Typography";
import Icon from "../Icon";
import Popover from "../Popover";
import StatusDot from "../StatusDot";
import { CroppedImageWrapper, HeaderAvatarCroppedImage } from "./CroppedImage";
import css from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const avatarStyles = compose(space, layout, position);
export const COLOR_CHANGE = /*#__PURE__*/keyframes(["0%{background-position:-468px 0;}100%{background-position:468px 0;}"]);

// Helper function to resolve customSize values
const resolveCustomSize = (customSize, props) => {
  if (!customSize) return null;

  // Check if customSize is a pixel value or a theme value
  if (customSize.includes("px") || customSize.includes("rem") || customSize.includes("em") || customSize.includes("%")) {
    return customSize;
  } else {
    // It's a theme value, resolve it using themeGet
    return themeGet("avatarScale.".concat(customSize))(props) || customSize;
  }
};
const AvatarWrapper = /*#__PURE__*/styled("div").withConfig({
  displayName: "AvatarWrapper",
  componentId: "sc-1wtet2j-0"
})(css({
  boxSizing: "border-box",
  display: "flex",
  alignItems: "center",
  position: "relative"
}), props => variant({
  prop: "sizing",
  variants: {
    small: {
      fontSize: themeGet("fontSizes.1")(props)
    },
    large: {
      fontSize: themeGet("fontSizes.2")(props)
    },
    default: {}
  }
}), variant({
  prop: "type",
  variants: {
    inverted: {}
  }
}), avatarStyles);
const TextContent = /*#__PURE__*/styled("div").withConfig({
  displayName: "TextContent",
  componentId: "sc-1wtet2j-1"
})(css({
  marginLeft: "s",
  lineHeight: "0.8",
  minWidth: 0,
  flex: "1 1 auto"
}), props => variant({
  prop: "sizing",
  variants: {
    small: {
      fontSize: themeGet("fontSizes.1")(props)
    },
    large: {
      marginLeft: "r",
      fontSize: themeGet("fontSizes.2")(props)
    }
  }
}), props => variant({
  prop: "type",
  variants: {
    inverted: {
      color: themeGet("colors.white")(props)
    }
  }
}));
const Image = /*#__PURE__*/styled("img").withConfig({
  displayName: "Image",
  componentId: "sc-1wtet2j-2"
})(props => css({
  width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
  height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
  flex: "0 0 auto",
  backgroundColor: themeGet("colors.white")(props),
  objectFit: "cover",
  objectPosition: "center",
  objectRepeat: "no-repeat",
  border: "solid 1px " + themeGet("colors.greyLighter")(props),
  display: "block",
  borderRadius: "50%"
}), props => variant({
  prop: "sizing",
  variants: {
    small: {
      width: themeGet("avatarScale.avatarSmall")(props),
      height: themeGet("avatarScale.avatarSmall")(props)
    },
    large: {
      width: themeGet("avatarScale.avatarLarge")(props),
      height: themeGet("avatarScale.avatarLarge")(props)
    }
  }
}), props => variant({
  prop: "shape",
  variants: {
    square: {
      borderRadius: themeGet("radii.2")(props)
    },
    hexagon: {
      borderRadius: "0",
      clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
    },
    tag: {
      borderRadius: "0",
      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
    }
  }
}));
const Shape = /*#__PURE__*/styled("div").withConfig({
  displayName: "Shape",
  componentId: "sc-1wtet2j-3"
})(props => css({
  width: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
  height: resolveCustomSize(props.customSize, props) || themeGet("avatarScale.avatarDefault")(props),
  fontWeight: themeGet("fontWeights.2")(props),
  flex: "0 0 auto",
  background: props.gradient ? props.gradient : "linear-gradient(135deg, ".concat(themeGet("colors.primaryLightest")(props), ", ").concat(themeGet("colors.primaryLight")(props), ")"),
  color: themeGet("colors.white")(props),
  border: "0",
  display: "flex",
  borderRadius: "50%",
  alignItems: "center",
  justifyContent: "center",
  textAlign: "center",
  textTransform: "".concat(props => props.uppercase ? "uppercase" : "none"),
  a: {
    color: themeGet("colors.greyDarkest")(props)
  },
  "&.inverted a": {
    color: themeGet("colors.white")(props)
  }
}), props => variant({
  prop: "sizing",
  variants: {
    small: {
      width: themeGet("avatarScale.avatarSmall")(props),
      height: themeGet("avatarScale.avatarSmall")(props)
    },
    large: {
      width: themeGet("avatarScale.avatarLarge")(props),
      height: themeGet("avatarScale.avatarLarge")(props)
    },
    default: {}
  }
}), props => variant({
  prop: "type",
  variants: {
    inverted: {
      backgroundColor: themeGet("colors.greyDarker")(props),
      color: themeGet("colors.white")(props)
    },
    default: {}
  }
}), props => variant({
  prop: "shape",
  variants: {
    square: {
      borderRadius: themeGet("radii.2")(props)
    },
    hexagon: {
      borderRadius: "0",
      clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
    },
    tag: {
      borderRadius: "0",
      paddingBottom: "4px",
      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
    }
  }
}));
const Title = /*#__PURE__*/styled(_ref => {
  let {
      titleLevel
    } = _ref,
    props = _objectWithoutProperties(_ref, _excluded);
  const Heading = Header[titleLevel];
  return /*#__PURE__*/React.cloneElement(/*#__PURE__*/_jsx(Heading, {}), props);
}).withConfig({
  displayName: "Title",
  componentId: "sc-1wtet2j-4"
})(props => css({
  fontSize: themeGet("fontSizes.2")(props),
  "> a": {
    fontSize: themeGet("fontSizes.2")(props),
    color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
  },
  "> div > a": {
    fontSize: themeGet("fontSizes.2")(props),
    color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
  },
  "> div > div > a": {
    fontSize: themeGet("fontSizes.2")(props),
    color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
  }
}), props => variant({
  prop: "sizing",
  variants: {
    small: {
      fontSize: themeGet("fontSizes.2")(props),
      "> a": {
        fontSize: themeGet("fontSizes.2")(props)
      },
      "> div > a": {
        fontSize: themeGet("fontSizes.2")(props)
      },
      "> div > div > a": {
        fontSize: themeGet("fontSizes.2")(props)
      }
    },
    large: {
      fontSize: themeGet("fontSizes.3")(props),
      "> a": {
        fontSize: themeGet("fontSizes.3")(props)
      },
      "> div > a": {
        fontSize: themeGet("fontSizes.3")(props)
      },
      "> div > div > a": {
        fontSize: themeGet("fontSizes.3")(props)
      }
    }
  }
}), props => variant({
  prop: "type",
  variants: {
    inverted: {
      color: themeGet("colors.white")(props)
    }
  }
}));
const Subtitle = /*#__PURE__*/styled(Text).withConfig({
  displayName: "Subtitle",
  componentId: "sc-1wtet2j-5"
})(props => css({
  color: themeGet("colors.greyDark")(props),
  fontSize: themeGet("fontSizes.1")(props)
}), props => variant({
  prop: "sizing",
  variants: {
    small: {
      fontSize: themeGet("fontSizes.0")(props),
      fontWeight: themeGet("fontWeights.1")(props)
    },
    large: {
      fontSize: themeGet("fontSizes.2")(props),
      fontWeight: themeGet("fontWeights.1")(props)
    }
  }
}), props => variant({
  prop: "type",
  variants: {
    inverted: {
      color: themeGet("colors.white")(props)
    },
    default: {}
  }
}));
const LocalTime = /*#__PURE__*/styled(Popover).withConfig({
  displayName: "LocalTime",
  componentId: "sc-1wtet2j-6"
})(["position:absolute;top:0;left:0;"]);

// HeaderAvatar: frame = white background + padding (the "border") + shadow; fixed outer size 150px (large) / 65px (small)
const HEADER_AVATAR_OUTER = {
  large: "150px",
  small: "65px"
};
const HEADER_AVATAR_PADDING = {
  large: 6,
  small: 4
};
const headerAvatarFrameStyles = _ref2 => {
  let {
    $shape,
    $sizing
  } = _ref2;
  const padding = $sizing === "large" ? HEADER_AVATAR_PADDING.large : HEADER_AVATAR_PADDING.small;
  return {
    boxSizing: "border-box",
    width: $sizing === "large" ? HEADER_AVATAR_OUTER.large : HEADER_AVATAR_OUTER.small,
    height: $sizing === "large" ? HEADER_AVATAR_OUTER.large : HEADER_AVATAR_OUTER.small,
    padding: "".concat(padding, "px"),
    background: "#fff",
    boxShadow: "0px 3px 6px rgba(0,0,0,0.15)",
    borderRadius: $shape === "circle" || !$shape ? "50%" : $shape === "square" ? "6px" : "0",
    display: "inline-flex",
    alignItems: "center",
    justifyContent: "center",
    transition: "width 200ms ease-in-out, height 200ms ease-in-out"
  };
};
const HeaderAvatarFrame = /*#__PURE__*/styled("div").withConfig({
  displayName: "HeaderAvatarFrame",
  componentId: "sc-1wtet2j-7"
})(headerAvatarFrameStyles, avatarStyles);
const HeaderAvatarInner = /*#__PURE__*/styled("div").withConfig({
  displayName: "HeaderAvatarInner",
  componentId: "sc-1wtet2j-8"
})(_ref3 => {
  let {
    $size,
    $shape
  } = _ref3;
  return {
    width: $size,
    height: $size,
    overflow: "hidden",
    borderRadius: $shape === "circle" || !$shape ? "50%" : "0",
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    transition: "width 200ms ease-in-out, height 200ms ease-in-out"
  };
});
const HeaderAvatarLoading = /*#__PURE__*/styled("div").withConfig({
  displayName: "HeaderAvatarLoading",
  componentId: "sc-1wtet2j-9"
})(["width:", ";height:", ";background:linear-gradient( to right,rgba(0,0,0,0.1) 5%,rgba(0,0,0,0.05) 65%,rgba(0,0,0,0.1) 70% );background-size:200px;animation:", " 20s linear infinite;"], _ref4 => {
  let {
    $size
  } = _ref4;
  return $size;
}, _ref5 => {
  let {
    $size
  } = _ref5;
  return $size;
}, COLOR_CHANGE);
const HeaderAvatarImage = /*#__PURE__*/styled("img").withConfig({
  displayName: "HeaderAvatarImage",
  componentId: "sc-1wtet2j-10"
})(_ref6 => {
  let {
    $size,
    $shape
  } = _ref6;
  return {
    width: $size,
    height: $size,
    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
    objectFit: "cover",
    objectPosition: "center",
    objectRepeat: "no-repeat",
    borderRadius: $shape === "circle" || !$shape ? "50%" : "0",
    display: "block"
  };
});
const HeaderAvatarShape = /*#__PURE__*/styled("div").withConfig({
  displayName: "HeaderAvatarShape",
  componentId: "sc-1wtet2j-11"
})(_ref7 => {
  let {
    $size,
    $shape,
    $gradient
  } = _ref7;
  const backgroundStyles = $gradient ? {
    backgroundImage: $gradient,
    backgroundSize: "cover",
    backgroundPosition: "center center"
  } : {
    background: "#e6e6e6"
  };
  return _objectSpread(_objectSpread(_objectSpread({
    width: $size,
    height: $size,
    transition: "width 200ms ease-in-out, height 200ms ease-in-out",
    display: "flex",
    alignItems: "center",
    justifyContent: "center"
  }, backgroundStyles), {}, {
    color: "#fff",
    fontWeight: 600,
    fontSize: "calc(".concat($size, " / 2.5)"),
    borderRadius: $shape === "circle" || !$shape ? "50%" : "0"
  }, $shape === "hexagon" && {
    clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
  }), $shape === "tag" && {
    clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
  });
});
const HeaderAvatarAction = /*#__PURE__*/styled("button").withConfig({
  displayName: "HeaderAvatarAction",
  componentId: "sc-1wtet2j-12"
})(_ref8 => {
  let {
    $shape,
    $sizing
  } = _ref8;
  return _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, headerAvatarFrameStyles({
    $shape,
    $sizing
  })), {}, {
    cursor: "pointer",
    border: "none",
    outline: "none",
    appearance: "none",
    position: "relative",
    zIndex: "5"
  }, $shape === "hexagon" && {
    clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
  }), $shape === "tag" && {
    clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
  }), {}, {
    "&:hover, &:focus": {
      "& > .icon-container": {
        opacity: "1"
      }
    }
  });
}, avatarStyles);
const IconContainer = /*#__PURE__*/styled("div").withConfig({
  displayName: "IconContainer",
  componentId: "sc-1wtet2j-13"
})(_ref9 => {
  let {
    $shape,
    $sizing,
    $size
  } = _ref9;
  const padding = $sizing === "large" ? 6 : 4;
  return _objectSpread(_objectSpread({
    opacity: "0",
    transition: "opacity 0.2s ease-in-out",
    position: "absolute",
    top: "".concat(padding, "px"),
    left: "".concat(padding, "px"),
    width: $size,
    height: $size,
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    background: "rgba(0, 0, 0, 0.5)",
    zIndex: "2",
    borderRadius: $shape === "circle" || !$shape ? "50%" : "0"
  }, $shape === "hexagon" && {
    clipPath: "polygon(50% 0, 95% 25%, 95% 75%, 50% 100%, 5% 75%, 5% 25%)"
  }), $shape === "tag" && {
    clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
  });
});
const Avatar = _ref0 => {
  var _theme$colors, _theme$colors2, _theme$colors3;
  let {
      sizing,
      image,
      croppedAreaPercent,
      gradient,
      fallbackGradient,
      imageAlt,
      initials,
      title,
      titleLevel = "H3",
      subtitle,
      subtitleContent,
      type,
      theme,
      shape = "circle",
      localTime,
      uppercase = true,
      customSize,
      headerAvatar = false,
      onClick,
      loading = false
    } = _ref0,
    props = _objectWithoutProperties(_ref0, _excluded2);
  const hasTitle = !!title;
  const hasSubtitle = !!subtitle;
  const hasSubtitleContent = !!subtitleContent;
  const alt = useMemo(() => {
    if (imageAlt) {
      return imageAlt;
    } else if (typeof title === "string") {
      return "Avatar for ".concat(title);
    }
  }, [imageAlt, title]);

  // Resolve a default icon color suitable on accent/gradient backgrounds
  // Prefer theme tokens if available to avoid hard-coded colors
  const defaultIconColor = (theme === null || theme === void 0 || (_theme$colors = theme.colors) === null || _theme$colors === void 0 ? void 0 : _theme$colors.iconOnAccent) || (theme === null || theme === void 0 || (_theme$colors2 = theme.colors) === null || _theme$colors2 === void 0 ? void 0 : _theme$colors2.iconDefault) || (theme === null || theme === void 0 || (_theme$colors3 = theme.colors) === null || _theme$colors3 === void 0 ? void 0 : _theme$colors3.white) || "white";

  // HeaderAvatar logic
  if (headerAvatar) {
    // Fixed outer size 150px (large) / 65px (small); inner = outer minus padding
    const innerSize = sizing === "large" ? "138px" : "57px";
    const imgContent = image ? croppedAreaPercent ? /*#__PURE__*/_jsx(HeaderAvatarCroppedImage, {
      src: image,
      alt: alt,
      croppedAreaPercent: croppedAreaPercent,
      $size: innerSize,
      $shape: shape
    }) : /*#__PURE__*/_jsx(HeaderAvatarImage, {
      src: image,
      alt: alt,
      $size: innerSize,
      $shape: shape
    }) : /*#__PURE__*/_jsx(HeaderAvatarShape, {
      $size: innerSize,
      $shape: shape,
      $gradient: gradient || fallbackGradient,
      children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "users"],
        color: defaultIconColor
      }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "tag"],
        color: defaultIconColor
      }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "users"],
        color: defaultIconColor
      }) : /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "user"],
        color: defaultIconColor
      })
    });
    const innerContent = /*#__PURE__*/_jsx(HeaderAvatarInner, {
      $size: innerSize,
      $shape: shape,
      children: loading ? /*#__PURE__*/_jsx(HeaderAvatarLoading, {
        $size: innerSize
      }) : imgContent
    });
    if (onClick && !loading) {
      return /*#__PURE__*/_jsx(Popover, {
        direction: "right",
        width: "fit-content",
        $shape: shape,
        text: shape === "circle" ? "Upload profile picture" : "Change image",
        headerAvatarSizing: sizing,
        tabIndex: "-1",
        children: /*#__PURE__*/_jsxs(HeaderAvatarAction, _objectSpread(_objectSpread({}, props), {}, {
          onClick: onClick,
          "aria-label": "Edit avatar",
          $shape: shape,
          $sizing: sizing,
          children: [/*#__PURE__*/_jsx(IconContainer, {
            $shape: shape,
            $sizing: sizing,
            $size: innerSize,
            className: "icon-container",
            children: shape === "circle" ? /*#__PURE__*/_jsx(Icon, {
              icon: ["fas", "camera"],
              size: sizing === "large" ? "lg" : "1x",
              color: defaultIconColor
            }) : /*#__PURE__*/_jsx(Icon, {
              icon: ["fas", "image"],
              size: sizing === "large" ? "lg" : "1x",
              color: defaultIconColor
            })
          }), innerContent]
        }))
      });
    }
    return /*#__PURE__*/_jsx(HeaderAvatarFrame, _objectSpread(_objectSpread({}, props), {}, {
      $shape: shape,
      $sizing: sizing,
      children: innerContent
    }));
  }
  const component = /*#__PURE__*/_jsxs(AvatarWrapper, _objectSpread(_objectSpread({}, props), {}, {
    type: type,
    sizing: sizing,
    children: [image ? croppedAreaPercent ? /*#__PURE__*/_jsx(CroppedImageWrapper, {
      src: image,
      alt: alt,
      croppedAreaPercent: croppedAreaPercent,
      sizing: sizing,
      shape: shape,
      customSize: customSize
    }) : /*#__PURE__*/_jsx(Image, {
      src: image,
      sizing: sizing,
      shape: shape,
      alt: alt,
      customSize: customSize
    }) : /*#__PURE__*/_jsx(Shape, {
      shape: shape,
      sizing: sizing,
      customSize: customSize,
      type: type,
      className: type == "inverted" ? "inverted" : "",
      uppercase: uppercase,
      gradient: gradient || fallbackGradient,
      children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "users"],
        color: defaultIconColor
      }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "tag"],
        color: defaultIconColor
      }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "users"],
        color: defaultIconColor
      }) : /*#__PURE__*/_jsx(Icon, {
        icon: ["fas", "user"],
        color: defaultIconColor
      })
    }), (hasTitle || hasSubtitle) && /*#__PURE__*/_jsxs(TextContent, {
      type: type,
      sizing: sizing,
      theme: theme,
      children: [hasTitle && /*#__PURE__*/_jsx(Title, {
        titleLevel: titleLevel,
        type: type,
        sizing: sizing,
        theme: theme,
        children: title
      }), hasSubtitle && /*#__PURE__*/_jsx(Subtitle, {
        type: type,
        sizing: sizing,
        children: subtitle
      }), hasSubtitleContent && subtitleContent]
    }), localTime && /*#__PURE__*/_jsx(LocalTime, {
      direction: "topRight",
      textAlign: "center",
      width: "fit-content",
      text: localTime,
      children: /*#__PURE__*/_jsx(StatusDot, {
        icon: true,
        variant: "secondary",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "clock"],
          color: "white",
          transform: "grow-2"
        })
      })
    })]
  }));
  return theme ? /*#__PURE__*/_jsx(ThemeProvider, {
    theme: theme,
    children: component
  }) : component;
};
Avatar.propTypes = {
  /** Changes the sizing of the Avatar component */
  sizing: PropTypes.oneOf(["small", "large", "default"]),
  /* If specifying custom sizing, provide a string with the size including units (e.g. "65px") */
  customSize: PropTypes.string,
  /** Changes the shape of the Avatar component */
  shape: PropTypes.oneOf(["circle", "square", "hexagon", "tag"]),
  // circle is the default so doesn't explicitly need to be specified
  /** Specifies the inverted type for dark backgrounds */
  type: PropTypes.oneOf(["inverted", "default"]),
  /** Specifies a source path for an image */
  image: PropTypes.string,
  /** Specifies crop data for the image with x, y, width, and height properties */
  croppedAreaPercent: PropTypes.shape({
    x: PropTypes.number.isRequired,
    y: PropTypes.number.isRequired,
    width: PropTypes.number.isRequired,
    height: PropTypes.number.isRequired
  }),
  /** Specifies the gradient for the avatar background */
  gradient: PropTypes.string,
  /** Specifies the fallback gradient when no image is provided */
  fallbackGradient: PropTypes.string,
  /** Specifies the alt text for an image. This must be specified if image prop is used and title prop is not a string. */
  imageAlt: (props, propName) => {
    if (props.image && props.title && typeof props.title !== "string" && (props[propName] == null || props[propName] === "")) {
      return new Error("Missing prop `".concat(propName, "` not specified for Avatar component. When `image` is provided, `").concat(propName, "` is required."));
    }
    if (props[propName] && typeof props[propName] !== "string") {
      return new Error("Invalid propType `".concat(propName, "` supplied to Avatar component. Expected `string`, received `").concat(typeof props[propName], "`."));
    }
    return null;
  },
  /** Specifies initials of person if available */
  initials: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  /** Specifies custom content for avatar subtitle */
  subtitleContent: PropTypes.oneOfType([PropTypes.element, PropTypes.node]),
  /** Specifies whether to use uppercase for initials */
  uppercase: PropTypes.bool,
  /** Specifies title / name as just plain text, or an element like a hyperlink or react router link */
  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  /** Specifies the component to wrap the heading, defaults to H3 */
  titleLevel: PropTypes.oneOf(["H1", "H2", "H3", "H4", "H5", "H6"]),
  /** Specifies subtitle / role */
  subtitle: PropTypes.string,
  /** Specifies local time */
  localTime: PropTypes.string,
  /** Specifies the colour theme */
  theme: PropTypes.object,
  /** Specifies whether to render the avatar in headerAvatar mode */
  headerAvatar: PropTypes.bool,
  /** Specifies the onClick handler for the action button in headerAvatar mode */
  onClick: PropTypes.func,
  /** Specifies whether to render the avatar in loading state */
  loading: PropTypes.bool
};
Avatar.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "Avatar",
  "props": {
    "titleLevel": {
      "defaultValue": {
        "value": "\"H3\"",
        "computed": false
      },
      "description": "Specifies the component to wrap the heading, defaults to H3",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"H1\"",
          "computed": false
        }, {
          "value": "\"H2\"",
          "computed": false
        }, {
          "value": "\"H3\"",
          "computed": false
        }, {
          "value": "\"H4\"",
          "computed": false
        }, {
          "value": "\"H5\"",
          "computed": false
        }, {
          "value": "\"H6\"",
          "computed": false
        }]
      },
      "required": false
    },
    "shape": {
      "defaultValue": {
        "value": "\"circle\"",
        "computed": false
      },
      "description": "Changes the shape of the Avatar component",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"circle\"",
          "computed": false
        }, {
          "value": "\"square\"",
          "computed": false
        }, {
          "value": "\"hexagon\"",
          "computed": false
        }, {
          "value": "\"tag\"",
          "computed": false
        }]
      },
      "required": false
    },
    "uppercase": {
      "defaultValue": {
        "value": "true",
        "computed": false
      },
      "description": "Specifies whether to use uppercase for initials",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "headerAvatar": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Specifies whether to render the avatar in headerAvatar mode",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "loading": {
      "defaultValue": {
        "value": "false",
        "computed": false
      },
      "description": "Specifies whether to render the avatar in loading state",
      "type": {
        "name": "bool"
      },
      "required": false
    },
    "sizing": {
      "description": "Changes the sizing of the Avatar component",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"small\"",
          "computed": false
        }, {
          "value": "\"large\"",
          "computed": false
        }, {
          "value": "\"default\"",
          "computed": false
        }]
      },
      "required": false
    },
    "customSize": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "type": {
      "description": "Specifies the inverted type for dark backgrounds",
      "type": {
        "name": "enum",
        "value": [{
          "value": "\"inverted\"",
          "computed": false
        }, {
          "value": "\"default\"",
          "computed": false
        }]
      },
      "required": false
    },
    "image": {
      "description": "Specifies a source path for an image",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "croppedAreaPercent": {
      "description": "Specifies crop data for the image with x, y, width, and height properties",
      "type": {
        "name": "shape",
        "value": {
          "x": {
            "name": "number",
            "required": true
          },
          "y": {
            "name": "number",
            "required": true
          },
          "width": {
            "name": "number",
            "required": true
          },
          "height": {
            "name": "number",
            "required": true
          }
        }
      },
      "required": false
    },
    "gradient": {
      "description": "Specifies the gradient for the avatar background",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "fallbackGradient": {
      "description": "Specifies the fallback gradient when no image is provided",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "imageAlt": {
      "description": "Specifies the alt text for an image. This must be specified if image prop is used and title prop is not a string.",
      "type": {
        "name": "custom",
        "raw": "(props, propName) => {\n  if (\n    props.image &&\n    props.title &&\n    typeof props.title !== \"string\" &&\n    (props[propName] == null || props[propName] === \"\")\n  ) {\n    return new Error(\n      `Missing prop \\`${propName}\\` not specified for Avatar component. When \\`image\\` is provided, \\`${propName}\\` is required.`\n    );\n  }\n  if (props[propName] && typeof props[propName] !== \"string\") {\n    return new Error(\n      `Invalid propType \\`${propName}\\` supplied to Avatar component. Expected \\`string\\`, received \\`${typeof props[\n        propName\n      ]}\\`.`\n    );\n  }\n  return null;\n}"
      },
      "required": false
    },
    "initials": {
      "description": "Specifies initials of person if available",
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "element"
        }]
      },
      "required": false
    },
    "subtitleContent": {
      "description": "Specifies custom content for avatar subtitle",
      "type": {
        "name": "union",
        "value": [{
          "name": "element"
        }, {
          "name": "node"
        }]
      },
      "required": false
    },
    "title": {
      "description": "Specifies title / name as just plain text, or an element like a hyperlink or react router link",
      "type": {
        "name": "union",
        "value": [{
          "name": "string"
        }, {
          "name": "element"
        }]
      },
      "required": false
    },
    "subtitle": {
      "description": "Specifies subtitle / role",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "localTime": {
      "description": "Specifies local time",
      "type": {
        "name": "string"
      },
      "required": false
    },
    "theme": {
      "description": "Specifies the colour theme",
      "type": {
        "name": "object"
      },
      "required": false
    },
    "onClick": {
      "description": "Specifies the onClick handler for the action button in headerAvatar mode",
      "type": {
        "name": "func"
      },
      "required": false
    }
  }
};
export default Avatar;