orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
91 lines • 2.15 kB
JavaScript
import React from "react";
import PropTypes from "prop-types";
import Popover from "../../Popover";
import BaseSection, { AvatarLink, Item } from "../components/BaseSection";
import { jsx as _jsx } from "react/jsx-runtime";
const SideNavTeamsSection = _ref => {
let {
teams,
isExpanded
} = _ref;
const renderTeamItem = (team, isExpanded) => {
const {
avatar,
name,
link
} = team;
return /*#__PURE__*/_jsx(Item, {
children: isExpanded ? /*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: "square",
showName: true
}) : /*#__PURE__*/_jsx(Popover, {
text: name,
direction: "right",
width: "fit-content",
children: /*#__PURE__*/_jsx(AvatarLink, {
avatar: avatar,
name: name,
link: link,
shape: "square",
showName: false
})
})
}, name);
};
return /*#__PURE__*/_jsx(BaseSection, {
title: "Your Teams",
items: teams,
isExpanded: isExpanded,
renderItem: renderTeamItem
});
};
SideNavTeamsSection.propTypes = {
teams: PropTypes.arrayOf(PropTypes.shape({
avatar: PropTypes.string,
name: PropTypes.string.isRequired,
link: PropTypes.string.isRequired
})),
isExpanded: PropTypes.bool
};
SideNavTeamsSection.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "SideNavTeamsSection",
"props": {
"teams": {
"description": "",
"type": {
"name": "arrayOf",
"value": {
"name": "shape",
"value": {
"avatar": {
"name": "string",
"required": false
},
"name": {
"name": "string",
"required": true
},
"link": {
"name": "string",
"required": true
}
}
}
},
"required": false
},
"isExpanded": {
"description": "",
"type": {
"name": "bool"
},
"required": false
}
}
};
export default SideNavTeamsSection;