@indico-data/design-system 3.8.0 → 3.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",

package/src/components/floatUI/FloatUI.mdx

@@ -17,9 +17,16 @@ The FloatUI component is used to display content relative to another element. It
 
 FloatUI can be used in two modes:
 
-- **Uncontrolled Mode:** FloatUI manages its own state, toggling visibility when the trigger is clicked.
+- **Uncontrolled Mode:** FloatUI manages its own state, toggling visibility when the trigger is clicked (or hovered if `hover` prop is true).
 - **Controlled Mode:** The parent component controls visibility by passing `isOpen` and `setIsOpen` props
 
+## Interaction Types
+
+FloatUI supports two interaction types:
+
+- **Click (default):** Opens when the trigger is clicked
+- **Hover:** Opens when the trigger is hovered. Set the `hover` prop to `true` to enable hover interactions.
+
 ### Example: Controlled `FloatUI`
 
 ```tsx

package/src/components/floatUI/FloatUI.stories.tsx

@@ -73,6 +73,18 @@ const meta: Meta<typeof FloatUI> = {
         },
       },
     },
+    hover: {
+      control: 'boolean',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
   },
   decorators: [
     (Story: React.ComponentType) => (
@@ -170,3 +182,35 @@ export const Controlled: Story = {
     );
   },
 };
+
+export const Hover: Story = {
+  args: {
+    ariaLabel: 'Hover FloatUI',
+    hover: true,
+  },
+  render: (args) => (
+    <FloatUI {...args} ariaLabel="Hover FloatUI" hover>
+      <Button iconLeft="info" ariaLabel="Hover me" variant="action">
+        Hover me
+      </Button>
+      <Menu>
+        <Button
+          data-testid="hover-item-1"
+          ariaLabel="Item 1"
+          iconLeft="retrain"
+          onClick={() => console.log('Item 1')}
+        >
+          Item 1
+        </Button>
+        <Button
+          data-testid="hover-item-2"
+          ariaLabel="Item 2"
+          iconLeft="edit"
+          onClick={() => console.log('Item 2')}
+        >
+          Item 2
+        </Button>
+      </Menu>
+    </FloatUI>
+  ),
+};

package/src/components/floatUI/FloatUI.tsx

@@ -2,6 +2,7 @@ import React, { useRef, isValidElement, useState } from 'react';
 import {
   FloatingPortal,
   useClick,
+  useHover,
   useFloating,
   useInteractions,
   UseFloatingOptions,
@@ -27,6 +28,7 @@ export function FloatUI({
   portalOptions = {},
   floatingOptions = defaultOptions,
   className,
+  hover = false,
 }: FloatUIProps) {
   const [internalIsOpen, setInternalIsOpen] = useState(false);
 
@@ -60,10 +62,12 @@ export function FloatUI({
     },
   });
 
-  const click = useClick(context);
+  // Can't call hooks conditionally so this enabled option is needed.
+  const click = useClick(context, { enabled: !hover });
+  const hoverHook = useHover(context, { enabled: hover });
   const dismiss = useDismiss(context);
 
-  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
+  const { getReferenceProps, getFloatingProps } = useInteractions([click, hoverHook, dismiss]);
 
   const tooltipContent = (
     <div

package/src/components/floatUI/__tests__/FloatUI.test.tsx

@@ -2,6 +2,7 @@ import { render, screen, fireEvent } from '@testing-library/react';
 import { FloatUI } from '../FloatUI';
 import { Menu } from '../../menu';
 import { Button } from '../../button';
+import userEvent from '@testing-library/user-event';
 
 describe('FloatUI Component', () => {
   it('does not display FloatUI content initially when rendered in uncontrolled mode', () => {
@@ -108,4 +109,35 @@ describe('FloatUI Component', () => {
     fireEvent.click(screen.getByText('Toggle'));
     expect(setIsOpen).toHaveBeenCalledWith(true, expect.any(Object), 'click');
   });
+
+  it('displays the FloatUI content when the trigger is hovered in hover mode', async () => {
+    const user = userEvent.setup();
+    render(
+      <FloatUI ariaLabel="Example FloatUI" hover>
+        <Button ariaLabel="Hover me">Hover me</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+
+    await user.hover(screen.getByText('Hover me'));
+    expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
+  });
+
+  it('hides the FloatUI content when mouse leaves in hover mode', async () => {
+    const user = userEvent.setup();
+    render(
+      <FloatUI ariaLabel="Example FloatUI" hover>
+        <Button ariaLabel="Hover me">Hover me</Button>
+        <div>FloatUI Content</div>
+      </FloatUI>,
+    );
+
+    await user.hover(screen.getByText('Hover me'));
+    expect(screen.getByText('FloatUI Content')).toBeInTheDocument();
+
+    await user.unhover(screen.getByText('Hover me'));
+    expect(screen.queryByText('FloatUI Content')).not.toBeInTheDocument();
+  });
 });

package/src/components/floatUI/types.ts

@@ -19,4 +19,6 @@ export type FloatUIProps = {
   };
   /** Function to toggle the visibility of the FloatUI (for controlled mode). */
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
+  /** If true, opens on hover instead of click. Defaults to false. */
+  hover?: boolean;
 };

package/src/components/icons/Icon.stories.tsx

@@ -62,6 +62,13 @@ const meta: Meta = {
         category: 'callbacks',
       },
     },
+    faPrefix: {
+      control: 'text',
+      defaultValue: 'fas',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
   },
 };
 export default meta;

package/src/components/icons/Icon.tsx

@@ -3,7 +3,14 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconName as FAIconName, findIconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { IconProps } from './types';
 
-export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: IconProps) => {
+export const Icon = ({
+  name,
+  size = 'md',
+  className,
+  ariaLabel,
+  faPrefix = 'fas',
+  ...props
+}: IconProps) => {
   const label = ariaLabel || `${name} Icon`;
 
   const iconClasses = classNames(
@@ -20,7 +27,7 @@ export const Icon = ({ name, size = 'md', className, ariaLabel, ...props }: Icon
   // Otherwise, search for an indicon (registered under Font Awesome with a prefix of 'fak')
   const icon = faIconName
     ? findIconDefinition({
-        prefix: 'fas',
+        prefix: faPrefix,
         iconName: faIconName as FAIconName,
       })
     : findIconDefinition({

package/src/components/icons/types.ts

@@ -1,6 +1,6 @@
 import { MouseEventHandler, CSSProperties } from 'react';
 import { PermafrostComponent } from '../../types';
-import { IconName as FAIconName } from '@fortawesome/fontawesome-svg-core';
+import { IconName as FAIconName, IconPrefix } from '@fortawesome/fontawesome-svg-core';
 import { indicons } from './indicons';
 
 export type IconSizes = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
@@ -20,4 +20,8 @@ export type IconProps = PermafrostComponent & {
   style?: CSSProperties;
   /** Click event handler */
   onClick?: MouseEventHandler<SVGElement>;
+  /** The Font Awesome prefix of the icon (defaults to 'fas', the solid icon prefix)
+   * Only used for Font Awesome icons, not for Indicons.
+   */
+  faPrefix?: IconPrefix;
 };