@indico-data/design-system 3.0.10 → 3.2.0

package/src/components/forms/date/datePicker/types.ts

@@ -11,16 +11,23 @@ import {
 
 export interface DatePickerProps {
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** The selected day(s). */
   selected?: Date | DateRange | undefined;
+  /** Event handler when a day is selected. */
   onSelect?: OnSelectHandler<Date> | OnSelectHandler<DateRange>;
+  /** Allows you to select a single day, a range of days, or multiple days. */
   mode?: Mode;
+  /** Accepts a CSS class name */
   className?: string;
+  /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
   month?: Date;
   defaultMonth?: Date;
   startMonth?: Date | undefined;
+  /** Whether to show the time picker. */
   hasTimePicker?: boolean;
+  /** The time value to display in the date picker. */
   timeValue?: string;
   endMonth?: Date;
   components?: Partial<CustomComponents>;
@@ -31,8 +38,11 @@ export interface DatePickerProps {
   firstWeekContainsDate?: 1 | 4;
   today?: Date;
   isRequired?: any;
+  /** The minimum date that can be selected. */
   min?: number;
+  /** The maximum date that can be selected. */
   max?: number;
+  /** Callback when the time changes. */
   onTimeChange?: (time: string) => void;
   onMonthChange?: MonthChangeEventHandler;
   onNextClick?: MonthChangeEventHandler;

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
   argTypes: {
     isPortal: {
       control: 'boolean',
-      description: 'Whether the date picker is a portal.',
       table: {
         category: 'Props',
         type: {
@@ -26,7 +25,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     portalOptions: {
       control: false,
-      description: 'The portal options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -36,7 +34,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     floatingOptions: {
       control: false,
-      description: 'The floating options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -56,7 +52,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -66,7 +61,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     id: {
       control: 'text',
-      description: 'The id of the input field.',
       table: {
         category: 'Props',
         type: {
@@ -76,7 +70,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     label: {
       control: 'text',
-      description: 'The label for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -86,7 +79,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     triggerIcon: {
       control: 'text',
-      description: 'The icon to use as a trigger.',
       table: {
         category: 'Props',
         type: {
@@ -97,17 +89,15 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     triggerIconSize: {
       control: 'select',
       options: ['sm', 'md', 'lg'],
-      description: 'The size of the trigger icon.',
       table: {
         category: 'Props',
         type: {
-          summary: 'IconSizes',
+          summary: 'sm | md | lg',
         },
       },
     },
     isOpen: {
-      control: false,
-      description: 'Whether the date picker is open.',
+      control: 'boolean',
       table: {
         category: 'Props',
         type: {
@@ -117,18 +107,16 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     selected: {
       control: 'date',
-      description: 'The selected day(s).',
       table: {
         category: 'Props',
         type: {
-          summary: 'Date | Date[] | DateRange | undefined',
+          summary: 'Date | DateRange | undefined',
         },
       },
     },
     mode: {
       control: 'select',
       options: ['single', 'range', 'multiple'],
-      description: 'Allows you to select a single day, a range of days, or multiple days.',
       table: {
         category: 'Props',
         type: {
@@ -138,7 +126,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Clear the selected date(s) when the date picker closes.',
       table: {
         category: 'Props',
         type: {
@@ -148,7 +135,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -158,7 +144,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -168,7 +153,6 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker.',
       table: {
         category: 'Props',
         type: {
@@ -183,11 +167,10 @@ const meta: Meta<typeof IconTriggerDatePicker> = {
     },
     onSelect: {
       control: false,
-      description: 'Event handler when a day is selected.',
       table: {
-        category: 'Callbacks',
+        category: 'Events',
         type: {
-          summary: 'OnSelectHandler<Date> | OnSelectHandler<DateRange>',
+          summary: '(selected: Date | DateRange | undefined) => void',
         },
       },
       action: 'onSelect',

package/src/components/forms/date/iconTriggerDatePicker/IconTriggerDatePicker.tsx

@@ -7,24 +7,40 @@ import { Icon } from '../../../icons/Icon';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 interface Props {
+  /** Allows you to select a single day, a range of days, or multiple days. */
   mode?: Mode;
+  /** A label for assistive technologies. */
   ariaLabel: string;
+  /** Disable dates before this date. */
   disableBeforeDate?: Date;
+  /** Disable dates after this date. */
   disableAfterDate?: Date;
+  /** Disable the date picker. */
   isDisabled?: boolean;
+  /** The id of the input field. */
   id: string;
+  /** The label for the input field. */
   label?: string;
+  /** Event handler when a day is selected. */
   onSelect?: (selected: Date | DateRange | undefined) => void;
   selected?: Date | DateRange | undefined;
+  /** The icon to use as a trigger. */
   triggerIcon: IconName;
+  /** The size of the trigger icon. */
   triggerIconSize: IconSizes;
+  /** Whether the date picker is open. */
   isOpen?: boolean;
+  /** Clear the selected date(s) when the date picker closes. */
   clearOnClose?: boolean;
+  /** Accepts a CSS class name */
   className?: string;
   initialMonth?: Date;
   'data-testid'?: string;
+  /** The portal options for the date picker. Follows floating-ui options. */
   portalOptions?: PortalOptions;
+  /** Whether the date picker is a portal. */
   isPortal?: boolean;
+  /** The floating options for the date picker. Follows floating-ui options. */
   floatingOptions?: UseFloatingOptions;
 }
 

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
   argTypes: {
     isPortal: {
       control: 'boolean',
-      description: 'Whether the date picker is a portal.',
       table: {
         category: 'Props',
         type: {
@@ -25,7 +24,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     portalOptions: {
       control: false,
-      description: 'The portal options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -35,7 +33,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     floatingOptions: {
       control: false,
-      description: 'The floating options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -45,35 +42,30 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     tabIndex: {
       control: 'number',
-      description: 'The tab index of the input field.',
       table: {
         category: 'Props',
       },
     },
     ref: {
       control: false,
-      description: 'The ref of the input field.',
       table: {
         category: 'Props',
       },
     },
     isReadOnly: {
       control: 'boolean',
-      description: 'Whether the date picker is read only.',
       table: {
         category: 'Props',
       },
     },
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Whether the label is hidden.',
       table: {
         category: 'Props',
       },
     },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -84,8 +76,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     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: {
@@ -95,7 +85,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -105,7 +94,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     id: {
       control: 'text',
-      description: 'The id of the input field.',
       table: {
         category: 'Props',
         type: {
@@ -115,7 +103,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     label: {
       control: 'text',
-      description: 'The label for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -125,7 +112,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     onSelect: {
       action: 'selected',
-      description: 'Callback function that is called when a date is selected.',
       table: {
         category: 'Events',
         type: {
@@ -135,7 +121,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     selected: {
       control: 'date',
-      description: 'The selected date.',
       table: {
         category: 'Props',
         type: {
@@ -145,7 +130,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     inputPlaceholder: {
       control: 'text',
-      description: 'The placeholder text for the input field.',
       table: {
         category: 'Props',
         type: {
@@ -155,7 +139,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     inputIconName: {
       control: 'text',
-      description: 'The icon to display in the input field.',
       table: {
         category: 'Props',
         type: {
@@ -165,7 +148,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     isClearable: {
       control: 'boolean',
-      description: 'Whether the input field should be clearable.',
       table: {
         category: 'Props',
         type: {
@@ -175,7 +157,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     isOpen: {
       control: false,
-      description: 'Whether the date picker is open.',
       table: {
         category: 'Props',
         type: {
@@ -185,7 +166,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Whether the input field should be cleared when the date picker is closed.',
       table: {
         category: 'Props',
         type: {
@@ -195,7 +175,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     errorMessage: {
       control: 'text',
-      description: 'An error message to display.',
       table: {
         category: 'Props',
         type: {
@@ -205,7 +184,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -215,7 +193,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -225,7 +202,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker.',
       table: {
         category: 'Props',
         type: {
@@ -235,7 +211,6 @@ const meta: Meta<typeof SingleInputDatePicker> = {
     },
     initialMonth: {
       control: 'date',
-      description: 'The month to display.',
       table: {
         category: 'Props',
         type: {

package/src/components/forms/date/inputDatePicker/SingleInputDatePicker.tsx

@@ -8,10 +8,12 @@ import { formatDateAsString } from './helpers';
 import { UseFloatingOptions } from '@floating-ui/react-dom';
 import { PortalOptions } from '../datePicker/types';
 export interface SingleInputDatePickerProps {
+  /** A label for assistive technologies. */
   ariaLabel: string;
   disableBeforeDate?: Date;
   disableAfterDate?: Date;
   isDisabled?: boolean;
+  /** The layout of the caption. Enables you to add or remove the dropdown navigation for months/years */
   captionLayout?: 'dropdown' | 'dropdown-months' | 'dropdown-years' | 'label';
   id?: string;
   label?: string;
@@ -20,18 +22,24 @@ export interface SingleInputDatePickerProps {
   selected?: Date;
   isOpen?: boolean;
   clearOnClose?: boolean;
+  /** Accepts a CSS class name */
   className?: string;
   inputIconName?: IconName;
   isClearable?: boolean;
   inputPlaceholder?: string;
   errorMessage?: string | undefined;
+  /** Whether the label is hidden. */
   hasHiddenLabel?: boolean;
   'data-testid'?: string;
+  /** The ref of the input field. */
   ref?: React.LegacyRef<HTMLInputElement>;
+  /** Whether the date picker is read only. */
   isReadOnly?: boolean;
+  /** The tab index of the input field. */
   tabIndex?: number;
   portalOptions?: PortalOptions;
   floatingOptions?: UseFloatingOptions;
+  /** Whether the date picker is a portal. */
   isPortal?: boolean;
 }
 

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

@@ -17,7 +17,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
   argTypes: {
     isPortal: {
       control: 'boolean',
-      description: 'Whether the date picker is a portal.',
       table: {
         category: 'Props',
         type: {
@@ -27,7 +26,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     portalOptions: {
       control: false,
-      description: 'The portal options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -37,7 +35,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     floatingOptions: {
       control: false,
-      description: 'The floating options for the date picker. Follows floating-ui options.',
       table: {
         category: 'Props',
         type: {
@@ -47,56 +44,48 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     fromTabIndex: {
       control: 'number',
-      description: 'The tab index of the from input field.',
       table: {
         category: 'Props',
       },
     },
     ref: {
       control: false,
-      description: 'The ref of the input field.',
       table: {
         category: 'Props',
       },
     },
     isFromReadOnly: {
       control: 'boolean',
-      description: 'Whether the from input is read only.',
       table: {
         category: 'Props',
       },
     },
     isToReadOnly: {
       control: 'boolean',
-      description: 'Whether the to input is read only.',
       table: {
         category: 'Props',
       },
     },
     hasHiddenLabel: {
       control: 'boolean',
-      description: 'Whether the label is hidden.',
       table: {
         category: 'Props',
       },
     },
     gutterWidth: {
       control: 'number',
-      description: 'The gutter width for the date picker.',
       table: {
         category: 'Props',
       },
     },
     setIsOpen: {
       control: 'boolean',
-      description: 'Whether the date picker is open.',
       table: {
         category: 'Props',
       },
     },
     ariaLabel: {
       control: 'text',
-      description: 'A label for assistive technologies.',
       table: {
         category: 'Props',
         type: {
@@ -107,8 +96,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     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: {
@@ -118,7 +105,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     className: {
       control: false,
-      description: 'Accepts a CSS class name',
       table: {
         category: 'Props',
         type: {
@@ -128,8 +114,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     id: {
       control: 'text',
-      description:
-        'The id of the input fieldss. Each one has the id appended to it, For example an id of `holiday` would be `holiday-to` and `holiday-from`',
       table: {
         category: 'Props',
         type: {
@@ -139,7 +123,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     onSelect: {
       action: 'selected',
-      description: 'Callback function that is called when a date is selected.',
       table: {
         category: 'Events',
         type: {
@@ -149,7 +132,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     selected: {
       control: false,
-      description: 'The selected date range.',
       table: {
         category: 'Props',
         type: {
@@ -159,7 +141,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     inputPlaceholder: {
       control: 'text',
-      description: 'The placeholder text for the input fields.',
       table: {
         category: 'Props',
         type: {
@@ -169,8 +150,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     isOpen: {
       control: 'boolean',
-      description:
-        'Whether the floatingUI component wrapped around the date picker is opened or closed.',
       table: {
         category: 'Props',
         type: {
@@ -180,7 +159,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     inputIconName: {
       control: 'text',
-      description: 'The icon to display in the input fields.',
       table: {
         category: 'Props',
         type: {
@@ -190,7 +168,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     toErrorMessage: {
       control: 'text',
-      description: 'An error message to display on the `to` input.',
       table: {
         category: 'Props',
         type: {
@@ -200,7 +177,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     fromErrorMessage: {
       control: 'text',
-      description: 'An error message to display on the `from` input.',
       table: {
         category: 'Props',
         type: {
@@ -210,7 +186,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     disableAfterDate: {
       control: 'date',
-      description: 'Disable dates after this date.',
       table: {
         category: 'Props',
         type: {
@@ -220,7 +195,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     disableBeforeDate: {
       control: 'date',
-      description: 'Disable dates before this date.',
       table: {
         category: 'Props',
         type: {
@@ -230,7 +204,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disable the date picker and input fields.',
       table: {
         category: 'Props',
         type: {
@@ -240,7 +213,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     fromLabel: {
       control: 'text',
-      description: 'The label for the `from` input.',
       table: {
         category: 'Props',
         type: {
@@ -250,7 +222,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     toLabel: {
       control: 'text',
-      description: 'The label for the `to` input.',
       table: {
         category: 'Props',
         type: {
@@ -260,7 +231,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     month: {
       control: 'date',
-      description: 'The currently displayed month.',
       table: {
         category: 'Props',
         type: {
@@ -270,7 +240,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     closeOnSelect: {
       control: 'boolean',
-      description: 'Whether to close the date picker when a complete range is selected.',
       table: {
         category: 'Props',
         type: {
@@ -280,7 +249,6 @@ const meta: Meta<typeof InputDateRangePicker> = {
     },
     clearOnClose: {
       control: 'boolean',
-      description: 'Whether to clear the selected dates when the picker is closed.',
       table: {
         category: 'Props',
         type: {