orcs-design-system 3.2.47 → 3.2.48

package/es/components/FloatingPanels/FloatingPanels.stories.js

@@ -0,0 +1,80 @@
+import React from "react";
+import FloatingPanels from ".";
+import Box from "../Box";
+import { far } from "@fortawesome/free-regular-svg-icons";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import TextInput from "../TextInput";
+import Toggle from "../Toggle";
+import Spacer from "../Spacer";
+import Badge from "../Badge";
+import { P } from "../Typography";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+library.add(far);
+export default {
+  title: "Components/FloatingPanels",
+  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
+    minHeight: "600px",
+    children: storyFn()
+  })],
+  component: FloatingPanels
+};
+const Properties = () => {
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsxs(Spacer, {
+      mb: "r",
+      children: [/*#__PURE__*/_jsx(Badge, {
+        variant: "secondary",
+        children: "Blah"
+      }), /*#__PURE__*/_jsx(P, {
+        children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      }), /*#__PURE__*/_jsx(Toggle, {
+        id: "toggle1",
+        label: "Group items",
+        small: true
+      }), /*#__PURE__*/_jsx(Toggle, {
+        id: "toggle2",
+        label: "Show teams",
+        small: true
+      })]
+    }), /*#__PURE__*/_jsx(TextInput, {
+      id: "textInput1",
+      type: "text",
+      label: "Full name",
+      placeholder: "E.g. John Smith",
+      my: "20px"
+    }, "textInput1")]
+  });
+};
+const panels = [{
+  id: "view-options",
+  iconName: "eye",
+  title: "View Options",
+  defaultExpanded: true,
+  content: /*#__PURE__*/_jsx(Properties, {})
+}, {
+  id: "properties",
+  iconName: "sun",
+  title: "Properties",
+  content: /*#__PURE__*/_jsx(Properties, {})
+}, {
+  id: "person-details",
+  iconName: "user",
+  title: "Person Details",
+  content: /*#__PURE__*/_jsx(Properties, {})
+}];
+export const defaultFloatingPanels = () => {
+  return /*#__PURE__*/_jsx(FloatingPanels, {
+    panels: panels,
+    containerHeight: 500,
+    position: {
+      right: 20,
+      top: 20
+    }
+  });
+};
+defaultFloatingPanels.storyName = "Default Floating Panels";
+defaultFloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "defaultFloatingPanels"
+};

package/es/components/FloatingPanels/FloatingPanels.styles.js

@@ -0,0 +1,107 @@
+import styled from "styled-components";
+import { themeGet } from "@styled-system/theme-get";
+export const Container = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__Container",
+  componentId: "sc-1by914f-0"
+})(["z-index:2;position:absolute;display:flex;flex-direction:column;gap:8px;width:300px;max-height:", ";", ""], _ref => {
+  let {
+    containerHeight
+  } = _ref;
+  return containerHeight ? `${containerHeight}px` : "100%";
+}, _ref2 => {
+  let {
+    position
+  } = _ref2;
+  return Object.entries(position).filter(_ref3 => {
+    let [, value] = _ref3;
+    return value !== undefined;
+  }).map(_ref4 => {
+    let [key, value] = _ref4;
+    return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
+  }).join("\n");
+});
+export const PanelWrapper = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelWrapper",
+  componentId: "sc-1by914f-1"
+})(["background:white;border:", ";border-radius:8px;border-radius:0 0 8px 8px;box-shadow:", ";overflow-y:", ";padding:", ";margin-top:46px;max-height:", ";transition:max-height 0.3s ease-in-out;"], _ref5 => {
+  let {
+    isExpanded,
+    theme
+  } = _ref5;
+  return isExpanded ? `1px solid ${theme.colors.greyLighter}` : "1px solid white";
+}, _ref6 => {
+  let {
+    isExpanded
+  } = _ref6;
+  return isExpanded ? "0 1px 3px rgba(0, 0, 0, 0.1)" : "none";
+}, _ref7 => {
+  let {
+    isExpanded
+  } = _ref7;
+  return isExpanded ? "auto" : "hidden";
+}, _ref8 => {
+  let {
+    isExpanded
+  } = _ref8;
+  return isExpanded ? "0 12px 12px 12px" : "0 12px";
+}, _ref9 => {
+  let {
+    isExpanded
+  } = _ref9;
+  return isExpanded ? "none" : "0";
+});
+export const PanelHeader = styled.button.withConfig({
+  displayName: "FloatingPanelsstyles__PanelHeader",
+  componentId: "sc-1by914f-2"
+})(["font-family:", ";box-shadow:0 0 4px rgba(0,0,0,0.1);color:", ";width:100%;margin-left:-13px;margin-top:-46px;border-radius:", ";appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:12px 12px 12px 12px;height:46px;position:fixed;width:300px;border-bottom:", ";border:solid 1px ", ";z-index:1;cursor:pointer;user-select:none;transition:padding 0.3s ease-in-out;&:focus{outline:none;}"], themeGet("fonts.main"), themeGet("colors.greyDarkest"), _ref10 => {
+  let {
+    isExpanded
+  } = _ref10;
+  return isExpanded ? "8px 8px 0 0" : "8px";
+}, _ref11 => {
+  let {
+    isExpanded,
+    theme
+  } = _ref11;
+  return isExpanded ? `1px solid ${theme.colors.greyLighter}` : "none";
+}, themeGet("colors.greyLighter"));
+export const HeaderContent = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__HeaderContent",
+  componentId: "sc-1by914f-3"
+})(["display:flex;align-items:center;gap:12px;"]);
+export const Title = styled.span.withConfig({
+  displayName: "FloatingPanelsstyles__Title",
+  componentId: "sc-1by914f-4"
+})(["font-size:14px;font-weight:500;"]);
+export const IconWrapper = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__IconWrapper",
+  componentId: "sc-1by914f-5"
+})(["background-color:", ";width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;"], themeGet("colors.primary"));
+export const ChevronWrapper = styled(IconWrapper).withConfig({
+  displayName: "FloatingPanelsstyles__ChevronWrapper",
+  componentId: "sc-1by914f-6"
+})(["transition:background-color 0.3s ease-in-out;background-color:", ";"], _ref12 => {
+  let {
+    isHovered
+  } = _ref12;
+  return isHovered ? themeGet("colors.greyLighter") : "white";
+});
+export const PanelContent = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelContent",
+  componentId: "sc-1by914f-7"
+})(["padding-top:12px;display:", ";height:", ";opacity:", ";"], _ref13 => {
+  let {
+    isExpanded
+  } = _ref13;
+  return isExpanded ? "block" : "none";
+}, _ref14 => {
+  let {
+    isExpanded
+  } = _ref14;
+  return isExpanded ? "100%" : "0";
+}, _ref15 => {
+  let {
+    isExpanded
+  } = _ref15;
+  return isExpanded ? "1" : "0";
+});

package/es/components/FloatingPanels/Panel.js

@@ -0,0 +1,115 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import Icon from "../Icon";
+import { PanelWrapper, PanelHeader, HeaderContent, Title, IconWrapper, ChevronWrapper, PanelContent } from "./FloatingPanels.styles";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const Panel = _ref => {
+  let {
+    iconName,
+    title,
+    containerHeight,
+    content,
+    defaultExpanded = false
+  } = _ref;
+  const [isExpanded, setIsExpanded] = useState(defaultExpanded);
+  const arrowIcon = isExpanded ? "chevron-up" : "chevron-down";
+  const [isHovered, setIsHovered] = useState(false);
+  return /*#__PURE__*/_jsxs(PanelWrapper, {
+    containerHeight: containerHeight,
+    isExpanded: isExpanded,
+    children: [/*#__PURE__*/_jsxs(PanelHeader, {
+      onClick: () => setIsExpanded(!isExpanded),
+      isExpanded: isExpanded,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onFocus: () => setIsHovered(true),
+      onBlur: () => setIsHovered(false),
+      children: [/*#__PURE__*/_jsxs(HeaderContent, {
+        children: [/*#__PURE__*/_jsx(IconWrapper, {
+          children: /*#__PURE__*/_jsx(Icon, {
+            size: "xs",
+            color: "white",
+            icon: ["far", iconName]
+          })
+        }), /*#__PURE__*/_jsx(Title, {
+          children: title
+        })]
+      }), /*#__PURE__*/_jsx(ChevronWrapper, {
+        isHovered: isHovered,
+        children: /*#__PURE__*/_jsx(Icon, {
+          size: "sm",
+          icon: ["fas", arrowIcon],
+          color: "greyDarker"
+        })
+      })]
+    }), /*#__PURE__*/_jsx(PanelContent, {
+      isExpanded: isExpanded,
+      children: content
+    })]
+  });
+};
+Panel.propTypes = {
+  iconName: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  content: PropTypes.node.isRequired,
+  defaultExpanded: PropTypes.bool,
+  containerHeight: PropTypes.number,
+  isExpanded: PropTypes.bool.isRequired
+};
+Panel.defaultProps = {
+  defaultExpanded: false
+};
+Panel.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "Panel",
+  "props": {
+    "defaultExpanded": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "iconName": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "content": {
+      "description": "",
+      "type": {
+        "name": "node"
+      },
+      "required": true
+    },
+    "containerHeight": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": true
+    }
+  }
+};
+export default Panel;

package/es/components/FloatingPanels/index.js

@@ -0,0 +1,141 @@
+import React from "react";
+import { Container } from "./FloatingPanels.styles";
+import Panel from "./Panel";
+import PropTypes from "prop-types";
+import { jsx as _jsx } from "react/jsx-runtime";
+const FloatingPanels = _ref => {
+  let {
+    panels,
+    containerHeight,
+    position = {
+      right: 20,
+      top: 20
+    }
+  } = _ref;
+  return /*#__PURE__*/_jsx(Container, {
+    containerHeight: containerHeight,
+    position: position,
+    children: panels.map(panel => /*#__PURE__*/_jsx(Panel, {
+      ...panel,
+      containerHeight: containerHeight
+    }, panel?.id))
+  });
+};
+FloatingPanels.propTypes = {
+  panels: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    iconName: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    content: PropTypes.node.isRequired,
+    defaultExpanded: PropTypes.bool
+  })).isRequired,
+  containerHeight: PropTypes.number,
+  position: PropTypes.shape({
+    top: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    right: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    bottom: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+    left: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+  })
+};
+FloatingPanels.defaultProps = {
+  position: {
+    right: 20,
+    top: 20
+  }
+};
+FloatingPanels.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "FloatingPanels",
+  "props": {
+    "position": {
+      "defaultValue": {
+        "value": "{ right: 20, top: 20 }",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "shape",
+        "value": {
+          "top": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          },
+          "right": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          },
+          "bottom": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          },
+          "left": {
+            "name": "union",
+            "value": [{
+              "name": "number"
+            }, {
+              "name": "string"
+            }],
+            "required": false
+          }
+        }
+      },
+      "required": false
+    },
+    "panels": {
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "id": {
+              "name": "string",
+              "required": true
+            },
+            "iconName": {
+              "name": "string",
+              "required": true
+            },
+            "title": {
+              "name": "string",
+              "required": true
+            },
+            "content": {
+              "name": "node",
+              "required": true
+            },
+            "defaultExpanded": {
+              "name": "bool",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": true
+    },
+    "containerHeight": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    }
+  }
+};
+export default FloatingPanels;

package/es/components.test.js

@@ -21,6 +21,7 @@ test("all components exported", () => {
       "Expandable",
       "Flex",
       "FlexItem",
+      "FloatingPanels",
       "GlobalStyles",
       "Grid",
       "GridItem",

package/es/index.js

@@ -20,6 +20,7 @@ export { default as Divider } from "./components/Divider";
 export { default as Expandable } from "./components/Expandable";
 export { default as Flex, FlexItem } from "./components/Flex";
 export { default as Grid, GridItem } from "./components/Grid";
+export { default as FloatingPanels } from "./components/FloatingPanels";
 export { default as Header } from "./components/Header";
 export { default as HeaderSimple } from "./components/HeaderSimple";
 export { default as Icon } from "./components/Icon";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.2.47",
+  "version": "3.2.48",
   "engines": {
     "node": "20.12.2"
   },