@carbon/ibm-products 2.38.0-alpha.5 → 2.39.0

package/es/components/Card/Card.js

@@ -9,12 +9,14 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import React__default, { forwardRef } from 'react';
 import cx from 'classnames';
 import { Layer, OverflowMenu, OverflowMenuItem, Button, IconButton } from '@carbon/react';
+import { Incomplete, CheckmarkOutline } from '@carbon/react/icons';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { CardHeader } from './CardHeader.js';
 import { CardFooter } from './CardFooter.js';
 import { pkg } from '../../settings.js';
 
-var _excluded = ["actionIcons", "actionsPlacement", "children", "className", "clickZone", "description", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "title", "titleSize"],
+var _Incomplete, _CheckmarkOutline;
+var _excluded = ["actionIcons", "actionsPlacement", "metadata", "children", "className", "clickZone", "description", "disabled", "footerActionIcon", "getStarted", "label", "media", "mediaPosition", "onClick", "onKeyDown", "onPrimaryButtonClick", "overflowActions", "overflowAriaLabel", "onSecondaryButtonClick", "pictogram", "primaryButtonDisabled", "primaryButtonHref", "primaryButtonIcon", "primaryButtonKind", "primaryButtonPlacement", "primaryButtonText", "productive", "secondaryButtonDisabled", "secondaryButtonHref", "secondaryButtonIcon", "secondaryButtonKind", "secondaryButtonPlacement", "secondaryButtonText", "slug", "status", "sequence", "title", "titleSize"],
   _excluded2 = ["id"],
   _excluded3 = ["id", "icon", "onClick", "iconDescription", "href"];
 var componentName = 'Card';
@@ -38,11 +40,16 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     actionIcons = _ref$actionIcons === void 0 ? defaults.actionIcons : _ref$actionIcons,
     _ref$actionsPlacement = _ref.actionsPlacement,
     actionsPlacement = _ref$actionsPlacement === void 0 ? defaults.actionsPlacement : _ref$actionsPlacement,
+    _ref$metadata = _ref.metadata,
+    metadata = _ref$metadata === void 0 ? defaults.actionIcons : _ref$metadata,
     children = _ref.children,
     className = _ref.className,
     _ref$clickZone = _ref.clickZone,
     clickZone = _ref$clickZone === void 0 ? defaults.clickZone : _ref$clickZone,
     description = _ref.description,
+    disabled = _ref.disabled,
+    footerActionIcon = _ref.footerActionIcon,
+    getStarted = _ref.getStarted,
     label = _ref.label,
     media = _ref.media,
     _ref$mediaPosition = _ref.mediaPosition,
@@ -74,12 +81,18 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     secondaryButtonPlacement = _ref$secondaryButtonP === void 0 ? defaults.secondaryButtonPlacement : _ref$secondaryButtonP,
     secondaryButtonText = _ref.secondaryButtonText,
     slug = _ref.slug,
+    status = _ref.status,
+    sequence = _ref.sequence,
     title = _ref.title,
     _ref$titleSize = _ref.titleSize,
     titleSize = _ref$titleSize === void 0 ? defaults.titleSize : _ref$titleSize,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var getIcons = function getIcons() {
+    return getStarted ? metadata : actionIcons;
+  };
   var blockClass = "".concat(pkg.prefix, "--card");
-  var hasActions = actionIcons.length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
+  var hasActions = getIcons().length > 0 || overflowActions.length > 0 || !!primaryButtonText && primaryButtonPlacement === 'top';
+  var hasHeaderActions = hasActions && actionsPlacement === 'top';
   var hasFooterActions = hasActions && actionsPlacement === 'bottom';
   var hasFooterButton = !!secondaryButtonText || !!primaryButtonText && primaryButtonPlacement === 'bottom';
   var hasBottomBar = hasFooterActions || hasFooterButton;
@@ -111,13 +124,21 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
         }, rest));
       })));
     }
-    var icons = actionIcons.map(function (_ref3) {
+    var icons = getIcons().map(function (_ref3) {
       var id = _ref3.id,
         Icon = _ref3.icon,
         onClick = _ref3.onClick,
         iconDescription = _ref3.iconDescription,
         href = _ref3.href,
         rest = _objectWithoutProperties(_ref3, _excluded3);
+      if (getStarted) {
+        return /*#__PURE__*/React__default.createElement("span", {
+          key: id,
+          className: "".concat(blockClass, "__icon")
+        }, /*#__PURE__*/React__default.createElement(Icon, {
+          "aria-label": iconDescription
+        }), iconDescription);
+      }
       if (productive) {
         return /*#__PURE__*/React__default.createElement(Button, _extends({}, rest, {
           key: id,
@@ -157,7 +178,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var clickable = hasClickEvent && !productive || hasClickEvent && productive && clickZone === 'one';
     var cardProps = _objectSpread2(_objectSpread2({}, rest), {}, {
       ref: ref,
-      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
+      className: cx(blockClass, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "".concat(blockClass, "__disabled"), disabled), "".concat(blockClass, "__get-started"), getStarted), "".concat(blockClass, "__productive"), productive), "".concat(blockClass, "__clickable"), clickable), "".concat(blockClass, "__media-left"), mediaPosition === 'left'), "".concat(blockClass, "--has-slug"), !!slug), className)
     }, clickable && clickableProps);
     return cardProps;
   };
@@ -173,7 +194,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var getHeaderProps = function getHeaderProps() {
     return {
       actions: actionsPlacement === 'top' ? getActions() : '',
-      noActionIcons: actionIcons.length > 0 && actionsPlacement === 'top' ? false : true,
+      noActionIcons: getIcons().length > 0 && actionsPlacement === 'top' ? false : true,
       actionsPlacement: actionsPlacement,
       onPrimaryButtonClick: onPrimaryButtonClick,
       onSecondaryButtonClick: onSecondaryButtonClick,
@@ -182,7 +203,7 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       primaryButtonText: primaryButtonText,
       primaryButtonDisabled: primaryButtonDisabled,
       description: description,
-      hasActions: hasActions,
+      hasActions: hasHeaderActions,
       inClickableCard: hasClickEvent,
       label: label,
       secondaryButtonDisabled: secondaryButtonDisabled,
@@ -206,6 +227,8 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return {
       actions: actionsPlacement === 'bottom' ? getActions() : '',
       actionsPlacement: actionsPlacement,
+      disabled: disabled,
+      footerActionIcon: footerActionIcon,
       hasActions: hasFooterActions,
       hasButton: hasFooterButton,
       onPrimaryButtonClick: onPrimaryButtonClick,
@@ -225,13 +248,21 @@ var Card = /*#__PURE__*/forwardRef(function (_ref, ref) {
       secondaryButtonText: secondaryButtonText
     };
   };
-  return /*#__PURE__*/React__default.createElement("div", getCardProps(), media && /*#__PURE__*/React__default.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", getCardProps(), !getStarted && media && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__media")
   }, media), Pictogram && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__pictogram")
-  }, /*#__PURE__*/React__default.createElement(Pictogram, null)), /*#__PURE__*/React__default.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement(Pictogram, null)), getStarted && sequence && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__sequence")
+  }, sequence), getStarted && status && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__status")
+  }, status === 'incomplete' && (_Incomplete || (_Incomplete = /*#__PURE__*/React__default.createElement(Incomplete, null))), status === 'complete' && (_CheckmarkOutline || (_CheckmarkOutline = /*#__PURE__*/React__default.createElement(CheckmarkOutline, null)))), /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__content-container")
-  }, /*#__PURE__*/React__default.createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default.createElement(CardHeader, getHeaderProps()), /*#__PURE__*/React__default.createElement("div", getBodyProps(), children)), hasBottomBar && /*#__PURE__*/React__default.createElement(CardFooter, getFooterProps())));
+  }, /*#__PURE__*/React__default.createElement("div", getHeaderBodyProps(), /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__header-container")
+  }, /*#__PURE__*/React__default.createElement(CardHeader, getHeaderProps()), /*#__PURE__*/React__default.createElement("div", getBodyProps(), children)), getStarted && media && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__media")
+  }, media)), hasBottomBar && /*#__PURE__*/React__default.createElement(CardFooter, getFooterProps())));
 });
 Card.propTypes = {
   actionIcons: PropTypes.arrayOf(PropTypes.shape({
@@ -247,9 +278,17 @@ Card.propTypes = {
   className: PropTypes.string,
   clickZone: PropTypes.oneOf(['one', 'two', 'three']),
   description: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
+  disabled: PropTypes.bool,
+  footerActionIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  getStarted: PropTypes.bool,
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   media: PropTypes.node,
   mediaPosition: PropTypes.oneOf(['top', 'left']),
+  metadata: PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.string,
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    iconDescription: PropTypes.string
+  })),
   onClick: PropTypes.func,
   onKeyDown: PropTypes.func,
   onPrimaryButtonClick: PropTypes.func,
@@ -275,11 +314,13 @@ Card.propTypes = {
   secondaryButtonKind: PropTypes.oneOf(['secondary', 'ghost']),
   secondaryButtonPlacement: PropTypes.oneOf(['top', 'bottom']),
   secondaryButtonText: PropTypes.string,
+  sequence: PropTypes.number,
   /**
    * **Experimental:** For all cases a `Slug` component can be provided.
    * Clickable tiles only accept a boolean value of true and display a hollow slug.
    */
   slug: PropTypes.oneOfType([PropTypes.node, PropTypes.bool]),
+  status: PropTypes.oneOf(['complete', 'incomplete']),
   title: PropTypes.oneOfType([PropTypes.string, PropTypes.object, PropTypes.node]),
   titleSize: PropTypes.oneOf(['default', 'large'])
 };

package/es/components/Card/CardFooter.d.ts

@@ -1,5 +1,7 @@
-export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
+export function CardFooter({ actions, disabled, footerActionIcon: FooterActionIcon, hasActions, hasButton, onPrimaryButtonClick, onSecondaryButtonClick, primaryButtonDisabled, primaryButtonHref, primaryButtonIcon, primaryButtonKind, primaryButtonPlacement, primaryButtonText, productive, secondaryButtonDisabled, secondaryButtonHref, secondaryButtonIcon, secondaryButtonKind, secondaryButtonPlacement, secondaryButtonText, }: {
     actions?: any[] | undefined;
+    disabled: any;
+    footerActionIcon: any;
     hasActions: any;
     hasButton: any;
     onPrimaryButtonClick: any;
@@ -21,6 +23,8 @@ export function CardFooter({ actions, hasActions, hasButton, onPrimaryButtonClic
 export namespace CardFooter {
     export namespace propTypes {
         let actions: PropTypes.Requireable<NonNullable<any[] | PropTypes.ReactNodeLike>>;
+        let disabled: PropTypes.Requireable<boolean>;
+        let footerActionIcon: PropTypes.Requireable<object>;
         let hasActions: PropTypes.Requireable<boolean>;
         let hasButton: PropTypes.Requireable<boolean>;
         let onPrimaryButtonClick: PropTypes.Requireable<(...args: any[]) => any>;

package/es/components/Card/CardFooter.js

@@ -11,7 +11,9 @@ import cx from 'classnames';
 import { Button } from '@carbon/react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import { pkg } from '../../settings.js';
+import { Error } from '@carbon/react/icons';
 
+var _Error;
 var componentName = 'CardFooter';
 var defaults = {
   actions: Object.freeze([]),
@@ -22,6 +24,8 @@ var defaults = {
 var CardFooter = function CardFooter(_ref) {
   var _ref$actions = _ref.actions,
     actions = _ref$actions === void 0 ? defaults.actions : _ref$actions,
+    disabled = _ref.disabled,
+    FooterActionIcon = _ref.footerActionIcon,
     hasActions = _ref.hasActions,
     hasButton = _ref.hasButton,
     onPrimaryButtonClick = _ref.onPrimaryButtonClick,
@@ -63,10 +67,16 @@ var CardFooter = function CardFooter(_ref) {
     disabled: primaryButtonDisabled
   }, primaryButtonText), hasActions && /*#__PURE__*/React__default.createElement("div", {
     className: "".concat(blockClass, "__actions")
-  }, actions));
+  }, actions), FooterActionIcon && /*#__PURE__*/React__default.createElement("div", {
+    className: "".concat(blockClass, "__action-icon")
+  }, disabled ? _Error || (_Error = /*#__PURE__*/React__default.createElement(Error, {
+    size: 16
+  })) : /*#__PURE__*/React__default.createElement(FooterActionIcon, null)));
 };
 CardFooter.propTypes = {
   actions: PropTypes.oneOfType([PropTypes.array, PropTypes.node]),
+  disabled: PropTypes.bool,
+  footerActionIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
   hasActions: PropTypes.bool,
   hasButton: PropTypes.bool,
   onPrimaryButtonClick: PropTypes.func,

package/es/components/Carousel/Carousel.d.ts

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
-interface CarouselProps {
+export interface CarouselProps {
     /**
      * Provide the contents of the Carousel.
      */
@@ -41,6 +41,10 @@ interface CarouselProps {
      * a value between 0 and 1.
      */
     onScroll?: (scrollPercent: number) => void;
+    /**
+     * Additional props passed to the component.
+     */
+    [key: string]: any;
 }
 /**
  * The Carousel acts as a scaffold for other Novice to Pro content.
@@ -58,5 +62,5 @@ interface CarouselProps {
  * 2. From the right-aligned position, when scrolling left,
  *      the left-most item should again be left-aligned.
  */
-declare const Carousel: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<HTMLDivElement>>;
+declare const Carousel: React.ForwardRefExoticComponent<Omit<CarouselProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export { Carousel };

package/es/components/Checklist/Checklist.d.ts

@@ -1,8 +1,106 @@
+/**
+ * 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.
+ */
+/// <reference path="../../../src/custom-typings/index.d.ts" />
+/**
+ * TODO: Breakdown titles, icons, clickable items into sub-components
+ * See
+ *   ModifiedTabs (ModifiedTabLabelNew, ModifiedTabLabelWithClose)
+ *   PageHeader (PageHeaderTitle, PageHeaderUtils)
+ */
+import React, { ReactNode } from 'react';
+import { IconButton } from '@carbon/react';
+import { Kind, Theme } from './Checklist.types';
+type Task = {
+    kind: Kind;
+    label: string;
+    onClick?(task?: Task): void;
+};
+type TaskList = {
+    title?: string;
+    tasks: Array<Task>;
+};
+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 let Checklist: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
-import React from 'react';
+export declare let Checklist: React.ForwardRefExoticComponent<ChecklistProps & React.RefAttributes<HTMLElement>>;
+export {};

package/es/components/Checklist/Checklist.js

@@ -16,8 +16,9 @@ import { IconButton, Button } from '@carbon/react';
 import { ChevronUp } from '@carbon/react/icons';
 import { ChecklistIcon } from './ChecklistIcon.js';
 import { ChecklistChart } from './ChecklistChart.js';
+import { Themes, Kinds } from './Checklist.types.js';
 
-var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "showToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
+var _excluded = ["chartValue", "chartLabel", "checklistAriaLabel", "checklistToggleAriaLabel", "className", "onClickViewAll", "onToggle", "open", "enableToggle", "taskLists", "theme", "title", "toggleLabel", "toggleLabelAlign", "viewAllLabel"];
 
 // The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--checklist");
@@ -41,9 +42,9 @@ var defaults = {
   onClickViewAll: function onClickViewAll() {},
   onToggle: function onToggle() {},
   open: true,
-  showToggle: true,
+  enableToggle: true,
   taskLists: [],
-  theme: 'light',
+  theme: Themes.light,
   toggleLabel: 'Toggle',
   toggleLabelAlign: 'top'
 };
@@ -68,8 +69,8 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
     onToggle = _ref$onToggle === void 0 ? defaults.onToggle : _ref$onToggle,
     _ref$open = _ref.open,
     open = _ref$open === void 0 ? defaults.open : _ref$open,
-    _ref$showToggle = _ref.showToggle,
-    showToggle = _ref$showToggle === void 0 ? defaults.showToggle : _ref$showToggle,
+    _ref$enableToggle = _ref.enableToggle,
+    enableToggle = _ref$enableToggle === void 0 ? defaults.enableToggle : _ref$enableToggle,
     _ref$taskLists = _ref.taskLists,
     taskLists = _ref$taskLists === void 0 ? defaults.taskLists : _ref$taskLists,
     _ref$theme = _ref.theme,
@@ -133,7 +134,7 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   }, title), chartLabelAndValue && /*#__PURE__*/React__default.createElement("h3", {
     id: chartLabelId,
     className: "".concat(blockClass, "__chart-label")
-  }, chartLabel)), showToggle && /*#__PURE__*/React__default.createElement(IconButton, {
+  }, chartLabel)), enableToggle && /*#__PURE__*/React__default.createElement(IconButton, {
     align: toggleLabelAlign,
     "aria-controls": listContainerId,
     "aria-expanded": isOpen,
@@ -167,11 +168,13 @@ var Checklist = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
         className: "".concat(blockClass, "__list-item"),
         key: "".concat(item.label, "-").concat(index)
       }, /*#__PURE__*/React__default.createElement(ChecklistIcon, {
-        kind: item.kind
+        kind: item.kind,
+        theme: theme
       }), typeof item.onClick === 'function' ? /*#__PURE__*/React__default.createElement(Button, {
         className: cx("".concat(blockClass, "__button"), _defineProperty({}, "".concat(blockClass, "__button--error"), item.kind === 'error')),
         onClick: function onClick() {
-          item.onClick(item);
+          var _item$onClick;
+          (_item$onClick = item.onClick) === null || _item$onClick === void 0 || _item$onClick.call(item, item);
         },
         size: "sm",
         title: item.label
@@ -219,6 +222,10 @@ Checklist.propTypes = {
    * Provide an optional class to be applied to the containing node.
    */
   className: PropTypes.string,
+  /**
+   * Whether or not to show the open/close toggle.
+   */
+  enableToggle: PropTypes.bool,
   /**
    * Callback for the "View all" button. See also `viewAllLabel`.
    */
@@ -232,10 +239,6 @@ Checklist.propTypes = {
    * This can be set during initialization, or changed after being rendered.
    */
   open: PropTypes.bool,
-  /**
-   * Whether or not to show the open/close toggle.
-   */
-  showToggle: PropTypes.bool,
   /**
    * The task list can be broken down into sub-lists.
    *
@@ -247,10 +250,11 @@ Checklist.propTypes = {
    * then the `label` will be rendered as a button,
    * else the `label` will be rendered as plain text.
    */
+  /**@ts-ignore */
   taskLists: PropTypes.arrayOf(PropTypes.shape({
     title: PropTypes.string,
     tasks: PropTypes.arrayOf(PropTypes.shape({
-      kind: PropTypes.oneOf(['unchecked', 'indeterminate', 'checked', 'disabled', 'error']).isRequired,
+      kind: PropTypes.oneOf([Kinds.unchecked, Kinds.indeterminate, Kinds.checked, Kinds.disabled, Kinds.error]).isRequired,
       label: PropTypes.string.isRequired,
       onClick: PropTypes.func
     })).isRequired
@@ -258,11 +262,11 @@ Checklist.propTypes = {
   /**
    * Determines the theme of the component.
    */
-  theme: PropTypes.oneOf(['light', 'dark']),
+  theme: PropTypes.oneOf([Themes.light, Themes.dark]),
   /**
    * The title of the component.
    */
-  title: PropTypes.string,
+  title: PropTypes.node,
   /**
    * The label for the toggle's tooltip.
    */

package/es/components/Checklist/Checklist.types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Copyright IBM Corp. 2024, 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.
+ */
+export declare enum Themes {
+    light = "light",
+    dark = "dark"
+}
+export type Theme = Themes.light | Themes.dark;
+export declare enum Kinds {
+    unchecked = "unchecked",
+    indeterminate = "indeterminate",
+    checked = "checked",
+    disabled = "disabled",
+    error = "error"
+}
+export type Kind = Kinds.unchecked | Kinds.indeterminate | Kinds.checked | Kinds.disabled | Kinds.error;

package/es/components/Checklist/Checklist.types.js

@@ -0,0 +1,22 @@
+/**
+ * Copyright IBM Corp. 2020, 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.
+ */
+
+var Themes = /*#__PURE__*/function (Themes) {
+  Themes["light"] = "light";
+  Themes["dark"] = "dark";
+  return Themes;
+}({});
+var Kinds = /*#__PURE__*/function (Kinds) {
+  Kinds["unchecked"] = "unchecked";
+  Kinds["indeterminate"] = "indeterminate";
+  Kinds["checked"] = "checked";
+  Kinds["disabled"] = "disabled";
+  Kinds["error"] = "error";
+  return Kinds;
+}({});
+
+export { Kinds, Themes };

package/es/components/Checklist/ChecklistChart.d.ts

@@ -1,5 +1,9 @@
 /**
- * TODO: A description of the component.
+ * Custom chart component used within Checklist PLG component
  */
-export let ChecklistChart: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export let ChecklistChart: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    value: number;
+    theme?: import("./Checklist.types").Theme | undefined;
+} & React.RefAttributes<any>>;
 import React from 'react';

package/es/components/Checklist/ChecklistChart.js

@@ -9,48 +9,35 @@ import { objectWithoutProperties as _objectWithoutProperties, extends as _extend
 import React__default from 'react';
 import PropTypes from '../../node_modules/prop-types/index.js';
 import cx from 'classnames';
+import clamp from 'lodash/clamp';
+import { gray20, gray70, purple50 } from '../../node_modules/@carbon/colors/es/index.js';
 import { getDevtoolsProps } from '../../global/js/utils/devtools.js';
 import { pkg } from '../../settings.js';
-import clamp from 'lodash/clamp';
+import { Themes } from './Checklist.types.js';
 
 var _excluded = ["className", "value", "theme"];
-
-// Carbon and package components we use.
-/* TODO: @import(s) of carbon components and other package components. */
-
-// The block part of our conventional BEM class names (blockClass__E--M).
 var blockClass = "".concat(pkg.prefix, "--checklist__chart");
 var componentName = 'ChecklistChart';
-
-// NOTE: the component SCSS is not imported here: it is rolled up separately.
-
-// Default values can be included here and then assigned to the prop params,
-// e.g. prop = defaults.prop,
-// This gathers default values together neatly and ensures non-primitive
-// values are initialized early to avoid react making unnecessary re-renders.
-// Note that default values are not required for props that are 'required',
-// nor for props where the component can apply undefined values reasonably.
-// Default values should be provided when the component needs to make a choice
-// or assumption when a prop is not supplied.
-
-// Default values for props
 var defaults = {
-  theme: 'light'
+  theme: Themes.light
 };
 
 /**
- * TODO: A description of the component.
+ * Custom chart component used within Checklist PLG component
+ */
+var ChecklistChart = /*#__PURE__*/React__default.forwardRef(
+/**
+ * @param {{className?: string, value: number, theme?: import('./Checklist.types').Theme}} props type description
  */
-var ChecklistChart = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
+function (_ref, ref) {
   var className = _ref.className,
     value = _ref.value,
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? defaults.theme : _ref$theme,
     rest = _objectWithoutProperties(_ref, _excluded);
   var numDegrees = clamp(value * 360, 0, 360);
-  var circleColor = theme === 'light' ? '#e0e0e0' : '#525252'; // $ui-03 (-ish)
-  var progressColor = theme === 'light' ? '#a56eff' : '#a56eff'; // $purple-50
-
+  var circleColor = theme === Themes.light ? gray20 : gray70; // $ui-03 (-ish)
+  var progressColor = purple50;
   return /*#__PURE__*/React__default.createElement("div", _extends({}, rest, {
     className: cx(blockClass, className),
     style: {
@@ -61,13 +48,7 @@ var ChecklistChart = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     role: "img"
   }, getDevtoolsProps(componentName)));
 });
-
-// Return a placeholder if not released and not enabled by feature flag
-// ChecklistChart = pkg.checkComponentEnabled(ChecklistChart, componentName);
-
-// The display name of the component, used by React. Note that displayName
-// is used in preference to relying on function.name.
-// ChecklistChart.displayName = componentName;
+ChecklistChart.displayName = componentName;
 
 // The types and DocGen commentary for the component props,
 // in alphabetical order (for consistency).
@@ -80,7 +61,7 @@ ChecklistChart.propTypes = {
   /**
    * Determines the theme of the component.
    */
-  theme: PropTypes.oneOf(['light', 'dark']),
+  theme: PropTypes.oneOf([Themes.light, Themes.dark]),
   /**
    * Number between 0 and 1.
    */

package/es/components/Checklist/ChecklistIcon.d.ts

@@ -1,5 +1,9 @@
 /**
  * TODO: A description of the component.
  */
-export let ChecklistIcon: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+export let ChecklistIcon: React.ForwardRefExoticComponent<{
+    className?: string | undefined;
+    kind?: import("./Checklist.types").Kind | undefined;
+    theme?: import("./Checklist.types").Theme | undefined;
+} & React.RefAttributes<any>>;
 import React from 'react';