@indico-data/design-system 3.0.10 → 3.1.0

package/src/components/forms/date/inputDateRangePicker/InputDateRangePicker.tsx

@@ -11,6 +11,7 @@ import { Button } from '../../../button';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 interface InputDateRangePickerProps {
+  /** A label for assistive technologies. */
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
@@ -21,6 +22,7 @@ interface InputDateRangePickerProps {
   month?: Date;
   selected?: DateRange | undefined;
   isOpen?: boolean;
+  /** Whether the date picker is open. */
   setIsOpen?: React.Dispatch<React.SetStateAction<boolean>>;
   className?: string;
   inputIconName?: IconName;
@@ -28,19 +30,26 @@ interface InputDateRangePickerProps {
   toErrorMessage?: string | undefined;
   fromErrorMessage?: string | undefined;
   'data-testid'?: string;
+  /** The gutter width for the date picker. */
   gutterWidth?: number;
   fromLabel?: string;
   toLabel?: string;
   closeOnSelect?: boolean;
   clearOnClose?: boolean;
+  /** Whether the label is hidden. */
   hasHiddenLabel?: boolean;
+  /** The ref of the input field. */
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** Whether the from input is read only. */
   isFromReadOnly?: boolean;
+  /** Whether the to input is read only. */
   isToReadOnly?: boolean;
   toTabIndex?: number;
+  /** The tab index of the from input field. */
   fromTabIndex?: number;
   portalOptions?: PortalOptions;
   floatingOptions?: UseFloatingOptions;
+  /** Whether the date picker is a portal. */
   isPortal?: boolean;
 }
 

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.stories.tsx

@@ -22,7 +22,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
   argTypes: {
     isPortal: {
       control: 'boolean',
-      description: 'Whether the date picker is a portal.',
       table: {
         category: 'Props',
         type: {
@@ -32,7 +31,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     portalOptions: {
       control: false,
-      description: 'The portal options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -42,7 +40,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     floatingOptions: {
       control: false,
-      description: 'The floating options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -52,28 +49,24 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     timeTabIndex: {
       control: 'number',
-      description: 'The tab index of the time input field.',
       table: {
         category: 'Props',
       },
     },
     ref: {
       control: false,
-      description: 'The ref of the input field.',
       table: {
         category: 'Props',
       },
     },
     timePickerRef: {
       control: false,
-      description: 'The ref of the time picker input field.',
       table: {
         category: 'Props',
       },
     },
     isReadOnly: {
       control: 'boolean',
-      description: 'Whether the date picker is read only.',
       table: {
         category: 'Props',
       },
@@ -81,7 +74,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
 
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Whether the label is hidden.',
       table: {
         category: 'Props',
       },
@@ -89,21 +81,18 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
 
     timeValue: {
       control: 'text',
-      description: 'The time value to display.',
       table: {
         category: 'Props',
       },
     },
     onTimeChange: {
       action: 'timeChanged',
-      description: 'Callback function that is called when the time is changed.',
       table: {
         category: 'Events',
       },
     },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -114,8 +103,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     captionLayout: {
       control: 'select',
       options: ['dropdown', 'dropdown-months', 'dropdown-years', 'label'],
-      description:
-        'The layout of the caption. Enables you to add or remove the dropdown navigation for months/years',
       table: {
         category: 'Props',
         type: {
@@ -125,7 +112,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -135,7 +121,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     id: {
       control: 'text',
-      description: 'The id of the input field.',
       table: {
         category: 'Props',
         type: {
@@ -145,7 +130,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     label: {
       control: 'text',
-      description: 'The label for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -155,7 +139,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     onSelect: {
       action: 'selected',
-      description: 'Callback function that is called when a date is selected.',
       table: {
         category: 'Events',
         type: {
@@ -165,7 +148,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     selected: {
       control: 'date',
-      description: 'The selected date.',
       table: {
         category: 'Props',
         type: {
@@ -175,7 +157,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     inputPlaceholder: {
       control: 'text',
-      description: 'The placeholder text for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -185,7 +166,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     inputIconName: {
       control: 'text',
-      description: 'The icon to display in the input field.',
       table: {
         category: 'Props',
         type: {
@@ -195,7 +175,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     isClearable: {
       control: 'boolean',
-      description: 'Whether the input field should be clearable.',
       table: {
         category: 'Props',
         type: {
@@ -205,7 +184,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     isOpen: {
       control: false,
-      description: 'Whether the date picker is open.',
       table: {
         category: 'Props',
         type: {
@@ -215,7 +193,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Whether the input field should be cleared when the date picker is closed.',
       table: {
         category: 'Props',
         type: {
@@ -225,7 +202,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     errorMessage: {
       control: 'text',
-      description: 'An error message to display.',
       table: {
         category: 'Props',
         type: {
@@ -235,7 +211,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -245,7 +220,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -255,7 +229,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker.',
       table: {
         category: 'Props',
         type: {
@@ -265,7 +238,6 @@ const meta: Meta<typeof SingleInputDateTimePicker> = {
     },
     initialMonth: {
       control: 'date',
-      description: 'The month to display.',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/date/inputDateTimePicker/SingleInputDateTimePicker.tsx

@@ -11,6 +11,7 @@ import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 
 export interface SingleInputDateTimePickerProps {
+  /** A label for assistive technologies. */
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
@@ -29,16 +30,24 @@ export interface SingleInputDateTimePickerProps {
   inputPlaceholder?: string;
   errorMessage?: string | undefined;
   'data-testid'?: string;
+  /** Whether the label is hidden. */
   hasHiddenLabel?: boolean;
+  /** The time value to display. */
   timeValue?: string;
+  /** Callback function that is called when the time is changed. */
   onTimeChange?: (time: string) => void;
+  /** Whether the date picker is read only. */
   isReadOnly?: boolean;
+  /** The ref of the input field. */
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** The ref of the time picker input field. */
   timePickerRef?: React.LegacyRef<HTMLInputElement>;
   dateTabIndex?: number;
+  /** The tab index of the time input field. */
   timeTabIndex?: number;
   portalOptions?: PortalOptions;
   floatingOptions?: UseFloatingOptions;
+  /** Whether the date picker is a portal. */
   isPortal?: boolean;
 }
 

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

@@ -11,7 +11,6 @@ const meta: Meta = {
     ...inputArgTypes,
     value: {
       control: 'number',
-      description: 'The value for the input field',
       table: {
         category: 'Props',
         type: {
@@ -22,7 +21,6 @@ const meta: Meta = {
     },
     min: {
       control: 'number',
-      description: 'The minimum value for the input field',
       table: {
         category: 'Props',
         type: {
@@ -33,7 +31,6 @@ const meta: Meta = {
     },
     max: {
       control: 'number',
-      description: 'The maximum value for the input field',
       table: {
         category: 'Props',
         type: {
@@ -44,7 +41,6 @@ const meta: Meta = {
     },
     step: {
       control: 'number',
-      description: 'The step value for the input field',
       table: {
         category: 'Props',
         type: {

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

@@ -7,9 +7,13 @@ import { DisplayFormError } from '../subcomponents/DisplayFormError';
 import { BaseInputProps } from '../input/Input';
 
 export interface NumberInputProps extends Omit<BaseInputProps, 'value'>, LabelProps {
+  /** The value for the input field */
   value?: number | '';
+  /** The minimum value for the input field */
   min?: number;
+  /** The maximum value for the input field */
   max?: number;
+  /** The step value for the input field */
   step?: number;
 }
 

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

@@ -11,7 +11,6 @@ const meta: Meta = {
     ...baseInputArgTypes,
     hasShowPassword: {
       control: 'boolean',
-      description: 'Toggles the visibility of the password',
       table: {
         category: 'Props',
         type: {

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

@@ -14,6 +14,7 @@ export interface PasswordInputProps extends LabelProps {
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
+  /** Toggles the visibility of the password */
   hasShowPassword?: boolean;
   defaultValue?: string;
 }

package/src/components/forms/radio/Radio.stories.tsx

@@ -13,7 +13,6 @@ const meta: Meta = {
     },
     onChange: {
       control: false,
-      description: 'onChange event handler',
       table: {
         category: 'Callbacks',
         type: {
@@ -24,7 +23,6 @@ const meta: Meta = {
     },
     label: {
       control: 'text',
-      description: 'The label for the Radio field',
       table: {
         category: 'Props',
         type: {
@@ -35,7 +33,6 @@ const meta: Meta = {
     },
     name: {
       control: 'text',
-      description: 'The name for the Radio field',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta = {
     },
     value: {
       control: 'text',
-      description: 'This holds the value that will be emitted when the radio is selected',
       table: {
         category: 'Props',
         type: {
@@ -57,7 +53,6 @@ const meta: Meta = {
     },
     id: {
       control: 'text',
-      description: 'This explains what button group this radio belongs to.',
       table: {
         category: 'Props',
         type: {
@@ -68,7 +63,6 @@ const meta: Meta = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Toggles the disabled state of the Radio field',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/radio/Radio.tsx

@@ -2,11 +2,17 @@ import React from 'react';
 
 export interface RadioProps {
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** This explains what button group this radio belongs to. */
   id: string;
+  /** The label for the Radio field */
   label: string;
+  /** The name for the Radio field */
   name: string;
+  /** This holds the value that will be emitted when the radio is selected */
   value?: string;
+  /** onChange event handler */
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  /** Toggles the disabled state of the Radio field */
   isDisabled?: boolean;
   defaultChecked?: boolean;
 }

package/src/components/forms/select/Select.stories.tsx

@@ -9,7 +9,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
   argTypes: {
     name: {
       control: 'text',
-      description: 'The name of the select component',
       table: {
         category: 'Props',
         type: {
@@ -20,7 +19,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Toggles the visibility of the label',
       table: {
         category: 'Props',
         type: {
@@ -31,7 +29,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     label: {
       control: 'text',
-      description: 'The label for the select component',
       table: {
         category: 'Props',
         type: {
@@ -42,7 +39,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     options: {
       control: 'object',
-      description: 'Options for the select component',
       table: {
         category: 'Props',
         type: {
@@ -53,7 +49,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Toggles the disabled state of the select component',
       table: {
         category: 'Props',
         type: {
@@ -64,7 +59,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     isLoading: {
       control: 'boolean',
-      description: 'Toggles the loading state of the select component',
       table: {
         category: 'Props',
         type: {
@@ -75,7 +69,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     isClearable: {
       control: 'boolean',
-      description: 'Enables the clearable feature of the select component',
       table: {
         category: 'Props',
         type: {
@@ -86,7 +79,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     isSearchable: {
       control: 'boolean',
-      description: 'Enables the searchable feature of the select component',
       table: {
         category: 'Props',
         type: {
@@ -97,18 +89,16 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     placeholder: {
       control: 'text',
-      description: 'The placeholder text for the select component',
       table: {
         category: 'Props',
         type: {
           summary: 'string',
         },
       },
-      defaultValue: { summary: 'Select...' },
+      defaultValue: { summary: 'Select an option...' },
     },
     className: {
       control: 'text',
-      description: 'Additional CSS class for the select component',
       table: {
         category: 'Props',
         type: {
@@ -119,8 +109,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     classNamePrefix: {
       control: 'text',
-      description:
-        'The prefix to use for the CSS class names. Changing this will result in losing all default styles',
       table: {
         category: 'Props',
         type: {
@@ -131,7 +119,6 @@ const meta: Meta<SelectProps<SelectOption> & LabelProps> = {
     },
     onChange: {
       control: false,
-      description: 'Event handler for when the selected value changes',
       table: {
         category: 'Callbacks',
         type: {

package/src/components/forms/select/Select.tsx

@@ -5,10 +5,20 @@ import { SelectOption } from './types';
 import { withLabel } from '../subcomponents/Label';
 
 export interface SelectProps<OptionType extends SelectOption> extends ReactSelectProps<OptionType> {
+  /** Options for the select component */
   options: OptionType[];
+  /** The label for the select component */
   label?: string;
+  /** The name of the select component */
   name?: string;
+  /** Toggles the visibility of the label */
   hasHiddenLabel?: boolean;
+  /** Additional CSS class for the select component */
+  className?: string;
+  /** The prefix to use for the CSS class names. Changing this will result in losing all default styles */
+  classNamePrefix?: string;
+  /** Event handler for when the selected value changes */
+  onChange?: (newValue: any, actionMeta: any) => void;
 }
 
 const OptionComponent = <OptionType extends SelectOption>({

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

@@ -11,7 +11,6 @@ const meta: Meta = {
     ...baseInputArgTypes,
     autofocus: {
       control: 'boolean',
-      description: '	Specifies that a text area should automatically get focus when the page loads',
       table: {
         category: 'Props',
         type: {
@@ -22,7 +21,6 @@ const meta: Meta = {
     },
     rows: {
       control: 'number',
-      description: 'The number of rows for the textarea field',
       table: {
         category: 'Props',
         type: {
@@ -33,7 +31,6 @@ const meta: Meta = {
     },
     cols: {
       control: 'number',
-      description: 'Specifies the visible width of a text area',
       table: {
         category: 'Props',
         type: {
@@ -44,7 +41,6 @@ const meta: Meta = {
     },
     readonly: {
       control: 'boolean',
-      description: 'Sets the textarea field to readonly',
       table: {
         category: 'Props',
         type: {
@@ -55,7 +51,6 @@ const meta: Meta = {
     },
     wrap: {
       control: 'text',
-      description: 'Sets the wrap attribute for the textarea field',
       table: {
         category: 'Props',
         type: {
@@ -66,7 +61,6 @@ const meta: Meta = {
     },
     form: {
       control: 'text',
-      description: 'Specifies which form the text area belongs to',
       table: {
         category: 'Props',
         type: {
@@ -77,7 +71,6 @@ const meta: Meta = {
     },
     maxLength: {
       control: 'number',
-      description: 'Specifies the maximum number of characters allowed in the text area',
       table: {
         category: 'Props',
         type: {

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

@@ -13,12 +13,19 @@ export interface TextareaProps extends LabelProps {
   isDisabled?: boolean;
   errorMessage?: string | undefined;
   helpText?: string;
+  /** The number of rows for the textarea field */
   rows?: number;
+  /** Specifies the visible width of a text area */
   cols?: number;
+  /** Sets the textarea field to readonly */
   readonly?: boolean;
+  /** Sets the wrap attribute for the textarea field */
   wrap?: 'hard' | 'soft';
+  /** Specifies which form the text area belongs to */
   form?: string;
+  /** Specifies the maximum number of characters allowed in the text area */
   maxLength?: number;
+  /** Specifies that a text area should automatically get focus when the page loads */
   autofocus?: boolean;
   defaultValue?: string;
   tabIndex?: number;

package/src/components/forms/timePicker/TimePicker.stories.tsx

@@ -9,7 +9,6 @@ const meta: Meta<typeof TimePicker> = {
   argTypes: {
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Hides the input label in an accessible way (visually hides the label)',
       defaultValue: false,
       table: {
         category: 'Props',
@@ -17,7 +16,6 @@ const meta: Meta<typeof TimePicker> = {
     },
     name: {
       control: 'text',
-      description: 'The name of the input field',
       defaultValue: 'time-picker',
       table: {
         category: 'Props',
@@ -25,7 +23,6 @@ const meta: Meta<typeof TimePicker> = {
     },
     onTimeChange: {
       control: false,
-      description: 'returns an object with the time and errors if they exist',
       table: {
         category: 'Callbacks',
         type: {
@@ -35,7 +32,6 @@ const meta: Meta<typeof TimePicker> = {
     },
     timeValue: {
       control: 'text',
-      description: 'The time value to be displayed in the input field',
       defaultValue: '12:00 AM',
       table: {
         category: 'Props',
@@ -46,7 +42,6 @@ const meta: Meta<typeof TimePicker> = {
         category: 'Props',
       },
       control: 'text',
-      description: 'The label for the time picker',
       defaultValue: 'Time Picker',
     },
   },

package/src/components/forms/timePicker/TimePicker.tsx

@@ -6,10 +6,15 @@ import { offset, flip, shift } from '@floating-ui/react';
 
 interface TimePickerProps {
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** The time value to be displayed in the input field */
   timeValue?: string;
+  /** The label for the time picker */
   label?: string;
+  /** The name of the input field */
   name?: string;
+  /** Hides the input label in an accessible way (visually hides the label) */
   hasHiddenLabel?: boolean;
+  /** returns an object with the time and errors if they exist */
   onTimeChange?: (time: string) => void;
   className?: string;
   isReadOnly?: boolean;