@indico-data/design-system 2.18.0 → 2.20.0

package/lib/src/components/forms/input/Input.d.ts

@@ -1,19 +1,17 @@
 import React from 'react';
 import { IconName } from '@/types';
-export interface InputProps {
-    label: string;
-    name: string;
+import { WithLabelProps } from '../subcomponents/Label';
+export interface InputProps extends WithLabelProps {
     value?: string | undefined;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     iconName?: IconName;
     isClearable?: boolean;
     className?: string;
     defaultValue?: string;
 }
-export declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+declare const LabeledInput: React.ForwardRefExoticComponent<Omit<InputProps & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledInput as Input };

package/lib/src/components/forms/passwordInput/PasswordInput.d.ts

@@ -1,17 +1,15 @@
 import React from 'react';
-export interface PasswordInputProps {
+import { WithLabelProps } from '../subcomponents/Label';
+export interface PasswordInputProps extends WithLabelProps {
     ref?: React.LegacyRef<HTMLInputElement>;
-    label: string;
     value?: string | undefined;
-    name: string;
-    placeholder: string;
+    placeholder?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    isRequired?: boolean;
     isDisabled?: boolean;
     errorMessage?: string | undefined;
     helpText?: string;
-    hasHiddenLabel?: boolean;
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
-export declare const PasswordInput: React.ForwardRefExoticComponent<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
+declare const LabeledPasswordInput: React.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledPasswordInput as PasswordInput };

package/lib/src/components/forms/subcomponents/Label.d.ts

@@ -1,8 +1,11 @@
-interface LabelProps {
+import React from 'react';
+export interface LabelProps {
     label: string;
     name: string;
     isRequired?: boolean;
+}
+export interface WithLabelProps extends LabelProps {
     hasHiddenLabel?: boolean;
 }
-export declare const Label: ({ label, name, isRequired, hasHiddenLabel }: LabelProps) => import("react/jsx-runtime").JSX.Element;
-export {};
+export declare const Label: ({ label, name, isRequired }: LabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & WithLabelProps> & React.RefAttributes<any>>;

package/lib/src/components/forms/textarea/Textarea.d.ts

@@ -1,16 +1,13 @@
 import React from 'react';
-export interface TextareaProps {
+import { WithLabelProps } from '../subcomponents/Label';
+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;
@@ -20,4 +17,5 @@ export interface TextareaProps {
     autofocus?: boolean;
     defaultValue?: string;
 }
-export declare const Textarea: React.ForwardRefExoticComponent<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
+declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledTextarea as Textarea };

package/lib/src/components/index.d.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/lib/src/components/menu/Menu.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export type MenuProps = {
+    children: React.ReactNode;
+};
+export declare function Menu({ children }: MenuProps): import("react/jsx-runtime").JSX.Element;

package/lib/src/components/menu/Menu.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Menu, MenuProps } from './Menu';
+declare const meta: Meta<typeof Menu>;
+export default meta;
+type Story = StoryObj<MenuProps>;
+export declare const Default: Story;

package/lib/src/components/menu/Menu.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/menu/index.d.ts

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

package/lib/src/components/popper/Popper.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Placement } from '@floating-ui/react-dom';
+export type PopperProps = {
+    children: React.ReactNode;
+    referenceElement: HTMLElement | null;
+    isOpen: boolean;
+    onClose: () => void;
+    ariaLabel: string;
+    placement?: Placement;
+    offsetValue?: number;
+};
+export declare function Popper({ children, referenceElement, isOpen, onClose, ariaLabel, placement, offsetValue, }: PopperProps): import("react/jsx-runtime").JSX.Element | null;

package/lib/src/components/popper/Popper.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Popper, PopperProps } from './Popper';
+declare const meta: Meta<typeof Popper>;
+export default meta;
+type Story = StoryObj<PopperProps>;
+export declare const Default: Story;

package/lib/src/components/popper/Popper.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib/src/components/popper/index.d.ts

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

package/lib/src/hooks/useClickOutside.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useClickOutside: (ref: React.MutableRefObject<HTMLElement>, handler: (e: MouseEvent | TouchEvent) => void) => void;

package/lib/src/index.d.ts

@@ -17,3 +17,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/lib/src/storybook/labelArgTypes.d.ts

@@ -0,0 +1,3 @@
+import { ArgTypes } from '@storybook/react';
+declare const labelArgTypes: ArgTypes;
+export default labelArgTypes;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@indico-data/design-system",
-  "version": "2.18.0",
+  "version": "2.20.0",
   "description": "",
   "author": "",
   "main": "lib/index.js",
@@ -28,6 +28,7 @@
     "**/*": "prettier --write --ignore-unknown"
   },
   "dependencies": {
+    "@floating-ui/react-dom": "^2.1.1",
     "@fortawesome/fontawesome-svg-core": "^6.5.2",
     "@fortawesome/free-regular-svg-icons": "^6.5.2",
     "@fortawesome/free-solid-svg-icons": "^6.5.2",

package/src/components/forms/input/Input.mdx

@@ -5,13 +5,26 @@ import * as Input from './Input.stories';
 
 # Input
 
-The input 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 input 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={Input.Default}
   source={{
     code: `
-    <Input name="first_name" required={true} isRequired helpText="This Is Help Text" isClearable label="Label Name" iconName="user" />
+<Input 
+  label="Label Name"
+  name="first_name"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
+  isRequired
+  hasHiddenLabel={false}
+  isClearable
+  iconName="user"
+  isDisabled={false}
+  errorMessage=""
+  value=""
+  onChange={() => {}}
+/>
     `,
   }}
 />

package/src/components/forms/input/Input.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import { Input, InputProps } from './Input';
 import { SetStateAction, useEffect, useState } from 'react';
 import { iconNames } from 'build/generated/iconTypes';
+import labelArgTypes from '@/storybook/labelArgTypes';
 
 const meta: Meta = {
   title: 'Forms/Input',
@@ -16,28 +17,9 @@ const meta: Meta = {
           summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
         },
       },
+      type: { name: 'function', required: true },
       action: 'onChange',
     },
-    label: {
-      control: 'text',
-      description: 'The label for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    name: {
-      control: 'text',
-      description: 'The name for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     placeholder: {
       control: 'text',
       description: 'The placeholder for the input field',
@@ -47,6 +29,7 @@ const meta: Meta = {
           summary: 'string',
         },
       },
+      type: { name: 'string', required: false },
     },
     value: {
       control: 'text',
@@ -57,17 +40,7 @@ const meta: Meta = {
           summary: 'string',
         },
       },
-    },
-    isRequired: {
-      control: 'boolean',
-      description: 'Toggles the required asterisk on the label',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
+      type: { name: 'string', required: false },
     },
     isDisabled: {
       control: 'boolean',
@@ -81,7 +54,7 @@ const meta: Meta = {
       defaultValue: { summary: 'false' },
     },
     errorMessage: {
-      control: false,
+      control: 'text',
       description: 'Error message',
       table: {
         category: 'Props',
@@ -101,17 +74,6 @@ const meta: Meta = {
         },
       },
     },
-    hasHiddenLabel: {
-      control: 'boolean',
-      description: 'Hides the label visually (retains it for screen readers)',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     iconName: {
       control: 'select',
       options: iconNames,
@@ -140,6 +102,7 @@ const meta: Meta = {
         disable: true,
       },
     },
+    ...labelArgTypes,
   },
 };
 
@@ -147,11 +110,12 @@ export default meta;
 
 type Story = StoryObj<typeof Input>;
 
-const defaultArgs = {
+const defaultArgs: InputProps = {
   label: 'Enter your name',
   name: 'first_name',
   placeholder: 'Please enter a value',
-} as InputProps;
+  onChange: () => {},
+};
 
 export const Default: Story = {
   args: {
@@ -177,6 +141,7 @@ export const Default: Story = {
     const handleChange = (e: { target: { value: SetStateAction<string> } }) => {
       setValue(e.target.value);
     };
+
     return <Input {...args} value={value} onChange={handleChange} />;
   },
 };

package/src/components/forms/input/Input.tsx

@@ -1,30 +1,27 @@
 import React from 'react';
+import classNames from 'classnames';
+
 import { Icon } from '@/components/icons';
 import { IconName } from '@/types';
-import { Label } from '../subcomponents/Label';
+import { withLabel, WithLabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface InputProps {
-  label: string;
-  name: string;
+export interface InputProps extends WithLabelProps {
   value?: string | undefined;
-  placeholder: string;
+  placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isRequired?: boolean;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
-  hasHiddenLabel?: boolean;
   iconName?: IconName;
   isClearable?: boolean;
   className?: string;
   defaultValue?: string;
 }
 
-export const Input = React.forwardRef<HTMLInputElement, InputProps>(
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
-      label,
       name,
       placeholder,
       onChange,
@@ -34,7 +31,6 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       errorMessage,
       helpText,
       iconName,
-      hasHiddenLabel,
       className,
       ...rest
     },
@@ -45,9 +41,17 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
       onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
     };
 
+    const inputClasses = classNames(
+      'input',
+      {
+        error: hasErrors,
+        'input--has-icon': iconName,
+      },
+      className,
+    );
+
     return (
-      <div className="form-control">
-        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <>
         <div className="input-wrapper">
           {iconName && (
             <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
@@ -60,11 +64,10 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
-            className={`input ${hasErrors ? 'error' : ''} ${iconName ? 'input--has-icon' : ''} ${className}`}
+            className={inputClasses}
             aria-invalid={hasErrors ? true : undefined}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
-            aria-label={label}
             {...rest}
           />
           {isClearable && (
@@ -83,7 +86,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
             {helpText}
           </div>
         )}
-      </div>
+      </>
     );
   },
 );
+
+const LabeledInput = withLabel(Input);
+
+export { LabeledInput as Input };

package/src/components/forms/input/styles/Input.scss

@@ -94,17 +94,6 @@
       cursor: pointer;
     }
   }
-  .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/forms/passwordInput/PasswordInput.mdx

@@ -5,22 +5,24 @@ import * as PasswordInput from './PasswordInput.stories';
 
 # Password Input
 
-The password input 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 password input 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={PasswordInput.Default}
   source={{
     code: `
 <PasswordInput 
-  name="first_name" 
+  label="Label Name"
+  name="first_name"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
   isRequired
+  hasHiddenLabel={false}
   hasShowPassword
-  placeholder="Placeholder Text"
-  value=''
-  onChange={() => {}}
-  helpText="This Is Help Text" 
-  label="Label Name" 
-/>
+  isDisabled={false}
+  errorMessage=""
+  value=""
+  onChange={() => {}}/>
     `,
   }}
 />

package/src/components/forms/passwordInput/PasswordInput.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { PasswordInput, PasswordInputProps } from './PasswordInput';
 import { SetStateAction, useEffect, useState } from 'react';
-import { iconNames } from 'build/generated/iconTypes';
+import labelArgTypes from '@/storybook/labelArgTypes';
 
 const meta: Meta = {
   title: 'Forms/PasswordInput',
@@ -29,26 +29,6 @@ const meta: Meta = {
       },
       action: 'onChange',
     },
-    label: {
-      control: 'text',
-      description: 'The label for the password field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    name: {
-      control: 'text',
-      description: 'The name for the password field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
     placeholder: {
       control: 'text',
       description: 'The placeholder for the password field',
@@ -69,17 +49,6 @@ const meta: Meta = {
         },
       },
     },
-    isRequired: {
-      control: 'boolean',
-      description: 'Toggles the required astherisk on the label',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     isDisabled: {
       control: 'boolean',
       description: 'Toggles the disabled state of the input',
@@ -112,22 +81,12 @@ const meta: Meta = {
         },
       },
     },
-    hasHiddenLabel: {
-      control: 'boolean',
-      description: 'Hides the label visually (retains it for screen readers)',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
     ref: {
       table: {
         disable: true,
       },
     },
+    ...labelArgTypes,
   },
 };
 
@@ -143,7 +102,7 @@ const defaultArgs = {
 
 export const Default: Story = {
   args: {
-    isRequired: false,
+    isRequired: true,
     helpText: 'This Is Help Text',
     label: 'Label Name',
     name: 'first_name',

package/src/components/forms/passwordInput/PasswordInput.tsx

@@ -1,28 +1,24 @@
 import React, { useState } from 'react';
 import { Icon } from '@/components/icons';
-import { Label } from '../subcomponents/Label';
+import { withLabel, WithLabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import classNames from 'classnames';
 
-export interface PasswordInputProps {
+export interface PasswordInputProps extends WithLabelProps {
   ref?: React.LegacyRef<HTMLInputElement>;
-  label: string;
   value?: string | undefined;
-  name: string;
-  placeholder: string;
+  placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  isRequired?: boolean;
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
-  hasHiddenLabel?: boolean;
   hasShowPassword?: boolean;
   defaultValue?: string;
 }
 
-export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
   (
     {
-      label,
       name,
       placeholder,
       onChange,
@@ -30,7 +26,6 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
       isDisabled,
       errorMessage,
       helpText,
-      hasHiddenLabel,
       hasShowPassword = true,
       ...rest
     },
@@ -44,9 +39,16 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
       setShowPassword((prevShowPassword) => !prevShowPassword);
     };
 
+    const inputClasses = classNames(
+      'password-input',
+      {
+        error: hasErrors,
+      },
+      'password-input--has-icon',
+    );
+
     return (
-      <div className="form-control">
-        <Label label={label} name={name} isRequired={isRequired} hasHiddenLabel={hasHiddenLabel} />
+      <>
         <div className="password-input-wrapper">
           <Icon name="lock" data-testid={`${name}-embedded-icon`} className="embedded-icon" />
           <input
@@ -57,11 +59,10 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
             disabled={isDisabled}
             placeholder={placeholder}
             onChange={onChange}
-            className={`password-input ${hasErrors ? 'error' : ''} password-input--has-icon`}
+            className={inputClasses}
             aria-invalid={hasErrors ? 'true' : 'false'}
             aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
             aria-required={isRequired}
-            aria-label={label}
             {...rest}
           />
           {hasShowPassword && (
@@ -80,7 +81,11 @@ export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputPro
             {helpText}
           </div>
         )}
-      </div>
+      </>
     );
   },
 );
+
+const LabeledPasswordInput = withLabel(PasswordInput);
+
+export { LabeledPasswordInput as PasswordInput };

package/src/components/forms/passwordInput/styles/PasswordInput.scss

@@ -101,17 +101,6 @@
       cursor: pointer;
     }
   }
-  .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);
   }