orcs-design-system 3.3.8 → 3.3.9

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

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 import { themeGet } from "@styled-system/theme-get";
-export const Container = styled.div.withConfig({
-  displayName: "FloatingPanelsstyles__Container",
+const panelWidth = "300px";
+export const ComponentContainer = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__ComponentContainer",
   componentId: "sc-1by914f-0"
-})(["z-index:2;position:absolute;display:flex;flex-direction:column;gap:8px;width:300px;max-height:", ";", ""], _ref => {
+})(["z-index:2;position:absolute;display:flex;flex-direction:column;align-items:flex-end;gap:8px;max-height:", ";", ""], _ref => {
   let {
     containerHeight
   } = _ref;
@@ -20,88 +21,65 @@ export const Container = styled.div.withConfig({
     return `${key}: ${typeof value === "number" ? `${value}px` : value};`;
   }).join("\n");
 });
-export const PanelWrapper = styled.div.withConfig({
-  displayName: "FloatingPanelsstyles__PanelWrapper",
+export const PanelContainer = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelContainer",
   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 => {
+})(["display:flex;flex-direction:column;align-items:flex-end;box-shadow:0 1px 3px rgba(0,0,0,0.1);gap:8px;border-radius:calc(", " + 1px);overflow:hidden;background:transparent;width:", ";max-height:", ";"], themeGet("radii.2"), panelWidth, _ref5 => {
   let {
-    isExpanded,
-    theme
+    containerHeight
   } = _ref5;
-  return isExpanded ? `1px solid ${theme.colors.greyLighter}` : "1px solid white";
-}, _ref6 => {
+  return containerHeight ? `${containerHeight}px` : "100%";
+});
+export const PanelWrapper = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelWrapper",
+  componentId: "sc-1by914f-2"
+})(["display:", ";background:white;width:", ";border:1px solid ", ";border-radius:8px;border-radius:0 0 8px 8px;overflow-y:auto;padding:\"0 12px 12px 12px\";margin-top:37px;transition:max-height 0.3s ease-in-out;"], _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";
-});
+  return isExpanded ? "block" : "none";
+}, panelWidth, themeGet("colors.greyLighter"));
 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:absolute;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"));
+  componentId: "sc-1by914f-3"
+})(["font-family:", ";color:", ";margin-left:-1px;margin-top:-37px;border-radius:8px 8px 0 0;appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:", ";height:37px;position:absolute;width:", ";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"), themeGet("space.s"), panelWidth, themeGet("colors.greyLighter"));
 export const HeaderContent = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__HeaderContent",
-  componentId: "sc-1by914f-3"
+  componentId: "sc-1by914f-4"
 })(["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",
+})(["font-size:14px;font-weight:500;"]);
+export const PanelBar = styled.div.withConfig({
+  displayName: "FloatingPanelsstyles__PanelBar",
   componentId: "sc-1by914f-6"
-})(["transition:background-color 0.3s ease-in-out;background-color:", ";"], _ref12 => {
+})(["display:flex;background:white;border:1px solid ", ";border-radius:", ";padding:2px;gap:2px;height:fit-content;box-shadow:0 0 1px 2px rgba(255,255,255,1);"], themeGet("colors.greyLighter"), themeGet("radii.2"));
+export const IconButton = styled.button.withConfig({
+  displayName: "FloatingPanelsstyles__IconButton",
+  componentId: "sc-1by914f-7"
+})(["font-family:", ";appearance:none;background-color:", ";border:none;width:36px;cursor:pointer;height:36px;display:flex;border-radius:", ";align-items:center;justify-content:center;transition:", ";&:hover{background-color:", ";}"], themeGet("fonts.main"), _ref7 => {
   let {
-    isHovered
-  } = _ref12;
-  return isHovered ? themeGet("colors.greyLighter") : "white";
-});
+    isExpanded
+  } = _ref7;
+  return isExpanded ? themeGet("colors.primaryLightest") : themeGet("colors.white");
+}, themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.primaryLightest"));
 export const PanelContent = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelContent",
-  componentId: "sc-1by914f-7"
-})(["padding-top:12px;display:", ";height:", ";opacity:", ";"], _ref13 => {
+  componentId: "sc-1by914f-8"
+})(["padding:", ";width:inerhit;display:", ";height:", ";opacity:", ";"], themeGet("space.s"), _ref8 => {
   let {
     isExpanded
-  } = _ref13;
+  } = _ref8;
   return isExpanded ? "block" : "none";
-}, _ref14 => {
+}, _ref9 => {
   let {
     isExpanded
-  } = _ref14;
+  } = _ref9;
   return isExpanded ? "100%" : "0";
-}, _ref15 => {
+}, _ref10 => {
   let {
     isExpanded
-  } = _ref15;
+  } = _ref10;
   return isExpanded ? "1" : "0";
 });

package/es/components/FloatingPanels/Panel.js

@@ -1,45 +1,44 @@
 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 Popover from "../Popover";
+import { PanelWrapper, PanelHeader, HeaderContent, Title, IconButton, PanelContent } from "./FloatingPanels.styles";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Panel = _ref => {
+export const Panel = _ref => {
   let {
     iconName,
     title,
     containerHeight,
     content,
-    defaultExpanded = false
+    isExpanded,
+    toggleExpanded
   } = _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,
+      onClick: toggleExpanded,
       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: [/*#__PURE__*/_jsx(Icon, {
+          size: "s",
+          color: "greyDarker",
+          icon: ["far", iconName]
+        }), isExpanded && /*#__PURE__*/_jsx(Title, {
           children: title
         })]
-      }), /*#__PURE__*/_jsx(ChevronWrapper, {
-        isHovered: isHovered,
+      }), isExpanded && /*#__PURE__*/_jsx(Popover, {
+        direction: "left",
+        text: "Close panel",
+        width: "fit-content",
         children: /*#__PURE__*/_jsx(Icon, {
           size: "sm",
-          icon: ["fas", arrowIcon],
-          color: "greyDarker"
+          icon: ["fas", "times"],
+          color: isHovered ? "primary" : "greyDarker"
         })
       })]
     }), /*#__PURE__*/_jsx(PanelContent, {
@@ -54,11 +53,40 @@ Panel.propTypes = {
   content: PropTypes.node.isRequired,
   defaultExpanded: PropTypes.bool,
   containerHeight: PropTypes.number,
-  isExpanded: PropTypes.bool.isRequired
+  isExpanded: PropTypes.bool.isRequired,
+  toggleExpanded: PropTypes.func.isRequired
 };
 Panel.defaultProps = {
   defaultExpanded: false
 };
+export const PanelBarIcon = _ref2 => {
+  let {
+    iconName,
+    title,
+    toggleExpanded,
+    isExpanded
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Popover, {
+    direction: "top",
+    text: title,
+    width: "fit-content",
+    children: /*#__PURE__*/_jsx(IconButton, {
+      onClick: toggleExpanded,
+      isExpanded: isExpanded,
+      children: /*#__PURE__*/_jsx(Icon, {
+        size: "s",
+        color: "greyDarker",
+        icon: ["far", iconName]
+      })
+    })
+  });
+};
+PanelBarIcon.propTypes = {
+  iconName: PropTypes.string.isRequired,
+  title: PropTypes.string.isRequired,
+  toggleExpanded: PropTypes.func.isRequired,
+  isExpanded: PropTypes.bool.isRequired
+};
 Panel.__docgenInfo = {
   "description": "",
   "methods": [],
@@ -109,7 +137,48 @@ Panel.__docgenInfo = {
         "name": "bool"
       },
       "required": true
+    },
+    "toggleExpanded": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
     }
   }
 };
-export default Panel;
+PanelBarIcon.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "PanelBarIcon",
+  "props": {
+    "iconName": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "title": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "toggleExpanded": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": true
+    }
+  }
+};

package/es/components/FloatingPanels/index.js

@@ -1,8 +1,8 @@
-import React from "react";
-import { Container } from "./FloatingPanels.styles";
-import Panel from "./Panel";
+import React, { useState, useEffect } from "react";
+import { ComponentContainer, PanelContainer, PanelBar } from "./FloatingPanels.styles";
+import { Panel, PanelBarIcon } from "./Panel";
 import PropTypes from "prop-types";
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const FloatingPanels = _ref => {
   let {
     panels,
@@ -12,13 +12,37 @@ const FloatingPanels = _ref => {
       top: 20
     }
   } = _ref;
-  return /*#__PURE__*/_jsx(Container, {
+  const [expandedPanelId, setExpandedPanelId] = useState(null);
+
+  // Set the default expanded panel on component mount
+  useEffect(() => {
+    const defaultExpandedPanel = panels.find(panel => panel.defaultExpanded);
+    if (defaultExpandedPanel) {
+      setExpandedPanelId(defaultExpandedPanel.id);
+    }
+  }, [panels]);
+  const togglePanel = panelId => {
+    setExpandedPanelId(expandedPanelId === panelId ? null : panelId);
+  };
+  return /*#__PURE__*/_jsxs(ComponentContainer, {
     containerHeight: containerHeight,
     position: position,
-    children: panels.map(panel => /*#__PURE__*/_jsx(Panel, {
-      ...panel,
-      containerHeight: containerHeight
-    }, panel?.id))
+    children: [/*#__PURE__*/_jsx(PanelBar, {
+      children: panels.map(panel => /*#__PURE__*/_jsx(PanelBarIcon, {
+        iconName: panel.iconName,
+        title: panel.title,
+        isExpanded: expandedPanelId === panel.id,
+        toggleExpanded: () => togglePanel(panel.id)
+      }, panel?.id))
+    }), /*#__PURE__*/_jsx(PanelContainer, {
+      containerHeight: containerHeight,
+      children: panels.map(panel => /*#__PURE__*/_jsx(Panel, {
+        ...panel,
+        containerHeight: containerHeight,
+        isExpanded: expandedPanelId === panel.id,
+        toggleExpanded: () => togglePanel(panel.id)
+      }, panel?.id))
+    })]
   });
 };
 FloatingPanels.propTypes = {

package/package.json

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