orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
211 lines • 7.14 kB
JavaScript
import React from "react";
import styled, { css as styledCss } from "styled-components";
import { css } from "@styled-system/css";
import { themeGet } from "@styled-system/theme-get";
import PropTypes from "prop-types";
import Icon from "../Icon";
import Popover from "../Popover";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const sharedNavItemStyles = styledCss(["cursor:pointer;padding:", ";text-decoration:none;border-radius:", ";width:100%;position:relative;border:none;path{transition:", ";fill:", ";}font-family:", ";display:flex;align-items:center;justify-content:center;transition:", ";background-color:transparent;font-size:1.4rem;font-weight:", ";&:hover,&:focus{color:", ";path{fill:", ";}}@media screen and (max-width:900px){width:auto;max-height:30px;height:30px;}&:focus{outline:0;color:", ";path{fill:", ";}}"], themeGet("space.s"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarker"), themeGet("fonts.main"), themeGet("transition.transitionDefault"), themeGet("fontWeights.1"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("colors.primary"));
const variantActiveStyles = {
expandableItem: styledCss(["color:", ";path{fill:", ";}:after{height:100%;position:absolute;right:calc(-", " - 2px);content:\"\";border-right:3px solid ", ";z-index:5;}@media screen and (max-width:900px){:after{border-top:3px solid ", ";border-right:none;top:-", ";right:0;width:100%;}}"], themeGet("colors.primary"), themeGet("colors.primary"), themeGet("space.s"), themeGet("colors.primary"), themeGet("colors.primary"), themeGet("space.s")),
default: styledCss(["background-color:", ";path{fill:", ";}&:hover,&:focus{path{fill:", ";}}&:focus{path{fill:", ";}}"], themeGet("colors.primary"), themeGet("colors.white"), themeGet("colors.white"), themeGet("colors.white"))
};
const getActiveStyles = props => {
if (!props.active) return "";
if (props["aria-expanded"]) {
return variantActiveStyles.expandableItem;
}
return variantActiveStyles.default;
};
const SideNavItemLink = styled.div.withConfig({
displayName: "NavItem__SideNavItemLink",
componentId: "sc-hkm2u8-0"
})(["& > a{", " ", "}"], sharedNavItemStyles, getActiveStyles);
const SideNavItem = styled("button").withConfig({
displayName: "NavItem__SideNavItem",
componentId: "sc-hkm2u8-1"
})(["", " ", ""], sharedNavItemStyles, getActiveStyles);
const BadgeNumber = styled("div").withConfig({
displayName: "NavItem__BadgeNumber",
componentId: "sc-hkm2u8-2"
})(props => css({
position: "absolute",
height: "16px",
width: "16px",
bg: themeGet("colors.danger")(props),
fontSize: "1rem",
fontWeight: themeGet("fontWeights.2")(props),
color: themeGet("colors.white")(props),
borderRadius: "50%",
top: "0",
right: "0",
display: "flex",
alignItems: "center",
justifyContent: "center"
}));
const BadgeDot = styled("div").withConfig({
displayName: "NavItem__BadgeDot",
componentId: "sc-hkm2u8-3"
})(props => css({
position: "absolute",
height: "8px",
width: "8px",
bg: themeGet("colors.primary")(props),
borderRadius: "50%",
top: "2px",
right: "0"
}));
const SideNavItemPopover = styled(Popover).withConfig({
displayName: "NavItem__SideNavItemPopover",
componentId: "sc-hkm2u8-4"
})(props => css({
height: "30px",
marginBottom: props.bottomAligned ? "0" : "s",
marginTop: props.bottomAligned ? "s" : "0",
"@media screen and (min-width: 900px)": {
":nth-child(1 of .bottom-aligned) ": {
marginTop: props.bottomAligned && "auto"
}
},
"&:hover,&:focus-within": {
"& .popoverText": {
opacity: "1",
zIndex: "100",
visibility: "visible",
pointerEvents: "auto",
display: "initial"
}
},
"&:focus-within": {
"& .popoverText": {
opacity: props.active ? "0" : "1",
zIndex: props.active ? "-100" : "100",
visibility: props.active ? "hidden" : "visible",
pointerEvents: props.active ? "none" : "auto",
display: props.active ? "none" : "initial"
}
},
"@media screen and (max-width: 900px)": {
width: "auto",
marginBottom: "0",
marginTop: "0",
"&:hover,&:focus-within": {
"& .popoverText": {
opacity: "0",
zIndex: "-100",
visibility: "hidden",
pointerEvents: "none",
justifyContent: "space-around",
display: "none"
}
}
}
}));
const NavItem = _ref => {
let {
item,
Component,
isActive,
handleItemClick,
navItemRefs,
isSmallScreen
} = _ref;
// Use the ternary operator to render the appropriate component based on actionType
const accessibilityProps = {
...(item.actionType === "component" && {
"aria-expanded": isActive ? "true" : "false"
}),
"aria-label": item.name
};
return /*#__PURE__*/_jsx(SideNavItemPopover, {
className: item.bottomAligned && "bottom-aligned",
text: item.name,
direction: isSmallScreen ? "top" : "right",
textAlign: "center",
width: "fit-content",
active: isActive,
bottomAligned: item.bottomAligned,
children: item.actionType === "link" ? /*#__PURE__*/_jsx(SideNavItemLink, {
active: isActive,
bottomAligned: item.bottomAligned,
onClick: () => handleItemClick(item),
ref: el => navItemRefs.current[item.index] = el,
children: /*#__PURE__*/_jsx(Component, {
item: item,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["far", item.iconName]
})
})
}, item.index) : /*#__PURE__*/_jsxs(SideNavItem, {
active: isActive,
onClick: () => handleItemClick(item),
bottomAligned: item.bottomAligned,
...accessibilityProps,
ref: el => navItemRefs.current[item.index] = el,
children: [item.badgeNumber && /*#__PURE__*/_jsx(BadgeNumber, {
children: item.badgeNumber
}), item.badgeDot && /*#__PURE__*/_jsx(BadgeDot, {}), /*#__PURE__*/_jsx(Icon, {
icon: ["far", item.iconName]
})]
}, item.index)
});
};
NavItem.propTypes = {
item: PropTypes.object,
Component: PropTypes.elementType,
isActive: PropTypes.bool,
handleItemClick: PropTypes.func,
navItemRefs: PropTypes.object,
isSmallScreen: PropTypes.bool
};
NavItem.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "NavItem",
"props": {
"item": {
"description": "",
"type": {
"name": "object"
},
"required": false
},
"Component": {
"description": "",
"type": {
"name": "elementType"
},
"required": false
},
"isActive": {
"description": "",
"type": {
"name": "bool"
},
"required": false
},
"handleItemClick": {
"description": "",
"type": {
"name": "func"
},
"required": false
},
"navItemRefs": {
"description": "",
"type": {
"name": "object"
},
"required": false
},
"isSmallScreen": {
"description": "",
"type": {
"name": "bool"
},
"required": false
}
}
};
export default NavItem;