Component cleanup

2026-04-29 07:20:16 -06:00
parent 252848eba9
commit e6127f1a3f
267 changed files with 2087 additions and 2196 deletions
@@ -0,0 +1,125 @@
+"use client";
+
+import { memo } from "react";
+import MenuItemView from "./MenuItem.view";
+import type { MenuItemProps } from "./MenuItem.types";
+
+const MenuItemContainer = memo<MenuItemProps>(
+  ({
+    href = "#",
+    buttonOnClick,
+    children,
+    state: stateProp,
+    mode: modeProp,
+    icon: _icon = false,
+    size: sizeProp = "X Small",
+    className = "",
+    disabled = false,
+    reducedPadding = false,
+    ariaLabel,
+    ...props
+  }) => {
+    const state = stateProp ?? "default";
+    const mode = modeProp ?? "default";
+    const size = sizeProp ?? "X Small";
+
+    // Size styles based on Figma specifications
+    const sizeStyles: Record<
+      "X Small" | "Small" | "Medium" | "Large" | "X Large",
+      string
+    > = {
+      "X Small": reducedPadding
+        ? "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]"
+        : "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]",
+      Small: "px-[var(--spacing-scale-004)] py-[var(--spacing-scale-002)]",
+      Medium: reducedPadding
+        ? "px-[var(--spacing-scale-002)] py-[var(--spacing-scale-008)] h-[32px]"
+        : "px-[var(--spacing-scale-008)] py-[var(--spacing-scale-008)] h-[32px]",
+      Large:
+        "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]",
+      "X Large":
+        "px-[var(--spacing-scale-016)] py-[var(--spacing-scale-016)] h-[44px]",
+    };
+
+    // Text styles based on Figma specifications
+    const textStyles: Record<
+      "X Small" | "Small" | "Medium" | "Large" | "X Large",
+      string
+    > = {
+      "X Small":
+        "font-inter text-[10px] leading-[12px] font-medium tracking-[0%]",
+      Small: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]",
+      Medium: "font-inter text-[12px] leading-[14px] font-medium tracking-[0%]",
+      Large: "font-inter text-[16px] leading-[20px] font-medium tracking-[0%]",
+      "X Large":
+        "font-inter text-[24px] leading-[28px] font-normal tracking-[0%]",
+    };
+
+    // State styles for Default mode (yellow text on dark background)
+    const defaultModeStyles: Record<"default" | "hover" | "selected", string> =
+      {
+        default:
+          "bg-transparent text-[var(--color-content-default-brand-primary,#fefcc9)] hover:bg-[var(--color-gray-800)] hover:text-[var(--color-content-default-brand-primary,#fefcc9)]",
+        hover:
+          "bg-[var(--color-gray-800)] text-[var(--color-content-default-brand-primary,#fefcc9)]",
+        selected:
+          "border border-[var(--color-border-default-brand-primary,#fdfaa8)] text-[var(--color-content-default-brand-primary,#fefcc9)] bg-transparent hover:bg-[var(--color-gray-800)]",
+      };
+
+    // State styles for Inverse mode (black text on yellow background)
+    const inverseModeStyles: Record<"default" | "hover" | "selected", string> =
+      {
+        default:
+          "bg-transparent text-[var(--color-content-inverse-primary,black)] hover:bg-[var(--color-surface-brand-accent,#4d4a00)] hover:text-[var(--color-content-inverse-primary,black)]",
+        hover:
+          "bg-[var(--color-surface-brand-accent,#4d4a00)] text-[var(--color-content-inverse-primary,black)]",
+        selected:
+          "border border-[var(--color-border-default-primary,#141414)] text-[var(--color-content-inverse-primary,black)] bg-transparent hover:bg-[var(--color-surface-brand-accent,#4d4a00)]",
+      };
+
+    // Get state styles based on mode
+    const stateStyles =
+      mode === "inverse" ? inverseModeStyles : defaultModeStyles;
+
+    // Base styles
+    const baseStyles = `inline-flex items-center whitespace-nowrap ${sizeStyles[size]} ${textStyles[size]} rounded-[var(--radius-measures-radius-full)] transition-all duration-200 ease-in-out cursor-pointer`;
+
+    // Interactive styles
+    const interactiveStyles =
+      "hover:scale-[1.02] active:scale-[0.98] focus:scale-[1.02] disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100 disabled:active:scale-100";
+
+    // Disabled styles
+    const disabledStyles = disabled
+      ? "bg-[var(--color-surface-default-tertiary)] text-[var(--color-content-default-tertiary)]"
+      : "";
+
+    // Combine all styles
+    const combinedStyles = `${baseStyles} ${stateStyles[state]} ${interactiveStyles} ${disabledStyles} ${className}`;
+
+    const accessibilityProps = {
+      ...(ariaLabel && { "aria-label": ariaLabel }),
+      ...(disabled && { "aria-disabled": true }),
+      ...(state === "selected" && { "aria-current": "page" as const }),
+      role: "menuitem" as const,
+      tabIndex: disabled ? -1 : 0,
+      ...props,
+    };
+
+    return (
+      <MenuItemView
+        href={href}
+        buttonOnClick={buttonOnClick}
+        disabled={disabled}
+        className={className}
+        combinedStyles={combinedStyles}
+        accessibilityProps={accessibilityProps}
+      >
+        {children}
+      </MenuItemView>
+    );
+  },
+);
+
+MenuItemContainer.displayName = "MenuItem";
+
+export default MenuItemContainer;
@@ -0,0 +1,58 @@
+export type MenuItemSizeValue =
+  | "X Small"
+  | "Small"
+  | "Medium"
+  | "Large"
+  | "X Large";
+
+export type MenuItemStateValue = "default" | "hover" | "selected";
+
+export type MenuItemModeValue = "default" | "inverse";
+
+export interface MenuItemProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  href?: string;
+  /** When set, renders a `<button type="button">` instead of a link (e.g. open login modal). */
+  buttonOnClick?: () => void;
+  children?: React.ReactNode;
+  /**
+   * Menu item state: "default", "hover", or "selected".
+   * @default "default"
+   */
+  state?: MenuItemStateValue;
+  /**
+   * Menu item mode. Default mode has yellow text on dark background.
+   * Inverse mode has black text on yellow background (for folderTop variant).
+   * @default "default"
+   */
+  mode?: MenuItemModeValue;
+  /**
+   * Whether to show an icon (for future icon support).
+   * @default false
+   */
+  icon?: boolean;
+  /**
+   * Menu item size. Uses Figma format: "X Small", "Small", "Medium", "Large", "X Large".
+   * @default "X Small"
+   */
+  size?: MenuItemSizeValue;
+  className?: string;
+  disabled?: boolean;
+  /**
+   * Whether to use reduced padding (for "use cases" button).
+   * @default false
+   */
+  reducedPadding?: boolean;
+  ariaLabel?: string;
+}
+
+export interface MenuItemViewProps {
+  href: string;
+  buttonOnClick?: () => void;
+  children?: React.ReactNode;
+  disabled: boolean;
+  className: string;
+  combinedStyles: string;
+  accessibilityProps: React.HTMLAttributes<
+    HTMLAnchorElement | HTMLSpanElement | HTMLButtonElement
+  >;
+}
@@ -0,0 +1,42 @@
+import { memo } from "react";
+import type { MenuItemViewProps } from "./MenuItem.types";
+
+function MenuItemView({
+  href,
+  buttonOnClick,
+  children,
+  disabled,
+  combinedStyles,
+  accessibilityProps,
+}: MenuItemViewProps) {
+  if (disabled) {
+    return (
+      <span className={combinedStyles} {...accessibilityProps}>
+        {children}
+      </span>
+    );
+  }
+
+  if (buttonOnClick) {
+    return (
+      <button
+        type="button"
+        className={combinedStyles}
+        onClick={buttonOnClick}
+        {...accessibilityProps}
+      >
+        {children}
+      </button>
+    );
+  }
+
+  return (
+    <a href={href} className={combinedStyles} {...accessibilityProps}>
+      {children}
+    </a>
+  );
+}
+
+MenuItemView.displayName = "MenuItemView";
+
+export default memo(MenuItemView);
@@ -0,0 +1,2 @@
+export { default } from "./MenuItem.container";
+export type { MenuItemProps } from "./MenuItem.types";