@snapdragonsnursery/react-components 1.11.0 → 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.11.0",
+  "version": "1.12.0",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/components/ui/floating-action-button.jsx

@@ -0,0 +1,126 @@
+// FloatingActionButton.jsx
+// ---------------------------------
+// A shadcn-styled Floating Action Button (FAB).
+// - Single fluid button that contains both icon and (optional) label
+// - Label reveal is controlled by showLabel: 'hover' | 'always' | 'never'
+// - Subtle icon and padding animation on hover when showLabel='hover'
+// - Supports fixed positioning to screen corners
+//
+// Example usage:
+//
+// import { FloatingActionButton } from "@snapdragonsnursery/react-components";
+// import { Plus } from "lucide-react";
+//
+// export default function Example() {
+//   return (
+//     <FloatingActionButton
+//       icon={Plus}
+//       label="Create"
+//       onClick={() => console.log("Create clicked")}
+//       showLabel="hover"
+//       position="bottom-right"
+//     />
+//   );
+// }
+//
+// Notes:
+// - Provide ariaLabel if label is omitted.
+// - Uses Tailwind CSS + shadcn design tokens (bg-primary, text-primary-foreground, etc.).
+
+import * as React from "react";
+import { cn } from "../../lib/utils";
+import { Button } from "./button.jsx";
+
+const POSITION_CLASSES = {
+  "bottom-right": "fixed bottom-5 right-5",
+  "bottom-left": "fixed bottom-5 left-5",
+  "top-right": "fixed top-5 right-5",
+  "top-left": "fixed top-5 left-5",
+  none: "",
+};
+
+function FloatingActionButton({
+  icon: Icon,
+  label = "",
+  onClick,
+  showLabel,
+  // Deprecated: expandOnHover kept for backwards compatibility. If provided and showLabel is undefined,
+  // we map: true -> 'hover', false -> 'never'.
+  expandOnHover,
+  position = "bottom-right",
+  className,
+  disabled = false,
+  ariaLabel,
+  positionClassName,
+  colorClassName,
+  ...props
+}) {
+  const resolvedShowLabel = React.useMemo(() => {
+    if (showLabel) return showLabel;
+    if (typeof expandOnHover === "boolean") {
+      return expandOnHover ? "hover" : "never";
+    }
+    return label ? "hover" : "never";
+  }, [showLabel, expandOnHover, label]);
+
+  const containerClasses = cn(
+    positionClassName || (POSITION_CLASSES[position ?? "none"] ?? POSITION_CLASSES.none),
+    className
+  );
+
+  const baseButton = cn(
+    "rounded-full shadow-lg focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 leading-none",
+    colorClassName || "bg-primary hover:bg-primary/90 text-primary-foreground"
+  );
+
+  const shapeClasses =
+    resolvedShowLabel === "never"
+      ? "h-14 w-14 inline-flex items-center justify-center gap-0 p-0"
+      : resolvedShowLabel === "always"
+        ? "h-14 inline-flex items-center justify-center gap-0 px-4"
+        : // hover mode
+          "group h-14 inline-flex items-center gap-0 justify-center min-w-[3.5rem] px-0 transition-all duration-300 ease-out hover:px-4";
+
+  const buttonClasses = cn(baseButton, shapeClasses);
+
+  const iconClasses = cn(
+    "h-6 w-6 block shrink-0 pointer-events-none transition-transform duration-200 ease-out",
+    resolvedShowLabel === "hover" ? "group-hover:scale-110 group-hover:rotate-3" : ""
+  );
+
+  const labelClasses = cn(
+    "leading-none whitespace-nowrap",
+    resolvedShowLabel === "always"
+      ? "ml-2"
+      : resolvedShowLabel === "hover"
+        ? "max-w-0 overflow-hidden opacity-0 scale-95 group-hover:max-w-[14rem] group-hover:opacity-100 group-hover:scale-100 group-hover:ml-2 transition-all duration-300 ease-out"
+        : "sr-only"
+  );
+
+  return (
+    <div className={containerClasses} data-testid="fab-container">
+      <Button
+        type="button"
+        data-slot="floating-action-button"
+        className={buttonClasses}
+        size={resolvedShowLabel === "never" ? "icon" : undefined}
+        aria-label={ariaLabel || label || "Action"}
+        title={ariaLabel || label || "Action"}
+        onClick={onClick}
+        disabled={disabled}
+        {...props}
+      >
+        {Icon ? <Icon className={iconClasses} aria-hidden="true" /> : null}
+        {label ? (
+          <span className={labelClasses} data-testid={resolvedShowLabel !== "never" ? "fab-label" : undefined}>
+            {label}
+          </span>
+        ) : null}
+      </Button>
+    </div>
+  );
+}
+
+export default FloatingActionButton;
+
+

package/src/components/ui/floating-action-button.test.jsx

@@ -0,0 +1,46 @@
+// Basic tests for FloatingActionButton
+// - Renders icon and label behaviour depending on expandOnHover
+
+import React from 'react'
+import { render, screen, fireEvent } from '@testing-library/react'
+import FloatingActionButton from './floating-action-button'
+
+function DummyIcon(props) {
+  return <svg aria-hidden="true" data-testid="dummy-icon" {...props} />
+}
+
+describe('FloatingActionButton (library)', () => {
+  it('renders with icon', () => {
+    render(<FloatingActionButton icon={DummyIcon} ariaLabel="Action" />)
+    expect(screen.getByTestId('dummy-icon')).toBeInTheDocument()
+  })
+
+  it('expands label on hover when showLabel="hover"', () => {
+    render(<FloatingActionButton icon={DummyIcon} label="Create" showLabel="hover" />)
+    // Label exists in DOM (hidden initially via CSS)
+    const label = screen.getByTestId('fab-label')
+    expect(label).toBeInTheDocument()
+    // Simulate hover on container
+    const container = screen.getByTestId('fab-container')
+    fireEvent.mouseOver(container)
+    // Ensure label text is present
+    expect(label).toHaveTextContent('Create')
+  })
+
+  it('hides label visually when showLabel="never"', () => {
+    render(<FloatingActionButton icon={DummyIcon} label="Search" showLabel="never" ariaLabel="Search" />)
+    // No test id for label since not rendered
+    const button = screen.getByRole('button', { name: /search/i })
+    expect(button).toBeInTheDocument()
+  })
+
+  it('calls onClick when clicked', () => {
+    const onClick = jest.fn()
+    render(<FloatingActionButton icon={DummyIcon} ariaLabel="Action" onClick={onClick} />)
+    const button = screen.getByRole('button', { name: /action/i })
+    fireEvent.click(button)
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+})
+
+

package/src/index.d.ts

@@ -116,6 +116,23 @@ export const BreadcrumbPage: React.ComponentType<any>
 export const BreadcrumbSeparator: React.ComponentType<any>
 export const BreadcrumbEllipsis: React.ComponentType<any>
 
+// Floating Action Button
+export interface FloatingActionButtonProps {
+  icon?: React.ComponentType<any>
+  label?: string
+  onClick?: () => void
+  showLabel?: 'hover' | 'always' | 'never'
+  // @deprecated use showLabel instead. If provided: true => 'hover', false => 'never'
+  expandOnHover?: boolean
+  position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left' | 'none'
+  className?: string
+  positionClassName?: string
+  colorClassName?: string
+  disabled?: boolean
+  ariaLabel?: string
+}
+export const FloatingActionButton: React.ComponentType<FloatingActionButtonProps>
+
 // Switchers
 export interface SwitcherItem {
   id?: string | number

package/src/index.js

@@ -74,3 +74,6 @@ export {
   BreadcrumbSeparator,
   BreadcrumbEllipsis,
 } from "./components/ui/breadcrumb.jsx";
+
+// Floating Action Button
+export { default as FloatingActionButton } from "./components/ui/floating-action-button.jsx";