/** * 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; }; export interface ChecklistProps { /** * Define both `chartLabel` and `chartValue` to show the chart and its label together. */ chartLabel?: ReactNode; /** * 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; /** * 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['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 const Checklist: React.ForwardRefExoticComponent>; export {}; //# sourceMappingURL=Checklist.d.ts.map