orcs-design-system 2.1.5 → 2.1.7

package/es/components/ActionsMenu/ActionsMenu.stories.js

@@ -259,6 +259,67 @@ export var customActionsMenu = function customActionsMenu() {
   return /*#__PURE__*/React.createElement(AdvancedActionsMenu, null);
 };
 customActionsMenu.storyName = "Custom Actions Menu";
+export var textButtonActionsMenu = function textButtonActionsMenu() {
+  var TextButtonActionsMenu = function TextButtonActionsMenu() {
+    var _useState9 = useState(false),
+        _useState10 = _slicedToArray(_useState9, 2),
+        toggleState = _useState10[0],
+        setToggle = _useState10[1];
+
+    var menuItemsRef = useRef(null);
+
+    var closeMenu = function closeMenu() {
+      setToggle(false);
+    };
+
+    var resetAndCloseMenu = function resetAndCloseMenu() {
+      if (menuItemsRef.current) {
+        menuItemsRef.current.reset();
+      }
+
+      closeMenu();
+    };
+
+    var menuRef = useOnclickOutside(resetAndCloseMenu, {
+      disabled: !toggleState
+    });
+
+    var onToggle = function onToggle(e) {
+      e.stopPropagation();
+      setToggle(!toggleState);
+    };
+
+    return /*#__PURE__*/React.createElement("div", {
+      ref: menuRef
+    }, /*#__PURE__*/React.createElement(ActionsMenuBody, {
+      toggleState: toggleState,
+      onToggle: onToggle,
+      direction: "right",
+      menuTopPosition: "30px",
+      menuLeftPosition: "0",
+      menuWidth: "120px",
+      customTriggerComponent: /*#__PURE__*/React.createElement(Button, {
+        variant: "ghost",
+        type: "button",
+        iconRight: true,
+        small: true
+      }, "Contact via...", /*#__PURE__*/React.createElement(Icon, {
+        icon: ["fas", "chevron-down"]
+      }))
+    }, /*#__PURE__*/React.createElement(ActionsMenuItem, {
+      href: "#"
+    }, "Email"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
+      href: "#"
+    }, "Phone"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
+      href: "#"
+    }, "MS Teams"), /*#__PURE__*/React.createElement(ActionsMenuItem, {
+      href: "#"
+    }, "Slack")));
+  };
+
+  return /*#__PURE__*/React.createElement(TextButtonActionsMenu, null);
+};
+textButtonActionsMenu.storyName = "Text Button Actions Menu";
 defaultActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -278,4 +339,9 @@ customActionsMenu.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "customActionsMenu"
+};
+textButtonActionsMenu.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "textButtonActionsMenu"
 };

package/es/components/ActionsMenu/index.js

@@ -45,10 +45,14 @@ var Icon = styled.div.withConfig({
 var Menu = styled.div.withConfig({
   displayName: "ActionsMenu__Menu",
   componentId: "yvbni2-3"
-})(["display:inline-block;position:absolute;left:", ";right:", ";top:0;width:auto;z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;overflow:hidden;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], function (props) {
-  return props.direction == "left" ? "auto" : "34px";
+})(["display:inline-block;position:absolute;left:", ";right:", ";top:", ";width:", ";z-index:5;background-color:", ";border-radius:", ";transform:scale(0);opacity:0;pointer-events:none;overflow:hidden;transform-origin:", ";transition:all 300ms;transition-timing-function:cubic-bezier(0,1.4,1,1);", ";"], function (props) {
+  return props.menuLeftPosition ? props.menuLeftPosition : props.direction == "left" ? "auto" : "34px";
 }, function (props) {
-  return props.direction == "left" ? "34px" : "auto";
+  return props.menuRightPosition ? props.menuRightPosition : props.direction == "left" ? "34px" : "auto";
+}, function (props) {
+  return props.menuTopPosition ? props.menuTopPosition : "0";
+}, function (props) {
+  return props.menuWidth ? props.menuWidth : "auto";
 }, function (props) {
   return themeGet("colors.greyDarker")(props);
 }, function (props) {
@@ -113,9 +117,13 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
       onToggle = _ref.onToggle,
       toggleState = _ref.toggleState,
       direction = _ref.direction,
+      menuTopPosition = _ref.menuTopPosition,
+      menuLeftPosition = _ref.menuLeftPosition,
+      menuRightPosition = _ref.menuRightPosition,
+      menuWidth = _ref.menuWidth,
       customTriggerComponent = _ref.customTriggerComponent,
       children = _ref.children,
-      props = _objectWithoutProperties(_ref, ["theme", "onToggle", "toggleState", "direction", "customTriggerComponent", "children"]);
+      props = _objectWithoutProperties(_ref, ["theme", "onToggle", "toggleState", "direction", "menuTopPosition", "menuLeftPosition", "menuRightPosition", "menuWidth", "customTriggerComponent", "children"]);
 
   var triggerBtn = null;
 
@@ -133,7 +141,11 @@ export var ActionsMenuBody = function ActionsMenuBody(_ref) {
 
   var component = /*#__PURE__*/React.createElement(Wrapper, props, triggerBtn, /*#__PURE__*/React.createElement(Menu, {
     isOpen: toggleState,
-    direction: direction
+    direction: direction,
+    menuTopPosition: menuTopPosition,
+    menuLeftPosition: menuLeftPosition,
+    menuRightPosition: menuRightPosition,
+    menuWidth: menuWidth
   }, children));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -143,6 +155,10 @@ ActionsMenuBody.propTypes = {
   onToggle: PropTypes.func.isRequired,
   toggleState: PropTypes.bool.isRequired,
   direction: PropTypes.string,
+  menuTopPosition: PropTypes.string,
+  menuLeftPosition: PropTypes.string,
+  menuRightPosition: PropTypes.string,
+  menuWidth: PropTypes.string,
   customTriggerComponent: PropTypes.node,
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   theme: PropTypes.object
@@ -307,6 +323,34 @@ ActionsMenuBody.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "menuTopPosition": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "menuLeftPosition": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "menuRightPosition": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "menuWidth": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "customTriggerComponent": {
       "type": {
         "name": "node"

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

@@ -147,7 +147,24 @@ export var subtitleContent = function subtitleContent() {
     }, "Scrum Master")))
   }));
 };
-subtitleContent.storyName = "Alternative subtitle content";
+subtitleContent.storyName = "Custom subtitle content";
+export var localTime = function localTime() {
+  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"),
+    localTime: "12:03pm local time"
+  }));
+};
+localTime.storyName = "With local time";
 export var inverted = function inverted() {
   return /*#__PURE__*/React.createElement(Box, {
     bg: "greyDarkest",
@@ -324,6 +341,11 @@ subtitleContent.__docgenInfo = {
   "methods": [],
   "displayName": "subtitleContent"
 };
+localTime.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "localTime"
+};
 inverted.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Avatar/index.js

@@ -6,6 +6,8 @@ import { space, layout, variant } from "styled-system";
 import PropTypes from "prop-types";
 import { H3, Text } from "../Typography";
 import Icon from "../Icon";
+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({
@@ -13,6 +15,7 @@ var AvatarWrapper = styled("div").withConfig({
   componentId: "sc-1wtet2j-0"
 })(layout, space, css({
   boxSizing: "border-box",
+  position: "relative",
   display: "flex",
   alignItems: "center"
 }), function (props) {
@@ -269,6 +272,10 @@ var Subtitle = styled(Text).withConfig({
     }
   });
 });
+var LocalTime = styled(Popover).withConfig({
+  displayName: "Avatar__LocalTime",
+  componentId: "sc-1wtet2j-6"
+})(["position:absolute;top:0;left:0;"]);
 
 var Avatar = function Avatar(_ref) {
   var sizing = _ref.sizing,
@@ -280,10 +287,11 @@ var Avatar = function Avatar(_ref) {
       type = _ref.type,
       theme = _ref.theme,
       shape = _ref.shape,
+      localTime = _ref.localTime,
       _ref$uppercase = _ref.uppercase,
       uppercase = _ref$uppercase === void 0 ? true : _ref$uppercase,
       whiteInitials = _ref.whiteInitials,
-      props = _objectWithoutProperties(_ref, ["sizing", "image", "initials", "title", "subtitle", "subtitleContent", "type", "theme", "shape", "uppercase", "whiteInitials"]);
+      props = _objectWithoutProperties(_ref, ["sizing", "image", "initials", "title", "subtitle", "subtitleContent", "type", "theme", "shape", "localTime", "uppercase", "whiteInitials"]);
 
   var hasTitle = !!title;
   var hasSubtitle = !!subtitle;
@@ -321,7 +329,19 @@ var Avatar = function Avatar(_ref) {
   }, title), hasSubtitle && /*#__PURE__*/React.createElement(Subtitle, {
     type: type,
     sizing: sizing
-  }, subtitle), hasSubtitleContent && subtitleContent));
+  }, subtitle), hasSubtitleContent && subtitleContent), localTime && /*#__PURE__*/React.createElement(LocalTime, {
+    direction: "topRight",
+    textAlign: "center",
+    width: "130px",
+    text: localTime
+  }, /*#__PURE__*/React.createElement(StatusDot, {
+    variant: "secondary",
+    icon: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "clock"],
+    color: "white",
+    transform: "grow-2"
+  }))));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
   }, component) : component;
@@ -358,6 +378,9 @@ Avatar.propTypes = {
   /** Specifies subtitle / role */
   subtitle: PropTypes.string,
 
+  /** Specifies local time */
+  localTime: PropTypes.string,
+
   /** Specifies the colour theme */
   theme: PropTypes.object
 };
@@ -485,6 +508,13 @@ Avatar.__docgenInfo = {
       "required": false,
       "description": "Specifies subtitle / role"
     },
+    "localTime": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Specifies local time"
+    },
     "theme": {
       "type": {
         "name": "object"

package/es/components/Header/index.js

@@ -571,7 +571,8 @@ export default function Header(_ref) {
     variant: variant
   }, appName), currentWorkspace && /*#__PURE__*/React.createElement(Small, {
     color: "white",
-    fontSize: "0"
+    fontSize: "0",
+    display: ["none", "none", "none", "block"]
   }, currentWorkspace))), /*#__PURE__*/React.createElement(Spacer, {
     ml: 4
   }, children), searchComponent && /*#__PURE__*/React.createElement(SearchContainer, null, searchComponent), /*#__PURE__*/React.createElement(Flex, {

package/package.json

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