orcs-design-system 3.1.9 → 3.1.11

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

@@ -14,7 +14,7 @@ export var defaultAvatar = function defaultAvatar() {
     title: "Ayden Lundgre",
     initials: "AL",
     subtitle: "Senior Business Analyst",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   });
 };
 defaultAvatar.storyName = "Default";
@@ -37,7 +37,7 @@ export var imageOnly = function imageOnly() {
   return /*#__PURE__*/React.createElement(Spacer, {
     my: 4
   }, /*#__PURE__*/React.createElement(Avatar, {
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     imageAlt: "Ayden Lundgre"
   }));
 };
@@ -58,7 +58,7 @@ export var nameLink = function nameLink() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     imageAlt: "Ayden Lundgre"
   });
 };
@@ -76,7 +76,7 @@ export var small = function small() {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }), /*#__PURE__*/React.createElement(Avatar, {
     sizing: "small",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -84,7 +84,7 @@ export var small = function small() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }));
 };
 small.storyName = "Small";
@@ -102,7 +102,7 @@ export var large = function large() {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }), /*#__PURE__*/React.createElement(Avatar, {
     sizing: "large",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -110,7 +110,7 @@ export var large = function large() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }));
 };
 large.storyName = "Large";
@@ -135,7 +135,7 @@ export var subtitleContent = function subtitleContent() {
       href: "#"
     }, "Ayden Lundgre"),
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
       mt: "xs"
     }, "Senior Business Analyst")
@@ -145,7 +145,7 @@ export var subtitleContent = function subtitleContent() {
       href: "#"
     }, "Ayden Lundgre"),
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     imageAlt: "Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Flex, {
       flexWrap: "wrap"
@@ -167,7 +167,7 @@ export var localTime = function localTime() {
       href: "#"
     }, "Ayden Lundgre"),
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     imageAlt: "Ayden Lundgre",
     subtitleContent: /*#__PURE__*/React.createElement(Badge, {
       mt: "xs"
@@ -187,7 +187,7 @@ export var inverted = function inverted() {
     title: "Ayden Lundgre",
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png"
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png"
   }), /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
     title: /*#__PURE__*/React.createElement(StyledLink, {
@@ -195,7 +195,7 @@ export var inverted = function inverted() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     imageAlt: "Ayden Lundgre"
   }), /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
@@ -213,7 +213,7 @@ export var inverted = function inverted() {
     }, "Ayden Lundgre"),
     subtitle: "Senior Business Analyst",
     initials: "AL",
-    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    image: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85f6932722401c73ad_ethan.png",
     imageAlt: "Ayden Lundgre"
   })));
 };

package/es/components/HeaderSimple/HeaderSimple.stories.js

@@ -9,7 +9,7 @@ export var defaultHeader = function defaultHeader() {
   return /*#__PURE__*/React.createElement(HeaderSimple, {
     appName: "App Name",
     userName: "Michael",
-    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85368bfb13dac1205e_harry.png",
     currentWorskapce: "Org Design Workspace"
   });
 };
@@ -19,7 +19,7 @@ export var headerWithSearch = function headerWithSearch() {
     variant: "search",
     appName: "App Name",
     userName: "Michael",
-    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
+    avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85368bfb13dac1205e_harry.png",
     currentWorskapce: "Org Design Workspace",
     searchComponent: /*#__PURE__*/React.createElement(TextInput, {
       fullWidth: true,

package/es/components/Tag/Tag.stories.js

@@ -45,17 +45,17 @@ export var showInfo = function showInfo() {
   }, /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     showInfo: true,
-    tagType: "SKILL"
+    tagType: "Skill"
   }, "devops"), /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     showInfo: true,
-    tagType: "SKILL"
+    tagType: "Skill"
   }, "software engineering"), /*#__PURE__*/React.createElement(Tag, {
     showInfo: true,
-    tagType: "SKILL"
+    tagType: "Skill"
   }, "product design"), /*#__PURE__*/React.createElement(Tag, {
     showInfo: true,
-    tagType: "SKILL"
+    tagType: "Skill"
   }, "digital transformation"));
 };
 export var showEdit = function showEdit() {
@@ -201,11 +201,139 @@ export var smallVariant = function smallVariant() {
   }, "Agile Coach");
 };
 export var highlightedVariant = function highlightedVariant() {
-  return /*#__PURE__*/React.createElement(Tag, {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
     selected: true,
     highlighted: true,
     tagType: "specialist"
-  }, "Agile Coach");
+  }, "Agile Coach"));
+};
+export var personTag = function personTag() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
+    disabled: true,
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    disabled: true,
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    disabled: true,
+    personEntity: true
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    personEntity: true
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    personEntity: true
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    highlighted: true,
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    highlighted: true,
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    selected: true,
+    highlighted: true,
+    personEntity: true
+  }, "Maximillian Dubois"));
+};
+export var personTagSmall = function personTagSmall() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    m: "2px"
+  }, /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    disabled: true,
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    disabled: true,
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    disabled: true,
+    personEntity: true
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    personEntity: true
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    selected: true,
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    selected: true,
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    selected: true,
+    personEntity: true
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    selected: true,
+    highlighted: true,
+    personEntity: {
+      avatarSrc: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/65389e85af9ec00f6c03f592_kai.png"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    selected: true,
+    highlighted: true,
+    personEntity: {
+      initials: "MD"
+    }
+  }, "Maximillian Dubois"), /*#__PURE__*/React.createElement(Tag, {
+    small: true,
+    selected: true,
+    highlighted: true,
+    personEntity: true
+  }, "Maximillian Dubois"));
 };
 defaultTag.__docgenInfo = {
   "description": "",
@@ -261,4 +389,14 @@ highlightedVariant.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "highlightedVariant"
+};
+personTag.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "personTag"
+};
+personTagSmall.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "personTagSmall"
 };

package/es/components/Tag/index.js

@@ -1,16 +1,20 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showInfo", "onInfo", "showStrikeThrough", "children", "isPending", "small", "highlighted"];
+var _excluded = ["selected", "onSelect", "disabled", "showRemove", "onRemove", "theme", "tagType", "showEdit", "onEdit", "showInfo", "onInfo", "showStrikeThrough", "children", "isPending", "small", "highlighted", "personEntity"];
 import React from "react";
 import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import { space, layout } from "styled-system";
+import Avatar from "../Avatar";
 import Icon from "../Icon";
 import Loading from "../Loading";
 import { themeGet } from "@styled-system/theme-get";
 var TagWrapper = styled.div.withConfig({
   displayName: "Tag__TagWrapper",
   componentId: "sc-1dh2aa8-0"
-})(["", " ", " display:flex;align-items:stretch;height:100%;justify-content:center;> button{margin:0;}"], space, layout);
+})(["", " ", " display:flex;align-items:stretch;height:100%;min-height:", ";justify-content:center;> button{margin:0;}"], space, layout, function (props) {
+  return props.small ? "26px" : "30px";
+});
 var TagValue = styled.button.attrs(function (props) {
   return {
     "aria-pressed": props.selected
@@ -33,7 +37,7 @@ var TagValue = styled.button.attrs(function (props) {
 }, function (props) {
   return props.disabled ? themeGet("colors.greyLight")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : themeGet("colors.primary")(props);
 }, function (props) {
-  return props.showEdit || props.showInfo || props.showRemove ? "3px 4px 4px 10px" : props.small ? "calc(".concat(themeGet("space.2")(props), " - 1px)") + " " + themeGet("space.3")(props) + " " + themeGet("space.2")(props) + " " + themeGet("space.3")(props) : "3px 10px 4px 10px";
+  return (props.showEdit || props.showInfo || props.showRemove) && props.small ? "2px 4px 2px 6px" : props.showEdit || props.showInfo || props.showRemove ? "3px 4px 3px 10px" : props.small ? "2px 6px 2px 6px" : "3px 10px 3px 10px";
 }, function (props) {
   return props.disabled ? themeGet("colors.greyLighter")(props) : props.selected && props.highlighted ? themeGet("colors.warningDark")(props) : props.selected ? themeGet("colors.primary")(props) : themeGet("colors.white")(props);
 }, function (props) {
@@ -54,18 +58,18 @@ var TagValue = styled.button.attrs(function (props) {
 var TagValueText = styled.div.withConfig({
   displayName: "Tag__TagValueText",
   componentId: "sc-1dh2aa8-2"
-})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";"], function (props) {
+})(["text-decoration:", ";text-overflow:ellipsis;white-space:normal;text-align:left;line-height:", ";padding-bottom:1px;"], function (props) {
   return props.showStrikeThrough ? "line-through" : "none";
 }, function (props) {
-  return themeGet("fontSizes.1")(props);
+  return props.small ? themeGet("fontSizes.0")(props) : themeGet("fontSizes.1")(props);
 });
 var TagActionIconWrapper = styled(TagValue).withConfig({
   displayName: "Tag__TagActionIconWrapper",
   componentId: "sc-1dh2aa8-3"
-})(["border-radius:", ";padding:", ";&:focus{z-index:2;}", ""], function (props) {
+})(["border-radius:", ";padding:", ";&:focus{z-index:2;}> span{line-height:0;}", ""], function (props) {
   return props.showRemove ? "0" : "0 15px 15px 0";
 }, function (props) {
-  return props.showRemove ? "2px 7px 5px 7px" : props.showInfo ? "1px 11px 4px 10px" : "2px 8px 5px 8px";
+  return props.showRemove ? "0 7px 0 7px" : props.showInfo ? "0 12px 0 11px" : "0 8px 0 8px";
 }, function (props) {
   return props.selected ? css(["border-left:", ";&:hover{border-left:", ";}"], function (props) {
     return props.selected && props.highlighted ? "solid 1px ".concat(themeGet("colors.warningDarker")(props)) : "solid 1px ".concat(themeGet("colors.primaryDark")(props));
@@ -87,7 +91,7 @@ var TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
   componentId: "sc-1dh2aa8-5"
 })(["text-transform:uppercase;margin-left:", ";padding:", ";line-height:1;white-space:normal;text-align:left;flex:1 1 auto;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], function (props) {
-  return themeGet("space.s")(props);
+  return props.small ? "6px" : "10px";
 }, function (props) {
   return props.small ? themeGet("space.1")(props) : themeGet("space.2")(props);
 }, function (props) {
@@ -99,6 +103,22 @@ var TagType = styled.div.withConfig({
 }, function (props) {
   return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
 });
+var TagAvatar = styled(Avatar).withConfig({
+  displayName: "Tag__TagAvatar",
+  componentId: "sc-1dh2aa8-6"
+})(["img[class*=\"Avatar__Image\"],div[class*=\"Avatar__Shape\"]{width:", ";height:", ";text-transform:uppercase;margin-right:", ";margin-left:", ";font-size:", ";background-color:", ";color:", ";}"], function (props) {
+  return props.small ? "20px" : "22px";
+}, function (props) {
+  return props.small ? "20px" : "22px";
+}, themeGet("space.xs"), function (props) {
+  return props.small ? "-4px" : "-7px";
+}, function (props) {
+  return props.small ? "0.9rem" : "1rem";
+}, function (props) {
+  return props.disabled ? themeGet("colors.grey")(props) : props.selected && props.highlighted ? "rgba(0,0,0,0.2)" : props.selected ? "rgba(0,0,0,0.25)" : themeGet("colors.primaryLightest")(props);
+}, function (props) {
+  return props.disabled ? themeGet("colors.white")(props) : props.selected && props.highlighted ? themeGet("colors.white")(props) : props.selected ? themeGet("colors.white")(props) : themeGet("colors.primary")(props);
+});
 
 /**
  * The top two rows are an example of how tags should be used when they are selectable/unselectable. There is the option to display the cross icon or not.
@@ -123,8 +143,11 @@ export default function Tag(_ref) {
     isPending = _ref.isPending,
     small = _ref.small,
     highlighted = _ref.highlighted,
+    personEntity = _ref.personEntity,
     props = _objectWithoutProperties(_ref, _excluded);
-  var component = /*#__PURE__*/React.createElement(TagWrapper, props, /*#__PURE__*/React.createElement(TagValue, {
+  var component = /*#__PURE__*/React.createElement(TagWrapper, _extends({
+    small: small
+  }, props), /*#__PURE__*/React.createElement(TagValue, {
     selected: selected,
     highlighted: highlighted,
     disabled: disabled,
@@ -133,8 +156,16 @@ export default function Tag(_ref) {
     showRemove: showRemove,
     onClick: onSelect,
     small: small
-  }, /*#__PURE__*/React.createElement(TagValueText, {
-    showStrikeThrough: showStrikeThrough
+  }, personEntity && /*#__PURE__*/React.createElement(TagAvatar, {
+    selected: selected,
+    highlighted: highlighted,
+    disabled: disabled,
+    small: small,
+    image: personEntity.avatarSrc,
+    initials: personEntity.initials
+  }), /*#__PURE__*/React.createElement(TagValueText, {
+    showStrikeThrough: showStrikeThrough,
+    small: small
   }, showStrikeThrough && /*#__PURE__*/React.createElement("span", {
     className: "sr-only"
   }, "Striked out:"), children), tagType && /*#__PURE__*/React.createElement(TagType, {
@@ -195,6 +226,8 @@ Tag.propTypes = {
   onInfo: PropTypes.func,
   /** Can add a type to a tag as text */
   tagType: PropTypes.string,
+  /** Can add an img url for showing a person's avatar if the tag is used for a person */
+  personAvatar: PropTypes.string,
   /** Adds disabled attribute and styling to tag */
   disabled: PropTypes.bool,
   /** Adds loading spinner to tag to indicate awaiting an action to complete */
@@ -206,7 +239,9 @@ Tag.propTypes = {
   /** Applies the small variant styles */
   small: PropTypes.bool,
   /** Applies a highlighted style and colour to the tag */
-  highlighted: PropTypes.bool
+  highlighted: PropTypes.bool,
+  /** Allows you to set a person avatar image or initials */
+  personEntity: PropTypes.object
 };
 Tag.defaultProps = {
   selected: false,
@@ -361,6 +396,13 @@ Tag.__docgenInfo = {
       },
       "required": false
     },
+    "personAvatar": {
+      "description": "Can add an img url for showing a person's avatar if the tag is used for a person",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
     "isPending": {
       "description": "Adds loading spinner to tag to indicate awaiting an action to complete",
       "type": {
@@ -374,6 +416,13 @@ Tag.__docgenInfo = {
         "name": "object"
       },
       "required": false
+    },
+    "personEntity": {
+      "description": "Allows you to set a person avatar image or initials",
+      "type": {
+        "name": "object"
+      },
+      "required": false
     }
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.9",
+  "version": "3.1.11",
   "engines": {
     "node": "18.17.1"
   },