orcs-design-system 2.0.85 → 2.0.87

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

@@ -329,10 +329,13 @@ export default function Header(_ref) {
       dataTestId = _ref.dataTestId,
       theme = _ref.theme,
       variant = _ref.variant,
-      themeSwitcherContent = _ref.themeSwitcherContent;
+      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,
@@ -355,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"
@@ -401,8 +404,13 @@ export default function Header(_ref) {
     pt: "s",
     pb: "r",
     display: "block"
-  }, "Switch theme:"), themeSwitcherContent))), /*#__PURE__*/React.createElement(Overlay, {
-    htmlFor: "mobileMenuToggle"
+  }, "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
@@ -455,13 +463,26 @@ Header.propTypes = {
   dataTestId: PropTypes.string,
 
   /** Theme related props **/
-  themeSwitcherContent: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)])
+  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"
@@ -625,6 +646,21 @@ Header.__docgenInfo = {
       },
       "required": false,
       "description": "Theme related props *"
+    },
+    "workspaceSwitcherContent": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "node"
+        }, {
+          "name": "arrayOf",
+          "value": {
+            "name": "node"
+          }
+        }]
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

package/es/components/Tag/index.js

@@ -41,9 +41,13 @@ var TagValue = styled.button.withConfig({
 }, function (props) {
   return themeGet("shadows.thinOutline")(props) + " " + themeGet("colors.primary30")(props);
 });
+var TagValueText = styled.div.withConfig({
+  displayName: "Tag__TagValueText",
+  componentId: "sc-1dh2aa8-2"
+})(["max-width:40ch;overflow:hidden;text-overflow:ellipsis;"]);
 var TagEdit = styled(TagValue).withConfig({
   displayName: "Tag__TagEdit",
-  componentId: "sc-1dh2aa8-2"
+  componentId: "sc-1dh2aa8-3"
 })(["border-radius:", ";padding:", ";&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
   return props.showRemove ? "0" : "0 15px 15px 0";
 }, function (props) {
@@ -57,7 +61,7 @@ var TagEdit = styled(TagValue).withConfig({
 });
 var TagRemove = styled(TagValue).withConfig({
   displayName: "Tag__TagRemove",
-  componentId: "sc-1dh2aa8-3"
+  componentId: "sc-1dh2aa8-4"
 })(["border-radius:0 15px 15px 0;padding:2px 10px 5px 9px;&:focus{z-index:2;box-shadow:-0.5px 0 0 3.5px ", ";}", ""], function (props) {
   return themeGet("colors.primary30")(props);
 }, function (props) {
@@ -65,7 +69,7 @@ var TagRemove = styled(TagValue).withConfig({
 });
 var TagType = styled.div.withConfig({
   displayName: "Tag__TagType",
-  componentId: "sc-1dh2aa8-4"
+  componentId: "sc-1dh2aa8-5"
 })(["text-transform:uppercase;margin-left:", ";padding:3px;line-height:1;border-radius:", ";font-size:", ";background-color:", ";color:", ";"], function (props) {
   return themeGet("space.s")(props);
 }, function (props) {
@@ -102,7 +106,7 @@ export default function Tag(_ref) {
     showEdit: showEdit,
     showRemove: showRemove,
     onClick: onSelect
-  }, children, tagType ? /*#__PURE__*/React.createElement(TagType, {
+  }, /*#__PURE__*/React.createElement(TagValueText, null, children), tagType ? /*#__PURE__*/React.createElement(TagType, {
     selected: selected,
     disabled: disabled
   }, tagType) : null), showEdit ? /*#__PURE__*/React.createElement(TagEdit, {

package/package.json

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