@indico-data/design-system 2.18.0 → 2.20.0

package/src/components/popper/Popper.stories.tsx

@@ -0,0 +1,161 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { useState, useRef } from 'react';
+import { Popper, PopperProps } from './Popper';
+import { Button } from '../button';
+import { Menu } from '../menu';
+
+const meta: Meta<typeof Popper> = {
+  title: 'Components/Popper',
+  component: Popper,
+  argTypes: {
+    children: {
+      control: 'object',
+      description: 'The content of the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+    referenceElement: {
+      control: 'object',
+      description: 'The element to which the popper is attached.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'HTMLElement | null',
+        },
+      },
+    },
+    isOpen: {
+      control: 'boolean',
+      description: 'Controls the visibility of the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: 'false' },
+      },
+    },
+    onClose: {
+      action: 'closed',
+      description: 'Callback function when the popper closes.',
+      table: { category: 'callbacks' },
+    },
+    ariaLabel: {
+      control: 'text',
+      description: 'Sets the aria-label attribute for the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+      },
+    },
+    placement: {
+      control: 'select',
+      options: [
+        'top',
+        'top-start',
+        'top-end',
+        'right',
+        'right-start',
+        'right-end',
+        'bottom',
+        'bottom-start',
+        'bottom-end',
+        'left',
+        'left-start',
+        'left-end',
+      ],
+      description: 'Sets the placement of the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'string',
+        },
+        defaultValue: { summary: 'bottom-start' },
+      },
+    },
+    offsetValue: {
+      control: 'number',
+      description: 'Sets the offset value for the popper.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+        defaultValue: { summary: '5' },
+      },
+    },
+  },
+  decorators: [
+    (Story: React.ComponentType) => (
+      <div
+        style={{
+          height: '160px',
+        }}
+      >
+        <Story />
+      </div>
+    ),
+  ],
+};
+
+export default meta;
+
+type Story = StoryObj<PopperProps>;
+
+export const Default: Story = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const buttonRef = useRef<HTMLDivElement | null>(null);
+
+    return (
+      <div>
+        <div ref={buttonRef}>
+          <Button
+            onClick={() => setIsOpen((prev) => !prev)}
+            iconName="kabob"
+            ariaLabel="Toggle Popper"
+          />
+        </div>
+        <Popper
+          {...args}
+          referenceElement={buttonRef.current}
+          isOpen={isOpen || args.isOpen}
+          onClose={() => setIsOpen(false)}
+        >
+          <Menu>
+            <Button
+              data-testid="refresh-library"
+              ariaLabel="Refresh Data"
+              iconName="retrain"
+              onClick={() => console.log('Refresh Data')}
+            >
+              Refresh Data
+            </Button>
+            <Button
+              data-testid="configure-fields"
+              ariaLabel="Configure Fields"
+              iconName="edit"
+              onClick={() => console.log('Configure Fields')}
+            >
+              Configure Fields
+            </Button>
+            <Button
+              data-testid="delete-library"
+              ariaLabel="Delete Library"
+              iconName="trash"
+              onClick={() => console.log('Delete Library')}
+            >
+              Delete Library
+            </Button>
+          </Menu>
+        </Popper>
+      </div>
+    );
+  },
+};

package/src/components/popper/Popper.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Popper } from './Popper';
+import { Menu } from '../menu';
+import { Button } from '../button';
+
+describe('Popper Component', () => {
+  it('renders without display when isOpen is false', () => {
+    render(
+      <Popper referenceElement={null} isOpen={false} onClose={jest.fn()} ariaLabel="Example Popper">
+        <div>Popper Content</div>
+      </Popper>,
+    );
+    expect(screen.queryByText('Popper Content')).not.toBeInTheDocument();
+  });
+
+  it('displays the popper content when isOpen is true', () => {
+    render(
+      <Popper referenceElement={null} isOpen={true} onClose={jest.fn()} ariaLabel="Example Popper">
+        <div>Popper Content</div>
+      </Popper>,
+    );
+    expect(screen.getByText('Popper Content')).toBeInTheDocument();
+  });
+
+  it('calls onClose when clicked outside', () => {
+    const mockOnClose = jest.fn();
+
+    render(
+      <div>
+        <div data-testid="outside">Outside Element</div>
+        <Popper
+          referenceElement={null}
+          isOpen={true}
+          onClose={mockOnClose}
+          ariaLabel="Example Popper"
+        >
+          <div>Popper Content</div>
+        </Popper>
+      </div>,
+    );
+
+    fireEvent.mouseDown(screen.getByTestId('outside'));
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('renders children inside the popper', () => {
+    render(
+      <Popper referenceElement={null} isOpen={true} onClose={jest.fn()} ariaLabel="Example Popper">
+        <Menu>
+          <Button ariaLabel="Refresh Data" iconName="retrain">
+            Refresh Data
+          </Button>
+          <Button ariaLabel="Configure Fields" iconName="edit">
+            Configure Fields
+          </Button>
+          <Button ariaLabel="Delete Library" iconName="trash">
+            Delete Library
+          </Button>
+        </Menu>
+      </Popper>,
+    );
+
+    expect(screen.getByText('Refresh Data')).toBeInTheDocument();
+    expect(screen.getByText('Configure Fields')).toBeInTheDocument();
+    expect(screen.getByText('Delete Library')).toBeInTheDocument();
+  });
+});

package/src/components/popper/Popper.tsx

@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import { useFloating, offset, flip, shift, Placement } from '@floating-ui/react-dom';
+import { useClickOutside } from '@/hooks/useClickOutside';
+
+export type PopperProps = {
+  children: React.ReactNode;
+  referenceElement: HTMLElement | null;
+  isOpen: boolean;
+  onClose: () => void;
+  ariaLabel: string;
+  placement?: Placement;
+  offsetValue?: number;
+};
+
+export function Popper({
+  children,
+  referenceElement,
+  isOpen,
+  onClose,
+  ariaLabel,
+  placement = 'bottom-start',
+  offsetValue = 5,
+}: PopperProps) {
+  const popperContentRef = useRef() as React.MutableRefObject<HTMLDivElement>;
+
+  const { x, y, strategy, refs } = useFloating({
+    placement,
+    middleware: [offset(offsetValue), flip(), shift()],
+    elements: {
+      reference: referenceElement,
+    },
+  });
+
+  useClickOutside(popperContentRef, onClose);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={refs.setFloating}
+      style={{
+        position: strategy,
+        top: y ?? '',
+        left: x ?? '',
+      }}
+      role="dialog"
+      aria-label={ariaLabel}
+      className="popper-container"
+    >
+      <div ref={popperContentRef} className="popper-content">
+        {children}
+      </div>
+    </div>
+  );
+}

package/src/components/popper/index.ts

@@ -0,0 +1 @@
+export { Popper } from './Popper';

package/src/components/popper/styles/Popper.scss

@@ -0,0 +1,11 @@
+@import './variables.scss';
+
+.popper-container {
+  z-index: 99;
+}
+
+.popper-content {
+  border-radius: var(--pf-popper-border-radius);
+  border: 1px solid var(--pf-popper-border-color);
+  background: var(--pf-popper-background-color);
+}

package/src/components/popper/styles/_variables.scss

@@ -0,0 +1,15 @@
+// Common Variables
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-popper-background-color: var(--pf-white-color);
+  --pf-popper-border-color: var(--pf-gray-color-900);
+  --pf-popper-border-radius: var(--pf-rounded);
+  --pf-popper-padding: var(--pf-padding-2);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-popper-background-color: var(--pf-primary-color-600);
+  --pf-popper-border-color: var(--pf-gray-color);
+}

package/src/hooks/useClickOutside.tsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+
+export const useClickOutside = (
+  ref: React.MutableRefObject<HTMLElement>,
+  handler: (e: MouseEvent | TouchEvent) => void,
+) => {
+  useEffect(() => {
+    const listener = (e: MouseEvent | TouchEvent) => {
+      if (!ref.current || ref.current.contains(e.target as Node)) {
+        return;
+      }
+      handler(e);
+    };
+    document.addEventListener('mousedown', listener);
+    document.addEventListener('touchstart', listener);
+
+    return () => {
+      document.removeEventListener('mousedown', listener);
+      document.removeEventListener('touchstart', listener);
+    };
+  }, [ref, handler]);
+};

package/src/index.ts

@@ -71,3 +71,5 @@ export { Select as SelectInput } from './components/forms/select';
 export { Form } from './components/forms/form';
 export { Skeleton } from './components/skeleton';
 export { Card } from './components/card';
+export { Popper } from './components/popper';
+export { Menu } from './components/menu';

package/src/legacy/components/buttons/commonStyles.ts

@@ -42,10 +42,6 @@ export const defaults = css`
   font-family: ${TYPOGRAPHY.fontFamily.base};
 
   padding: 0 1em !important;
-
-  & + button {
-    margin-left: 14px;
-  }
 `;
 
 export const sizeLarge = css`

package/src/storybook/labelArgTypes.ts

@@ -0,0 +1,50 @@
+// Common argTypes for form components that include a label
+import { ArgTypes } from '@storybook/react';
+
+const labelArgTypes: ArgTypes = {
+  label: {
+    control: 'text',
+    description: 'The text to display as the label for the form component',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+  isRequired: {
+    control: 'boolean',
+    description: 'Toggles the required asterisk on the label',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+  hasHiddenLabel: {
+    control: 'boolean',
+    description:
+      'Determines whether the label should be displayed or not. Included as aria-label if true',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'boolean',
+      },
+    },
+    defaultValue: { summary: 'false' },
+  },
+  name: {
+    control: 'text',
+    description: 'The name attribute for the form component, used for identifying the field',
+    table: {
+      category: 'Props',
+      type: {
+        summary: 'string',
+      },
+    },
+  },
+};
+
+export default labelArgTypes;

package/src/styles/index.scss

@@ -16,6 +16,8 @@
 @import '../components/forms/toggle/styles/Toggle.scss';
 @import '../components/skeleton/styles/Skeleton.scss';
 @import '../components/card/styles/Card.scss';
+@import '../components/menu/styles/Menu.scss';
+@import '../components/popper/styles/Popper.scss';
 @import '../legacy/components/inputs/NoInputDatePicker/NoInputDatePicker.scss';
 @import 'typography';
 @import 'colors';