@indico-data/design-system 2.27.0 → 2.28.1

package/src/components/popper/Popper.mdx

@@ -1,79 +0,0 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
-import * as PopperStories from './Popper.stories';
-import { Col, Row } from '@/components';
-
-<Meta title="Components/Popper" of={PopperStories} />
-
-# Popper
-
-The Popper component is used to display content relative to another element. It can be used for tooltips, dropdowns, and other floating elements. The Popper is positioned using the `@floating-ui/react-dom` library.
-
-<Canvas
-  of={PopperStories.Default}
-  source={{
-    code: `
-import React, { useState, useRef } from 'react';
-import { Popper } from '@/components/Popper';
-import { Button } from '@/components/Button';
-import { Menu } from '@/components/Menu';
-
-const Example = () => {
-  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
-        referenceElement={buttonRef.current}
-        isOpen={isOpen}
-        onClose={() => setIsOpen(false)}
-        ariaLabel="Example Popper"
-        placement="bottom-start"
-        offsetValue={5}
-      >
-        <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>
-  );
-};
-
-export default Example;
-    `,
-  }}
-/>
-
-### The following props are available for the Popper component:
-
-<Controls of={PopperStories.Default} />

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

@@ -1,160 +0,0 @@
-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<HTMLButtonElement | null>(null);
-
-    return (
-      <>
-        <Button
-          ref={buttonRef}
-          onClick={() => setIsOpen((prev) => !prev)}
-          iconName="kabob"
-          ariaLabel="Toggle Popper"
-        />
-        <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>
-      </>
-    );
-  },
-};

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

@@ -1,68 +0,0 @@
-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

@@ -1,57 +0,0 @@
-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

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

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

@@ -1,11 +0,0 @@
-@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

@@ -1,15 +0,0 @@
-// 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);
-}