@carbon/ibm-products
Version:
Carbon for IBM Products
106 lines (105 loc) • 3.13 kB
TypeScript
/**
* Copyright IBM Corp. 2023, 2024
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
/**
* TODO: Breakdown titles, icons, clickable items into sub-components
* See
* ModifiedTabs (ModifiedTabLabelNew, ModifiedTabLabelWithClose)
* PageHeader (PageHeaderTitle, PageHeaderUtils)
*/
import { IconButton } from '@carbon/react';
import { Kind, Theme } from './Checklist.types';
import React, { ReactNode } from 'react';
type Task = {
kind: Kind;
label: string;
onClick?(task?: Task): void;
};
type TaskList = {
title?: string;
tasks: Array<Task>;
};
export interface ChecklistProps {
/**
* Define both `chartLabel` and `chartValue` to show the chart and its label together.
*/
chartLabel?: string;
/**
* A number between 0 and 1.
*
* Define both `chartLabel` and `chartValue` to show the chart and its label together.
*/
chartValue?: number;
/**
* Aria-label for the Checklist component.
*/
checklistAriaLabel?: string;
/**
* Aria-label for the Checklist's toggle component.
*/
checklistToggleAriaLabel?: string;
/**
* Provide an optional class to be applied to the containing node.
*/
className?: string;
/**
* Whether or not to show the open/close toggle.
*/
enableToggle?: boolean;
/**
* Callback for the "View all" button. See also `viewAllLabel`.
*/
onClickViewAll?(): void;
/**
* Optional callback for when the list is opened/closed.
*/
onToggle?(isOpen?: boolean): void;
/**
* Specifies whether the component is opened or closed.
* This can be set during initialization, or changed after being rendered.
*/
open?: boolean;
/**
* The task list can be broken down into sub-lists.
*
* Each sub-list can include an optional `title`.
*
* Each task must specify the appropriate icon (`kind`) and `label`.
*
* If any task has an `onClick` callback function defined,
* then the `label` will be rendered as a button,
* else the `label` will be rendered as plain text.
*/
taskLists: Array<TaskList>;
/**
* Determines the theme of the component.
*/
theme?: Theme;
/**
* The title of the component.
*/
title?: ReactNode;
/**
* The label for the toggle's tooltip.
*/
toggleLabel?: string;
/**
* The alignment of the toggle's tooltip.
*/
toggleLabelAlign?: React.ComponentProps<typeof IconButton>['align'];
/**
* If defined, will show and enable the "View all (#)" button at the bottom of the list.
*/
viewAllLabel?: string;
}
/**
* The Checklist tracks a user's progress much like Your Learning or
* WalkMe. Each item in the list can be clickable, and each item has
* an icon that defines the item's state as "not started", "in progress",
* and "complete".
*/
export declare let Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLElement>>;
export {};