orcs-design-system 2.0.99 → 2.0.100

package/es/components/Avatar/index.js

@@ -68,27 +68,29 @@ var Image = styled("img").withConfig({
   componentId: "sc-1wtet2j-2"
 })(function (props) {
   return css({
-    width: "46px",
-    height: "46px",
+    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%"
   });
-}, variant({
-  prop: "sizing",
-  variants: {
-    small: {
-      width: "38px",
-      height: "38px"
-    },
-    large: {
-      width: "80px",
-      height: "80px"
+}, 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)
+      }
     }
-  }
-}), function (props) {
+  });
+}, function (props) {
   return variant({
     prop: "shape",
     variants: {
@@ -111,8 +113,8 @@ var Shape = styled("div").withConfig({
   componentId: "sc-1wtet2j-3"
 })(function (props) {
   return css({
-    width: "46px",
-    height: "46px",
+    width: themeGet("appScale.avatarDefault")(props),
+    height: themeGet("appScale.avatarDefault")(props),
     fontWeight: themeGet("fontWeights.2")(props),
     flex: "0 0 auto",
     backgroundColor: themeGet("colors.greyLighter")(props),
@@ -133,20 +135,22 @@ var Shape = styled("div").withConfig({
       color: themeGet("colors.white")(props)
     }
   });
-}, variant({
-  prop: "sizing",
-  variants: {
-    small: {
-      width: "38px",
-      height: "38px"
-    },
-    large: {
-      width: "80px",
-      height: "80px"
-    },
-    "default": {}
-  }
-}), function (props) {
+}, 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: {
@@ -197,15 +201,15 @@ var Title = styled(H3).withConfig({
     prop: "sizing",
     variants: {
       small: {
-        fontSize: themeGet("fontSizes.1")(props),
+        fontSize: themeGet("fontSizes.2")(props),
         "> a": {
-          fontSize: themeGet("fontSizes.1")(props)
+          fontSize: themeGet("fontSizes.2")(props)
         },
         "> div > a": {
-          fontSize: themeGet("fontSizes.1")(props)
+          fontSize: themeGet("fontSizes.2")(props)
         },
         "> div > div > a": {
-          fontSize: themeGet("fontSizes.1")(props)
+          fontSize: themeGet("fontSizes.2")(props)
         }
       },
       large: {

package/es/components/Header/Header.stories.js

@@ -8,6 +8,7 @@ import { Small } from "../Typography";
 import TextInput from "../TextInput";
 import mdx from "./Header.mdx";
 import Select from "../Select";
+import Box from "../Box";
 export default {
   title: "Components/Header",
   parameters: {
@@ -15,6 +16,11 @@ export default {
       page: mdx
     }
   },
+  decorators: [function (storyFn) {
+    return /*#__PURE__*/React.createElement(Box, {
+      height: "500px"
+    }, storyFn());
+  }],
   component: Header
 };
 export var defaultHeader = function defaultHeader() {
@@ -30,17 +36,6 @@ export var defaultHeader = function defaultHeader() {
       icon: ["fas", "cog"],
       mr: "s"
     }), "Settings"),
-    internalAppSwitcherContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#",
-      target: "_blank"
-    }, "App 2 Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of other app in suite")), /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#",
-      target: "_blank"
-    }, "App 3 Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of other app in suite"))),
-    externalAppSwitcherContent: /*#__PURE__*/React.createElement(StyledLink, {
-      href: "#",
-      target: "_blank"
-    }, "External App Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of external 3rd party app")),
     navToggleId: "defaultHeader"
   }, /*#__PURE__*/React.createElement(StyledLink, {
     href: "#",
@@ -79,13 +74,13 @@ export var headerWithSearch = function headerWithSearch() {
 headerWithSearch.storyName = "Alternative Header with search";
 export var headerWithWorkspaceSwitching = function headerWithWorkspaceSwitching() {
   var options = [{
-    label: "A"
+    label: "Workspace A"
   }, {
-    label: "B"
+    label: "Workspace B"
   }]; // eslint-disable-next-line react-hooks/rules-of-hooks
 
   var _useState = useState([{
-    label: "A"
+    label: "Workspace A"
   }]),
       _useState2 = _slicedToArray(_useState, 2),
       selected = _useState2[0],
@@ -95,6 +90,7 @@ export var headerWithWorkspaceSwitching = function headerWithWorkspaceSwitching(
     setSelected(value);
   };
 
+  var currentWorkspace = "Workspace A";
   var select = /*#__PURE__*/React.createElement(Select, {
     id: "WorkspaceSelect",
     "data-testid": "select-workspace-dropdown",
@@ -103,22 +99,33 @@ export var headerWithWorkspaceSwitching = function headerWithWorkspaceSwitching(
     value: selected,
     onChange: onChange,
     height: "30px",
-    padding: "0 8px"
+    padding: "0 8px",
+    inverted: true
   });
+  var internalAppLinks = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(StyledLink, {
+    href: "#",
+    target: "_blank"
+  }, "App 1 Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of other app in suite")), /*#__PURE__*/React.createElement(StyledLink, {
+    href: "#",
+    target: "_blank"
+  }, "App 2 Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of other app in suite")));
+  var externalAppLinks = /*#__PURE__*/React.createElement(StyledLink, {
+    href: "#",
+    target: "_blank"
+  }, "External App Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of external 3rd party app"));
   return /*#__PURE__*/React.createElement(Header, {
     appName: "App Name",
+    currentWorkspace: currentWorkspace,
     userName: "Michael",
     avatarSource: "https://uploads-ssl.webflow.com/5f4852427e784b4cada3e0d0/62f1f587bc47b25676f9ed1d_bw_avatar_adam.png",
     clientInfo: "Tenant: ci2153 Workspace: 20k-v5 [lb5ctx]  UI_Version: 8c315c2 [4412] Backend_Version: dabc261 [3578]",
     logoutFunction: action("clicked-logout"),
     workspaceSwitcherContent: select,
-    navToggleId: "headerWithWorkspaceSwitching"
-  }, /*#__PURE__*/React.createElement(StyledLink, {
-    href: "#",
-    white: true,
-    bold: true,
-    active: true
-  }, "Summary"));
+    navToggleId: "headerWithWorkspaceSwitching",
+    appSwitcher: true,
+    internalAppSwitcherContent: internalAppLinks,
+    externalAppSwitcherContent: externalAppLinks
+  });
 };
 headerWithWorkspaceSwitching.storyName = "Header with workspace switching";
 defaultHeader.__docgenInfo = {

package/es/components/Header/index.js

@@ -1,4 +1,5 @@
-import React from "react";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState, useEffect, useRef } from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider } from "styled-components";
 import { space, layout, variant } from "styled-system";
@@ -42,7 +43,12 @@ var Bar = styled("header").withConfig({
   });
 }, variant({
   variants: {
-    "default": {},
+    "default": {
+      width: "5px",
+      height: "5px",
+      backgroundColor: "#fff",
+      transition: "all 200ms ease-in-out"
+    },
     search: {
       display: "grid",
       gridGap: "r",
@@ -50,28 +56,206 @@ var Bar = styled("header").withConfig({
     }
   }
 }), space);
+var Switcher = styled("button").withConfig({
+  displayName: "Header__Switcher",
+  componentId: "yf04b-1"
+})(css({
+  marginRight: "r",
+  cursor: "pointer",
+  appearance: "none",
+  border: "0",
+  background: "none",
+  padding: "0",
+  display: "grid",
+  gridGap: "3px",
+  gridTemplateRows: "5px 5px 5px",
+  gridTemplateColumns: "5px 5px 5px",
+  "&:hover > div": {
+    backgroundColor: "#0091ea"
+  }
+}));
+var SwitcherTopLeft = styled("div").withConfig({
+  displayName: "Header__SwitcherTopLeft",
+  componentId: "yf04b-2"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherTopMiddle = styled("div").withConfig({
+  displayName: "Header__SwitcherTopMiddle",
+  componentId: "yf04b-3"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherTopRight = styled("div").withConfig({
+  displayName: "Header__SwitcherTopRight",
+  componentId: "yf04b-4"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherMiddleLeft = styled("div").withConfig({
+  displayName: "Header__SwitcherMiddleLeft",
+  componentId: "yf04b-5"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherMiddleMiddle = styled("div").withConfig({
+  displayName: "Header__SwitcherMiddleMiddle",
+  componentId: "yf04b-6"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherMiddleRight = styled("div").withConfig({
+  displayName: "Header__SwitcherMiddleRight",
+  componentId: "yf04b-7"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherBottomLeft = styled("div").withConfig({
+  displayName: "Header__SwitcherBottomLeft",
+  componentId: "yf04b-8"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherBottomMiddle = styled("div").withConfig({
+  displayName: "Header__SwitcherBottomMiddle",
+  componentId: "yf04b-9"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var SwitcherBottomRight = styled("div").withConfig({
+  displayName: "Header__SwitcherBottomRight",
+  componentId: "yf04b-10"
+})(css({
+  width: "5px",
+  height: "5px",
+  backgroundColor: "#fff",
+  transition: "all 200ms ease-in-out"
+}));
+var AppsMenu = styled("div").withConfig({
+  displayName: "Header__AppsMenu",
+  componentId: "yf04b-11"
+})(function (props) {
+  return css({
+    backgroundColor: props.lightAppSwitcher ? "white" : "black",
+    border: props.lightAppSwitcher ? "solid 1px rgba(0, 0, 0, 0.1)" : "none",
+    color: props.lightAppSwitcher ? "black" : "white",
+    width: "260px",
+    display: "inline-block",
+    position: "absolute",
+    cursor: "default",
+    top: "60px",
+    left: "60px",
+    padding: "s",
+    borderRadius: "6px",
+    opacity: "0",
+    pointerEvents: "none",
+    transform: "translate(-10px, -10px)",
+    userSelect: "none",
+    zIndex: "-1",
+    transition: "all 200ms ease-in-out",
+    boxShadow: themeGet("shadows.boxDefault")(props),
+    "[class^='StyledLink'], [class*=' StyledLink']": {
+      color: props.lightAppSwitcher ? themeGet("colors.black")(props) : themeGet("colors.white")(props),
+      display: "block",
+      fontWeight: themeGet("fontWeights.2")(props),
+      padding: "s",
+      borderRadius: themeGet("radii.2")(props),
+      "&:hover, &:focus": {
+        textDecoration: "none",
+        backgroundColor: props.lightAppSwitcher ? themeGet("colors.primaryLightest")(props) : themeGet("colors.primary")(props)
+      }
+    }
+  });
+}, function (props) {
+  return props.isOpen ? css({
+    opacity: "1",
+    userSelect: "default",
+    zIndex: "2",
+    transform: "translate(0, 0)",
+    pointerEvents: "auto"
+  }) : null;
+});
+var WorkspaceSwitcher = styled("div").withConfig({
+  displayName: "Header__WorkspaceSwitcher",
+  componentId: "yf04b-12"
+})(function (props) {
+  return css({
+    borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
+    paddingBottom: "s",
+    "[class^='Small'], [class*=' Small']": {
+      display: "block",
+      fontWeight: themeGet("fontWeights.1")(props)
+    }
+  });
+});
+var InternalAppSwitcher = styled("div").withConfig({
+  displayName: "Header__InternalAppSwitcher",
+  componentId: "yf04b-13"
+})(function (props) {
+  return css({
+    borderBottom: props.lightAppSwitcher ? "solid 1px rgba(0,0,0,0.1)" : "solid 1px rgba(255,255,255,0.3)",
+    paddingBottom: "s",
+    marginTop: "s",
+    "[class^='Small'], [class*=' Small']": {
+      display: "block",
+      fontWeight: themeGet("fontWeights.1")(props)
+    }
+  });
+});
+var ExternalAppSwitcher = styled("div").withConfig({
+  displayName: "Header__ExternalAppSwitcher",
+  componentId: "yf04b-14"
+})(function (props) {
+  return css({
+    marginTop: "s",
+    "[class^='Small'], [class*=' Small']": {
+      display: "block",
+      fontWeight: themeGet("fontWeights.1")(props)
+    }
+  });
+});
 var AppName = styled("div").withConfig({
   displayName: "Header__AppName",
-  componentId: "yf04b-1"
+  componentId: "yf04b-15"
 })(function (props) {
   return css({
-    height: themeGet("appScale.navBarSize")(props),
     display: "flex",
     alignItems: "center",
     fontSize: themeGet("fontSizes.3")(props),
-    pr: 4,
-    color: themeGet("colors.white")(props),
-    borderRightStyle: "solid",
-    borderRightColor: "white20",
-    borderRightWidth: 1,
-    "a[class^='StyledLink'], a[class*=' StyledLink']": {
-      display: "flex",
-      alignItems: "center"
-    }
+    color: themeGet("colors.white")(props)
   });
 }, variant({
   variants: {
-    "default": {},
+    "default": {
+      width: "5px",
+      height: "5px",
+      backgroundColor: "#fff",
+      transition: "all 200ms ease-in-out"
+    },
     search: {
       border: "none",
       pr: "0"
@@ -80,7 +264,7 @@ var AppName = styled("div").withConfig({
 }), space);
 var SearchContainer = styled("div").withConfig({
   displayName: "Header__SearchContainer",
-  componentId: "yf04b-2"
+  componentId: "yf04b-16"
 })(css({
   gridColumn: "2 / 4",
   "a[class^='StyledLink'], a[class*=' StyledLink']": {
@@ -89,7 +273,7 @@ var SearchContainer = styled("div").withConfig({
 }), space, layout);
 var MobileMenuToggle = styled("label").withConfig({
   displayName: "Header__MobileMenuToggle",
-  componentId: "yf04b-3"
+  componentId: "yf04b-17"
 })(function (props) {
   return css({
     zIndex: 4,
@@ -113,7 +297,7 @@ var MobileMenuToggle = styled("label").withConfig({
 });
 var Hamburger = styled("span").withConfig({
   displayName: "Header__Hamburger",
-  componentId: "yf04b-4"
+  componentId: "yf04b-18"
 })(function (props) {
   return css({
     "::before": {
@@ -155,7 +339,7 @@ var Hamburger = styled("span").withConfig({
 });
 var MobileNavToggle = styled("input").withConfig({
   displayName: "Header__MobileNavToggle",
-  componentId: "yf04b-5"
+  componentId: "yf04b-19"
 })(function (props) {
   return css({
     opacity: "0",
@@ -214,7 +398,7 @@ var MobileNavToggle = styled("input").withConfig({
 });
 var MobileNavMenu = styled("div").withConfig({
   displayName: "Header__MobileNavMenu",
-  componentId: "yf04b-6"
+  componentId: "yf04b-20"
 })(function (props) {
   return css({
     position: "fixed",
@@ -239,39 +423,9 @@ var MobileNavMenu = styled("div").withConfig({
     }
   });
 });
-var InternalAppSwitcher = styled("div").withConfig({
-  displayName: "Header__InternalAppSwitcher",
-  componentId: "yf04b-7"
-})(function (props) {
-  return css({
-    borderTop: "solid 1px rgba(255,255,255,0.3)",
-    paddingTop: "s",
-    marginTop: "s",
-    "[class^='Small'], [class*=' Small']": {
-      display: "block",
-      fontWeight: themeGet("fontWeights.1")(props),
-      marginTop: "xs"
-    }
-  });
-});
-var ExternalAppSwitcher = styled("div").withConfig({
-  displayName: "Header__ExternalAppSwitcher",
-  componentId: "yf04b-8"
-})(function (props) {
-  return css({
-    borderTop: "solid 1px rgba(255,255,255,0.3)",
-    paddingTop: "s",
-    marginTop: "s",
-    "[class^='Small'], [class*=' Small']": {
-      display: "block",
-      fontWeight: themeGet("fontWeights.1")(props),
-      marginTop: "xs"
-    }
-  });
-});
 var Theme = styled("div").withConfig({
   displayName: "Header__Theme",
-  componentId: "yf04b-9"
+  componentId: "yf04b-21"
 })(function (props) {
   return css({
     borderTop: "solid 1px rgba(255,255,255,0.3)",
@@ -287,14 +441,14 @@ var Theme = styled("div").withConfig({
 });
 var RightAligned = styled("div").withConfig({
   displayName: "Header__RightAligned",
-  componentId: "yf04b-10"
+  componentId: "yf04b-22"
 })(css({
   marginLeft: "auto",
   marginRight: "r"
 }));
 var Overlay = styled("label").withConfig({
   displayName: "Header__Overlay",
-  componentId: "yf04b-11"
+  componentId: "yf04b-23"
 })(function (props) {
   return css({
     position: "fixed",
@@ -332,7 +486,51 @@ export default function Header(_ref) {
       themeSwitcherContent = _ref.themeSwitcherContent,
       workspaceSwitcherContent = _ref.workspaceSwitcherContent,
       _ref$navToggleId = _ref.navToggleId,
-      navToggleId = _ref$navToggleId === void 0 ? "mobileMenuToggle" : _ref$navToggleId;
+      navToggleId = _ref$navToggleId === void 0 ? "mobileMenuToggle" : _ref$navToggleId,
+      currentWorkspace = _ref.currentWorkspace,
+      logo = _ref.logo,
+      appSwitcher = _ref.appSwitcher,
+      lightAppSwitcher = _ref.lightAppSwitcher;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      toggleState = _useState2[0],
+      setToggle = _useState2[1];
+
+  var switcherRef = useRef();
+  var menuRef = useRef();
+
+  var closeMenu = function closeMenu() {
+    setToggle(false);
+  };
+
+  useEffect(function () {
+    if (!toggleState) {
+      return;
+    }
+
+    var handleClicked = function handleClicked(event) {
+      // As the event listener is attached in capture phase, need to do this make sure the sate change are after react event cycle.
+      if (menuRef.current && !menuRef.current.contains(event.target) && switcherRef.current && !switcherRef.current.contains(event.target)) {
+        closeMenu();
+      }
+    }; // handle click to hide menu
+    // If any of the actions are using stopPropagation(), the event will stop in the react mounting root.
+    // So use capture phase to detect anything clicked.
+
+
+    document.addEventListener("click", handleClicked, true);
+    return function () {
+      // If menu closed, unregister event listener to prevent memory leaks
+      document.removeEventListener("click", handleClicked, true);
+    };
+  }, [toggleState, switcherRef]);
+
+  var onToggle = function onToggle(e) {
+    e.stopPropagation();
+    setToggle(!toggleState);
+  };
+
   var component = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileNavToggle, {
     type: "checkbox",
     id: navToggleId
@@ -340,9 +538,41 @@ export default function Header(_ref) {
     theme: theme,
     dataTestId: dataTestId,
     variant: variant
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center"
+  }, appSwitcher && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Switcher, {
+    title: "Switch to...",
+    onClick: onToggle,
+    ref: switcherRef
+  }, /*#__PURE__*/React.createElement(SwitcherTopLeft, null), /*#__PURE__*/React.createElement(SwitcherTopMiddle, null), /*#__PURE__*/React.createElement(SwitcherTopRight, null), /*#__PURE__*/React.createElement(SwitcherMiddleLeft, null), /*#__PURE__*/React.createElement(SwitcherMiddleMiddle, null), /*#__PURE__*/React.createElement(SwitcherMiddleRight, null), /*#__PURE__*/React.createElement(SwitcherBottomLeft, null), /*#__PURE__*/React.createElement(SwitcherBottomMiddle, null), /*#__PURE__*/React.createElement(SwitcherBottomRight, null)), /*#__PURE__*/React.createElement(AppsMenu, {
+    lightAppSwitcher: lightAppSwitcher,
+    isOpen: toggleState,
+    ref: menuRef
+  }, workspaceSwitcherContent && /*#__PURE__*/React.createElement(WorkspaceSwitcher, null, /*#__PURE__*/React.createElement(Small, {
+    color: lightAppSwitcher ? "black60" : "white60",
+    pb: "s",
+    display: "block"
+  }, "Change workspace:"), workspaceSwitcherContent), internalAppSwitcherContent && /*#__PURE__*/React.createElement(InternalAppSwitcher, {
+    lightAppSwitcher: lightAppSwitcher
+  }, /*#__PURE__*/React.createElement(Small, {
+    color: lightAppSwitcher ? "black60" : "white60",
+    pb: "xs",
+    display: "block"
+  }, "Switch to:"), internalAppSwitcherContent), externalAppSwitcherContent && /*#__PURE__*/React.createElement(ExternalAppSwitcher, {
+    lightAppSwitcher: lightAppSwitcher
+  }, /*#__PURE__*/React.createElement(Small, {
+    color: lightAppSwitcher ? "black60" : "white60",
+    pb: "xs",
+    display: "block"
+  }, "External apps:"), externalAppSwitcherContent))), logo && /*#__PURE__*/React.createElement(FlexItem, null, logo), /*#__PURE__*/React.createElement(Flex, {
+    flexDirection: "column",
+    justifyContent: "center"
   }, /*#__PURE__*/React.createElement(AppName, {
     variant: variant
-  }, appName), /*#__PURE__*/React.createElement(Spacer, {
+  }, appName), currentWorkspace && /*#__PURE__*/React.createElement(Small, {
+    color: "white",
+    fontSize: "0"
+  }, currentWorkspace))), /*#__PURE__*/React.createElement(Spacer, {
     ml: 4
   }, children), searchComponent && /*#__PURE__*/React.createElement(SearchContainer, null, searchComponent), /*#__PURE__*/React.createElement(Flex, {
     alignItems: "center",
@@ -350,7 +580,7 @@ export default function Header(_ref) {
   }, rightAlignedContent && /*#__PURE__*/React.createElement(RightAligned, null, rightAlignedContent), /*#__PURE__*/React.createElement(FlexItem, {
     flex: "1 0 auto",
     mr: "r",
-    display: ["none", "none", "none", "flex", "flex"]
+    display: ["none", "none", "none", "none", "flex"]
   }, /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
     sizing: "small",
@@ -371,7 +601,7 @@ export default function Header(_ref) {
     pt: "s",
     pb: "r",
     mb: "s",
-    display: ["block", "block", "block", "none", "none"]
+    display: ["block", "block", "block", "block", "none"]
   }, /*#__PURE__*/React.createElement(Avatar, {
     type: "inverted",
     sizing: "small",
@@ -389,27 +619,12 @@ export default function Header(_ref) {
     icon: ["fas", "lock"],
     colour: "white",
     mr: "s"
-  }), "Logout"), internalAppSwitcherContent && /*#__PURE__*/React.createElement(InternalAppSwitcher, null, /*#__PURE__*/React.createElement(Small, {
-    color: "white60",
-    px: "r",
-    py: "s",
-    display: "block"
-  }, "Switch to:"), internalAppSwitcherContent), externalAppSwitcherContent && /*#__PURE__*/React.createElement(ExternalAppSwitcher, null, /*#__PURE__*/React.createElement(Small, {
-    color: "white60",
-    px: "r",
-    py: "s",
-    display: "block"
-  }, "External apps:"), externalAppSwitcherContent), themeSwitcherContent && /*#__PURE__*/React.createElement(Theme, null, /*#__PURE__*/React.createElement(Small, {
-    color: "white60",
-    pt: "s",
-    pb: "r",
-    display: "block"
-  }, "Switch theme:"), themeSwitcherContent), workspaceSwitcherContent && /*#__PURE__*/React.createElement(Theme, null, /*#__PURE__*/React.createElement(Small, {
+  }), "Logout"), themeSwitcherContent && /*#__PURE__*/React.createElement(Theme, null, /*#__PURE__*/React.createElement(Small, {
     color: "white60",
     pt: "s",
     pb: "r",
     display: "block"
-  }, "Change workspace:"), workspaceSwitcherContent))), /*#__PURE__*/React.createElement(Overlay, {
+  }, "Switch theme:"), themeSwitcherContent))), /*#__PURE__*/React.createElement(Overlay, {
     htmlFor: navToggleId
   }));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
@@ -417,9 +632,15 @@ export default function Header(_ref) {
   }, component) : component;
 }
 Header.propTypes = {
+  /** Logo for app. Preferably an svg logo */
+  logo: PropTypes.node,
+
   /** Text for app name. Can be a plain text string or an svg logo */
   appName: PropTypes.node,
 
+  /** Current active workspace name. Can be a plain text string or a component */
+  currentWorkspace: PropTypes.node,
+
   /** Text for username. */
   userName: PropTypes.node,
 
@@ -441,6 +662,12 @@ Header.propTypes = {
   /** Applies the chosen theme to the entire header. */
   theme: PropTypes.object,
 
+  /** Specifies whether the app switcher should exist or not */
+  appSwitcher: PropTypes.bool,
+
+  /** Changes the app switcher to light theme */
+  lightAppSwitcher: PropTypes.bool,
+
   /** Navigation links are rendered as child components. */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
 
@@ -483,6 +710,13 @@ Header.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "logo": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Logo for app. Preferably an svg logo"
+    },
     "appName": {
       "type": {
         "name": "node"
@@ -490,6 +724,13 @@ Header.__docgenInfo = {
       "required": false,
       "description": "Text for app name. Can be a plain text string or an svg logo"
     },
+    "currentWorkspace": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Current active workspace name. Can be a plain text string or a component"
+    },
     "userName": {
       "type": {
         "name": "node"
@@ -539,6 +780,20 @@ Header.__docgenInfo = {
       "required": false,
       "description": "Applies the chosen theme to the entire header."
     },
+    "appSwitcher": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Specifies whether the app switcher should exist or not"
+    },
+    "lightAppSwitcher": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Changes the app switcher to light theme"
+    },
     "children": {
       "type": {
         "name": "union",

package/es/components/Select/Select.stories.js

@@ -179,13 +179,22 @@ export var withSelectedValueSelect = function withSelectedValueSelect() {
   });
 };
 withSelectedValueSelect.storyName = "With Selected Value";
-export var withCreateableSelect = function withCreateableSelect() {
+export var withCreatableSelect = function withCreatableSelect() {
   return /*#__PURE__*/React.createElement(Select, {
     options: options,
-    selectType: "createable",
+    selectType: "creatable",
     isMulti: true
   });
 };
+withCreatableSelect.storyName = "With Creatable";
+export var withAsyncSelect = function withAsyncSelect() {
+  return /*#__PURE__*/React.createElement(Select, {
+    defaultOptions: options,
+    selectType: "async",
+    isMulti: true
+  });
+};
+withAsyncSelect.storyName = "With Async";
 export var withGroupedOptions = function withGroupedOptions() {
   return /*#__PURE__*/React.createElement(Select, {
     options: groupedOptions,
@@ -193,7 +202,7 @@ export var withGroupedOptions = function withGroupedOptions() {
     menuIsOpen: true
   });
 };
-withCreateableSelect.storyName = "With Createable";
+withGroupedOptions.storyName = "With Grouped Options";
 defaultSelect.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -229,10 +238,15 @@ withSelectedValueSelect.__docgenInfo = {
   "methods": [],
   "displayName": "withSelectedValueSelect"
 };
-withCreateableSelect.__docgenInfo = {
+withCreatableSelect.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "withCreatableSelect"
+};
+withAsyncSelect.__docgenInfo = {
   "description": "",
   "methods": [],
-  "displayName": "withCreateableSelect"
+  "displayName": "withAsyncSelect"
 };
 withGroupedOptions.__docgenInfo = {
   "description": "",

package/es/components/Select/index.js

@@ -9,7 +9,8 @@ import React, { forwardRef } from "react";
 import PropTypes from "prop-types";
 import styled, { ThemeProvider, useTheme } from "styled-components";
 import { default as ReactSelect } from "react-select";
-import { default as ReactCreateableSelect } from "react-select/creatable";
+import AsyncSelect from "react-select/async";
+import CreatableSelect from "react-select/creatable";
 import { space, layout, compose } from "styled-system";
 import { css } from "@styled-system/css";
 import shouldForwardProp from "@styled-system/should-forward-prop";
@@ -117,7 +118,9 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     control: function control(provided, state) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        minHeight: props.height ? props.height : "38px",
+        minHeight: props.height ? props.height : themeGet("appScale.inputHeightDefault")({
+          theme: theme
+        }),
         boxShadow: "none",
         opacity: state.isDisabled ? 0.7 : 1,
         "&:hover": {
@@ -145,7 +148,7 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
         borderRadius: themeGet("radii.2")({
           theme: theme
         }),
-        fontSize: themeGet("fontSizes.2")({
+        fontSize: themeGet("fontSizes.1")({
           theme: theme
         })
       });
@@ -165,7 +168,8 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     },
     valueContainer: function valueContainer(provided) {
       return _objectSpread(_objectSpread({}, provided), {}, {
-        padding: props.padding ? props.padding : "2px 4px"
+        padding: props.padding ? props.padding : "2px 4px",
+        overflow: "visible"
       });
     },
     clearIndicator: function clearIndicator(provided, state) {
@@ -329,7 +333,16 @@ var Select = /*#__PURE__*/forwardRef(function (props, ref) {
     inverted: props.inverted,
     bold: props.bold,
     htmlFor: props.inputId
-  }, props.label), props.selectType === "createable" ? /*#__PURE__*/React.createElement(ReactCreateableSelect, _extends({
+  }, props.label), props.selectType === "creatable" ? /*#__PURE__*/React.createElement(CreatableSelect, _extends({
+    ref: ref,
+    styles: customStyles,
+    theme: theme,
+    inputId: props.inputId,
+    inverted: props.inverted,
+    isMulti: props.isMulti,
+    classNamePrefix: props.classNamePrefix,
+    onChange: props.onChange
+  }, props)) : props.selectType === "async" ? /*#__PURE__*/React.createElement(AsyncSelect, _extends({
     ref: ref,
     styles: customStyles,
     theme: theme,
@@ -393,7 +406,7 @@ Select.propTypes = {
   theme: PropTypes.object,
 
   /** Specify if you want react-select createable option */
-  selectType: PropTypes.oneOf(["default", "createable"]),
+  selectType: PropTypes.oneOf(["default", "createable", "async"]),
 
   /** Specify if you want to overwrite existing customStyles */
   updateStyles: PropTypes.func
@@ -421,6 +434,9 @@ Select.__docgenInfo = {
         }, {
           "value": "\"createable\"",
           "computed": false
+        }, {
+          "value": "\"async\"",
+          "computed": false
         }]
       },
       "required": false,

package/es/components/StyledLink/index.js

@@ -185,9 +185,10 @@ var StyledLink = function StyledLink(_ref) {
       bold = _ref.bold,
       theme = _ref.theme,
       to = _ref.to,
+      block = _ref.block,
       target = _ref.target,
       button = _ref.button,
-      props = _objectWithoutProperties(_ref, ["children", "active", "white", "bold", "theme", "to", "target", "button"]);
+      props = _objectWithoutProperties(_ref, ["children", "active", "white", "bold", "theme", "to", "block", "target", "button"]);
 
   if (button) {
     return to ? /*#__PURE__*/React.createElement(ReactButtonLink, _extends({
@@ -213,6 +214,7 @@ var StyledLink = function StyledLink(_ref) {
     white: white,
     bold: bold,
     to: to,
+    block: block,
     target: target
   }, props), children) : /*#__PURE__*/React.createElement(Hyperlink, _extends({
     theme: theme,
@@ -220,6 +222,7 @@ var StyledLink = function StyledLink(_ref) {
     white: white,
     bold: bold,
     to: to,
+    block: block,
     target: target
   }, props), children);
 };
@@ -231,6 +234,9 @@ StyledLink.propTypes = {
   /** Designates the active link, eg if in a navigation menu, it is the current screen */
   active: PropTypes.bool,
 
+  /** Specifies if link is rendered as display:block */
+  block: PropTypes.bool,
+
   /** Renders a white link (useful for dark backgrounds) */
   white: PropTypes.bool,
 
@@ -271,6 +277,13 @@ StyledLink.__docgenInfo = {
       "required": false,
       "description": "Designates the active link, eg if in a navigation menu, it is the current screen"
     },
+    "block": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Specifies if link is rendered as display:block"
+    },
     "white": {
       "type": {
         "name": "bool"

package/es/components/TextInput/index.js

@@ -24,7 +24,19 @@ var IconWrapper = styled.label.withConfig({
   displayName: "TextInput__IconWrapper",
   componentId: "shde0o-0"
 })(["svg{opacity:0.4;position:absolute;}", ";"], function (props) {
-  return props.iconLeft && !props.floating ? css(["svg{bottom:12px;left:12px;}"]) : props.iconLeft && props.floating ? css(["svg{bottom:22px;left:12px;}"]) : props.iconRight && !props.floating ? css(["svg{right:12px;bottom:12px;}"]) : props.iconRight && props.floating ? css(["svg{right:12px;bottom:22px;}"]) : css([""]);
+  return props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], function (props) {
+    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
+    return "calc(".concat(inputHeight, " / 3 - 1px)");
+  }) : props.iconLeft && props.floating ? css(["svg{bottom:", ";left:12px;}"], function (props) {
+    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
+    return "calc(".concat(inputHeight, " / 2 + 3px)");
+  }) : props.iconRight && !props.floating ? css(["svg{bottom:", ";right:12px;}"], function (props) {
+    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
+    return "calc(".concat(inputHeight, " / 3 - 1px)");
+  }) : props.iconRight && props.floating ? css(["svg{bottom:", ";right:12px;}"], function (props) {
+    var inputHeight = themeGet("appScale.inputHeightDefault")(props);
+    return "calc(".concat(inputHeight, " / 2 + 3px)");
+  }) : css([""]);
 });
 var InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], function (props) {
   return themeGet("fontSizes.2")(props);
@@ -39,10 +51,10 @@ var InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-ap
 }, function (props) {
   return props.fullWidth ? "100%" : "auto";
 }, function (props) {
-  return props.floating ? "58px" : "40px";
+  return props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props);
 }, function (props) {
-  var left = props.iconLeft ? 40 : 12;
-  var right = props.iconRight ? 40 : 12;
+  var left = props.iconLeft ? 36 : 10;
+  var right = props.iconRight ? 36 : 10;
   var top = props.floating ? 25 : 5;
   var bottom = 6;
   return "".concat(top, "px ").concat(right, "px ").concat(bottom, "px ").concat(left, "px");
@@ -93,8 +105,11 @@ var Label = styled.label.withConfig({
 }, function (props) {
   return props.inverted ? themeGet("colors.white")(props) : props.valid ? themeGet("colors.successDark")(props) : props.invalid ? themeGet("colors.dangerDark")(props) : themeGet("colors.greyDarkest")(props);
 }, function (props) {
-  return props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:20px;color:", ";"], function (props) {
-    return props.iconLeft ? "41px" : "13px";
+  return props.floating ? css(["padding-left:", ";cursor:text;position:absolute;top:", ";color:", ";"], function (props) {
+    return props.iconLeft ? "37px" : "11px";
+  }, function (props) {
+    var inputHeight = themeGet("appScale.inputHeightLarge")(props);
+    return "calc(".concat(inputHeight, " / 3)");
   }, function (props) {
     return props.invalid ? themeGet("colors.dangerDark")(props) : props.valid ? themeGet("colors.successDark")(props) : themeGet("colors.grey")(props);
   }) : css([""]);
@@ -113,7 +128,8 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
       mandatory = props.mandatory,
       iconLeft = props.iconLeft,
       iconRight = props.iconRight,
-      InputStyles = props.InputStyles; // Strip numberProps from props for Input
+      InputStyles = props.InputStyles,
+      height = props.height; // Strip numberProps from props for Input
 
   var numberProps = props.numberProps,
       rest = _objectWithoutProperties(props, ["numberProps"]);
@@ -138,8 +154,11 @@ var TextInput = /*#__PURE__*/React.forwardRef(function (props, ref) {
   }, label) : null, numberProps ? /*#__PURE__*/React.createElement(NumberInput, _extends({
     getInputRef: getNumberInputRef,
     "data-testid": props["data-testid"]
-  }, rest, numberProps)) : /*#__PURE__*/React.createElement(Input, _extends({
+  }, rest, {
+    height: height
+  }, numberProps)) : /*#__PURE__*/React.createElement(Input, _extends({
     "data-testid": props["data-testid"],
+    height: height,
     ref: ref
   }, rest)), label && floating ? /*#__PURE__*/React.createElement(Label, {
     floating: floating,
@@ -172,6 +191,9 @@ TextInput.propTypes = {
   /** Must be used to specify a unique ID. */
   id: PropTypes.string,
 
+  /** Can be used to set a specific height. */
+  height: PropTypes.string,
+
   /** Specifies the text for the label. */
   label: PropTypes.string,
 
@@ -229,6 +251,13 @@ TextInput.__docgenInfo = {
       "required": false,
       "description": "Must be used to specify a unique ID."
     },
+    "height": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Can be used to set a specific height."
+    },
     "label": {
       "type": {
         "name": "string"

package/es/systemThemeCollapsed.js

@@ -5,7 +5,7 @@ export var fonts = {
 };
 export var font = fonts.main;
 export var fontFamilies = fonts;
-export var fontSizes = ["1.1rem", "1.2rem", "1.4rem", "1.6rem", "1.8rem", "2.2rem", "2.6rem", "3.0rem", "3.4rem", "4.6rem", "6.2rem"];
+export var fontSizes = ["1.1rem", "1.2rem", "1.4rem", "1.6rem", "1.8rem", "2.2rem", "2.6rem", "3.0rem", "3.4rem", "4.4rem", "6rem"];
 export var fontWeights = [300, 400, 600];
 export var lineHeights = [1, 1.5, 2]; // Z-AXIS spec
 
@@ -219,11 +219,16 @@ export var mediaQueries = {
 }; // APP-SPECIFIC DIMENSIONS
 
 export var appScale = {
-  navBarSize: "54px",
+  navBarSize: "50px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "450px",
   sidebarMobileHeight: "50vh",
-  mobileNavMenuWidth: "250px"
+  mobileNavMenuWidth: "250px",
+  avatarSmall: "34px",
+  avatarDefault: "40px",
+  avatarLarge: "70px",
+  inputHeightDefault: "32px",
+  inputHeightLarge: "52px"
 };
 export default {
   fonts: fonts,

package/es/systemtheme.js

@@ -222,7 +222,12 @@ export var appScale = {
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "550px",
   sidebarMobileHeight: "50vh",
-  mobileNavMenuWidth: "250px"
+  mobileNavMenuWidth: "250px",
+  avatarSmall: "38px",
+  avatarDefault: "46px",
+  avatarLarge: "80px",
+  inputHeightDefault: "38px",
+  inputHeightLarge: "58px"
 };
 export default {
   fonts: fonts,

package/package.json

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