@indico-data/design-system 3.0.10 → 3.2.0

package/src/components/forms/toggle/Toggle.stories.tsx

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

package/src/components/forms/toggle/Toggle.tsx

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

package/src/components/icons/Icon.stories.tsx

@@ -15,7 +15,6 @@ const meta: Meta = {
   argTypes: {
     id: {
       control: 'text',
-      description: 'Unique identifier for the icon',
       table: {
         type: { summary: 'string' },
       },
@@ -23,14 +22,12 @@ const meta: Meta = {
     name: {
       control: 'select',
       options: iconNames,
-      description: 'The name of the icon',
       table: {
         type: { summary: 'string' },
       },
     },
     ariaLabel: {
       control: 'text',
-      description: 'Accessible label for the icon',
       table: {
         type: { summary: 'string' },
         category: 'accessibility',
@@ -38,7 +35,6 @@ const meta: Meta = {
     },
     className: {
       control: 'text',
-      description: 'Additional custom class names',
       table: {
         type: { summary: 'string' },
         category: 'styling',
@@ -47,7 +43,6 @@ const meta: Meta = {
     size: {
       control: 'select',
       options: ['xs', 'sm', 'md', 'lg', 'xl'],
-      description: 'Size of the icon',
       table: {
         type: { summary: 'xs | sm | md | lg | xl' },
         category: 'styling',
@@ -55,7 +50,6 @@ const meta: Meta = {
     },
     style: {
       control: 'object',
-      description: 'Inline styles for the icon',
       table: {
         type: { summary: 'React.CSSProperties' },
         category: 'styling',
@@ -63,7 +57,6 @@ const meta: Meta = {
     },
     onClick: {
       action: 'clicked',
-      description: 'Click event handler',
       table: {
         type: { summary: 'MouseEventHandler<SVGElement>' },
         category: 'callbacks',

package/src/components/icons/types.ts

@@ -10,9 +10,14 @@ export type IndiconName = keyof typeof indicons;
 export type IconName = IndiconName | `fa-${FAIconName}`;
 
 export type IconProps = PermafrostComponent & {
+  /** The name of the icon */
   name: IconName;
+  /** Accessible label for the icon */
   ariaLabel?: string;
+  /** Size of the icon */
   size?: IconSizes;
+  /** Inline styles for the icon */
   style?: CSSProperties;
+  /** Click event handler */
   onClick?: MouseEventHandler<SVGElement>;
 };

package/src/components/loading-indicators/BarSpinner/BarSpinner.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta = {
   argTypes: {
     className: {
       control: false,
-      description: 'The class name of the bar spinner',
       table: {
         category: 'Props',
       },
@@ -20,22 +19,18 @@ const meta: Meta = {
     },
     width: {
       control: false,
-      description: 'The width of the bar spinner',
       table: {
         category: 'Props',
       },
     },
     height: {
       control: false,
-      description: 'The height of the bar spinner',
       table: {
         category: 'Props',
       },
     },
     id: {
       control: false,
-      description:
-        "The id of the tooltip. This needs to match the element that holds it's data attribute",
       table: {
         category: 'Props',
         type: {

package/src/components/loading-indicators/BarSpinner/BarSpinner.tsx

@@ -6,9 +6,13 @@ export function BarSpinner({
   ...rest
 }: {
   'data-testid'?: string;
+  /** The width of the bar spinner */
   width?: number;
+  /** The id of the tooltip. This needs to match the element that holds it's data attribute */
   id?: string;
+  /** The height of the bar spinner */
   height?: number;
+  /** The class name of the bar spinner */
   className?: string;
   [key: string]: any;
 }) {

package/src/components/loading-indicators/CirclePulse/CirclePulse.stories.tsx

@@ -23,7 +23,6 @@ const meta: Meta = {
   argTypes: {
     size: {
       control: 'select',
-      description: 'The size of the circle',
       options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'],
       table: {
         category: 'Props',
@@ -34,7 +33,6 @@ const meta: Meta = {
     },
     id: {
       control: false,
-      description: 'The id of the circle pulse',
       table: {
         category: 'Props',
         type: {
@@ -44,7 +42,6 @@ const meta: Meta = {
     },
     className: {
       control: false,
-      description: 'The class name of the circle pulse',
       table: {
         category: 'Props',
         type: {

package/src/components/loading-indicators/CirclePulse/CirclePulse.tsx

@@ -1,5 +1,7 @@
 interface CirclePulseProps {
+  /** The size of the circle */
   size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /** The class name of the circle pulse */
   className?: string;
   [key: string]: any;
 }

package/src/components/menu/Menu.stories.tsx

@@ -8,7 +8,6 @@ const meta: Meta<typeof Menu> = {
   argTypes: {
     className: {
       control: 'text',
-      description: 'The class name to apply to the Menu component.',
       table: {
         category: 'Props',
         type: {
@@ -18,8 +17,6 @@ const meta: Meta<typeof Menu> = {
     },
     children: {
       control: false,
-      description:
-        'The children of the Menu component, which will be automatically styled as menu-items.',
       table: {
         category: 'Props',
         type: {

package/src/components/menu/Menu.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames';
 
 export type MenuProps = {
   children: React.ReactNode;
+  /** The class name to apply to the Menu component. */
   className?: string;
 };
 

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.mdx

@@ -15,6 +15,10 @@ Pills are used to display information in a compact way. They are often used to d
 
 <Story of={Pill.AllSizes} />
 
-## Statuses
+## Default Colors
 
-<Story of={Pill.AllStatuses} />
+<Story of={Pill.AllDefaultColors} />
+
+# Shades
+
+<Story of={Pill.AllShades} />