orcs-design-system 2.0.84 → 2.0.86

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

@@ -1,4 +1,5 @@
-import React from "react";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { useState } from "react";
 import { action } from "@storybook/addon-actions";
 import Header from "../Header";
 import StyledLink from "../StyledLink";
@@ -6,6 +7,7 @@ import Icon from "../Icon";
 import { Small } from "../Typography";
 import TextInput from "../TextInput";
 import mdx from "./Header.mdx";
+import Select from "../Select";
 export default {
   title: "Components/Header",
   parameters: {
@@ -38,7 +40,8 @@ export var defaultHeader = function defaultHeader() {
     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"))
+    }, "External App Name", /*#__PURE__*/React.createElement(Small, null, "This is a description of external 3rd party app")),
+    navToggleId: "defaultHeader"
   }, /*#__PURE__*/React.createElement(StyledLink, {
     href: "#",
     white: true,
@@ -69,10 +72,55 @@ export var headerWithSearch = function headerWithSearch() {
       type: "text",
       placeholder: "Search for...",
       iconRight: ["fas", "search"]
-    })
+    }),
+    navToggleId: "headerWithSearch"
   });
 };
 headerWithSearch.storyName = "Alternative Header with search";
+export var headerWithWorkspaceSwitching = function headerWithWorkspaceSwitching() {
+  var options = [{
+    label: "A"
+  }, {
+    label: "B"
+  }]; // eslint-disable-next-line react-hooks/rules-of-hooks
+
+  var _useState = useState([{
+    label: "A"
+  }]),
+      _useState2 = _slicedToArray(_useState, 2),
+      selected = _useState2[0],
+      setSelected = _useState2[1];
+
+  var onChange = function onChange(value) {
+    setSelected(value);
+  };
+
+  var select = /*#__PURE__*/React.createElement(Select, {
+    id: "WorkspaceSelect",
+    "data-testid": "select-workspace-dropdown",
+    placeholder: "Select a workspace",
+    options: options,
+    value: selected,
+    onChange: onChange,
+    height: "30px",
+    padding: "0 8px"
+  });
+  return /*#__PURE__*/React.createElement(Header, {
+    appName: "App Name",
+    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"));
+};
+headerWithWorkspaceSwitching.storyName = "Header with workspace switching";
 defaultHeader.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -82,4 +130,9 @@ headerWithSearch.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "headerWithSearch"
+};
+headerWithWorkspaceSwitching.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "headerWithWorkspaceSwitching"
 };

package/es/components/Header/index.js

@@ -269,16 +269,32 @@ var ExternalAppSwitcher = styled("div").withConfig({
     }
   });
 });
+var Theme = styled("div").withConfig({
+  displayName: "Header__Theme",
+  componentId: "yf04b-9"
+})(function (props) {
+  return css({
+    borderTop: "solid 1px rgba(255,255,255,0.3)",
+    padding: "r",
+    paddingTop: "s",
+    marginTop: "s",
+    "[class^='Small'], [class*=' Small']": {
+      display: "block",
+      fontWeight: themeGet("fontWeights.1")(props),
+      marginTop: "xs"
+    }
+  });
+});
 var RightAligned = styled("div").withConfig({
   displayName: "Header__RightAligned",
-  componentId: "yf04b-9"
+  componentId: "yf04b-10"
 })(css({
   marginLeft: "auto",
   marginRight: "r"
 }));
 var Overlay = styled("label").withConfig({
   displayName: "Header__Overlay",
-  componentId: "yf04b-10"
+  componentId: "yf04b-11"
 })(function (props) {
   return css({
     position: "fixed",
@@ -312,10 +328,14 @@ export default function Header(_ref) {
       searchComponent = _ref.searchComponent,
       dataTestId = _ref.dataTestId,
       theme = _ref.theme,
-      variant = _ref.variant;
+      variant = _ref.variant,
+      themeSwitcherContent = _ref.themeSwitcherContent,
+      workspaceSwitcherContent = _ref.workspaceSwitcherContent,
+      _ref$navToggleId = _ref.navToggleId,
+      navToggleId = _ref$navToggleId === void 0 ? "mobileMenuToggle" : _ref$navToggleId;
   var component = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(MobileNavToggle, {
     type: "checkbox",
-    id: "mobileMenuToggle"
+    id: navToggleId
   }), /*#__PURE__*/React.createElement(Bar, {
     theme: theme,
     dataTestId: dataTestId,
@@ -338,7 +358,7 @@ export default function Header(_ref) {
     image: avatarSource,
     theme: theme
   })), /*#__PURE__*/React.createElement(MobileMenuToggle, {
-    htmlFor: "mobileMenuToggle",
+    htmlFor: navToggleId,
     theme: theme
   }, /*#__PURE__*/React.createElement(Hamburger, {
     id: "hamburger-menu-icon"
@@ -379,8 +399,18 @@ export default function Header(_ref) {
     px: "r",
     py: "s",
     display: "block"
-  }, "External apps:"), externalAppSwitcherContent))), /*#__PURE__*/React.createElement(Overlay, {
-    htmlFor: "mobileMenuToggle"
+  }, "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, {
+    color: "white60",
+    pt: "s",
+    pb: "r",
+    display: "block"
+  }, "Change workspace:"), workspaceSwitcherContent))), /*#__PURE__*/React.createElement(Overlay, {
+    htmlFor: navToggleId
   }));
   return theme ? /*#__PURE__*/React.createElement(ThemeProvider, {
     theme: theme
@@ -430,13 +460,29 @@ Header.propTypes = {
   variant: PropTypes.oneOf(["search"]),
 
   /** Allows for use of the `data-testid` attribute for testing. */
-  dataTestId: PropTypes.string
+  dataTestId: PropTypes.string,
+
+  /** Theme related props **/
+  themeSwitcherContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  workspaceSwitcherContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
+  navToggleId: PropTypes.string
 };
 Header.__docgenInfo = {
   "description": "Header component for global app navigation.\n\nAt screen sizes less than 1100px the links are instead moved into a mobile menu toggled by a burger icon button to play nice with smaller devices.",
   "methods": [],
   "displayName": "Header",
   "props": {
+    "navToggleId": {
+      "defaultValue": {
+        "value": "\"mobileMenuToggle\"",
+        "computed": false
+      },
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "appName": {
       "type": {
         "name": "node"
@@ -585,6 +631,36 @@ Header.__docgenInfo = {
       },
       "required": false,
       "description": "Allows for use of the `data-testid` attribute for testing."
+    },
+    "themeSwitcherContent": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "node"
+        }, {
+          "name": "arrayOf",
+          "value": {
+            "name": "node"
+          }
+        }]
+      },
+      "required": false,
+      "description": "Theme related props *"
+    },
+    "workspaceSwitcherContent": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "node"
+        }, {
+          "name": "arrayOf",
+          "value": {
+            "name": "node"
+          }
+        }]
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

package/package.json

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