Merge branch 'main' into 17106-region

.github/workflows/slack-announcement.yml

@@ -37,7 +37,7 @@ jobs:
     steps:
       - name: Send slack announcement
         id: slack
-        uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0
+        uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0
         with:
           payload: |
             {

.github/workflows/slack-build-notifications.yml

@@ -24,7 +24,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack
         id: slack-success
-        uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0
+        uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0
         with:
           payload: |
             {
@@ -42,7 +42,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack
         id: slack-failure
-        uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0
+        uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0
         with:
           payload: |
             {

.github/workflows/slack-office-hours-design.yml

@@ -13,7 +13,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0
+        uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0
         with:
           payload: |
             {

.github/workflows/slack-office-hours-dev.yml

@@ -12,7 +12,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0
+        uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0
         with:
           payload: |
             {
@@ -34,7 +34,7 @@ jobs:
                 },
                 {
                   "type": "image",
-                  "image_url": "https://carbondesignsystem.com/static/406b7e7bf6865c094dd9a7a0bcb8bd41/3cbba/light-getting-started-developers.png",
+                  "image_url": "https://github.com/user-attachments/assets/e12fb5b9-9657-4e7b-b1a1-e1149cca8956",
                   "alt_text": "A terminal prompt symbol"
                 },
                 {
@@ -105,7 +105,7 @@ jobs:
     steps:
       - name: Send custom JSON data to Slack workflow
         id: slack
-        uses: slackapi/slack-github-action@70cd7be8e40a46e8b0eced40b0de447bdb42f68e #v1.26.0
+        uses: slackapi/slack-github-action@37ebaef184d7626c5f204ab8d3baff4262dd30f0 # v1.27.0
         with:
           payload: |
             {
@@ -127,7 +127,7 @@ jobs:
                 },
                 {
                   "type": "image",
-                  "image_url": "https://carbondesignsystem.com/static/406b7e7bf6865c094dd9a7a0bcb8bd41/3cbba/light-getting-started-developers.png",
+                  "image_url": "https://github.com/user-attachments/assets/e12fb5b9-9657-4e7b-b1a1-e1149cca8956",
                   "alt_text": "A terminal prompt symbol"
                 },
                 {
@@ -191,4 +191,3 @@ jobs:
         env:
           SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
           SLACK_WEBHOOK_TYPE: INCOMING_WEBHOOK
-

config/eslint-config-carbon/package.json

@@ -40,7 +40,7 @@
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-import": "^2.27.5",
-    "eslint-plugin-jest": "^27.0.0",
+    "eslint-plugin-jest": "^28.0.0",
     "eslint-plugin-jest-dom": "^5.0.0",
     "eslint-plugin-jsdoc": "^50.0.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",

packages/react/src/components/ChatButton/ChatButton.Skeleton.js → packages/react/src/components/ChatButton/ChatButton.Skeleton.tsx

@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 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.
@@ -9,8 +9,21 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
-
-const ChatButtonSkeleton = ({ className, size, ...rest }) => {
+export interface ChatButtonSkeletonProps {
+  /**
+   * Specify an optional className to add.
+   */
+  className?: string;
+  /**
+   * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+   */
+  size?: 'sm' | 'md' | 'lg';
+}
+const ChatButtonSkeleton = ({
+  className,
+  size,
+  ...rest
+}: ChatButtonSkeletonProps) => {
   const prefix = usePrefix();
   const skeletonClasses = cx(
     className,

packages/react/src/components/ChatButton/ChatButton.tsx

@@ -0,0 +1,157 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+import React, { type ComponentType, type FunctionComponent } from 'react';
+import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Button from '../Button';
+import { usePrefix } from '../../internal/usePrefix';
+
+export type ChatButtonKind =
+  | 'primary'
+  | 'secondary'
+  | 'danger'
+  | 'ghost'
+  | 'tertiary';
+export type ChatButtonSize = 'sm' | 'md' | 'lg';
+
+export interface ChatButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /**
+   * Provide the contents of your Select
+   */
+  children?: React.ReactNode;
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className?: string;
+  /**
+   * Specify whether the `ChatButton` should be disabled
+   */
+  disabled?: boolean;
+  /**
+   * Specify whether the `ChatButton` should be rendered as a quick action button
+   */
+  isQuickAction?: boolean;
+  /**
+   * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+   */
+  isSelected?: boolean;
+  /**
+   * Specify the kind of `ChatButton` you want to create
+   */
+  kind?: ChatButtonKind;
+  /**
+   * Optional prop to specify an icon to be rendered.
+   * Can be a React component class
+   */
+  renderIcon?: ComponentType | FunctionComponent;
+  /**
+   * Specify the size of the `ChatButton`, from the following list of sizes:
+   */
+  size?: ChatButtonSize;
+}
+
+const ChatButton = React.forwardRef<HTMLButtonElement, ChatButtonProps>(
+  function ChatButton(
+    {
+      className,
+      children,
+      disabled,
+      isQuickAction,
+      isSelected,
+      kind,
+      renderIcon,
+      size,
+      ...other
+    }: ChatButtonProps,
+    ref
+  ) {
+    const prefix = usePrefix();
+    const classNames = classnames(className, {
+      [`${prefix}--chat-btn`]: true,
+      [`${prefix}--chat-btn--with-icon`]: renderIcon,
+      [`${prefix}--chat-btn--quick-action`]: isQuickAction,
+      [`${prefix}--chat-btn--quick-action--selected`]: isSelected,
+    });
+
+    const allowedSizes: ChatButtonSize[] = ['sm', 'md', 'lg'];
+
+    if (isQuickAction) {
+      kind = 'ghost';
+      size = 'sm';
+    } else {
+      // Do not allow size larger than `lg`
+      size = allowedSizes.includes(size as ChatButtonSize) ? size : 'lg';
+    }
+
+    return (
+      <Button
+        disabled={disabled}
+        className={classNames}
+        kind={kind}
+        ref={ref}
+        size={size as ChatButtonSize}
+        renderIcon={renderIcon}
+        {...other}>
+        {children}
+      </Button>
+    );
+  }
+);
+
+ChatButton.propTypes = {
+  /**
+   * Provide the contents of your Select
+   */
+  children: PropTypes.node,
+
+  /**
+   * Specify an optional className to be applied to the node containing the label and the select box
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify whether the `ChatButton` should be disabled
+   */
+  disabled: PropTypes.bool,
+
+  /**
+   * Specify whether the `ChatButton` should be rendered as a quick action button
+   */
+  isQuickAction: PropTypes.bool,
+
+  /**
+   * Specify whether the quick action `ChatButton` should be rendered as selected. This disables the input
+   */
+  isSelected: PropTypes.bool,
+
+  /**
+   * Specify the kind of `ChatButton` you want to create
+   */
+  kind: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'danger',
+    'ghost',
+    'tertiary',
+  ]),
+
+  /**
+   * Optional prop to specify an icon to be rendered.
+   * Can be a React component class
+   */
+  // @ts-expect-error: PropTypes are not expressive enough to cover this case
+  renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+
+  /**
+   * Specify the size of the `ChatButton`, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+};
+
+export default ChatButton;