@indico-data/design-system 2.18.0 → 2.20.0

package/src/components/forms/subcomponents/Label.tsx

@@ -1,16 +1,18 @@
-interface LabelProps {
+import React, { forwardRef } from 'react';
+
+export interface LabelProps {
   label: string;
   name: string;
   isRequired?: boolean;
+}
+
+export interface WithLabelProps extends LabelProps {
   hasHiddenLabel?: boolean;
 }
 
-export const Label = ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => {
+export const Label = ({ label, name, isRequired }: LabelProps) => {
   return (
-    <div
-      data-testid={`${name}-testId`}
-      className={`form-label ${hasHiddenLabel ? 'is-visually-hidden' : ''}`}
-    >
+    <div data-testid={`${name}-testId`} className={`form-label`}>
       <label htmlFor={`${name}`}>
         {label}
         {isRequired ? <span className="text-error"> *</span> : ''}
@@ -18,3 +20,24 @@ export const Label = ({ label, name, isRequired, hasHiddenLabel }: LabelProps) =
     </div>
   );
 };
+
+// HOC to add common label functionality to components
+export function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>) {
+  const WithLabelComponent = (
+    { label, hasHiddenLabel = false, name, isRequired, ...rest }: P & WithLabelProps,
+    ref: React.Ref<any>,
+  ) => {
+    const ariaLabel = hasHiddenLabel
+      ? { 'aria-label': isRequired ? `${label} (required)` : label }
+      : {};
+
+    return (
+      <div className="form-control">
+        {!hasHiddenLabel && <Label label={label} name={name} isRequired={isRequired} />}
+        <WrappedComponent {...(rest as P)} id={name} name={name} {...ariaLabel} ref={ref} />
+      </div>
+    );
+  };
+
+  return forwardRef(WithLabelComponent);
+}

package/src/components/forms/subcomponents/__tests__/Label.test.tsx

@@ -1,33 +1,81 @@
 import { render, screen } from '@testing-library/react';
-import { Label } from '@/components/forms/subcomponents/Label';
+import { Label, withLabel } from '@/components/forms/subcomponents/Label';
+
+// Mock component to wrap with HOC
+const MockComponent: React.FC = (props) => {
+  return <input {...props} />;
+};
+
+const LabeledMockComponent = withLabel(MockComponent);
 
 describe('Label', () => {
-  it('renders the `required` astherisc when the label is required', () => {
-    render(<Label label={'name'} name={'name'} isRequired={true} hasHiddenLabel={false} />);
+  it('renders the `required` asterisk when the label is required', () => {
+    render(<Label label="name" name="name" isRequired={true} />);
     expect(screen.getByText('*')).toBeInTheDocument();
     expect(screen.getByText('*')).toBeVisible();
   });
-  it('does not render the `required` astherisc when the label is not required', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+
+  it('does not render the `required` asterisk when the label is not required', () => {
+    render(<Label label="name" name="name" isRequired={false} />);
     expect(screen.queryByText('*')).not.toBeInTheDocument();
     expect(screen.queryByText('*')).toBeNull();
   });
-  it('renders the label for screen readers while hidden visually', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
-    expect(screen.getByText('name')).toBeInTheDocument();
-    expect(screen.getByText('name')).toBeVisible();
-  });
+
   it('renders the label text', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={false} />);
+    render(<Label label="name" name="name" isRequired={false} />);
     const label = screen.getByTestId('name-testId');
     expect(label).toBeInTheDocument();
     expect(label).toBeVisible();
-    expect(label).not.toHaveClass('is-visually-hidden');
   });
+});
 
-  it('renders the label text when the label is hidden', () => {
-    render(<Label label={'name'} name={'name'} isRequired={false} hasHiddenLabel={true} />);
+describe('withLabel HOC', () => {
+  it('renders the wrapped component with a visible label', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel={false} />,
+    );
     const label = screen.getByTestId('name-testId');
-    expect(label).toHaveClass('is-visually-hidden');
+    const input = screen.getByRole('textbox');
+
+    expect(label).toBeInTheDocument();
+    expect(label).toBeVisible();
+    expect(input).toBeInTheDocument();
+  });
+
+  it('renders the wrapped component with an aria-label when hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-label', 'name');
+  });
+
+  it('renders the wrapped component with an aria-label including "required" when isRequired is true and hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={true} hasHiddenLabel />);
+    const input = screen.getByRole('textbox');
+
+    expect(input).toBeInTheDocument();
+    expect(input).toHaveAttribute('aria-label', 'name (required)');
+  });
+
+  it('does not render the visible label when hasHiddenLabel is true', () => {
+    render(<LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel />);
+    expect(screen.queryByTestId('name-testId')).not.toBeInTheDocument();
+  });
+
+  it('renders the `required` asterisk when isRequired is true and hasHiddenLabel is false', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={true} hasHiddenLabel={false} />,
+    );
+    expect(screen.getByText('*')).toBeInTheDocument();
+    expect(screen.getByText('*')).toBeVisible();
+  });
+
+  it('does not render the `required` asterisk when isRequired is false and hasHiddenLabel is false', () => {
+    render(
+      <LabeledMockComponent label="name" name="name" isRequired={false} hasHiddenLabel={false} />,
+    );
+    expect(screen.queryByText('*')).not.toBeInTheDocument();
+    expect(screen.queryByText('*')).toBeNull();
   });
 });

package/src/components/forms/textarea/Textarea.mdx

@@ -5,13 +5,23 @@ import * as Textarea from './Textarea.stories';
 
 # Textarea
 
-The Textarea component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (***Our components are compatible with but do not provide the plugin***)
+The Textarea component is the building block of any form. Below you will find the accepted properties for this component. It is encouraged to build forms utilizing [React Hook Form](https://react-hook-form.com/) library in your application. This will facilitate form state management and enforce best practices. (**_Our components are compatible with but do not provide the plugin_**)
 
 <Canvas
   of={Textarea.Default}
   source={{
     code: `
-    <Textarea name="first_name" isRequired helpText="This Is Help Text" placeholder="This is a placeholder" value="''" onChange={handleChange} label="Label Name"  />
+<Textarea 
+  label="Label Name"
+  name="textarea"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
+  isRequired
+  isDisabled={false}
+  errorMessage=""
+  value=""
+  onChange={() => {}}
+/>
     `,
   }}
 />

package/src/components/forms/textarea/Textarea.stories.tsx

@@ -1,6 +1,7 @@
+import { useEffect, useState } from 'react';
 import { Meta, StoryObj } from '@storybook/react';
-import { Textarea, TextareaProps } from './Textarea';
-import { SetStateAction, useEffect, useState } from 'react';
+import labelArgTypes from '@/storybook/labelArgTypes';
+import { Textarea } from './Textarea';
 
 const meta: Meta = {
   title: 'Forms/Textarea',
@@ -17,28 +18,6 @@ const meta: Meta = {
       },
       action: 'onChange',
     },
-    label: {
-      control: 'text',
-      description: 'The label for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    name: {
-      control: 'text',
-      description: 'The name for the textarea field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
     placeholder: {
       control: 'text',
       description: 'The placeholder for the textarea field',
@@ -61,17 +40,6 @@ const meta: Meta = {
       },
       defaultValue: { summary: '' },
     },
-    isRequired: {
-      control: 'boolean',
-      description: 'Toggles the required astherisc on the label',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     isDisabled: {
       control: 'boolean',
       description: 'Toggles the disabled state of the textarea field',
@@ -105,17 +73,6 @@ const meta: Meta = {
       },
       defaultValue: { summary: '' },
     },
-    hasHiddenLabel: {
-      control: 'boolean',
-      description: 'Hides the label visually (retains it for screen readers)',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     autofocus: {
       control: 'boolean',
       description: '	Specifies that a text area should automatically get focus when the page loads',
@@ -198,6 +155,7 @@ const meta: Meta = {
         disable: true,
       },
     },
+    ...labelArgTypes,
   },
 };
 

package/src/components/forms/textarea/Textarea.tsx

@@ -1,19 +1,17 @@
 import React from 'react';
-import { Label } from '../subcomponents/Label';
+import classNames from 'classnames';
+
+import { withLabel, LabelProps, WithLabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface TextareaProps {
+export interface TextareaProps extends WithLabelProps {
   ref?: React.LegacyRef<HTMLTextAreaElement>;
-  label: string;
-  name: string;
-  placeholder: string;
+  placeholder?: string;
   value?: string | undefined;
   onChange: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
-  isRequired?: boolean;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
-  hasHiddenLabel?: boolean;
   rows?: number;
   cols?: number;
   readonly?: boolean;
@@ -23,7 +21,7 @@ export interface TextareaProps {
   autofocus?: boolean;
   defaultValue?: string;
 }
-export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   (
     {
       label,
@@ -49,9 +47,10 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
   ) => {
     const hasErrors = errorMessage && errorMessage.length > 0;
 
+    const textareaClasses = classNames('textarea', { error: hasErrors });
+
     return (
-      <div className="form-control">
-        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <>
         <div className="textarea-wrapper">
           <textarea
             ref={ref}
@@ -67,11 +66,10 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
-            className={`textarea ${hasErrors ? 'error' : ''}`}
+            className={textareaClasses}
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
-            aria-label={label}
             {...rest}
           />
         </div>
@@ -81,7 +79,11 @@ export const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
             {helpText}
           </div>
         )}
-      </div>
+      </>
     );
   },
 );
+
+const LabeledTextarea = withLabel(Textarea);
+
+export { LabeledTextarea as Textarea };

package/src/components/forms/textarea/styles/Textarea.scss

@@ -84,17 +84,6 @@
     color: var(--pf-textarea-help-text-color);
     font-size: var(--pf-font-size-subtitle2);
   }
-  .is-visually-hidden {
-    position: absolute;
-    width: 1px;
-    height: 1px;
-    padding: 0;
-    margin: -1px;
-    overflow: hidden;
-    clip: rect(0, 0, 0, 0);
-    white-space: nowrap;
-    border: 0;
-  }
   .form-label {
     margin-bottom: var(--pf-margin-2);
   }

package/src/components/index.ts

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

package/src/components/menu/Menu.mdx

@@ -0,0 +1,15 @@
+import { Canvas, Meta, Controls, Story } from '@storybook/blocks';
+import * as Menu from './Menu.stories';
+import { Col, Row } from '@/components';
+
+<Meta title="Components/Menu" of={Menu} />
+
+# Menu
+
+The Menu component is used to display a list of actionable items. Typically used in dropdowns, poppers, or sidebars.
+
+<Canvas of={Menu.Default} />
+
+### The following props are available for the Menu component:
+
+<Controls of={Menu.Default} />

package/src/components/menu/Menu.stories.tsx

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Menu, MenuProps } from './Menu';
+import { Button } from '../button';
+
+const meta: Meta<typeof Menu> = {
+  title: 'Components/Menu',
+  component: Menu,
+  argTypes: {
+    children: {
+      control: 'text',
+      description:
+        'The children of the Menu component, which will be automatically styled as menu-items.',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'React.ReactNode',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<MenuProps>;
+
+export const Default: Story = {
+  render: (args) => (
+    <Menu {...args}>
+      <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>
+  ),
+};

package/src/components/menu/Menu.test.tsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Menu } from './Menu';
+import { Button } from '../button';
+
+describe('Menu Component', () => {
+  it('renders children inside of the menu', () => {
+    render(
+      <Menu>
+        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconName="retrain">
+          Refresh Data
+        </Button>
+        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconName="edit">
+          Configure Fields
+        </Button>
+        <Button data-testid="delete-library" ariaLabel="Delete Library" iconName="trash">
+          Delete Library
+        </Button>
+      </Menu>,
+    );
+    expect(screen.getByText('Refresh Data')).toBeInTheDocument();
+    expect(screen.getByText('Configure Fields')).toBeInTheDocument();
+    expect(screen.getByText('Delete Library')).toBeInTheDocument();
+  });
+
+  it('applies the menu-item class to its children', () => {
+    render(
+      <Menu>
+        <Button data-testid="refresh-library" ariaLabel="Refresh Data" iconName="retrain">
+          Refresh Data
+        </Button>
+        <Button data-testid="configure-fields" ariaLabel="Configure Fields" iconName="edit">
+          Configure Fields
+        </Button>
+        <Button data-testid="delete-library" ariaLabel="Delete Library" iconName="trash">
+          Delete Library
+        </Button>
+      </Menu>,
+    );
+    const menuItems = screen.getAllByRole('button');
+    menuItems.forEach((item) => {
+      expect(item).toHaveClass('menu-item');
+    });
+  });
+
+  it('handles click events for its children', () => {
+    const mockRefresh = jest.fn();
+    const mockConfigure = jest.fn();
+    const mockDelete = jest.fn();
+
+    render(
+      <Menu>
+        <Button
+          data-testid="refresh-library"
+          ariaLabel="Refresh Data"
+          iconName="retrain"
+          onClick={mockRefresh}
+        >
+          Refresh Data
+        </Button>
+        <Button
+          data-testid="configure-fields"
+          ariaLabel="Configure Fields"
+          iconName="edit"
+          onClick={mockConfigure}
+        >
+          Configure Fields
+        </Button>
+        <Button
+          data-testid="delete-library"
+          ariaLabel="Delete Library"
+          iconName="trash"
+          onClick={mockDelete}
+        >
+          Delete Library
+        </Button>
+      </Menu>,
+    );
+
+    fireEvent.click(screen.getByText('Refresh Data'));
+    fireEvent.click(screen.getByText('Configure Fields'));
+    fireEvent.click(screen.getByText('Delete Library'));
+
+    expect(mockRefresh).toHaveBeenCalledTimes(1);
+    expect(mockConfigure).toHaveBeenCalledTimes(1);
+    expect(mockDelete).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/menu/Menu.tsx

@@ -0,0 +1,20 @@
+import React, { ReactElement } from 'react';
+import classNames from 'classnames';
+
+export type MenuProps = {
+  children: React.ReactNode;
+};
+
+export function Menu({ children }: MenuProps) {
+  return (
+    <div className="menu">
+      {React.Children.map(children, (child) =>
+        React.isValidElement(child)
+          ? React.cloneElement(child as ReactElement, {
+              className: classNames((child as ReactElement).props.className, 'menu-item'),
+            })
+          : child,
+      )}
+    </div>
+  );
+}

package/src/components/menu/index.ts

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

package/src/components/menu/styles/Menu.scss

@@ -0,0 +1,19 @@
+@import './variables.scss';
+
+.menu {
+  border-radius: var(--pf-menu-rounded);
+
+  .menu-item {
+    width: 100%;
+    background: var(--pf-menu-item-background-color);
+    color: var(--pf-menu-item-color);
+    display: block;
+    width: 100%;
+    text-align: left;
+    border: none;
+
+    &:hover {
+      background: var(--pf-menu-item-hover-color);
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+:root,
+:root [data-theme='light'],
+:root [data-theme='dark'] {
+  --pf-menu-rounded: var(--pf-rounded);
+  --pf-menu-item-hover-color: var(--pf-primary-color-100);
+  --pf-menu-item-background-color: var(--pf-white-color);
+  --pf-menu-item-color: var(--pf-gray-color);
+}
+
+// Dark Theme Specific Variables
+:root [data-theme='dark'] {
+  --pf-menu-item-hover-color: var(--pf-primary-color-300);
+  --pf-menu-item-background-color: var(--pf-primary-color-600);
+  --pf-menu-item-color: var(--pf-gray-color-100);
+}

package/src/components/popper/Popper.mdx

@@ -0,0 +1,79 @@
+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} />