@indico-data/design-system 3.0.10 → 3.2.0

package/src/components/table/Table.stories.tsx

@@ -13,8 +13,6 @@ const meta: Meta = {
   argTypes: {
     columns: {
       control: false,
-      description:
-        'The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below.',
       table: {
         category: 'Data',
         type: { summary: 'array' },
@@ -23,7 +21,6 @@ const meta: Meta = {
     },
     isFullHeight: {
       control: 'boolean',
-      description: 'Enables height to be set to the full height of the container',
       table: {
         category: 'Styling',
         type: { summary: 'boolean' },
@@ -32,8 +29,6 @@ const meta: Meta = {
     },
     data: {
       control: false,
-      description:
-        'Its highly recommended that your data have a unique identifier (keyField). The default keyField is id. If you need to override this value then use the keyField proeprty below',
       table: {
         category: 'Data',
         type: { summary: 'array' },
@@ -42,7 +37,6 @@ const meta: Meta = {
     },
     isDisabled: {
       control: 'boolean',
-      description: 'Disables the Table section',
       table: {
         category: 'Styling',
         type: {
@@ -53,7 +47,6 @@ const meta: Meta = {
     },
     isLoading: {
       control: 'boolean',
-      description: 'It sets the loading of the table',
       table: {
         category: 'Styling',
         type: {
@@ -65,8 +58,6 @@ const meta: Meta = {
     direction: {
       control: 'select',
       options: ['auto', 'ltr', 'rtl'],
-      description:
-        'Accepts: ltr, rtl, or auto. When set to auto (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR).',
       table: {
         category: 'Accessibility',
         defaultValue: { summary: 'auto' },
@@ -75,8 +66,6 @@ const meta: Meta = {
 
     title: {
       control: 'text',
-      description:
-        'The title displayed in the Table Header. If you do not provide the title property the Table Header will not be rendered',
       table: {
         category: 'Styling',
         type: {
@@ -87,7 +76,6 @@ const meta: Meta = {
     },
     responsive: {
       control: 'boolean',
-      description: 'Makes the table horizontally scrollable on smaller screen widths',
       table: {
         category: 'Accessibility',
         type: {
@@ -98,8 +86,6 @@ const meta: Meta = {
     },
     dense: {
       control: 'boolean',
-      description:
-        'Compacts the row height. can be overridden via theming rows.denseHeight. Note: If any custom elements exceed the dense height then the row will only compact to the tallest element any of your cells',
       table: {
         category: 'Accessibility',
         type: {
@@ -110,8 +96,6 @@ const meta: Meta = {
     },
     noHeader: {
       control: 'boolean',
-      description:
-        'Removes the table header. title, contextTitle and contextActions will be ignored',
       table: {
         category: 'Styling',
         type: {
@@ -122,7 +106,6 @@ const meta: Meta = {
     },
     noTableHead: {
       control: 'boolean',
-      description: 'Hides the the sort columns and titles (TableHead)',
       table: {
         category: 'Styling',
         type: {
@@ -133,7 +116,6 @@ const meta: Meta = {
     },
     onSort: {
       control: false,
-      description: 'Callback to access the sort state when a column is clicked. Returns',
       table: {
         category: 'Callbacks',
         type: {
@@ -144,7 +126,6 @@ const meta: Meta = {
     },
     subHeader: {
       control: 'boolean',
-      description: 'Show a sub header between the table and table header',
       table: {
         category: 'Styling',
         type: {
@@ -155,7 +136,6 @@ const meta: Meta = {
     },
     subHeaderComponent: {
       control: false,
-      description: 'A component you want to render',
       table: {
         category: 'Components',
         type: {
@@ -166,7 +146,6 @@ const meta: Meta = {
     },
     paginationPerPage: {
       control: 'number',
-      description: 'The default rows per page to use when the table initially loads',
       table: {
         category: 'Add-Ons',
         type: {
@@ -177,7 +156,6 @@ const meta: Meta = {
     },
     noDataComponent: {
       control: false,
-      description: 'A custom component to display when there are no records to display',
       table: {
         category: 'Components',
         type: {
@@ -188,8 +166,6 @@ const meta: Meta = {
     },
     expandableRows: {
       control: 'boolean',
-      description:
-        'Whether to make a row expandable, if true it requires an expandableRowsComponent. It is highly recommended your data set have a unique identifier defined as the keyField for row expansion to work properly.',
       table: {
         category: 'Add-Ons',
         type: {
@@ -200,8 +176,6 @@ const meta: Meta = {
     },
     clearSelectedRows: {
       control: 'boolean',
-      description:
-        'Toggling this property clears the selectedRows. If you use redux or react state you need to make sure that you pass a toggled value or the component will not update',
       table: {
         category: 'Styling',
         type: {
@@ -212,8 +186,6 @@ const meta: Meta = {
     },
     pagination: {
       control: 'boolean',
-      description:
-        'Enable pagination with defaults. by default the total record set will be sliced depending on the page, rows per page. if you wish to use server side pagination then use the paginationServer property',
       table: {
         category: 'Add-Ons',
         type: {
@@ -224,7 +196,6 @@ const meta: Meta = {
     },
     selectableRows: {
       control: 'boolean',
-      description: 'Whether to show selectable checkboxes',
       table: {
         category: 'Add-Ons',
         type: {
@@ -236,7 +207,6 @@ const meta: Meta = {
 
     striped: {
       control: 'boolean',
-      description: 'Stripe/band color the odd rows',
       table: {
         category: 'Accessibility',
         type: {
@@ -247,23 +217,18 @@ const meta: Meta = {
     },
     totalEntriesText: {
       control: 'text',
-      description:
-        'The text to display in the total entries section. This is hidden if 1. No pagination exists, 2. No string is passed.',
       table: {
         category: 'Styling',
       },
     },
     canPinColumns: {
       control: 'boolean',
-      description:
-        'Allows the pinning of columns to the left hand side. This is required when using the column pin API',
       table: {
         category: 'Add-Ons',
       },
     },
     onPinnedColumnsChange: {
       control: false,
-      description: 'Callback that receives the IDs of the pinned columns when they change.',
       table: {
         category: 'Add-Ons',
       },

package/src/components/table/types.ts

@@ -21,13 +21,22 @@ export type TableColumn<T> = PinnableColumn<T>;
 
 export interface TableProps<T>
   extends Omit<IDataTableProps<T>, 'paginationComponent' | 'direction' | 'subHeaderAlign'> {
+  /** The columns to display in the table. All columns require a unique id property. For pinned columns, please see the pinned example below. */
   columns: TableColumn<T>[];
+  /** Disables the Table section */
   isDisabled?: boolean;
+  /** It sets the loading of the table */
   isLoading?: boolean;
+  /** Accepts: ltr, rtl, or auto. When set to auto (default), RDT will attempt to detect direction by checking the HTML and DIV tags. For cases where you need to force rtl, or ltr just set this option manually (i.e. SSR). */
   direction?: Direction;
+  /** Show a sub header between the table and table header */
   subHeaderAlign?: 'left' | 'right' | 'center';
+  /** Enables height to be set to the full height of the container */
   isFullHeight?: boolean;
+  /** The text to display in the total entries section. This is hidden if 1. No pagination exists, 2. No string is passed. */
   totalEntriesText?: string;
+  /** Allows the pinning of columns to the left hand side. This is required when using the column pin API */
   canPinColumns?: boolean;
+  /** Callback that receives the IDs of the pinned columns when they change. */
   onPinnedColumnsChange?: (pinnedColumnIds: any[]) => void;
 }

package/src/components/tanstackTable/TankstackTable.types.ts

@@ -1,10 +1,15 @@
 import { Row, ColumnDef, SortingState } from '@tanstack/react-table';
 
 export type WithPaginationProps = {
+  /** Number of rows to display per pagination page. */
   rowsPerPage: number;
+  /** Total number of rows in the table. */
   rowCount: number;
+  /** Callback when the page changes. */
   onChangePage: (page: number) => void;
+  /** Current page number. */
   currentPage: number;
+  /** Text to display for the total number of entries. */
   totalEntriesText?: string;
   showPagination: true;
 };
@@ -21,27 +26,47 @@ export type WithoutPaginationProps = {
 export type PaginationProps = WithPaginationProps | WithoutPaginationProps;
 
 export type Props<T extends object> = {
+  /** Array of data items. These are the items that will be displayed in the table cell. */
   data: T[];
+  /** Striped rows */
   isStriped?: boolean;
+  /** Column definitions including an `id` field. This is how you define your table structure. */
   columns: ColumnDef<T & { id: string }>[];
+  /** Additional option for class names. */
   className?: string;
+  /** class name for styling the action bar. */
   actionBarClassName?: string;
+  /** Component for table actions with selected items. */
   TableActions?: React.ComponentType<{ selectedItems: Row<any>[]; unselectRows: () => void }>;
+  /** Error state of the table. */
   error?: {
     hasError: boolean;
     errorMessage?: string;
   };
+  /** Enables row selection or defines selection conditions. */
   enableRowSelection?: boolean | ((row: Row<T>) => boolean);
+  /** Function to clear applied filters. */
   clearFilters?: () => void;
+  /** Indicates if filters are applied. */
   hasFilters?: boolean;
+  /** When this is true, the table is considered to be in a loading state. */
   isLoading?: boolean;
+  /** Message to display when the table is loading. */
   isLoadingMessage?: string;
+  /** Columns that are pinned by default. */
   defaultPinnedColumns?: string[];
+  /** Callback when a row is clicked. */
   onClickRow?: ((row: Row<T>) => void) | null;
+  /** Callback when a row is clicked. */
   onRowClick?: (row: T) => void;
+  /** Array of active rows. */
   activeRows?: string[];
+  /** Row selection state. */
   rowSelection?: Record<string, boolean>;
+  /** Callback when a row is selected. */
   onRowSelectionChange?: (updater: Record<string, boolean>) => void;
+  /** Callback when all rows are selected. */
   onSelectAllChange?: (isSelected: boolean) => void;
+  /** You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default. */
   defaultSorting?: SortingState;
 } & PaginationProps;

package/src/components/tanstackTable/TanstackTable.stories.tsx

@@ -27,8 +27,6 @@ const meta: Meta = {
   },
   argTypes: {
     defaultSorting: {
-      description:
-        'You may pass a default sorting state to the table. This will be used to sort the table by default. This is useful if you want to sort the table by a column by default.',
       control: false,
       table: {
         category: 'Props',
@@ -36,7 +34,6 @@ const meta: Meta = {
       },
     },
     isStriped: {
-      description: 'Striped rows',
       defaultValue: { summary: 'true' },
       control: { type: 'boolean' },
       table: {
@@ -45,8 +42,6 @@ const meta: Meta = {
       },
     },
     data: {
-      description:
-        'Array of data items. These are the items that will be displayed in the table cell.',
       control: false,
       table: {
         category: 'Props',
@@ -54,8 +49,6 @@ const meta: Meta = {
       },
     },
     columns: {
-      description:
-        'Column definitions including an `id` field. This is how you define your table structure.',
       control: false,
       table: {
         category: 'Props',
@@ -63,7 +56,6 @@ const meta: Meta = {
       },
     },
     className: {
-      description: 'Additional option for class names.',
       control: false,
       table: {
         category: 'Props',
@@ -71,7 +63,6 @@ const meta: Meta = {
       },
     },
     actionBarClassName: {
-      description: 'class name for styling the action bar.',
       control: false,
       table: {
         category: 'Props',
@@ -79,7 +70,6 @@ const meta: Meta = {
       },
     },
     TableActions: {
-      description: 'Component for table actions with selected items.',
       control: false,
       table: {
         category: 'Props',
@@ -89,7 +79,6 @@ const meta: Meta = {
       },
     },
     error: {
-      description: 'Error state of the table.',
       control: false,
       table: {
         category: 'Props',
@@ -97,7 +86,6 @@ const meta: Meta = {
       },
     },
     enableRowSelection: {
-      description: 'Enables row selection or defines selection conditions.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -105,7 +93,6 @@ const meta: Meta = {
       },
     },
     clearFilters: {
-      description: 'Function to clear applied filters.',
       action: 'clearFilters',
       control: false,
       table: {
@@ -114,7 +101,6 @@ const meta: Meta = {
       },
     },
     hasFilters: {
-      description: 'Indicates if filters are applied.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -123,7 +109,6 @@ const meta: Meta = {
       },
     },
     isLoading: {
-      description: 'When this is true, the table is considered to be in a loading state.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -132,7 +117,6 @@ const meta: Meta = {
       },
     },
     isLoadingMessage: {
-      description: 'Message to display when the table is loading.',
       control: { type: 'text' },
       table: {
         category: 'Props',
@@ -141,7 +125,6 @@ const meta: Meta = {
       },
     },
     defaultPinnedColumns: {
-      description: 'Columns that are pinned by default.',
       control: false,
       table: {
         category: 'Props',
@@ -149,7 +132,6 @@ const meta: Meta = {
       },
     },
     onClickRow: {
-      description: 'Callback when a row is clicked.',
       action: 'onClickRow',
       control: false,
       table: {
@@ -158,7 +140,6 @@ const meta: Meta = {
       },
     },
     showPagination: {
-      description: 'Toggles pagination display.',
       control: { type: 'boolean' },
       table: {
         category: 'Props',
@@ -167,7 +148,6 @@ const meta: Meta = {
       },
     },
     rowsPerPage: {
-      description: 'Number of rows to display per pagination page.',
       control: { type: 'number' },
       table: {
         category: 'Props',
@@ -176,7 +156,6 @@ const meta: Meta = {
       },
     },
     rowCount: {
-      description: 'Total number of rows in the table.',
       control: { type: 'number' },
       table: {
         category: 'Props',
@@ -185,7 +164,6 @@ const meta: Meta = {
       },
     },
     onChangePage: {
-      description: 'Callback when the page changes.',
       action: 'onChangePage',
       control: false,
       table: {
@@ -194,7 +172,6 @@ const meta: Meta = {
       },
     },
     currentPage: {
-      description: 'Current page number.',
       control: { type: 'number' },
       table: {
         category: 'Props',
@@ -203,7 +180,6 @@ const meta: Meta = {
       },
     },
     totalEntriesText: {
-      description: 'Text to display for the total number of entries.',
       control: false,
       table: {
         category: 'Props',
@@ -212,7 +188,6 @@ const meta: Meta = {
     },
 
     onRowClick: {
-      description: 'Callback when a row is clicked.',
       action: 'onRowClick',
       control: false,
       table: {
@@ -221,7 +196,6 @@ const meta: Meta = {
       },
     },
     activeRows: {
-      description: 'Array of active rows.',
       control: false,
       table: {
         category: 'Props',
@@ -229,7 +203,6 @@ const meta: Meta = {
       },
     },
     onSelectAllChange: {
-      description: 'Callback when all rows are selected.',
       action: 'onSelectAllChange',
       control: false,
       table: {
@@ -238,7 +211,6 @@ const meta: Meta = {
       },
     },
     onRowSelectionChange: {
-      description: 'Callback when a row is selected.',
       action: 'onRowSelectionChange',
       control: false,
       table: {
@@ -247,7 +219,6 @@ const meta: Meta = {
       },
     },
     rowSelection: {
-      description: 'Row selection state.',
       control: false,
       table: {
         category: 'Props',

package/src/components/tanstackTable/components/ActionBar/ActionBar.stories.tsx

@@ -36,7 +36,6 @@ const meta: Meta = {
   },
   argTypes: {
     table: {
-      description: 'Table instance.',
       control: false,
       table: {
         category: 'Props',
@@ -44,7 +43,6 @@ const meta: Meta = {
       },
     },
     className: {
-      description: 'class name for styling.',
       control: false,
       table: {
         category: 'Props',
@@ -52,7 +50,6 @@ const meta: Meta = {
       },
     },
     children: {
-      description: 'React node to display in the action bar.',
       control: false,
       table: {
         category: 'Props',
@@ -60,7 +57,6 @@ const meta: Meta = {
       },
     },
     TableActions: {
-      description: 'Component for table actions with selected items.',
       control: false,
       table: {
         category: 'Props',

package/src/components/tanstackTable/components/ActionBar/ActionBar.tsx

@@ -4,12 +4,16 @@ import { Card } from '@/components/card';
 import classNames from 'classnames';
 
 type Props<T extends object> = {
+  /** Table instance. */
   table: Table<T & { id: string }>;
+  /** Component for table actions with selected items. */
   TableActions?: React.ComponentType<{
     selectedItems: Row<T & { id: string }>[];
     unselectRows: () => void;
   }>;
+  /** class name for styling. */
   className?: string;
+  /** React node to display in the action bar. */
   children?: React.ReactNode;
 };
 

package/src/components/tooltip/Tooltip.stories.tsx

@@ -9,8 +9,6 @@ const meta: Meta = {
   argTypes: {
     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: {
@@ -20,7 +18,6 @@ const meta: Meta = {
     },
     place: {
       control: 'select',
-      description: 'The placement of the tooltip',
       options: ['top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom'],
       table: {
         category: 'Props',
@@ -31,7 +28,6 @@ const meta: Meta = {
     },
     clickToShow: {
       control: 'boolean',
-      description: 'Whether the tooltip should be shown on click',
       table: {
         category: 'Props',
         type: {
@@ -41,7 +37,6 @@ const meta: Meta = {
     },
     delayShow: {
       control: 'number',
-      description: 'The delay in milliseconds before the tooltip is shown',
       table: {
         category: 'Props',
         type: {
@@ -51,7 +46,6 @@ const meta: Meta = {
     },
     delayHide: {
       control: 'number',
-      description: 'The delay in milliseconds before the tooltip is hidden',
       table: {
         category: 'Props',
         type: {
@@ -61,7 +55,6 @@ const meta: Meta = {
     },
     zIndex: {
       control: 'number',
-      description: 'This is an override for the z-index of the tooltip',
       table: {
         category: 'Props',
         type: {
@@ -71,7 +64,6 @@ const meta: Meta = {
     },
     children: {
       control: false,
-      description: 'The content of the tooltip',
       table: {
         category: 'Props',
         type: {

package/src/components/tooltip/Tooltip.tsx

@@ -2,12 +2,18 @@ import { PlacesType, Tooltip as ReactTooltip } from 'react-tooltip';
 
 interface TooltipProps {
   id: string;
+  /** Whether the tooltip should be shown on click */
   clickToShow?: boolean;
+  /** The delay in milliseconds before the tooltip is shown */
   delayShow?: number;
+  /** The delay in milliseconds before the tooltip is hidden */
   delayHide?: number;
   children: React.ReactNode;
+  /** This is an override for the z-index of the tooltip */
   zIndex?: number;
+  /** The placement of the tooltip */
   place?: PlacesType;
+  /** The content of the tooltip */
   [key: string]: any;
 }
 

package/src/components/truncate/Truncate.stories.tsx

@@ -16,8 +16,6 @@ const meta: Meta<typeof Truncate> = {
     truncateString: {
       required: true,
       control: 'text',
-      description:
-        'The string to truncate. This value will also be displayed in the tooltip when the text is truncated.',
       table: {
         category: 'Props',
       },
@@ -25,16 +23,12 @@ const meta: Meta<typeof Truncate> = {
     lineClamp: {
       control: 'number',
       defaultValue: 0,
-      description:
-        'The number of lines to truncate the text to. If left blank, it will default to 1 line.',
       table: {
         category: 'Props',
       },
     },
     tooltipId: {
       control: 'text',
-      description:
-        'The id of the tooltip. If an ID is not provided, it will generate one from uuid',
       table: {
         category: 'Props',
       },
@@ -42,8 +36,6 @@ const meta: Meta<typeof Truncate> = {
     hasTooltip: {
       control: 'boolean',
       defaultValue: true,
-      description:
-        'Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown.',
       table: {
         category: 'Props',
       },

package/src/components/truncate/types.ts

@@ -1,7 +1,11 @@
 export interface TruncateProps {
+  /** The number of lines to truncate the text to. If left blank, it will default to 1 line. */
   lineClamp?: number;
+  /** The string to truncate. This value will also be displayed in the tooltip when the text is truncated. */
   truncateString: string;
+  /** Whether to show the tooltip. If left blank, it will default to true. If set to false, the tooltip will not be shown. */
   hasTooltip?: boolean;
+  /** The id of the tooltip. If an ID is not provided, it will generate one from uuid */
   tooltipId?: string;
   [key: string]: any;
 }

package/src/styles/_colors.scss

@@ -1,5 +1,6 @@
 $color-names: 'primary', 'secondary', 'tertiary', 'gray', 'red', 'orange', 'yellow', 'green',
   'purple', 'pink', 'teal', 'brand';
+$chromatic-color-names: 'blue', 'purple', 'red', 'yellow', 'gray', 'green', 'pink', 'orange', 'teal';
 $color-grades: ();
 @for $i from 1 through 20 {
   $color-grades: append($color-grades, #{$i * 50}, comma);
@@ -42,3 +43,11 @@ $utility-color-names: 'success', 'info', 'neutral', 'warning', 'error', 'brand';
 .active-link-color {
   color: var(--pf-active-link-color);
 }
+
+$item-shades-to-color-number: (
+  1: 450,
+  2: 500,
+  3: 550,
+  4: 600,
+  5: 700,
+);