orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
163 lines • 6.3 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
import React from "react";
import PropTypes from "prop-types";
import styled from "styled-components";
import { H6 } from "../../Typography";
import Avatar from "../../Avatar";
import { NavLink } from "react-router-dom";
import themeGet from "@styled-system/theme-get";
import Flex from "../../Flex";
import Popover from "../../Popover";
import { CurrentViewSectionShape } from "../types/sideNav";
import sharedNavItemHoverStyles, { sharedNavItemActiveStyles, sharedNavItemBaseStyles } from "../styles/sharedHoverStyles";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SubNavList = /*#__PURE__*/styled.ul.withConfig({
displayName: "SubNavList",
componentId: "sc-12clz4a-0"
})(["list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:", ";width:100%;"], themeGet("space.xs"));
const StyledNavLink = /*#__PURE__*/styled(NavLink).withConfig({
displayName: "StyledNavLink",
componentId: "sc-12clz4a-1"
})(["font-size:", ";cursor:pointer;padding:", ";text-decoration:none;display:block;width:100%;", " ", " ", ""], themeGet("fontSizes.1"), themeGet("space.xs"), sharedNavItemBaseStyles, sharedNavItemHoverStyles, sharedNavItemActiveStyles);
const UnstyledNavLink = /*#__PURE__*/styled(NavLink).withConfig({
displayName: "UnstyledNavLink",
componentId: "sc-12clz4a-2"
})(["text-decoration:none;color:", ";&:hover{outline:none;color:", ";}"], themeGet("colors.greyDarkest"), themeGet("colors.primary"));
const ActiveAvatar = /*#__PURE__*/styled(Avatar).withConfig({
displayName: "ActiveAvatar",
componentId: "sc-12clz4a-3"
})(["position:relative;&::before{content:\"\";position:absolute;right:0;transform:translateX(10px);width:0px;height:0px;border-style:solid;border-width:7px 8px 7px 0;border-color:transparent ", " transparent transparent;", "}}"], themeGet("colors.greyLighter"), props => props.isSmallScreen && "\n right: auto;\n top: 0;\n transform: translate(5px, -13px);\n border-width: 8px 7px 0 7px;\n border-color: ".concat(props.theme.colors.greyLighter, " transparent transparent transparent;\n "));
const CurrentViewContent = _ref => {
var _subNav$;
let {
name,
badge,
subNav,
isExpanded,
avatar,
shape,
gradient
} = _ref;
const link = subNav === null || subNav === void 0 || (_subNav$ = subNav[0]) === null || _subNav$ === void 0 ? void 0 : _subNav$.link;
const hasValidLink = Boolean(link);
const avatarAndLabelMarkup = /*#__PURE__*/_jsxs(Flex, {
flexWrap: "nowrap",
gap: "s",
alignItems: "center",
children: [/*#__PURE__*/_jsx(Avatar, {
image: avatar,
customSize: "24px",
shape: shape,
border: "1px solid",
gradient: gradient
}), /*#__PURE__*/_jsx(H6, {
fontWeight: "bold",
children: name
})]
});
return /*#__PURE__*/_jsxs(Flex, {
flexDirection: "column",
gap: "s",
children: [/*#__PURE__*/_jsx(H6, {
sizing: "small",
color: "greyDark",
mb: isExpanded ? "s" : "0",
children: "Currently Viewing"
}), /*#__PURE__*/_jsxs(Flex, {
flexWrap: "wrap",
gap: "s",
mt: isExpanded ? "0" : "s",
alignItems: "center",
children: [hasValidLink ? /*#__PURE__*/_jsx(UnstyledNavLink, {
to: link,
children: avatarAndLabelMarkup
}) : avatarAndLabelMarkup, badge]
}), /*#__PURE__*/_jsx(SubNavList, {
children: subNav === null || subNav === void 0 ? void 0 : subNav.map(_ref2 => {
let {
name,
link
} = _ref2;
return /*#__PURE__*/_jsx(StyledNavLink, {
to: link,
children: name
}, name);
})
})]
});
};
CurrentViewContent.propTypes = _objectSpread(_objectSpread({}, CurrentViewSectionShape), {}, {
isExpanded: PropTypes.bool
});
const SideNavCurrentViewSection = _ref3 => {
let {
name,
badge,
subNav,
isExpanded,
avatar,
shape,
isSmallScreen,
gradient
} = _ref3;
// Don't render anything if there's no valid name
if (!name) {
return null;
}
const currentViewMarkup = /*#__PURE__*/_jsx(CurrentViewContent, {
name: name,
badge: badge,
subNav: subNav,
isExpanded: isExpanded,
avatar: avatar,
shape: shape,
gradient: gradient
});
return /*#__PURE__*/_jsxs(Flex, {
isExpanded: isExpanded,
flexDirection: "column",
gap: "s",
mt: isExpanded && !isSmallScreen ? "s" : "0",
children: [(!isExpanded || isSmallScreen) && /*#__PURE__*/_jsx(Popover, {
direction: isSmallScreen ? "top" : "right",
width: "fit-content",
text: currentViewMarkup,
children: /*#__PURE__*/_jsx(ActiveAvatar, {
image: avatar,
customSize: "24px",
shape: shape,
isSmallScreen: isSmallScreen,
gradient: gradient
})
}), isExpanded && !isSmallScreen && currentViewMarkup]
});
};
SideNavCurrentViewSection.propTypes = _objectSpread(_objectSpread({}, CurrentViewSectionShape), {}, {
isExpanded: PropTypes.bool,
isSmallScreen: PropTypes.bool
});
SideNavCurrentViewSection.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "SideNavCurrentViewSection",
"props": {
"isExpanded": {
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"isSmallScreen": {
"description": "",
"type": {
"name": "bool"
},
"required": false
}
},
"composes": ["../types/sideNav"]
};
export default SideNavCurrentViewSection;