Refine use cases rule examples

app/components/navigation/CreateFlowTopNav/CreateFlowTopNav.view.tsx

@@ -1,39 +1,178 @@
 "use client";
 
-import { useEffect, useId, useRef, useState } from "react";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import type { IconName } from "../../asset/icon";
 import Logo from "../../asset/Logo";
 import Button from "../../buttons/Button";
 import ListItem from "../../layout/ListItem";
 import Popover from "../../modals/Popover";
+import { useCreateFlowSm2Up } from "../../../(app)/create/hooks/useCreateFlowSm2Up";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import type { CreateFlowTopNavViewProps } from "./CreateFlowTopNav.types";
 
+const outlineButtonClass =
+  "md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]";
+
 const exitButtonFigmaClass =
   "!rounded-[var(--radius-measures-radius-full,9999px)] !border-[1.25px] !px-[var(--spacing-measures-spacing-250,10px)] !py-[var(--spacing-measures-spacing-200,8px)] md:!text-[12px] md:!leading-[14px]";
 
+type ActionMenuItem = {
+  id: string;
+  label: string;
+  leadingIcon: IconName;
+  onClick: () => void;
+};
+
+function KebabIcon({ className = "" }: { className?: string }) {
+  return (
+    <svg
+      width="12"
+      height="12"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={`shrink-0 md:h-[14px] md:w-[14px] ${className}`}
+      aria-hidden="true"
+    >
+      <circle cx="4" cy="8" r="1.5" fill="currentColor" />
+      <circle cx="8" cy="8" r="1.5" fill="currentColor" />
+      <circle cx="12" cy="8" r="1.5" fill="currentColor" />
+    </svg>
+  );
+}
+
 export function CreateFlowTopNavView({
   hasShare = false,
   hasExport = false,
   hasEdit = false,
+  hasDuplicate = false,
   hasManageStakeholders = false,
   saveDraftOnExit = false,
   onShare,
   onSelectExportFormat,
   onEdit,
+  onDuplicate,
   onManageStakeholders,
   onExit,
+  exitLabel,
+  duplicateLabel,
+  duplicateAriaLabel,
   buttonPalette = "default",
   className = "",
   exportPopoverMenuAriaLabel,
   exportPopoverPdfLabel,
   exportPopoverCsvLabel,
   exportPopoverMarkdownLabel,
+  moreOptionsAriaLabel,
+  actionsMenuAriaLabel,
 }: CreateFlowTopNavViewProps) {
   const t = useTranslation("create.topNav");
-  const exitButtonText = saveDraftOnExit ? t("saveAndExit") : t("exit");
+  const sm2Up = useCreateFlowSm2Up();
+  const exitButtonText =
+    exitLabel ?? (saveDraftOnExit ? t("saveAndExit") : t("exit"));
   const [exportMenuOpen, setExportMenuOpen] = useState(false);
+  const [actionsMenuOpen, setActionsMenuOpen] = useState(false);
   const exportWrapRef = useRef<HTMLDivElement>(null);
+  const actionsWrapRef = useRef<HTMLDivElement>(null);
   const exportMenuId = useId();
+  const actionsMenuId = useId();
+
+  const hasSecondaryActions =
+    hasShare ||
+    hasExport ||
+    hasEdit ||
+    hasDuplicate ||
+    hasManageStakeholders;
+  const useKebabMenu = hasSecondaryActions && !sm2Up;
+
+  const actionMenuItems = useMemo((): ActionMenuItem[] => {
+    const items: ActionMenuItem[] = [];
+
+    if (hasShare && onShare) {
+      items.push({
+        id: "share",
+        label: t("share"),
+        leadingIcon: "mail",
+        onClick: onShare,
+      });
+    }
+
+    if (hasExport && onSelectExportFormat) {
+      items.push(
+        {
+          id: "export-pdf",
+          label: exportPopoverPdfLabel,
+          leadingIcon: "picture_as_pdf",
+          onClick: () => onSelectExportFormat("pdf"),
+        },
+        {
+          id: "export-csv",
+          label: exportPopoverCsvLabel,
+          leadingIcon: "csv",
+          onClick: () => onSelectExportFormat("csv"),
+        },
+        {
+          id: "export-markdown",
+          label: exportPopoverMarkdownLabel,
+          leadingIcon: "markdown_copy",
+          onClick: () => onSelectExportFormat("markdown"),
+        },
+      );
+    }
+
+    if (hasDuplicate && onDuplicate) {
+      items.push({
+        id: "duplicate",
+        label: duplicateLabel ?? t("edit"),
+        leadingIcon: "content_copy",
+        onClick: onDuplicate,
+      });
+    } else if (hasEdit && onEdit) {
+      items.push({
+        id: "edit",
+        label: t("edit"),
+        leadingIcon: "edit",
+        onClick: onEdit,
+      });
+    }
+
+    if (hasManageStakeholders && onManageStakeholders) {
+      items.push({
+        id: "manage-stakeholders",
+        label: t("manageStakeholders"),
+        leadingIcon: "tags",
+        onClick: onManageStakeholders,
+      });
+    }
+
+    items.push({
+      id: "exit",
+      label: exitButtonText,
+      leadingIcon: "log_out",
+      onClick: () => void onExit?.({ saveDraft: saveDraftOnExit }),
+    });
+
+    return items;
+  }, [
+    duplicateLabel,
+    exitButtonText,
+    exportPopoverCsvLabel,
+    exportPopoverMarkdownLabel,
+    exportPopoverPdfLabel,
+    hasDuplicate,
+    hasEdit,
+    hasExport,
+    hasManageStakeholders,
+    hasShare,
+    onDuplicate,
+    onEdit,
+    onExit,
+    onManageStakeholders,
+    onSelectExportFormat,
+    onShare,
+    saveDraftOnExit,
+    t,
+  ]);
 
   useEffect(() => {
     if (!exportMenuOpen) return;
@@ -49,6 +188,20 @@ export function CreateFlowTopNavView({
     return () => document.removeEventListener("mousedown", onDoc);
   }, [exportMenuOpen]);
 
+  useEffect(() => {
+    if (!actionsMenuOpen) return;
+    const onDoc = (e: MouseEvent) => {
+      if (
+        actionsWrapRef.current &&
+        !actionsWrapRef.current.contains(e.target as Node)
+      ) {
+        setActionsMenuOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", onDoc);
+    return () => document.removeEventListener("mousedown", onDoc);
+  }, [actionsMenuOpen]);
+
   useEffect(() => {
     if (!exportMenuOpen) return;
     const onKey = (e: KeyboardEvent) => {
@@ -58,6 +211,155 @@ export function CreateFlowTopNavView({
     return () => window.removeEventListener("keydown", onKey);
   }, [exportMenuOpen]);
 
+  useEffect(() => {
+    if (!actionsMenuOpen) return;
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setActionsMenuOpen(false);
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [actionsMenuOpen]);
+
+  const inlineActions = (
+    <>
+      {hasShare && (
+        <Button
+          buttonType="outline"
+          palette={buttonPalette}
+          size="xsmall"
+          onClick={onShare}
+          ariaLabel={t("shareAriaLabel")}
+          className={outlineButtonClass}
+        >
+          {t("share")}
+        </Button>
+      )}
+
+      {hasExport && onSelectExportFormat ? (
+        <div className="relative" ref={exportWrapRef}>
+          <Button
+            buttonType="outline"
+            palette={buttonPalette}
+            size="xsmall"
+            type="button"
+            ariaLabel={t("exportAriaLabel")}
+            aria-haspopup="menu"
+            aria-expanded={exportMenuOpen}
+            aria-controls={exportMenuId}
+            onClick={() => setExportMenuOpen((o) => !o)}
+            className={`justify-center gap-[var(--spacing-scale-002,2px)] !pl-[var(--spacing-scale-012,12px)] !pr-[var(--spacing-scale-006,6px)] md:!pr-[var(--spacing-scale-006,6px)] ${outlineButtonClass}`}
+          >
+            <span>{t("export")}</span>
+            <svg
+              width="12"
+              height="12"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              strokeWidth={2}
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="shrink-0 md:h-[14px] md:w-[14px]"
+              aria-hidden="true"
+            >
+              <path d="M19 9l-7 7-7-7" />
+            </svg>
+          </Button>
+          {exportMenuOpen ? (
+            <div className="absolute right-0 top-[calc(100%+var(--spacing-measures-spacing-200,8px))] z-[300]">
+              <Popover
+                id={exportMenuId}
+                menuAriaLabel={exportPopoverMenuAriaLabel}
+              >
+                <ListItem
+                  showDivider
+                  leadingIcon="picture_as_pdf"
+                  label={exportPopoverPdfLabel}
+                  onClick={() => {
+                    onSelectExportFormat("pdf");
+                    setExportMenuOpen(false);
+                  }}
+                />
+                <ListItem
+                  showDivider
+                  leadingIcon="csv"
+                  label={exportPopoverCsvLabel}
+                  onClick={() => {
+                    onSelectExportFormat("csv");
+                    setExportMenuOpen(false);
+                  }}
+                />
+                <ListItem
+                  showDivider={false}
+                  leadingIcon="markdown_copy"
+                  label={exportPopoverMarkdownLabel}
+                  onClick={() => {
+                    onSelectExportFormat("markdown");
+                    setExportMenuOpen(false);
+                  }}
+                />
+              </Popover>
+            </div>
+          ) : null}
+        </div>
+      ) : null}
+
+      {hasDuplicate && (
+        <Button
+          buttonType="outline"
+          palette={buttonPalette}
+          size="xsmall"
+          onClick={onDuplicate}
+          ariaLabel={
+            duplicateAriaLabel ?? duplicateLabel ?? t("editAriaLabel")
+          }
+          className={outlineButtonClass}
+        >
+          {duplicateLabel ?? t("edit")}
+        </Button>
+      )}
+
+      {hasEdit && !hasDuplicate && (
+        <Button
+          buttonType="outline"
+          palette={buttonPalette}
+          size="xsmall"
+          onClick={onEdit}
+          ariaLabel={t("editAriaLabel")}
+          className={outlineButtonClass}
+        >
+          {t("edit")}
+        </Button>
+      )}
+
+      {hasManageStakeholders && onManageStakeholders ? (
+        <Button
+          buttonType="outline"
+          palette={buttonPalette}
+          size="xsmall"
+          type="button"
+          onClick={onManageStakeholders}
+          ariaLabel={t("manageStakeholdersAriaLabel")}
+          className={outlineButtonClass}
+        >
+          {t("manageStakeholders")}
+        </Button>
+      ) : null}
+
+      <Button
+        buttonType="outline"
+        palette={buttonPalette}
+        size="xsmall"
+        type="button"
+        onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })}
+        ariaLabel={exitButtonText}
+        className={`shrink-0 ${exitButtonFigmaClass} !text-[10px] !leading-[12px] !py-[6px] md:!py-[8px]`}
+      >
+        {exitButtonText}
+      </Button>
+    </>
+  );
+
   return (
     <header
       className={`bg-black w-full ${className}`}
@@ -72,126 +374,56 @@ export function CreateFlowTopNavView({
         <Logo size="createFlow" wordmark palette={buttonPalette} />
 
         <div className="flex flex-wrap items-center justify-end gap-[var(--spacing-scale-012,12px)]">
-          {hasShare && (
-            <Button
-              buttonType="outline"
-              palette={buttonPalette}
-              size="xsmall"
-              onClick={onShare}
-              ariaLabel={t("shareAriaLabel")}
-              className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
-            >
-              {t("share")}
-            </Button>
-          )}
-
-          {hasExport && onSelectExportFormat ? (
-            <div className="relative" ref={exportWrapRef}>
+          {useKebabMenu ? (
+            <div className="relative" ref={actionsWrapRef}>
               <Button
                 buttonType="outline"
                 palette={buttonPalette}
                 size="xsmall"
                 type="button"
-                ariaLabel={t("exportAriaLabel")}
+                ariaLabel={moreOptionsAriaLabel}
                 aria-haspopup="menu"
-                aria-expanded={exportMenuOpen}
-                aria-controls={exportMenuId}
-                onClick={() => setExportMenuOpen((o) => !o)}
-                className="justify-center gap-[var(--spacing-scale-002,2px)] !pl-[var(--spacing-scale-012,12px)] !pr-[var(--spacing-scale-006,6px)] md:!pr-[var(--spacing-scale-006,6px)] !text-[10px] md:!text-[12px] !leading-[12px] md:!leading-[14px] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+                aria-expanded={actionsMenuOpen}
+                aria-controls={actionsMenuId}
+                onClick={() => setActionsMenuOpen((open) => !open)}
+                className={`!px-[var(--spacing-scale-010,10px)] ${outlineButtonClass}`}
               >
-                <span>{t("export")}</span>
-                <svg
-                  width="12"
-                  height="12"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth={2}
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  className="shrink-0 md:w-[14px] md:h-[14px]"
-                  aria-hidden="true"
-                >
-                  <path d="M19 9l-7 7-7-7" />
-                </svg>
+                <KebabIcon />
               </Button>
-              {exportMenuOpen ? (
+              {actionsMenuOpen ? (
                 <div className="absolute right-0 top-[calc(100%+var(--spacing-measures-spacing-200,8px))] z-[300]">
-                  <Popover
-                    id={exportMenuId}
-                    menuAriaLabel={exportPopoverMenuAriaLabel}
-                  >
-                    <ListItem
-                      showDivider
-                      leadingIcon="picture_as_pdf"
-                      label={exportPopoverPdfLabel}
-                      onClick={() => {
-                        onSelectExportFormat("pdf");
-                        setExportMenuOpen(false);
-                      }}
-                    />
-                    <ListItem
-                      showDivider
-                      leadingIcon="csv"
-                      label={exportPopoverCsvLabel}
-                      onClick={() => {
-                        onSelectExportFormat("csv");
-                        setExportMenuOpen(false);
-                      }}
-                    />
-                    <ListItem
-                      showDivider={false}
-                      leadingIcon="markdown_copy"
-                      label={exportPopoverMarkdownLabel}
-                      onClick={() => {
-                        onSelectExportFormat("markdown");
-                        setExportMenuOpen(false);
-                      }}
-                    />
+                  <Popover id={actionsMenuId} menuAriaLabel={actionsMenuAriaLabel}>
+                    {actionMenuItems.map((item, index) => (
+                      <ListItem
+                        key={item.id}
+                        showDivider={index < actionMenuItems.length - 1}
+                        leadingIcon={item.leadingIcon}
+                        label={item.label}
+                        onClick={() => {
+                          item.onClick();
+                          setActionsMenuOpen(false);
+                        }}
+                      />
+                    ))}
                   </Popover>
                 </div>
               ) : null}
             </div>
-          ) : null}
-
-          {hasEdit && (
-            <Button
-              buttonType="outline"
-              palette={buttonPalette}
-              size="xsmall"
-              onClick={onEdit}
-              ariaLabel={t("editAriaLabel")}
-              className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
-            >
-              {t("edit")}
-            </Button>
-          )}
-
-          {hasManageStakeholders && onManageStakeholders ? (
+          ) : hasSecondaryActions ? (
+            inlineActions
+          ) : (
             <Button
               buttonType="outline"
               palette={buttonPalette}
               size="xsmall"
               type="button"
-              onClick={onManageStakeholders}
-              ariaLabel={t("manageStakeholdersAriaLabel")}
-              className="md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !px-[var(--spacing-scale-006,6px)] md:!px-[var(--spacing-scale-008,8px)] !py-[6px] md:!py-[8px] !border md:!border-[1.5px]"
+              onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })}
+              ariaLabel={exitButtonText}
+              className={`shrink-0 ${exitButtonFigmaClass} !text-[10px] !leading-[12px] !py-[6px] md:!py-[8px]`}
             >
-              {t("manageStakeholders")}
+              {exitButtonText}
             </Button>
-          ) : null}
-
-          <Button
-            buttonType="outline"
-            palette={buttonPalette}
-            size="xsmall"
-            type="button"
-            onClick={() => void onExit?.({ saveDraft: saveDraftOnExit })}
-            ariaLabel={exitButtonText}
-            className={`md:!text-[12px] md:!leading-[14px] !text-[10px] !leading-[12px] !py-[6px] md:!py-[8px] shrink-0 ${exitButtonFigmaClass}`}
-          >
-            {exitButtonText}
-          </Button>
+          )}
         </div>
       </nav>
     </header>