@activecollab/components/dist/esm/presentation/shared/HelpAndSupportMenu.js

ActiveCollab Components

import React, { useCallback, useState } from "react";
import styled from "styled-components";
import { TRANSITION } from "./tokens";
import { CollapseExpandSingleIcon, HelpIcon, MessageEmptyIcon, NoteIcon, PlayCircleOutlineIcon, StarOutlineIcon } from "../../components/Icons";
import { List, ListItem, ListSeparator } from "../../components/List";
import { Menu } from "../../components/Menu";
import { Tooltip } from "../../components/Tooltip";
import { Body2 } from "../../components/Typography";

/* ------------------------------------------------------------------ */
/* Help & Support menu (mirrors MainMenu/HelpAndSupportMenu.js)        */
/* ------------------------------------------------------------------ */

/**
 * The "Help & Support" entry that sits at the very bottom of the main menu.
 * Clicking it opens a popover (Help Docs / YouTube Channel / Live Support /
 * New Features), matching the real MainMenu/HelpAndSupportMenu.js. It is a
 * shared building block because every Product Messaging concept re-uses this
 * same entry point.
 *
 * The label + caret carry the `menu-item-text` class so the shell's existing
 * collapse rules hide them automatically when the menu is collapsed (state or
 * <1280px media query). Clicks are intentionally no-ops in the mock.
 */

const StyledHelpTarget = styled.div.withConfig({
  displayName: "HelpAndSupportMenu__StyledHelpTarget",
  componentId: "sc-16a350b-0"
})(["position:relative;display:flex;align-items:center;flex-shrink:0;height:40px;padding:0 4px 0 12px;margin:0 12px 16px;border-radius:8px;cursor:pointer;transition:background-color ", ";.help-icon{flex-shrink:0;fill:var(--color-theme-700);opacity:0.7;}.help-label{margin-left:12px;min-width:0;overflow:hidden;text-overflow:ellipsis;}.help-caret{margin-left:auto;flex-shrink:0;fill:var(--color-theme-700);opacity:0.7;transition:transform ", ";transform:rotate(180deg);}&:hover{background-color:var(--color-theme-300);.help-icon,.help-caret{fill:var(--color-theme-900);opacity:1;}.help-label{color:var(--color-theme-900);}}&.open{background-color:var(--color-secondary-200);.help-icon,.help-caret{fill:var(--color-secondary);opacity:1;}.help-label{color:var(--color-secondary);}.help-caret{transform:rotate(0deg);}}"], TRANSITION, TRANSITION);

/* The popover body. ListItem gives leading icons an 8px gap by default; the
   real menu uses 12px (tw-mr-3), so bump it here. */
const StyledHelpMenu = styled.div.withConfig({
  displayName: "HelpAndSupportMenu__StyledHelpMenu",
  componentId: "sc-16a350b-1"
})(["width:216px;.c-list{padding:8px 0;}.c-list-item > svg:first-child{margin-right:12px;}"]);
export const HelpAndSupportMenu = _ref => {
  let _ref$mobile = _ref.mobile,
    mobile = _ref$mobile === void 0 ? false : _ref$mobile;
  const _useState = useState(false),
    open = _useState[0],
    setOpen = _useState[1];
  const handleOpen = useCallback(() => setOpen(true), []);
  const handleClose = useCallback(() => setOpen(false), []);
  return /*#__PURE__*/React.createElement(Menu, {
    open: open,
    onOpen: handleOpen,
    onClose: handleClose,
    position: "top-start",
    target: /*#__PURE__*/React.createElement(Tooltip, {
      title: "Help & Support",
      placement: "right",
      disable: mobile
    }, /*#__PURE__*/React.createElement(StyledHelpTarget, {
      className: open ? "open" : undefined,
      "data-testid": "help-support-menu",
      onClick: handleOpen
    }, /*#__PURE__*/React.createElement(HelpIcon, {
      className: "help-icon"
    }), /*#__PURE__*/React.createElement(Body2, {
      weight: "medium",
      color: "secondary",
      whitespace: "no-wrap",
      className: "help-label menu-item-text"
    }, "Help & Support"), /*#__PURE__*/React.createElement(CollapseExpandSingleIcon, {
      className: "help-caret menu-item-text"
    })))
  }, /*#__PURE__*/React.createElement(StyledHelpMenu, null, /*#__PURE__*/React.createElement(List, {
    tabIndex: -1
  }, /*#__PURE__*/React.createElement(ListItem, {
    onClick: handleClose
  }, /*#__PURE__*/React.createElement(NoteIcon, null), "Help Docs"), /*#__PURE__*/React.createElement(ListItem, {
    onClick: handleClose
  }, /*#__PURE__*/React.createElement(PlayCircleOutlineIcon, null), "YouTube Channel"), /*#__PURE__*/React.createElement(ListItem, {
    onClick: handleClose
  }, /*#__PURE__*/React.createElement(MessageEmptyIcon, null), "Live Support"), /*#__PURE__*/React.createElement(ListSeparator, null), /*#__PURE__*/React.createElement(ListItem, {
    onClick: handleClose
  }, /*#__PURE__*/React.createElement(StarOutlineIcon, null), "New Features"))));
};
HelpAndSupportMenu.displayName = "HelpAndSupportMenu";
//# sourceMappingURL=HelpAndSupportMenu.js.map