orcs-design-system 2.0.88 → 2.0.90

package/es/components/Avatar/Avatar.stories.js

@@ -1,4 +1,6 @@
 import React from "react";
+import Badge from "../Badge";
+import Flex from "../Flex";
 import Box from "../Box";
 import Spacer from "../Spacer";
 import StyledLink from "../StyledLink";
@@ -115,6 +117,37 @@ export var large = function large() {
   }));
 };
 large.storyName = "Large";
+export var subtitleContent = function subtitleContent() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: 4
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    sizing: "large",
+    title: /*#__PURE__*/React.createElement(StyledLink, {
+      href: "#"
+    }, "Ayden Lundgre"),
+    initials: "AL",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    subtitleContent: /*#__PURE__*/React.createElement(Badge, {
+      mt: "xs"
+    }, "Senior Business Analyst")
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    sizing: "large",
+    title: /*#__PURE__*/React.createElement(StyledLink, {
+      href: "#"
+    }, "Ayden Lundgre"),
+    initials: "AL",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    subtitleContent: /*#__PURE__*/React.createElement(Flex, {
+      flexWrap: "wrap"
+    }, /*#__PURE__*/React.createElement(Spacer, {
+      mr: "xs",
+      mt: "xs"
+    }, /*#__PURE__*/React.createElement(Badge, null, "Senior Business Analyst"), /*#__PURE__*/React.createElement(Badge, {
+      variant: "warning"
+    }, "Scrum Master")))
+  }));
+};
+subtitleContent.storyName = "Alternative subtitle content";
 export var inverted = function inverted() {
   return /*#__PURE__*/React.createElement(Box, {
     bg: "greyDarkest",
@@ -240,6 +273,11 @@ large.__docgenInfo = {
   "methods": [],
   "displayName": "large"
 };
+subtitleContent.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "subtitleContent"
+};
 inverted.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Avatar/index.js

@@ -48,6 +48,7 @@ var TextContent = styled("div").withConfig({
         fontSize: themeGet("fontSizes.1")(props)
       },
       large: {
+        marginLeft: "16px",
         fontSize: themeGet("fontSizes.2")(props)
       }
     }
@@ -83,8 +84,8 @@ var Image = styled("img").withConfig({
       height: "38px"
     },
     large: {
-      width: "70px",
-      height: "70px"
+      width: "80px",
+      height: "80px"
     }
   }
 }), variant({
@@ -135,8 +136,8 @@ var Shape = styled("div").withConfig({
       height: "38px"
     },
     large: {
-      width: "70px",
-      height: "70px"
+      width: "80px",
+      height: "80px"
     },
     "default": {}
   }
@@ -235,16 +236,18 @@ var Avatar = function Avatar(_ref) {
       initials = _ref.initials,
       title = _ref.title,
       subtitle = _ref.subtitle,
+      subtitleContent = _ref.subtitleContent,
       type = _ref.type,
       theme = _ref.theme,
       shape = _ref.shape,
       _ref$uppercase = _ref.uppercase,
       uppercase = _ref$uppercase === void 0 ? true : _ref$uppercase,
       whiteInitials = _ref.whiteInitials,
-      props = _objectWithoutProperties(_ref, ["sizing", "image", "initials", "title", "subtitle", "type", "theme", "shape", "uppercase", "whiteInitials"]);
+      props = _objectWithoutProperties(_ref, ["sizing", "image", "initials", "title", "subtitle", "subtitleContent", "type", "theme", "shape", "uppercase", "whiteInitials"]);
 
   var hasTitle = !!title;
   var hasSubtitle = !!subtitle;
+  var hasSubtitleContent = !!subtitleContent;
   var component = /*#__PURE__*/React.createElement(AvatarWrapper, _extends({}, props, {
     type: type,
     sizing: sizing
@@ -276,7 +279,7 @@ var Avatar = function Avatar(_ref) {
   }, title), hasSubtitle && /*#__PURE__*/React.createElement(Subtitle, {
     type: type,
     sizing: sizing
-  }, subtitle)));
+  }, subtitle), hasSubtitleContent && subtitleContent));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
@@ -298,6 +301,9 @@ Avatar.propTypes = {
   /** 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]),
+
   /** Turns white initials on for custom `Circle` backgrounds */
   whiteInitials: PropTypes.bool,
 
@@ -396,6 +402,18 @@ Avatar.__docgenInfo = {
       "required": false,
       "description": "Specifies initials of person if available"
     },
+    "subtitleContent": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "element"
+        }, {
+          "name": "node"
+        }]
+      },
+      "required": false,
+      "description": "Specifies custom content for avatar subtitle"
+    },
     "whiteInitials": {
       "type": {
         "name": "bool"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "2.0.88",
+  "version": "2.0.90",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",