@indico-data/design-system 3.0.9 → 3.1.0

package/src/components/modal/Modal.stories.tsx

@@ -16,7 +16,6 @@ const meta: Meta = {
   argTypes: {
     className: {
       control: 'text',
-      description: 'Additional classes for the badge component',
       table: {
         category: 'Props',
         type: {
@@ -26,7 +25,6 @@ const meta: Meta = {
     },
     children: {
       control: false,
-      description: 'The content of the badge (superseded by the string prop)',
       table: {
         category: 'Props',
         type: {
@@ -36,7 +34,6 @@ const meta: Meta = {
     },
     isOpen: {
       control: false,
-      description: 'Whether the modal is open',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta = {
     },
     onRequestClose: {
       control: false,
-      description: 'Callback function to be called when the modal is closed',
       table: {
         category: 'Props',
         type: {
@@ -56,7 +52,6 @@ const meta: Meta = {
     },
     portalClassName: {
       control: false,
-      description: 'Additional classes for the portal element',
       table: {
         category: 'Props',
         type: {
@@ -66,7 +61,6 @@ const meta: Meta = {
     },
     overlayClassName: {
       control: false,
-      description: 'Additional classes for the overlay element',
       table: {
         category: 'Props',
         type: {
@@ -76,7 +70,6 @@ const meta: Meta = {
     },
     appElement: {
       control: false,
-      description: 'The element to use as the app element',
       table: {
         category: 'Props',
         type: {
@@ -86,7 +79,6 @@ const meta: Meta = {
     },
     shouldCloseOnOverlayClick: {
       control: 'boolean',
-      description: 'Whether the modal should close when the overlay is clicked',
       table: {
         category: 'Props',
         type: {
@@ -96,18 +88,15 @@ const meta: Meta = {
     },
     parentSelector: {
       control: false,
-      description:
-        'The element to use as the parent element for the modal. If you have issues with styling, make sure you pass the correct root element here.',
       table: {
         category: 'Props',
         type: {
-          summary: 'HTMLElement',
+          summary: 'function',
         },
       },
     },
     shouldCloseOnEsc: {
       control: 'boolean',
-      description: 'Whether the modal should close when the escape key is pressed',
       table: {
         category: 'Props',
         type: {
@@ -117,7 +106,6 @@ const meta: Meta = {
     },
     contentElement: {
       control: false,
-      description: 'Custom content element for the modal',
       table: {
         category: 'Props',
         type: {
@@ -127,7 +115,6 @@ const meta: Meta = {
     },
     overlayElement: {
       control: false,
-      description: 'Custom overlay element for the modal',
       table: {
         category: 'Props',
         type: {
@@ -138,7 +125,6 @@ const meta: Meta = {
     position: {
       control: 'select',
       options: ['top', 'center'],
-      description: 'The position of the modal opens on the page',
       table: {
         category: 'Props',
         type: {
@@ -153,7 +139,6 @@ const meta: Meta = {
     },
     title: {
       control: 'text',
-      description: 'The title of the modal',
       table: {
         category: 'Props',
         type: {
@@ -163,7 +148,6 @@ const meta: Meta = {
     },
     footer: {
       control: false,
-      description: 'The footer of the modal. It accepts a React Component',
       table: {
         category: 'Props',
         type: {
@@ -173,7 +157,6 @@ const meta: Meta = {
     },
     subtitle: {
       control: 'text',
-      description: 'The subtitle of the modal',
       table: {
         category: 'Props',
         type: {
@@ -183,7 +166,6 @@ const meta: Meta = {
     },
     maxWidthInPixels: {
       control: 'number',
-      description: 'The maximum width of the modal in pixels',
       table: {
         category: 'Props',
         type: {
@@ -193,7 +175,6 @@ const meta: Meta = {
     },
     confirmationButtonText: {
       control: 'text',
-      description: 'The text of the confirmation button',
       table: {
         category: 'Confirmation Modal',
         type: {
@@ -204,7 +185,6 @@ const meta: Meta = {
     confirmationButtonVariant: {
       control: 'select',
       options: ['solid', 'outline', 'link', 'action', 'destructive', 'soft'],
-      description: 'The variant of the confirmation button. ',
       table: {
         category: 'Confirmation Modal',
         type: {
@@ -214,7 +194,6 @@ const meta: Meta = {
     },
     cancelButtonText: {
       control: 'text',
-      description: 'The text of the cancel button',
       table: {
         category: 'Confirmation Modal',
         type: {
@@ -225,7 +204,6 @@ const meta: Meta = {
     status: {
       control: 'select',
       options: ['info', 'success', 'error'],
-      description: 'The status of the modal. This will determine the color of the icon.',
       table: {
         category: 'Confirmation Modal',
         type: {
@@ -236,7 +214,6 @@ const meta: Meta = {
     icon: {
       control: 'select',
       options: Object.keys(indiconDefinitions),
-      description: 'The icon of the modal',
       table: {
         category: 'Confirmation Modal',
         type: {
@@ -246,7 +223,6 @@ const meta: Meta = {
     },
     hasDontShowAgainCheckbox: {
       control: 'boolean',
-      description: 'Whether the modal should have a checkbox to not show again',
       table: {
         category: 'Confirmation Modal',
         type: {

package/src/components/modal/types.ts

@@ -2,23 +2,39 @@ import { ButtonVariants } from '../button/types';
 import { IconName } from '../icons/types';
 
 export interface ModalProps {
+  /** Additional classes for the badge component */
   className?: string;
+  /** The content of the badge (superseded by the string prop) */
   children?: React.ReactNode;
+  /** Whether the modal is open */
   isOpen: boolean;
+  /** Callback function to be called when the modal is closed */
   onRequestClose?: () => void;
+  /** Additional classes for the portal element */
   portalClassName?: string;
+  /** Additional classes for the overlay element */
   overlayClassName?: string;
+  /** The element to use as the app element */
   appElement?: HTMLElement;
+  /** Whether the modal should close when the overlay is clicked */
   shouldCloseOnOverlayClick?: boolean;
+  /** Whether the modal should close when the escape key is pressed */
   shouldCloseOnEsc?: boolean;
   testId?: string;
+  /** Custom content element for the modal */
   contentElement?: (props: any, children: React.ReactNode) => React.ReactElement;
+  /** Custom overlay element for the modal */
   overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
+  /** The position of the modal opens on the page */
   position?: 'top' | 'center';
   parentSelector?: () => HTMLElement;
+  /** The title of the modal */
   title?: string;
+  /** The subtitle of the modal */
   subtitle?: string;
+  /** The footer of the modal. It accepts a React Component */
   footer?: React.ReactNode;
+  /** The maximum width of the modal in pixels */
   maxWidthInPixels?: number;
 }
 
@@ -29,10 +45,16 @@ export interface ConfirmationModalProps extends ModalProps {
     dontShowAgain?: boolean;
   }) => void | Promise<void> | Promise<boolean>;
   onCancelRequest?: () => void | Promise<void> | Promise<boolean>;
+  /** Whether the modal should have a checkbox to not show again */
   hasDontShowAgainCheckbox?: boolean;
+  /** The variant of the confirmation button. */
   confirmationButtonVariant?: ButtonVariants;
+  /** The text of the confirmation button */
   confirmationButtonText?: string;
+  /** The text of the cancel button */
   cancelButtonText?: string;
+  /** The icon of the modal */
   icon?: IconName;
+  /** The status of the modal. This will determine the color of the icon. */
   status?: 'info' | 'success' | 'error';
 }

package/src/components/pagination/Pagination.stories.tsx

@@ -9,7 +9,6 @@ const meta: Meta = {
   argTypes: {
     className: {
       control: false,
-      description: 'The css class name for the pagination component',
       table: {
         category: 'Props',
         type: {
@@ -19,7 +18,6 @@ const meta: Meta = {
     },
     totalPages: {
       control: 'number',
-      description: 'The total number of pages to be displayed',
       table: {
         category: 'Props',
         type: {
@@ -29,7 +27,6 @@ const meta: Meta = {
     },
     currentPage: {
       control: 'number',
-      description: 'The current page displayed in the input field.',
       table: {
         category: 'Props',
         type: {
@@ -39,7 +36,6 @@ const meta: Meta = {
     },
     onChange: {
       action: 'change',
-      description: 'The callback function that is called when the page changes.',
       table: {
         category: 'Callbacks',
         type: {

package/src/components/pagination/types.ts

@@ -1,6 +1,10 @@
 export interface PaginationProps {
+  /** The total number of pages to be displayed */
   totalPages: number;
+  /** The current page displayed in the input field. */
   currentPage?: number;
+  /** The css class name for the pagination component */
   className?: string;
+  /** The callback function that is called when the page changes. */
   onChange?: (value: number) => void;
 }

package/src/components/pill/Pill.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta = {
     },
     children: {
       control: 'text',
-      description: 'The content displayed inside the pill',
       table: {
         category: 'Props',
         type: {
@@ -38,7 +37,6 @@ const meta: Meta = {
         'pending',
         'orange',
       ],
-      description: 'Applies a CSS class to change the style of the pill',
       table: {
         category: 'Props',
         type: {
@@ -52,7 +50,6 @@ const meta: Meta = {
         type: 'select',
         options: ['sm', 'md', 'lg'],
       },
-      description: 'Applies a CSS class to change the size of the pill',
       table: {
         category: 'Props',
         type: {

package/src/components/pill/types.ts

@@ -5,8 +5,11 @@ export type PillSize = 'sm' | 'md' | 'lg';
 export type PillColor = SemanticColor | 'neutral';
 
 export interface PillProps {
+  /** The content displayed inside the pill */
   children: React.ReactNode | React.ReactNode[];
+  /** Applies a CSS class to change the style of the pill */
   color?: PillColor;
+  /** Applies a CSS class to change the size of the pill */
   size?: PillSize;
   className?: string;
 }

package/src/components/skeleton/Skeleton.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta = {
   argTypes: {
     className: {
       control: 'text',
-      description: 'Additional classes for the skeleton component',
       table: {
         category: 'Props',
         type: {
@@ -18,8 +17,6 @@ const meta: Meta = {
     },
     height: {
       control: 'number',
-      description:
-        'The height of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%")',
       table: {
         category: 'Props',
         type: {
@@ -29,8 +26,6 @@ const meta: Meta = {
     },
     width: {
       control: 'number',
-      description:
-        'The width of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%")',
       table: {
         category: 'Props',
         type: {
@@ -40,7 +35,6 @@ const meta: Meta = {
     },
     isCircle: {
       control: 'boolean',
-      description: 'Sets the skeleton component to be a circle',
       table: {
         category: 'Props',
         type: {
@@ -51,7 +45,6 @@ const meta: Meta = {
     },
     isFullHeight: {
       control: 'boolean',
-      description: 'Sets the skeleton component to be full height',
       table: {
         category: 'Props',
         type: {

package/src/components/skeleton/Skeleton.tsx

@@ -1,8 +1,13 @@
 type Props = {
+  /** Additional classes for the skeleton component */
   className?: string;
+  /** The height of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
   height?: number | string;
+  /** The width of the skeleton component, either in px (number) or a generic string (e.g. "20px", "50%", "100%") */
   width?: number | string;
+  /** Sets the skeleton component to be a circle */
   isCircle?: boolean;
+  /** Sets the skeleton component to be full height */
   isFullHeight?: boolean;
 };
 

package/src/components/stepper/Stepper.stories.tsx

@@ -17,7 +17,6 @@ const meta: Meta = {
   argTypes: {
     legendHeader: {
       control: false,
-      description: 'The header content for the legend.',
       table: {
         category: 'Props',
         type: {
@@ -27,7 +26,6 @@ const meta: Meta = {
     },
     legendFooter: {
       control: false,
-      description: 'The footer content for the legend.',
       table: {
         category: 'Props',
         type: {
@@ -37,7 +35,6 @@ const meta: Meta = {
     },
     steps: {
       control: false,
-      description: 'An array of step objects that define the stepper navigation.',
       table: {
         category: 'Props',
         type: {
@@ -46,7 +43,6 @@ const meta: Meta = {
       },
     },
     label: {
-      description: 'Display text for the step in the sidebar/legend',
       table: {
         category: 'Step Properties',
         type: {
@@ -56,8 +52,6 @@ const meta: Meta = {
       control: false,
     },
     isCompleted: {
-      description:
-        'Indicates whether this step has been completed. Used to track progress and determine whether to enable subsequent steps.',
       table: {
         category: 'Step Properties',
         type: {
@@ -68,8 +62,6 @@ const meta: Meta = {
       control: false,
     },
     isNextDisabled: {
-      description:
-        'When true, the Next button will be disabled for this step. Set to true for steps that require completion before proceeding.',
       table: {
         category: 'Step Properties',
         type: {
@@ -80,8 +72,6 @@ const meta: Meta = {
       control: false,
     },
     isOptional: {
-      description:
-        'When true, the step can be skipped (the Next button remains enabled). Used for optional information or steps that are not required to complete the flow.',
       table: {
         category: 'Step Properties',
         type: {
@@ -92,8 +82,6 @@ const meta: Meta = {
       control: false,
     },
     isSidebarEnabled: {
-      description:
-        'When true, the step is clickable in the sidebar. Used for restricting navigation until previous steps are completed.',
       table: {
         category: 'Step Properties',
         type: {
@@ -105,8 +93,6 @@ const meta: Meta = {
     },
     currentStep: {
       control: false,
-      description:
-        'The current step of the stepper. This value should be an index of the steps array.',
       table: {
         category: 'Props',
         type: {
@@ -117,7 +103,6 @@ const meta: Meta = {
     },
     onBackClick: {
       control: false,
-      description: 'The function to call when the back button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -127,7 +112,6 @@ const meta: Meta = {
     },
     onFinishClick: {
       control: false,
-      description: 'The function to call when the finish button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -137,7 +121,6 @@ const meta: Meta = {
     },
     onStepClick: {
       control: false,
-      description: 'The function to call when a step is clicked ont he legend.',
       table: {
         category: 'Callbacks',
         type: {
@@ -147,7 +130,6 @@ const meta: Meta = {
     },
     onNextClick: {
       control: false,
-      description: 'The function to call when the next button is clicked.',
       table: {
         category: 'Callbacks',
         type: {
@@ -157,7 +139,6 @@ const meta: Meta = {
     },
     children: {
       control: false,
-      description: 'Any item passed to this component as a child will be rendered as a step.',
       table: {
         category: 'Props',
         type: {

package/src/components/stepper/types.ts

@@ -1,14 +1,22 @@
 import { ReactNode } from 'react';
 
 export interface StepperProps {
+  /** An array of step objects that define the stepper navigation. */
   steps: Step[];
   currentStep?: number;
+  /** The header content for the legend. */
   legendHeader?: ReactNode;
+  /** The footer content for the legend. */
   legendFooter?: ReactNode;
+  /** The function to call when the back button is clicked. */
   onBackClick: () => void;
+  /** The function to call when the next button is clicked. */
   onNextClick: () => void;
+  /** The function to call when the finish button is clicked. */
   onFinishClick: () => void;
+  /** Any item passed to this component as a child will be rendered as a step. */
   children: React.ReactNode;
+  /** The function to call when a step is clicked ont he legend. */
   onStepClick: (step: number) => void;
 }
 
@@ -19,6 +27,7 @@ export interface StepperLegendProps {
 }
 
 export interface Step {
+  /** Display text for the step in the sidebar/legend */
   label: string;
   isCompleted?: boolean;
   isNextDisabled?: boolean;