orcs-design-system 2.0.87 → 2.0.89

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";
@@ -90,6 +92,62 @@ export var small = function small() {
   }));
 };
 small.storyName = "Small";
+export var large = function large() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: 4
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    sizing: "large",
+    title: "Ayden Lundgre",
+    subtitle: "Senior Business Analyst",
+    initials: "AL"
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    sizing: "large",
+    title: "Ayden Lundgre",
+    subtitle: "Senior Business Analyst",
+    initials: "AL",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+  }), /*#__PURE__*/React.createElement(Avatar, {
+    sizing: "large",
+    title: /*#__PURE__*/React.createElement(StyledLink, {
+      href: "#"
+    }, "Ayden Lundgre"),
+    subtitle: "Senior Business Analyst",
+    initials: "AL",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+  }));
+};
+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",
@@ -210,6 +268,16 @@ small.__docgenInfo = {
   "methods": [],
   "displayName": "small"
 };
+large.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "large"
+};
+subtitleContent.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "subtitleContent"
+};
 inverted.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Avatar/index.js

@@ -22,6 +22,9 @@ var AvatarWrapper = styled("div").withConfig({
       small: {
         fontSize: themeGet("fontSizes.1")(props)
       },
+      large: {
+        fontSize: themeGet("fontSizes.2")(props)
+      },
       "default": {}
     }
   });
@@ -43,6 +46,9 @@ var TextContent = styled("div").withConfig({
     variants: {
       small: {
         fontSize: themeGet("fontSizes.1")(props)
+      },
+      large: {
+        fontSize: themeGet("fontSizes.2")(props)
       }
     }
   });
@@ -75,6 +81,10 @@ var Image = styled("img").withConfig({
     small: {
       width: "38px",
       height: "38px"
+    },
+    large: {
+      width: "70px",
+      height: "70px"
     }
   }
 }), variant({
@@ -124,6 +134,10 @@ var Shape = styled("div").withConfig({
       width: "38px",
       height: "38px"
     },
+    large: {
+      width: "70px",
+      height: "70px"
+    },
     "default": {}
   }
 }), function (props) {
@@ -159,7 +173,16 @@ var Title = styled(H3).withConfig({
     prop: "sizing",
     variants: {
       small: {
-        fontSize: themeGet("fontSizes.2")(props)
+        fontSize: themeGet("fontSizes.2")(props),
+        a: {
+          fontSize: themeGet("fontSizes.2")(props)
+        }
+      },
+      large: {
+        fontSize: themeGet("fontSizes.4")(props),
+        a: {
+          fontSize: themeGet("fontSizes.4")(props)
+        }
       }
     }
   });
@@ -187,6 +210,10 @@ var Subtitle = styled(Text).withConfig({
       small: {
         fontSize: themeGet("fontSizes.1")(props),
         fontWeight: themeGet("fontWeights.1")(props)
+      },
+      large: {
+        fontSize: themeGet("fontSizes.2")(props),
+        fontWeight: themeGet("fontWeights.1")(props)
       }
     }
   });
@@ -208,16 +235,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
@@ -249,7 +278,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;
@@ -257,7 +286,7 @@ var Avatar = function Avatar(_ref) {
 
 Avatar.propTypes = {
   /** Changes the sizing of the Avatar component */
-  sizing: PropTypes.oneOf(["small", "default"]),
+  sizing: PropTypes.oneOf(["small", "large", "default"]),
 
   /** Changes the shape of the Avatar component */
   shape: PropTypes.oneOf(["hexagon", "tag", "default"]),
@@ -271,6 +300,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,
 
@@ -308,6 +340,9 @@ Avatar.__docgenInfo = {
         "value": [{
           "value": "\"small\"",
           "computed": false
+        }, {
+          "value": "\"large\"",
+          "computed": false
         }, {
           "value": "\"default\"",
           "computed": false
@@ -366,6 +401,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.87",
+  "version": "2.0.89",
   "description": "Orchestrated's Design System, aka: ORCS",
   "keywords": [
     "design",