orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
159 lines (156 loc) • 4.94 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import themeGet from "@styled-system/theme-get";
import Popover from "../../Popover";
import Icon from "../../Icon";
import Button from "../../Button";
import BaseSection, { AvatarLink, Item } from "../components/BaseSection";
/**
* PinnedIconWrapper - Positions the pin icon absolutely, vertically centered on the right
* This ensures consistent alignment with avatars and text across all pinned items
*/
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
const PinnedIconWrapper = /*#__PURE__*/styled.div.withConfig({
displayName: "PinnedIconWrapper",
componentId: "sc-i42us5-0"
})(["position:absolute;top:50%;right:", ";transform:translateY(-50%);display:flex;align-items:center;justify-content:center;margin:0;padding:0;z-index:10;flex-shrink:0;"], props => themeGet("space.6")(props));
/**
* SideNavPinnedSection - Renders the "Pinned" section of the side navigation
*
* Handles presentation and layout. Business logic (onUnpin callback) is passed as a prop.
*
* @param {Array} items - Array of pinned items with avatar, name, link, shape, onUnpin, gradient
* @param {boolean} isExpanded - Whether the sidebar is expanded
*/
const SideNavPinnedSection = _ref => {
let {
items,
isExpanded
} = _ref;
const renderPinnedItem = (item, isExpanded) => {
const {
avatar,
name,
link,
shape,
onUnpin,
gradient
} = item;
// Skip rendering if required props are missing
if (!name || !link) {
return null;
}
return /*#__PURE__*/_jsx(Item, {
children: isExpanded ? /*#__PURE__*/_jsxs(_Fragment, {
children: [/*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: shape,
showName: true,
gradient: gradient
}), onUnpin && /*#__PURE__*/_jsx(PinnedIconWrapper, {
children: /*#__PURE__*/_jsx(Popover, {
text: "Unpin item",
direction: "right",
width: "fit-content",
tabIndex: "-1",
children: /*#__PURE__*/_jsx(Button, {
height: "20px",
width: "20px",
borderRadius: "20px",
variant: "borderGrey",
borderColor: "white",
onClick: () => onUnpin === null || onUnpin === void 0 ? void 0 : onUnpin(item),
small: true,
iconOnly: true,
px: "0",
py: "0",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "thumbtack"],
color: "greyDarkest",
size: "sm"
})
})
})
})]
}) : /*#__PURE__*/_jsx(Popover, {
text: name,
direction: "right",
width: "fit-content",
children: /*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: shape,
showName: false,
gradient: gradient
})
})
}, name);
};
return /*#__PURE__*/_jsx(BaseSection, {
title: "Pinned",
items: items || [],
isExpanded: isExpanded,
renderItem: renderPinnedItem
});
};
SideNavPinnedSection.propTypes = {
items: PropTypes.arrayOf(PropTypes.shape({
avatar: PropTypes.string,
name: PropTypes.string.isRequired,
link: PropTypes.string.isRequired,
shape: PropTypes.string,
onUnpin: PropTypes.func
})),
isExpanded: PropTypes.bool
};
SideNavPinnedSection.__docgenInfo = {
"description": "SideNavPinnedSection - Renders the \"Pinned\" section of the side navigation\n\nHandles presentation and layout. Business logic (onUnpin callback) is passed as a prop.\n\n@param {Array} items - Array of pinned items with avatar, name, link, shape, onUnpin, gradient\n@param {boolean} isExpanded - Whether the sidebar is expanded",
"methods": [],
"displayName": "SideNavPinnedSection",
"props": {
"items": {
"description": "",
"type": {
"name": "arrayOf",
"value": {
"name": "shape",
"value": {
"avatar": {
"name": "string",
"required": false
},
"name": {
"name": "string",
"required": true
},
"link": {
"name": "string",
"required": true
},
"shape": {
"name": "string",
"required": false
},
"onUnpin": {
"name": "func",
"required": false
}
}
}
},
"required": false
},
"isExpanded": {
"description": "",
"type": {
"name": "bool"
},
"required": false
}
}
};
export default SideNavPinnedSection;