orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
183 lines • 4.28 kB
JavaScript
import React, { useState } from "react";
import PropTypes from "prop-types";
import Icon from "../Icon";
import Popover from "../Popover";
import { PanelWrapper, PanelHeader, HeaderContent, Title, PanelContent, IconButton } from "./FloatingPanels.styles";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export const Panel = _ref => {
let {
iconName,
title,
containerHeight,
content,
isExpanded,
toggleExpanded
} = _ref;
const [isHovered, setIsHovered] = useState(false);
if (!content) {
return null;
}
return /*#__PURE__*/_jsxs(PanelWrapper, {
containerHeight: containerHeight,
isExpanded: isExpanded,
children: [/*#__PURE__*/_jsxs(PanelHeader, {
onClick: toggleExpanded,
onMouseEnter: () => setIsHovered(true),
onMouseLeave: () => setIsHovered(false),
onFocus: () => setIsHovered(true),
onBlur: () => setIsHovered(false),
children: [/*#__PURE__*/_jsxs(HeaderContent, {
children: [/*#__PURE__*/_jsx(Icon, {
size: "s",
color: "greyDarker",
icon: ["far", iconName]
}), isExpanded && /*#__PURE__*/_jsx(Title, {
children: title
})]
}), isExpanded && /*#__PURE__*/_jsx(Popover, {
direction: "left",
text: "Close panel",
width: "fit-content",
children: /*#__PURE__*/_jsx(Icon, {
size: "sm",
icon: ["fas", "times"],
color: isHovered ? "primary" : "greyDarker"
})
})]
}), /*#__PURE__*/_jsx(PanelContent, {
isExpanded: isExpanded,
children: content
})]
});
};
Panel.propTypes = {
title: PropTypes.string.isRequired,
iconName: PropTypes.string.isRequired,
content: PropTypes.node.isRequired,
containerHeight: PropTypes.string,
isExpanded: PropTypes.bool.isRequired,
toggleExpanded: PropTypes.func.isRequired
};
export const PanelBarIcon = _ref2 => {
let {
iconName,
title,
toggleExpanded,
isExpanded,
forceHighlight
} = _ref2;
return /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: title,
width: "fit-content",
children: /*#__PURE__*/_jsx(IconButton, {
"aria-label": title,
onClick: toggleExpanded,
isExpanded: isExpanded,
forceHighlight: forceHighlight,
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,
forceHighlight: PropTypes.bool.isRequired
};
Panel.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "Panel",
"props": {
"title": {
"description": "",
"type": {
"name": "string"
},
"required": true
},
"iconName": {
"description": "",
"type": {
"name": "string"
},
"required": true
},
"content": {
"description": "",
"type": {
"name": "node"
},
"required": true
},
"containerHeight": {
"description": "",
"type": {
"name": "string"
},
"required": false
},
"isExpanded": {
"description": "",
"type": {
"name": "bool"
},
"required": true
},
"toggleExpanded": {
"description": "",
"type": {
"name": "func"
},
"required": true
}
}
};
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
},
"forceHighlight": {
"description": "",
"type": {
"name": "bool"
},
"required": true
}
}
};