orcs-design-system 3.2.4 → 3.2.6

package/es/components/Avatar/index.js

@@ -1,8 +1,3 @@
-import _typeof from "@babel/runtime/helpers/typeof";
-import _extends from "@babel/runtime/helpers/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["titleLevel"],
-  _excluded2 = ["sizing", "image", "imageAlt", "initials", "title", "titleLevel", "subtitle", "subtitleContent", "type", "theme", "shape", "localTime", "uppercase", "whiteInitials"];
 import React, { useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import { space, layout, variant } from "styled-system";
@@ -13,7 +8,8 @@ import Popover from "../Popover";
 import StatusDot from "../StatusDot";
 import css from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
-var AvatarWrapper = styled("div").withConfig({
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const AvatarWrapper = styled("div").withConfig({
   displayName: "Avatar__AvatarWrapper",
   componentId: "sc-1wtet2j-0"
 })(layout, space, css({
@@ -21,350 +17,327 @@ var AvatarWrapper = styled("div").withConfig({
   position: "relative",
   display: "flex",
   alignItems: "center"
-}), function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      small: {
-        fontSize: themeGet("fontSizes.1")(props)
-      },
-      large: {
-        fontSize: themeGet("fontSizes.2")(props)
-      },
-      "default": {}
-    }
-  });
-}, variant({
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    small: {
+      fontSize: themeGet("fontSizes.1")(props)
+    },
+    large: {
+      fontSize: themeGet("fontSizes.2")(props)
+    },
+    default: {}
+  }
+}), variant({
   prop: "type",
   variants: {
     inverted: {}
   }
 }));
-var TextContent = styled("div").withConfig({
+const TextContent = styled("div").withConfig({
   displayName: "Avatar__TextContent",
   componentId: "sc-1wtet2j-1"
 })(css({
   marginLeft: 3,
   lineHeight: "0.8"
-}), function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      small: {
-        fontSize: themeGet("fontSizes.1")(props)
-      },
-      large: {
-        marginLeft: "16px",
-        fontSize: themeGet("fontSizes.2")(props)
-      }
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    small: {
+      fontSize: themeGet("fontSizes.1")(props)
+    },
+    large: {
+      marginLeft: "16px",
+      fontSize: themeGet("fontSizes.2")(props)
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "type",
-    variants: {
-      inverted: {
-        color: themeGet("colors.white")(props)
-      }
+  }
+}), props => variant({
+  prop: "type",
+  variants: {
+    inverted: {
+      color: themeGet("colors.white")(props)
     }
-  });
-});
-var Image = styled("img").withConfig({
+  }
+}));
+const Image = styled("img").withConfig({
   displayName: "Avatar__Image",
   componentId: "sc-1wtet2j-2"
-})(function (props) {
-  return css({
-    width: themeGet("appScale.avatarDefault")(props),
-    height: themeGet("appScale.avatarDefault")(props),
-    flex: "0 0 auto",
-    backgroundColor: themeGet("colors.greyLighter")(props),
-    border: "0",
-    display: "block",
-    borderRadius: "50%"
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      small: {
-        width: themeGet("appScale.avatarSmall")(props),
-        height: themeGet("appScale.avatarSmall")(props)
-      },
-      large: {
-        width: themeGet("appScale.avatarLarge")(props),
-        height: themeGet("appScale.avatarLarge")(props)
-      }
+})(props => css({
+  width: themeGet("appScale.avatarDefault")(props),
+  height: themeGet("appScale.avatarDefault")(props),
+  flex: "0 0 auto",
+  backgroundColor: themeGet("colors.greyLighter")(props),
+  border: "0",
+  display: "block",
+  borderRadius: "50%"
+}), props => variant({
+  prop: "sizing",
+  variants: {
+    small: {
+      width: themeGet("appScale.avatarSmall")(props),
+      height: themeGet("appScale.avatarSmall")(props)
+    },
+    large: {
+      width: themeGet("appScale.avatarLarge")(props),
+      height: themeGet("appScale.avatarLarge")(props)
     }
-  });
-}, function (props) {
-  return 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%)"
-      }
+  }
+}), 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%)"
     }
-  });
-});
-var Shape = styled("div").withConfig({
+  }
+}));
+const Shape = styled("div").withConfig({
   displayName: "Avatar__Shape",
   componentId: "sc-1wtet2j-3"
-})(function (props) {
-  return css({
-    width: themeGet("appScale.avatarDefault")(props),
-    height: themeGet("appScale.avatarDefault")(props),
-    fontWeight: themeGet("fontWeights.2")(props),
-    flex: "0 0 auto",
-    backgroundColor: themeGet("colors.greyLighter")(props),
-    color: props.whiteInitials ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(props),
-    border: "0",
-    display: "flex",
-    borderRadius: "50%",
-    alignItems: "center",
-    justifyContent: "center",
-    textAlign: "center",
-    textTransform: "".concat(function (props) {
-      return props.uppercase ? "uppercase" : "none";
-    }),
-    a: {
-      color: themeGet("colors.greyDarkest")(props)
+})(props => css({
+  width: themeGet("appScale.avatarDefault")(props),
+  height: themeGet("appScale.avatarDefault")(props),
+  fontWeight: themeGet("fontWeights.2")(props),
+  flex: "0 0 auto",
+  backgroundColor: themeGet("colors.greyLighter")(props),
+  color: props.whiteInitials ? themeGet("colors.white")(props) : themeGet("colors.greyDarkest")(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("appScale.avatarSmall")(props),
+      height: themeGet("appScale.avatarSmall")(props)
+    },
+    large: {
+      width: themeGet("appScale.avatarLarge")(props),
+      height: themeGet("appScale.avatarLarge")(props)
     },
-    "&.inverted a": {
+    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: "8px",
+      clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "sizing",
-    variants: {
-      small: {
-        width: themeGet("appScale.avatarSmall")(props),
-        height: themeGet("appScale.avatarSmall")(props)
-      },
-      large: {
-        width: themeGet("appScale.avatarLarge")(props),
-        height: themeGet("appScale.avatarLarge")(props)
-      },
-      "default": {}
-    }
-  });
-}, function (props) {
-  return variant({
-    prop: "type",
-    variants: {
-      inverted: {
-        backgroundColor: themeGet("colors.greyDarker")(props),
-        color: themeGet("colors.white")(props)
-      },
-      "default": {}
-    }
-  });
-}, function (props) {
-  return 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: "8px",
-        clipPath: "polygon(6% 0, 95% 0, 95% 65%, 50% 100%, 6% 65%)"
-      }
-    }
-  });
-});
-var Title = styled(function (_ref) {
-  var titleLevel = _ref.titleLevel,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var Heading = Header[titleLevel];
-  return /*#__PURE__*/React.cloneElement( /*#__PURE__*/React.createElement(Heading, null), props);
+  }
+}));
+const Title = styled(_ref => {
+  let {
+    titleLevel,
+    ...props
+  } = _ref;
+  const Heading = Header[titleLevel];
+  return /*#__PURE__*/React.cloneElement( /*#__PURE__*/_jsx(Heading, {}), props);
 }).withConfig({
   displayName: "Avatar__Title",
   componentId: "sc-1wtet2j-4"
-})(function (props) {
-  return css({
+})(props => css({
+  fontSize: themeGet("fontSizes.2")(props),
+  "> a": {
     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": {
+    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),
-      color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
+      "> a": {
+        fontSize: themeGet("fontSizes.2")(props)
+      },
+      "> div > a": {
+        fontSize: themeGet("fontSizes.2")(props)
+      },
+      "> div > div > a": {
+        fontSize: themeGet("fontSizes.2")(props)
+      }
     },
-    "> div > div > a": {
-      fontSize: themeGet("fontSizes.2")(props),
-      color: props.type == "inverted" ? themeGet("colors.primaryLight")(props) : themeGet("colors.primary")(props)
-    }
-  });
-}, function (props) {
-  return 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)
       },
-      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)
-        }
+      "> div > div > a": {
+        fontSize: themeGet("fontSizes.3")(props)
       }
     }
-  });
-}, function (props) {
-  return variant({
-    prop: "type",
-    variants: {
-      inverted: {
-        color: themeGet("colors.white")(props)
-      }
+  }
+}), props => variant({
+  prop: "type",
+  variants: {
+    inverted: {
+      color: themeGet("colors.white")(props)
     }
-  });
-});
-var Subtitle = styled(Text).withConfig({
+  }
+}));
+const Subtitle = styled(Text).withConfig({
   displayName: "Avatar__Subtitle",
   componentId: "sc-1wtet2j-5"
-})(function (props) {
-  return css({
-    color: themeGet("colors.greyDark")(props),
-    fontSize: themeGet("fontSizes.1")(props)
-  });
-}, function (props) {
-  return 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)
-      }
-    }
-  });
-}, function (props) {
-  return variant({
-    prop: "type",
-    variants: {
-      inverted: {
-        color: themeGet("colors.white")(props)
-      },
-      "default": {}
+})(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)
     }
-  });
-});
-var LocalTime = styled(Popover).withConfig({
+  }
+}), props => variant({
+  prop: "type",
+  variants: {
+    inverted: {
+      color: themeGet("colors.white")(props)
+    },
+    default: {}
+  }
+}));
+const LocalTime = styled(Popover).withConfig({
   displayName: "Avatar__LocalTime",
   componentId: "sc-1wtet2j-6"
 })(["position:absolute;top:0;left:0;"]);
-var Avatar = function Avatar(_ref2) {
-  var sizing = _ref2.sizing,
-    image = _ref2.image,
-    imageAlt = _ref2.imageAlt,
-    initials = _ref2.initials,
-    title = _ref2.title,
-    _ref2$titleLevel = _ref2.titleLevel,
-    titleLevel = _ref2$titleLevel === void 0 ? "H3" : _ref2$titleLevel,
-    subtitle = _ref2.subtitle,
-    subtitleContent = _ref2.subtitleContent,
-    type = _ref2.type,
-    theme = _ref2.theme,
-    shape = _ref2.shape,
-    localTime = _ref2.localTime,
-    _ref2$uppercase = _ref2.uppercase,
-    uppercase = _ref2$uppercase === void 0 ? true : _ref2$uppercase,
-    whiteInitials = _ref2.whiteInitials,
-    props = _objectWithoutProperties(_ref2, _excluded2);
-  var hasTitle = !!title;
-  var hasSubtitle = !!subtitle;
-  var hasSubtitleContent = !!subtitleContent;
-  var alt = useMemo(function () {
+const Avatar = _ref2 => {
+  let {
+    sizing,
+    image,
+    imageAlt,
+    initials,
+    title,
+    titleLevel = "H3",
+    subtitle,
+    subtitleContent,
+    type,
+    theme,
+    shape,
+    localTime,
+    uppercase = true,
+    whiteInitials,
+    ...props
+  } = _ref2;
+  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]);
-  var component = /*#__PURE__*/React.createElement(AvatarWrapper, _extends({}, props, {
-    type: type,
-    sizing: sizing
-  }), image ? /*#__PURE__*/React.createElement(Image, {
-    src: image,
-    sizing: sizing,
-    shape: shape,
-    alt: alt
-  }) : /*#__PURE__*/React.createElement(Shape, {
-    shape: shape,
-    sizing: sizing,
-    type: type,
-    className: type == "inverted" ? "inverted" : "",
-    whiteInitials: whiteInitials,
-    uppercase: uppercase
-  }, initials ? initials : shape === "hexagon" ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "users"]
-  }) : shape === "tag" ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "tag"]
-  }) : shape === "square" ? /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "users"]
-  }) : /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "user"]
-  })), (hasTitle || hasSubtitle) && /*#__PURE__*/React.createElement(TextContent, {
+  const component = /*#__PURE__*/_jsxs(AvatarWrapper, {
+    ...props,
     type: type,
     sizing: sizing,
-    theme: theme
-  }, hasTitle && /*#__PURE__*/React.createElement(Title, {
-    titleLevel: titleLevel,
-    type: type,
-    sizing: sizing,
-    theme: theme
-  }, title), hasSubtitle && /*#__PURE__*/React.createElement(Subtitle, {
-    type: type,
-    sizing: sizing
-  }, subtitle), hasSubtitleContent && subtitleContent), localTime && /*#__PURE__*/React.createElement(LocalTime, {
-    direction: "topRight",
-    textAlign: "center",
-    width: "130px",
-    text: localTime
-  }, /*#__PURE__*/React.createElement(StatusDot, {
-    icon: true
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: ["fas", "clock"],
-    color: "white",
-    transform: "grow-2"
-  }))));
-  return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
-    theme: theme
-  }, component) : component;
+    children: [image ? /*#__PURE__*/_jsx(Image, {
+      src: image,
+      sizing: sizing,
+      shape: shape,
+      alt: alt
+    }) : /*#__PURE__*/_jsx(Shape, {
+      shape: shape,
+      sizing: sizing,
+      type: type,
+      className: type == "inverted" ? "inverted" : "",
+      whiteInitials: whiteInitials,
+      uppercase: uppercase,
+      children: initials ? initials : shape === "hexagon" ? /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "users"]
+      }) : shape === "tag" ? /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "tag"]
+      }) : shape === "square" ? /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "users"]
+      }) : /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", "user"]
+      })
+    }), (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: "130px",
+      text: localTime,
+      children: /*#__PURE__*/_jsx(StatusDot, {
+        icon: true,
+        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 */
@@ -376,12 +349,12 @@ Avatar.propTypes = {
   /** Specifies a source path for an image */
   image: 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: function imageAlt(props, propName) {
+  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 new Error("Invalid propType `".concat(propName, "` supplied to Avatar component. Expected `string`, received `").concat(typeof props[propName], "`."));
     }
     return null;
   },