orcs-design-system 3.1.0 → 3.1.2

package/es/components/Divider/Divider.stories.js

@@ -8,7 +8,7 @@ export default {
 };
 export var defaultDivider = function defaultDivider() {
   return /*#__PURE__*/React.createElement(Spacer, {
-    my: "4"
+    my: "r"
   }, /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement(Divider, {
     light: true
   }), /*#__PURE__*/React.createElement(Divider, {
@@ -18,16 +18,42 @@ export var defaultDivider = function defaultDivider() {
     thick: true
   }));
 };
+export var dashDivider = function dashDivider() {
+  return /*#__PURE__*/React.createElement(Spacer, {
+    my: "r"
+  }, /*#__PURE__*/React.createElement(Divider, {
+    dash: true
+  }), /*#__PURE__*/React.createElement(Divider, {
+    light: true,
+    dash: true
+  }), /*#__PURE__*/React.createElement(Divider, {
+    thick: true,
+    dash: true
+  }), /*#__PURE__*/React.createElement(Divider, {
+    light: true,
+    thick: true,
+    dash: true
+  }));
+};
 export var invertedDivider = function invertedDivider() {
   return /*#__PURE__*/React.createElement(Box, {
     bg: "greyDarkest",
     p: "5"
+  }, /*#__PURE__*/React.createElement(Spacer, {
+    my: "r"
   }, /*#__PURE__*/React.createElement(Divider, {
     inverted: true
   }), /*#__PURE__*/React.createElement(Divider, {
     inverted: true,
     thick: true
-  }));
+  }), /*#__PURE__*/React.createElement(Divider, {
+    inverted: true,
+    dash: true
+  }), /*#__PURE__*/React.createElement(Divider, {
+    inverted: true,
+    thick: true,
+    dash: true
+  })));
 };
 export var spanGrid = function spanGrid() {
   return /*#__PURE__*/React.createElement(Divider, {
@@ -39,6 +65,11 @@ defaultDivider.__docgenInfo = {
   "methods": [],
   "displayName": "defaultDivider"
 };
+dashDivider.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "dashDivider"
+};
 invertedDivider.__docgenInfo = {
   "description": "",
   "methods": [],

package/es/components/Divider/index.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["light", "thick", "inverted", "spanGrid", "theme"];
+var _excluded = ["light", "thick", "dash", "inverted", "spanGrid", "theme"];
 import React from "react";
 import styled, { ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
@@ -9,16 +9,19 @@ import { themeGet } from "@styled-system/theme-get";
 var Item = styled.div.withConfig({
   displayName: "Divider__Item",
   componentId: "sc-106mlj-0"
-})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";background-color:", ";"], space, layout, color, function (props) {
+})(["", " ", " ", " display:block;width:100%;height:", ";grid-column:", ";border-bottom:", ";background-color:", ";"], space, layout, color, function (props) {
   return props.thick ? "3px" : "1px";
 }, function (props) {
   return props.spanGrid ? "1 / -1" : "auto";
 }, function (props) {
-  return props.light ? themeGet("colors.black10")(props) : props.inverted ? themeGet("colors.white30")(props) : themeGet("colors.black20")(props);
+  return props.dash && props.thick && props.light ? "dashed 3px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick && props.inverted ? "dashed 3px ".concat(themeGet("colors.white20")(props)) : props.dash && props.inverted ? "dashed 1px ".concat(themeGet("colors.white20")(props)) : props.dash && props.light ? "dashed 1px ".concat(themeGet("colors.black10")(props)) : props.dash && props.thick ? "dashed 3px ".concat(themeGet("colors.black20")(props)) : props.dash ? "dashed 1px ".concat(themeGet("colors.black20")(props)) : "none";
+}, function (props) {
+  return props.dash ? "transparent" : props.inverted ? themeGet("colors.white20")(props) : props.light ? themeGet("colors.black10")(props) : themeGet("colors.black20")(props);
 });
 export default function Divider(_ref) {
   var light = _ref.light,
     thick = _ref.thick,
+    dash = _ref.dash,
     inverted = _ref.inverted,
     spanGrid = _ref.spanGrid,
     theme = _ref.theme,
@@ -26,6 +29,7 @@ export default function Divider(_ref) {
   var component = /*#__PURE__*/React.createElement(Item, _extends({
     light: light,
     thick: thick,
+    dash: dash,
     inverted: inverted,
     spanGrid: spanGrid
   }, props));
@@ -38,6 +42,8 @@ Divider.propTypes = {
   light: PropTypes.bool,
   /** Divider will be 3px instead of 1px */
   thick: PropTypes.bool,
+  /** Divider will have a dashed line instead of solid line */
+  dash: PropTypes.bool,
   /** Divider will be a darker colour more suited for dark backgrounds */
   inverted: PropTypes.bool,
   /** Divider will span all columns when in a grid so it can be used as a row divider */
@@ -64,6 +70,13 @@ Divider.__docgenInfo = {
       },
       "required": false
     },
+    "dash": {
+      "description": "Divider will have a dashed line instead of solid line",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "inverted": {
       "description": "Divider will be a darker colour more suited for dark backgrounds",
       "type": {

package/es/components/SideNav/index.js

@@ -569,7 +569,7 @@ var SideNav = function SideNav(_ref2) {
       activeItem: activeItem,
       handleItemClick: handleItemClick
     });
-  }))), expandedItem !== null && allItems[expandedItem].component ? /*#__PURE__*/React.createElement(SideNavExpanded, {
+  }))), expandedItem !== null && allItems[expandedItem] && allItems[expandedItem].component ? /*#__PURE__*/React.createElement(SideNavExpanded, {
     sideNavHeight: sideNavHeight,
     active: expandedItem === activeItem,
     large: allItems[expandedItem] && allItems[expandedItem].large

package/es/components/TreeNav/TreeNav.stories.js

@@ -0,0 +1,360 @@
+import React from "react";
+import TreeNav from ".";
+export default {
+  title: "Components/TreeNav",
+  component: TreeNav
+};
+var data = [{
+  id: "1",
+  name: "Domains",
+  badgeText: "Domains",
+  badgeColour: "success",
+  children: [{
+    id: "1a",
+    name: "Business",
+    badgeText: "Domain",
+    badgeColour: "success",
+    checkbox: true,
+    children: [{
+      id: "1a1",
+      name: "Capture & Release",
+      badgeText: "Team",
+      badgeColour: "success",
+      checkbox: true
+    }, {
+      id: "1a2",
+      name: "Goonsquad",
+      badgeText: "Team",
+      badgeColour: "success",
+      checkbox: true
+    }, {
+      id: "1a3",
+      name: "Wolfpack",
+      badgeText: "Team",
+      badgeColour: "success",
+      checkbox: true
+    }]
+  }, {
+    id: "1b",
+    name: "Hardware Product",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1b1",
+      name: "Blackhole",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1b2",
+      name: "Marvel",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1b3",
+      name: "Stargazers",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }, {
+    id: "1c",
+    name: "Innovation",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1c1",
+      name: "AI Master Race",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1c2",
+      name: "Constellation",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1c3",
+      name: "Dark Matter",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1c4",
+      name: "Future Space",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1c5",
+      name: "Innovation Lab",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }, {
+    id: "1d",
+    name: "Marketing",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1d1",
+      name: "Community",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1d2",
+      name: "Product",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }, {
+    id: "1e",
+    name: "Operations",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1e1",
+      name: "Backbone",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1e2",
+      name: "Blackops",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }, {
+    id: "1f",
+    name: "Platform",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1f1",
+      name: "Event Horizon",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1f2",
+      name: "Transformers",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1f3",
+      name: "Zeta Squad",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }, {
+    id: "1g",
+    name: "Research & Analysis",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1g1",
+      name: "Alpha Relay",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1g2",
+      name: "Gizmosphere",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }, {
+    id: "1h",
+    name: "Software Product",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1h1",
+      name: "Alphazone",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1h2",
+      name: "Asterism",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1h3",
+      name: "Beta Testers",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1h4",
+      name: "BobRossers",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1h5",
+      name: "Flashdance",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1h3",
+      name: "Matrix",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1h4",
+      name: "Matter",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1h5",
+      name: "The Incredibles",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }, {
+    id: "1i",
+    name: "Support",
+    badgeText: "Domain",
+    badgeColour: "success",
+    children: [{
+      id: "1i1",
+      name: "Customer Support",
+      badgeText: "Team",
+      badgeColour: "success"
+    }, {
+      id: "1i2",
+      name: "Tech Support",
+      badgeText: "Team",
+      badgeColour: "success"
+    }]
+  }]
+}, {
+  id: "2",
+  name: "Capabilities",
+  badgeText: "Capabilities",
+  badgeColour: "secondary",
+  children: [{
+    id: "2a",
+    name: "Analysts",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2b",
+    name: "Astrophysics & Aerospace Engineering",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2c",
+    name: "Consulting",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2d",
+    name: "Customer Success",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2e",
+    name: "Data Engineering",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2f",
+    name: "Design",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2g",
+    name: "DevOps",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2h",
+    name: "Finance",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2i",
+    name: "Hardware Engineering",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2j",
+    name: "Leadership",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2k",
+    name: "Management",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2l",
+    name: "Marketing",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2m",
+    name: "Operations",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2n",
+    name: "People & Culture",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2o",
+    name: "Product Management",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2p",
+    name: "Quality Assurance & Testing",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2q",
+    name: "Recruitment",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2r",
+    name: "Research",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2s",
+    name: "Sales",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2t",
+    name: "Security Engineering",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2u",
+    name: "Software Engineering",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2v",
+    name: "Support",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }, {
+    id: "2w",
+    name: "Systems Engineering",
+    badgeText: "Capability",
+    badgeColour: "secondary"
+  }]
+}, {
+  id: "3",
+  name: "Omega Systems",
+  badgeText: "Contractor",
+  badgeColour: "primary"
+}];
+export var defaultTreeNav = function defaultTreeNav() {
+  return /*#__PURE__*/React.createElement(TreeNav, {
+    data: data,
+    openByDefault: false,
+    width: 400
+  });
+};
+defaultTreeNav.storyName = "Default tree navigation";
+defaultTreeNav.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "defaultTreeNav"
+};

package/es/components/TreeNav/index.js

@@ -0,0 +1,108 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["data"];
+import React from "react";
+import styled from "styled-components";
+import { css } from "@styled-system/css";
+import PropTypes from "prop-types";
+import { themeGet } from "@styled-system/theme-get";
+import Icon from "../Icon";
+import Flex from "../Flex";
+import Badge from "../Badge";
+import Checkbox from "../Checkbox";
+import { Small } from "../Typography";
+import { Tree } from "react-arborist";
+var TreeItemWrapper = styled("div").withConfig({
+  displayName: "TreeNav__TreeItemWrapper",
+  componentId: "sc-13iwmeo-0"
+})(function (props) {
+  return css({
+    padding: "5px",
+    marginRight: "5px",
+    cursor: "pointer",
+    borderRadius: themeGet("radii.2")(props),
+    transition: themeGet("transition.transitionDefault")(props),
+    "&:hover, &:focus": {
+      backgroundColor: themeGet("colors.primary10")(props)
+    }
+  });
+});
+var Node = function Node(_ref) {
+  var node = _ref.node,
+    style = _ref.style,
+    dragHandle = _ref.dragHandle;
+  /* This node instance can do many things. See the API reference. */
+  return /*#__PURE__*/React.createElement(TreeItemWrapper, {
+    style: style,
+    className: "treeitem-wrapper",
+    ref: dragHandle,
+    onClick: function onClick() {
+      return node.toggle();
+    }
+  }, /*#__PURE__*/React.createElement(Flex, {
+    alignItems: "center"
+  }, node.isLeaf ? /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "chevron-down"],
+    title: "Select item",
+    mr: "xs",
+    ml: "s",
+    size: "sm",
+    rotation: 270,
+    color: "transparent"
+  }) : node.isOpen ? /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "chevron-down"],
+    title: "Collapse item",
+    transform: "up-1",
+    mr: "xs",
+    ml: "s",
+    size: "sm"
+  }) : /*#__PURE__*/React.createElement(Icon, {
+    icon: ["fas", "chevron-down"],
+    title: "Expand item",
+    transform: "up-1",
+    mr: "xs",
+    ml: "s",
+    size: "sm",
+    rotation: 270
+  }), node.data.checkbox && /*#__PURE__*/React.createElement(Checkbox, {
+    onChange: node.data.checkboxOnChange
+  }), /*#__PURE__*/React.createElement(Small, null, node.data.name), node.data.badgeText && /*#__PURE__*/React.createElement(Badge, {
+    variant: node.data.badgeColour,
+    ml: "auto"
+  }, node.data.badgeText)));
+};
+Node.propTypes = {
+  isLeaf: PropTypes.bool,
+  data: PropTypes.array
+};
+var TreeNav = function TreeNav(_ref2) {
+  var data = _ref2.data,
+    props = _objectWithoutProperties(_ref2, _excluded);
+  return /*#__PURE__*/React.createElement(Tree, _extends({
+    initialData: data
+  }, props, {
+    overscanCount: 5,
+    rowHeight: 32,
+    indent: 14
+  }), Node);
+};
+TreeNav.propTypes = {
+  data: PropTypes.array
+};
+
+/** @component */
+TreeNav.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "TreeNav",
+  "props": {
+    "data": {
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    }
+  }
+};
+export default TreeNav;

package/es/components.test.js

@@ -1,4 +1,4 @@
 import * as components from ".";
 test("all components exported", function () {
-  expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"Select\",\n      \"SideNav\",\n      \"Sidebar\",\n      \"SidebarClose\",\n      \"SidebarPanel\",\n      \"SidebarPanels\",\n      \"SidebarTab\",\n      \"SidebarTabs\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Tab\",\n      \"TabsContainer\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"Typography\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n    ]\n  ");
+  expect(Object.keys(components)).toMatchInlineSnapshot("\n    Array [\n      \"ActionsMenu\",\n      \"ActionsMenuBody\",\n      \"ActionsMenuHeading\",\n      \"ActionsMenuItem\",\n      \"Avatar\",\n      \"Badge\",\n      \"Box\",\n      \"Button\",\n      \"ButtonGroupContainer\",\n      \"ButtonGroupItem\",\n      \"Card\",\n      \"Checkbox\",\n      \"Code\",\n      \"DatePicker\",\n      \"Divider\",\n      \"Expandable\",\n      \"Flex\",\n      \"FlexItem\",\n      \"GlobalStyles\",\n      \"Grid\",\n      \"GridItem\",\n      \"H1\",\n      \"H2\",\n      \"H3\",\n      \"H4\",\n      \"H5\",\n      \"H6\",\n      \"Header\",\n      \"HeaderSimple\",\n      \"Icon\",\n      \"Loading\",\n      \"Modal\",\n      \"Notification\",\n      \"P\",\n      \"Popover\",\n      \"ProgressBar\",\n      \"Quote\",\n      \"RadioButton\",\n      \"Range\",\n      \"Select\",\n      \"SideNav\",\n      \"Sidebar\",\n      \"SidebarClose\",\n      \"SidebarPanel\",\n      \"SidebarPanels\",\n      \"SidebarTab\",\n      \"SidebarTabs\",\n      \"Small\",\n      \"Spacer\",\n      \"StatusDot\",\n      \"StyledLink\",\n      \"SystemThemeProvider\",\n      \"Tab\",\n      \"TabsContainer\",\n      \"Tag\",\n      \"Text\",\n      \"TextArea\",\n      \"TextInput\",\n      \"Toggle\",\n      \"TreeNav\",\n      \"Typography\",\n      \"getOptionByValue\",\n      \"styleLink\",\n      \"systemThemeCollapsed\",\n      \"systemtheme\",\n    ]\n  ");
 });

package/es/index.js

@@ -41,5 +41,6 @@ export { default as Tag } from "./components/Tag";
 export { default as TextInput } from "./components/TextInput";
 export { default as TextArea } from "./components/TextArea";
 export { default as Toggle } from "./components/Toggle";
+export { default as TreeNav } from "./components/TreeNav";
 export { default as Typography, H1, H2, H3, H4, H5, H6, P, Text, Small, Quote, Code } from "./components/Typography";
 export { default as getOptionByValue } from "./utils/selectUtil";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.1.0",
+  "version": "3.1.2",
   "engines": {
     "node": "18.17.1"
   },
@@ -51,6 +51,7 @@
     "polished": "^3.7.1",
     "prop-types": "^15.6.2",
     "react-app-polyfill": "^2.0.0",
+    "react-arborist": "^3.2.0",
     "react-cool-onclickoutside": "^1.5.9",
     "react-dates": "^21.8.0",
     "react-docgen": "^5.3.0",
@@ -77,7 +78,7 @@
     "@fortawesome/react-fontawesome": "^0.1.14",
     "@mdx-js/loader": "^2.3.0",
     "@mdx-js/react": "^2.3.0",
-    "@storybook/addon-a11y": "^7.3.2",
+    "@storybook/addon-a11y": "^7.5.0",
     "@storybook/addon-actions": "^7.3.2",
     "@storybook/addon-docs": "^7.3.2",
     "@storybook/addon-knobs": "^7.0.2",