@indico-data/design-system 2.33.0 → 2.34.0

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { IconName } from '@/types';
-import { WithLabelProps } from '../subcomponents/Label';
-export interface InputProps extends WithLabelProps {
+import { LabelProps } from '../subcomponents/Label';
+export interface BaseInputProps {
     value?: string | undefined;
     placeholder?: string;
     onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -13,5 +13,7 @@ export interface InputProps extends WithLabelProps {
     className?: string;
     defaultValue?: string;
 }
-declare const LabeledInput: React.ForwardRefExoticComponent<Omit<InputProps & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+export interface InputProps extends BaseInputProps, LabelProps {
+}
+declare const LabeledInput: React.ForwardRefExoticComponent<Omit<InputProps & React.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledInput as Input };

package/lib/src/components/forms/numberInput/NumberInput.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { LabelProps } from '../subcomponents/Label';
+import { BaseInputProps } from '../input/Input';
+export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
+    value?: number | '';
+    min?: number;
+    max?: number;
+    step?: number;
+}
+declare const LabeledNumberInput: React.ForwardRefExoticComponent<Omit<NumberInputProps & React.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
+export { LabeledNumberInput as NumberInput };

package/lib/src/components/forms/numberInput/NumberInput.stories.d.ts

@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NumberInput } from './NumberInput';
+declare const meta: Meta;
+export default meta;
+type Story = StoryObj<typeof NumberInput>;
+export declare const Default: Story;
+export declare const Errors: Story;
+export declare const HiddenLabel: Story;
+export declare const HelpText: Story;
+export declare const Clearable: Story;
+export declare const Icon: Story;
+export declare const Required: Story;

package/lib/src/components/forms/numberInput/__tests__/NumberInput.test.d.ts

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

package/lib/src/components/forms/numberInput/index.d.ts

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithLabelProps } from '../subcomponents/Label';
-export interface PasswordInputProps extends WithLabelProps {
+import { LabelProps } from '../subcomponents/Label';
+export interface PasswordInputProps extends LabelProps {
     ref?: React.LegacyRef<HTMLInputElement>;
     value?: string | undefined;
     placeholder?: string;
@@ -11,5 +11,5 @@ export interface PasswordInputProps extends WithLabelProps {
     hasShowPassword?: boolean;
     defaultValue?: string;
 }
-declare const LabeledPasswordInput: React.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+declare const LabeledPasswordInput: React.ForwardRefExoticComponent<Omit<Omit<PasswordInputProps, "ref"> & React.RefAttributes<HTMLInputElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledPasswordInput as PasswordInput };

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

@@ -3,9 +3,7 @@ export interface LabelProps {
     label: string;
     name: string;
     isRequired?: boolean;
-}
-export interface WithLabelProps extends LabelProps {
     hasHiddenLabel?: boolean;
 }
 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>>;
+export declare function withLabel<P extends object>(WrappedComponent: React.ComponentType<P>): React.ForwardRefExoticComponent<React.PropsWithoutRef<P & LabelProps> & React.RefAttributes<any>>;

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { WithLabelProps } from '../subcomponents/Label';
-export interface TextareaProps extends WithLabelProps {
+import { LabelProps } from '../subcomponents/Label';
+export interface TextareaProps extends LabelProps {
     ref?: React.LegacyRef<HTMLTextAreaElement>;
     placeholder?: string;
     value?: string | undefined;
@@ -17,5 +17,5 @@ export interface TextareaProps extends WithLabelProps {
     autofocus?: boolean;
     defaultValue?: string;
 }
-declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement> & WithLabelProps, "ref"> & React.RefAttributes<any>>;
+declare const LabeledTextarea: React.ForwardRefExoticComponent<Omit<Omit<TextareaProps, "ref"> & React.RefAttributes<HTMLTextAreaElement> & LabelProps, "ref"> & React.RefAttributes<any>>;
 export { LabeledTextarea as Textarea };

package/lib/src/storybook/formArgTypes.d.ts

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

package/package.json

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

package/src/components/button/styles/Button.scss

@@ -40,10 +40,6 @@
 .btn--icon-only {
   padding-left: var(--pf-padding-2);
   padding-right: var(--pf-padding-2);
-
-  &.btn--md {
-    height: 32px;
-  }
 }
 
 @mixin button-variant($color-name) {

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

@@ -1,107 +1,13 @@
 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';
+import { inputArgTypes, labelArgTypes } from '@/storybook/formArgTypes';
 
 const meta: Meta = {
   title: 'Forms/Input',
   component: Input,
   argTypes: {
-    onChange: {
-      control: false,
-      description: 'onChange event handler',
-      table: {
-        category: 'Callbacks',
-        type: {
-          summary: '(e: React.ChangeEvent<HTMLInputElement>) => void',
-        },
-      },
-      type: { name: 'function', required: true },
-      action: 'onChange',
-    },
-    placeholder: {
-      control: 'text',
-      description: 'The placeholder for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      type: { name: 'string', required: false },
-    },
-    value: {
-      control: 'text',
-      description: 'The value for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      type: { name: 'string', required: false },
-    },
-    isDisabled: {
-      control: 'boolean',
-      description: 'Toggles the disabled state of the input',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
-    errorMessage: {
-      control: 'text',
-      description: 'Error message',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    helpText: {
-      control: 'text',
-      description: 'The help text for the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-    },
-    iconName: {
-      control: 'select',
-      options: iconNames,
-      description: 'Adds an icon to the left hand side of the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'string',
-        },
-      },
-      defaultValue: { summary: '' },
-    },
-    isClearable: {
-      control: 'boolean',
-      description: 'Adds a clear x icon to the right hand side of the input field',
-      table: {
-        category: 'Props',
-        type: {
-          summary: 'boolean',
-        },
-      },
-      defaultValue: { summary: 'false' },
-    },
-    ref: {
-      table: {
-        disable: true,
-      },
-    },
+    ...inputArgTypes,
     ...labelArgTypes,
   },
 };

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

@@ -3,10 +3,10 @@ import classNames from 'classnames';
 
 import { Icon } from '@/components/icons';
 import { IconName } from '@/types';
-import { withLabel, WithLabelProps } from '../subcomponents/Label';
+import { withLabel, LabelProps } from '../subcomponents/Label';
 import { DisplayFormError } from '../subcomponents/DisplayFormError';
 
-export interface InputProps extends WithLabelProps {
+export interface BaseInputProps {
   value?: string | undefined;
   placeholder?: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -19,6 +19,8 @@ export interface InputProps extends WithLabelProps {
   defaultValue?: string;
 }
 
+export interface InputProps extends BaseInputProps, LabelProps {}
+
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
   (
     {
@@ -70,7 +72,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
             aria-required={isRequired}
             {...rest}
           />
-          {isClearable && (
+          {isClearable && !isDisabled && (
             <Icon
               name="x-close"
               data-testid={`${name}-clearable-icon`}

package/src/components/forms/numberInput/NumberInput.mdx

@@ -0,0 +1,32 @@
+import { Canvas, Meta, Controls } from '@storybook/blocks';
+import * as NumberInput from './NumberInput.stories';
+
+<Meta title="Forms/Number Input" name="Number Input" />
+
+# Number Input
+
+The `NumberInput` component is a specialized input field designed to handle numeric values. It supports features such as min and max constraints, step increments, and optional icons or clear buttons. This component is intended to be used within forms where numeric input is required.
+
+<Canvas
+  of={NumberInput.Default}
+  source={{
+    code: `
+<NumberInput
+  label="Enter a number"
+  name="number_input"
+  placeholder="Please enter a value"
+  helpText="This Is Help Text"
+  isRequired
+  hasHiddenLabel={false}
+  isClearable
+  iconName="fa-calculator"
+  isDisabled={false}
+  errorMessage=""
+  value={0}
+  onChange={() => {}}
+/>
+    `,
+  }}
+/>
+
+<Controls of={NumberInput.Default} />

package/src/components/forms/numberInput/NumberInput.stories.tsx

@@ -0,0 +1,215 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { NumberInput, NumberInputProps } from './NumberInput';
+import { useEffect, useState } from 'react';
+import { iconNames } from 'build/generated/iconTypes';
+import { labelArgTypes, inputArgTypes } from '@/storybook/formArgTypes';
+
+const meta: Meta = {
+  title: 'Forms/Number Input',
+  component: NumberInput,
+  argTypes: {
+    ...labelArgTypes,
+    ...inputArgTypes,
+    value: {
+      control: 'number',
+      description: 'The value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number | ""',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+    min: {
+      control: 'number',
+      description: 'The minimum value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+    max: {
+      control: 'number',
+      description: 'The maximum value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+    step: {
+      control: 'number',
+      description: 'The step value for the input field',
+      table: {
+        category: 'Props',
+        type: {
+          summary: 'number',
+        },
+      },
+      type: { name: 'number', required: false },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof NumberInput>;
+
+const defaultArgs: NumberInputProps = {
+  label: 'Enter a number',
+  name: 'number_input',
+  placeholder: 'Please enter a value',
+  onChange: () => {},
+};
+
+export const Default: Story = {
+  args: {
+    ...defaultArgs,
+    isRequired: true,
+    iconName: 'fa-calculator',
+    helpText: 'This Is Help Text',
+    isClearable: true,
+    hasHiddenLabel: false,
+    isDisabled: false,
+    errorMessage: '',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Errors: Story = {
+  args: {
+    ...defaultArgs,
+    errorMessage: 'This field requires a number.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HiddenLabel: Story = {
+  args: {
+    ...defaultArgs,
+    hasHiddenLabel: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const HelpText: Story = {
+  args: {
+    ...defaultArgs,
+    helpText: 'In order to submit the form, this field is required.',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Clearable: Story = {
+  args: {
+    ...defaultArgs,
+    isClearable: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(args.value || '');
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Icon: Story = {
+  args: {
+    ...defaultArgs,
+    iconName: 'fa-calculator',
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};
+
+export const Required: Story = {
+  args: {
+    ...defaultArgs,
+    isRequired: true,
+  },
+  render: (args) => {
+    const [value, setValue] = useState<number | ''>(0);
+
+    useEffect(() => {
+      setValue(args.value || '');
+    }, [args.value]);
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      setValue(e.target.value === '' ? '' : parseFloat(e.target.value));
+    };
+
+    return <NumberInput {...args} value={value} onChange={handleChange} />;
+  },
+};

package/src/components/forms/numberInput/NumberInput.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import { Icon } from '@/components/icons';
+import { LabelProps, withLabel } from '../subcomponents/Label';
+import { DisplayFormError } from '../subcomponents/DisplayFormError';
+import { BaseInputProps } from '../input/Input';
+
+export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
+  value?: number | '';
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+const NumberInput = React.forwardRef<HTMLInputElement, NumberInputProps>(
+  (
+    {
+      name,
+      onChange,
+      isRequired,
+      isDisabled,
+      isClearable,
+      errorMessage,
+      helpText,
+      iconName,
+      className,
+      ...rest
+    },
+    ref,
+  ) => {
+    const hasErrors = errorMessage && errorMessage.length > 0;
+
+    const handleClear = () => {
+      onChange({ target: { value: '' } } as React.ChangeEvent<HTMLInputElement>);
+    };
+
+    const inputClasses = classNames(
+      'number-input',
+      {
+        error: hasErrors,
+        'number-input--has-icon': iconName,
+        'number-input--is-clearable': isClearable,
+      },
+      className,
+    );
+
+    return (
+      <>
+        <div className="number-input-wrapper">
+          {iconName && (
+            <Icon name={iconName} data-testid={`${name}-embedded-icon`} className="embedded-icon" />
+          )}
+          <input
+            ref={ref}
+            data-testid={`form-number-input-${name}`}
+            name={name}
+            type="number"
+            disabled={isDisabled}
+            onChange={onChange}
+            className={inputClasses}
+            aria-invalid={hasErrors ? true : undefined}
+            aria-describedby={hasErrors || helpText ? `${name}-helper` : undefined}
+            aria-required={isRequired}
+            {...rest}
+          />
+          {isClearable && !isDisabled && (
+            <Icon
+              name="x-close"
+              data-testid={`${name}-clearable-icon`}
+              onClick={handleClear}
+              className="clearable-icon"
+              size="sm"
+            />
+          )}
+        </div>
+        {hasErrors && <DisplayFormError message={errorMessage} />}
+        {helpText && !hasErrors && (
+          <div data-testid={`${name}-help-text`} className="help-text" id={`${name}-helper`}>
+            {helpText}
+          </div>
+        )}
+      </>
+    );
+  },
+);
+
+const LabeledNumberInput = withLabel(NumberInput);
+LabeledNumberInput.displayName = 'NumberInput';
+export { LabeledNumberInput as NumberInput };