Skip to content

component-inventory.md

Latest commit

 

History

History
688 lines (591 loc) · 92.4 KB

component-inventory.md

File metadata and controls

688 lines (591 loc) · 92.4 KB

Component Inventory

AlertProps

Prop Type Required Description
status "info" | "success" | "warning" | "error" No The visual status that the alert should convey
label string Yes The label text for the alert
children React.ReactNode No Optional children to be rendered inside the alert
icon React.ReactNode No Optional custom icon component to override the default icon
className string No CSS className to be applied
onDismiss () => void No Optional callback function called when the dismiss button is clicked
disableScrollIntoView boolean No Whether to disable scrolling the alert into view and focusing it on mount. Set to true when using inside modals.

BadgeProps

Prop Type Required Description
children React.ReactNode Yes Content to be displayed inside the badge
status "info" | "success" | "warning" | "error" No Visual style variant of the badge
onDismiss () => void No Optional callback when the dismiss button is clicked. When provided, a dismiss button is rendered inside the badge.
dismissAriaLabel string No Accessible label for the dismiss button
isDisabled boolean No Whether the badge interaction is disabled
className string No -
id string No -
aria-label string No Defines a string value that labels the current element.

BannerProps

Prop Type Required Description
title React.ReactNode Yes Title content displayed in the colored header section
children React.ReactNode Yes Content to be displayed in the main content area
status "warning" | "error" No Visual status variant of the banner
className string No -
id string No -
aria-label string No Defines a string value that labels the current element.

BaseListProps

Prop Type Required Description
items React.ReactNode[] Yes The list items to render
className string No Optional custom class name
aria-label string No Accessibility label for the list
aria-labelledby string No ID of an element that labels this list
aria-describedby string No ID of an element that describes this list

BoxProps

Prop Type Required Description
children React.ReactNode Yes Content to be displayed inside the box
footer React.ReactNode No Content rendered at the bottom of the box with an edge-to-edge top border
className string No CSS className to be applied

BreadcrumbsProps

Prop Type Required Description
breadcrumbs Breadcrumb[] Yes Array of breadcrumbs
currentBreadcrumbId string No Current breadcrumb id
aria-label string No Accessibility label for the breadcrumbs
className string No Additional CSS class name for the breadcrumbs container
onClick (id: string) => void No Event handler for breadcrumb navigation
isSmallContainer boolean No Passed to the breadcrumbs when the container size is small (640px and below) At this size, the breadcrumb typically does not have sufficient size to render completely. In our implementation, we switch to a condensed mobile version of the breadcrumbs

Breadcrumb

Prop Type Required Description
id string Yes -
label React.ReactNode Yes -
isClickable boolean No When false, the breadcrumb is rendered as plain text even if onClick is provided. Defaults to true.

ButtonIconProps

Prop Type Required Description
buttonRef Ref<HTMLButtonElement | null> No React ref for the button element
variant "error" | "primary" | "secondary" | "tertiary" No Visual style variant of the button
isLoading boolean No Shows a loading spinner and disables the button
isDisabled boolean No Disables the button and prevents interaction
icon React.ReactNode No Optional leading icon rendered before children
children React.ReactNode No Content to be rendered inside the button
onBlur (e: React.FocusEvent<Element, Element>) => void No Handler for blur events
onFocus (e: React.FocusEvent<Element, Element>) => void No Handler for focus events
className string No -
id string No -
onKeyDown React.KeyboardEventHandler<HTMLButtonElement> No -
onKeyUp React.KeyboardEventHandler<HTMLButtonElement> No -
aria-label string No Defines a string value that labels the current element.
aria-labelledby string No Identifies the element (or elements) that labels the current element.
aria-describedby string No Identifies the element (or elements) that describes the object.
title string No -
name string No -
type "submit" | "reset" | "button" No -
onClick React.MouseEventHandler<HTMLButtonElement> No -
form string No -
tabIndex number No -

ButtonProps

Prop Type Required Description
buttonRef Ref<HTMLButtonElement | null> No React ref for the button element
variant "error" | "primary" | "secondary" | "tertiary" No Visual style variant of the button
isLoading boolean No Shows a loading spinner and disables the button
isDisabled boolean No Disables the button and prevents interaction
icon React.ReactNode No Optional leading icon rendered before children
children React.ReactNode No Content to be rendered inside the button
onBlur (e: React.FocusEvent<Element, Element>) => void No Handler for blur events
onFocus (e: React.FocusEvent<Element, Element>) => void No Handler for focus events
className string No -
id string No -
onKeyDown React.KeyboardEventHandler<HTMLButtonElement> No -
onKeyUp React.KeyboardEventHandler<HTMLButtonElement> No -
aria-label string No Defines a string value that labels the current element.
aria-labelledby string No Identifies the element (or elements) that labels the current element.
aria-describedby string No Identifies the element (or elements) that describes the object.
title string No -
name string No -
type "submit" | "reset" | "button" No -
onClick React.MouseEventHandler<HTMLButtonElement> No -
form string No -
tabIndex number No -

CalendarPreviewProps

Prop Type Required Description
highlightDates { date: Date; highlightColor: "primary" | "secondary"; label: string; }[] No Array of dates to highlight with custom colors and labels
dateRange { start: Date; end: Date; label: string; } Yes Date range to display in the calendar preview

CardProps

Prop Type Required Description
children React.ReactNode Yes Content to be displayed inside the card
menu React.ReactNode No Optional menu component to be displayed on the right side of the card
className string No CSS className to be applied
action React.ReactNode No Optional action element (e.g., checkbox, radio) to be displayed on the left side

CheckboxGroupProps

Prop Type Required Description
isInvalid boolean No Indicates if the checkbox group is in an invalid state
isDisabled boolean No Disables all checkbox options in the group
options CheckboxGroupOption[] Yes Array of checkbox options to display
value string[] No Array of currently selected values
onChange (value: string[]) => void No Callback when selection changes
inputRef Ref<HTMLInputElement | null> No React ref for the first checkbox input element
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -

CheckboxGroupOption

Prop Type Required Description
label React.ReactNode Yes Label text or content for the checkbox option
value string Yes Value of the option that will be passed to onChange
isDisabled boolean No Disables this specific checkbox option
description React.ReactNode No Optional description text for the checkbox option

CheckboxProps

Prop Type Required Description
value boolean No Current checked state of the checkbox
onChange (value: boolean) => void No Callback when checkbox state changes
inputRef Ref<HTMLInputElement | null> No React ref for the checkbox input element
isInvalid boolean No Indicates if the checkbox is in an invalid state
isDisabled boolean No Disables the checkbox and prevents interaction
onBlur () => void No Handler for blur events
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -

ComboBoxProps

Prop Type Required Description
isDisabled boolean No Disables the combo box and prevents interaction
isInvalid boolean No Indicates that the field has an error
label string Yes Label text for the combo box field
onChange (value: string) => void No Callback when selection changes
onBlur () => void No Handler for blur events
options ComboBoxOption[] Yes Array of options to display in the dropdown
value null | string No Currently selected value
inputRef Ref<HTMLInputElement | null> No React ref for the combo box input element
allowsCustomValue boolean No Allows the user to type any value, not just options in the list. The options list becomes a suggestion helper rather than a strict constraint.
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -
placeholder string No -

ComboBoxOption

Prop Type Required Description
label string Yes Display text for the option
value string Yes Value of the option that will be passed to onChange

DatePickerProps

Prop Type Required Description
inputRef Ref<HTMLInputElement | null> No React ref for the date input element
isDisabled boolean No Disables the date picker and prevents interaction
isInvalid boolean No Indicates that the field has an error
onChange (value: Date | null) => void No Callback when selected date changes
onBlur () => void No Handler for blur events
label string Yes Label text for the date picker field
value null | Date No Currently selected date value
placeholder string No Placeholder text when no date is selected
portalContainer HTMLElement No Element to use as the portal container
minDate Date No Minimum selectable date. Dates before this will be disabled.
maxDate Date No Maximum selectable date. Dates after this will be disabled.
isDateDisabled (date: Date) => boolean No Callback to determine if a specific date should be disabled. Return true to disable the date.
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -

DescriptionListProps

Prop Type Required Description
items DescriptionListItem[] Yes -
className string No -

DescriptionListItem

Prop Type Required Description
term React.ReactNode | React.ReactNode[] Yes -
description React.ReactNode | React.ReactNode[] Yes -

DialogProps

Prop Type Required Description
isOpen boolean No Controls whether the dialog is open or closed
onClose () => void No Callback function called when the dialog should be closed
onPrimaryActionClick () => void No Callback function called when the primary action button is clicked
isDestructive boolean No Whether the primary action is destructive (changes button style to error variant)
isPrimaryActionLoading boolean No Whether the primary action button is in loading state
primaryActionLabel string Yes Text label for the primary action button
closeActionLabel string Yes Text label for the close/cancel action button
title React.ReactNode No Optional title content to be displayed at the top of the dialog
children React.ReactNode No Optional children content to be rendered in the dialog body
shouldCloseOnBackdropClick boolean No Whether clicking the backdrop should close the dialog

FileInputProps

Prop Type Required Description
id string No ID for the file input element
value null | File Yes Currently selected file
onChange (file: File | null) => void Yes Callback when file selection changes
onBlur () => void No Handler for blur events
accept string[] No Accepted file types (MIME types or extensions)
isInvalid boolean No Indicates that the field has an error
isDisabled boolean No Disables the input and prevents interaction
className string No Additional CSS class name
aria-describedby string No Aria-describedby attribute for accessibility
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field

HeadingProps

Prop Type Required Description
as "h1" | "h2" | "h3" | "h4" | "h5" | "h6" Yes The HTML heading element to render (h1-h6)
styledAs "h1" | "h2" | "h3" | "h4" | "h5" | "h6" No Optional visual style to apply, independent of the semantic heading level
textAlign "start" | "center" | "end" No Text alignment within the heading
children React.ReactNode No Content to be displayed inside the heading
className string No -
id string No -

LinkProps

Prop Type Required Description
href string No -
target "_self" | "_blank" | "_parent" | "_top" | string No -
rel string No -
download any No -
className string No -
id string No -
onKeyDown React.KeyboardEventHandler<HTMLAnchorElement> No -
onKeyUp React.KeyboardEventHandler<HTMLAnchorElement> No -
aria-label string No Defines a string value that labels the current element.
aria-labelledby string No Identifies the element (or elements) that labels the current element.
aria-describedby string No Identifies the element (or elements) that describes the object.
title string No -
children React.ReactNode No Content to be displayed inside the link

LoadingSpinnerProps

Prop Type Required Description
size "lg" | "sm" No Size of the spinner
style "inline" | "block" No Display style of the spinner
className string No -
id string No -
aria-label string No Defines a string value that labels the current element.

MenuProps

Prop Type Required Description
triggerRef RefObject No Reference to the element that triggers the menu
items MenuItem[] No Array of menu items to display
isOpen boolean No Controls whether the menu is currently open
onClose () => void No Callback when the menu is closed
aria-label string Yes Accessible label describing the menu's purpose
placement "top" | "top start" | "top end" | "bottom" | "bottom start" | "bottom end" | "left" | "right" No Controls the placement of the menu popover relative to the trigger

MenuItem

Prop Type Required Description
label string Yes Text label for the menu item
icon React.ReactNode No Optional icon to display before the label
onClick () => void Yes Callback function when the menu item is clicked
isDisabled boolean No Disables the menu item and prevents interaction
href string No Optional URL to navigate to when clicked

ModalProps

Prop Type Required Description
isOpen boolean No Controls whether the modal is open or closed
onClose () => void No Callback function called when the modal should be closed
shouldCloseOnBackdropClick boolean No Whether clicking the backdrop should close the modal
children React.ReactNode No Main content to be rendered in the modal body
footer React.ReactNode No Footer content to be rendered at the bottom of the modal
containerRef RefObject No Optional ref to the backdrop container

NumberInputProps

Prop Type Required Description
format "currency" | "decimal" | "percent" No Format type for the number input
inputRef Ref<HTMLInputElement | null> No React ref for the number input element
value number No Current value of the number input
isInvalid boolean No Indicates that the field has an error
isDisabled boolean No Disables the number input and prevents interaction
onChange (value: number) => void No Callback when number input value changes
onBlur () => void No Handler for blur events
adornmentStart React.ReactNode No Element to display at the start of the input
adornmentEnd React.ReactNode No Element to display at the end of the input
minimumFractionDigits number No Minimum number of decimal places to display
maximumFractionDigits number No Maximum number of decimal places to display
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -
placeholder string No -
min string | number No -
max string | number No -

OrderedListProps

The props for this component are defined in BaseListProps.

PaginationControlProps

Prop Type Required Description
handleFirstPage () => void Yes -
handlePreviousPage () => void Yes -
handleNextPage () => void Yes -
handleLastPage () => void Yes -
handleItemsPerPageChange (n: [PaginationItemsPerPage](#paginationitemsperpage)) => void Yes -
currentPage number Yes -
totalPages number Yes -
totalCount number No -
itemsPerPage 5 | 10 | 50 No -
isFetching boolean No -

PaginationItemsPerPage

type PaginationItemsPerPage = 5 | 10 | 50

PayrollLoadingProps

Prop Type Required Description
title React.ReactNode Yes -
description React.ReactNode No -

ProgressBarProps

Prop Type Required Description
totalSteps number Yes Total number of steps in the progress sequence
currentStep number Yes Current step in the progress sequence
className string No Additional CSS class name for the progress bar container
label string Yes Accessible label describing the progress bar's purpose
cta React.ComponentType | null No Component to render as the progress bar's CTA

RadioGroupProps

Prop Type Required Description
isInvalid boolean No Indicates that the field has an error
isDisabled boolean No Disables all radio options in the group
options RadioGroupOption[] Yes Array of radio options to display
value null | string No Currently selected value
defaultValue string No Initially selected value
onChange (value: string) => void No Callback when selection changes
inputRef Ref<HTMLInputElement | null> No React ref for the first radio input element
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -

RadioGroupOption

Prop Type Required Description
label React.ReactNode Yes Label text or content for the radio option
value string Yes Value of the option that will be passed to onChange
isDisabled boolean No Disables this specific radio option
description React.ReactNode No Optional description text for the radio option

RadioProps

Prop Type Required Description
value boolean No Current checked state of the radio button
onChange (checked: boolean) => void No Callback when radio button state changes
inputRef Ref<HTMLInputElement | null> No React ref for the radio input element
isInvalid boolean No Indicates that the field has an error
isDisabled boolean No Disables the radio button and prevents interaction
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -
onBlur React.FocusEventHandler<HTMLInputElement> No -

SelectProps

Prop Type Required Description
isDisabled boolean No Disables the select and prevents interaction
isInvalid boolean No Indicates that the field has an error
label string Yes Label text for the select field
onChange (value: string) => void No Callback when selection changes
onBlur () => void No Handler for blur events
options SelectOption[] Yes Array of options to display in the select dropdown
placeholder string No Placeholder text when no option is selected
value null | string No Currently selected value
inputRef Ref<HTMLButtonElement | null> No React ref for the select button element
portalContainer HTMLElement No Element to use as the portal container
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -

SelectOption

Prop Type Required Description
value string Yes Value of the option that will be passed to onChange
label string Yes Display text for the option

SwitchProps

Prop Type Required Description
onBlur () => void No Handler for blur events
onChange (checked: boolean) => void No Callback when switch state changes
value boolean No Current checked state of the switch
inputRef Ref<HTMLInputElement | null> No React ref for the switch input element
isInvalid boolean No Indicates that the field has an error
isDisabled boolean No Disables the switch and prevents interaction
className string No Additional CSS class name for the switch container
label string Yes Label text for the switch
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
id string No -
name string No -

TableProps

Prop Type Required Description
headers TableData[] Yes Array of header cells for the table
rows TableRow[] Yes Array of rows to be displayed in the table
footer TableData[] No Array of footer cells for the table
emptyState React.ReactNode No Content to display when the table has no rows
variant "default" | "minimal" No Visual style variant of the table
hasCheckboxColumn boolean No Whether the first column contains checkboxes (affects which column gets leading variant)
className string No -
id string No -
aria-label string No Defines a string value that labels the current element.
aria-labelledby string No Identifies the element (or elements) that labels the current element.
aria-describedby string No Identifies the element (or elements) that describes the object.
role "form" | "button" | "alert" | "alertdialog" | "application" | "article" | "banner" | "cell" | "checkbox" | "columnheader" | "combobox" | "complementary" | "contentinfo" | "definition" | "dialog" | "directory" | "document" | "feed" | "figure" | "grid" | "gridcell" | "group" | "heading" | "img" | "link" | "list" | "listbox" | "listitem" | "log" | "main" | "marquee" | "math" | "menu" | "menubar" | "menuitem" | "menuitemcheckbox" | "menuitemradio" | "navigation" | "none" | "note" | "option" | "presentation" | "progressbar" | "radio" | "radiogroup" | "region" | "row" | "rowgroup" | "rowheader" | "scrollbar" | "search" | "searchbox" | "separator" | "slider" | "spinbutton" | "status" | "switch" | "tab" | "table" | "tablist" | "tabpanel" | "term" | "textbox" | "timer" | "toolbar" | "tooltip" | "tree" | "treegrid" | "treeitem" | string No -

TableData

Prop Type Required Description
key string Yes Unique identifier for the table cell
content React.ReactNode Yes Content to be displayed in the table cell

TableRow

Prop Type Required Description
key string Yes Unique identifier for the table row
data TableData[] Yes Array of cells to be displayed in the row

TabsProps

Prop Type Required Description
tabs TabProps[] Yes Array of tab configuration objects
selectedId string No Currently selected tab id
onSelectionChange (id: string) => void Yes Callback when tab selection changes
aria-label string No Accessible label for the tabs
aria-labelledby string No ID of element that labels the tabs
className string No Additional CSS class name

TabProps

Prop Type Required Description
id string Yes Unique identifier for the tab
label React.ReactNode Yes Label to display in the tab button
content React.ReactNode Yes Content to display in the tab panel
isDisabled boolean No Whether the tab is disabled

TextAreaProps

Prop Type Required Description
inputRef Ref<HTMLTextAreaElement | null> No React ref for the textarea element
value string No Current value of the textarea
onChange (value: string) => void No Callback when textarea value changes
isInvalid boolean No Indicates that the field has an error
isDisabled boolean No Disables the textarea and prevents interaction
onBlur () => void No Handler for blur events
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -
placeholder string No -
rows number No -
cols number No -
aria-describedby string No Identifies the element (or elements) that describes the object.

TextInputProps

Prop Type Required Description
inputRef Ref<HTMLInputElement | null> No React ref for the input element
value string No Current value of the input
onChange (value: string) => void No Callback when input value changes
isInvalid boolean No Indicates that the field has an error
isDisabled boolean No Disables the input and prevents interaction
onBlur () => void No Handler for blur events
adornmentStart React.ReactNode No Element to display at the start of the input
adornmentEnd React.ReactNode No Element to display at the end of the input
description React.ReactNode No Optional description text for the field
errorMessage string No Error message to display when the field is invalid
isRequired boolean No Indicates if the field is required
label React.ReactNode Yes Label text for the field
shouldVisuallyHideLabel boolean No Hides the label visually while keeping it accessible to screen readers
className string No -
id string No -
name string No -
type "number" | "submit" | "reset" | "button" | "checkbox" | "radio" | "search" | "color" | "date" | "datetime-local" | "email" | "file" | "hidden" | "image" | "month" | "password" | "range" | "tel" | "text" | "time" | "url" | "week" | string No -
placeholder string No -
min string | number No -
max string | number No -
maxLength number No -
aria-describedby string No Identifies the element (or elements) that describes the object.

TextProps

Prop Type Required Description
as "p" | "span" | "div" | "pre" No HTML element to render the text as
size "lg" | "sm" | "xs" | "md" No Size variant of the text
textAlign "start" | "center" | "end" No Text alignment within the container
weight "regular" | "medium" | "semibold" | "bold" No Font weight of the text
children React.ReactNode No Content to be displayed
variant "supporting" | "leading" No Visual style variant of the text
className string No -
id string No -

UnorderedListProps

The props for this component are defined in BaseListProps.