orcs-design-system/es/components/SideNavV2/sections/SideNavCurrentViewSection.js

TeamForm's Design System, aka: ORCS

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 { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SubNavList = styled.ul.withConfig({
  displayName: "SideNavCurrentViewSection__SubNavList",
  componentId: "sc-12clz4a-0"
})(["list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:2px;width:100%;"]);
const StyledNavLink = styled(NavLink).withConfig({
  displayName: "SideNavCurrentViewSection__StyledNavLink",
  componentId: "sc-12clz4a-1"
})(["font-size:", ";cursor:pointer;padding:5px 7px;text-decoration:none;border-radius:", ";transition:", ";color:", ";text-decoration:none;&:hover,&:focus{outline:none;color:", ";}&.active{background-color:", ";color:", ";&:hover,&:focus{outline:none;color:", ";}}"], themeGet("fontSizes.1"), themeGet("radii.2"), themeGet("transition.transitionDefault"), themeGet("colors.greyDarkest"), themeGet("colors.primary"), themeGet("colors.primaryLightest"), themeGet("colors.greyDarkest"), themeGet("colors.greyDarkest"));
const UnstyledNavLink = styled(NavLink).withConfig({
  displayName: "SideNavCurrentViewSection__UnstyledNavLink",
  componentId: "sc-12clz4a-2"
})(["text-decoration:none;color:", ";&:hover{outline:none;color:", ";}"], themeGet("colors.greyDarkest"), themeGet("colors.primary"));
const ActiveAvatar = styled(Avatar).withConfig({
  displayName: "SideNavCurrentViewSection__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 && `
        right: auto;
        top: 0;
        transform: translate(5px, -13px);
        border-width: 8px 7px 0 7px;
        border-color: ${props.theme.colors.greyLighter} transparent transparent transparent;
      `);
const CurrentViewContent = _ref => {
  let {
    name,
    badge,
    subNav,
    isExpanded,
    avatar,
    shape
  } = _ref;
  const link = subNav?.[0]?.link;
  const hasValidLink = Boolean(link);
  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: /*#__PURE__*/_jsxs(Flex, {
          flexWrap: "nowrap",
          gap: "s",
          alignItems: "center",
          children: [/*#__PURE__*/_jsx(Avatar, {
            image: avatar,
            customSize: "24px",
            shape: shape,
            border: "1px solid"
          }), /*#__PURE__*/_jsx(H6, {
            fontWeight: "bold",
            children: name
          })]
        })
      }) : /*#__PURE__*/_jsxs(Flex, {
        flexWrap: "nowrap",
        gap: "s",
        alignItems: "center",
        children: [/*#__PURE__*/_jsx(Avatar, {
          image: avatar,
          customSize: "24px",
          shape: shape,
          border: "1px solid"
        }), /*#__PURE__*/_jsx(H6, {
          fontWeight: "bold",
          children: name
        })]
      }), badge]
    }), /*#__PURE__*/_jsx(SubNavList, {
      children: subNav?.map(_ref2 => {
        let {
          name,
          link
        } = _ref2;
        return /*#__PURE__*/_jsx(StyledNavLink, {
          to: link,
          children: name
        }, name);
      })
    })]
  });
};
CurrentViewContent.propTypes = {
  ...CurrentViewSectionShape,
  isExpanded: PropTypes.bool
};
const SideNavCurrentViewSection = _ref3 => {
  let {
    name,
    badge,
    subNav,
    isExpanded,
    avatar,
    shape,
    isSmallScreen
  } = _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
  });
  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
      })
    }), isExpanded && !isSmallScreen && currentViewMarkup]
  });
};
SideNavCurrentViewSection.propTypes = {
  ...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;