feat(ChatButton): add in ChatButton component (#15675)

* feat(ChatButton): scaffold initial structure * feat(Button): add props, more stories * feat(Button): add quick action, skeleton styles * test(ChatButton): fix lint errors, update snapshots * test(ChatButton): add e2e, avt tests * chore(test): update snapshots, add exports * style(ChatButton): fix icon misalignment * fix(ChatButton): add in selected but not disabled state * fix(ChatButton): adjust disabled and selected styles * Update packages/styles/scss/components/chat-button/_chat-button.scss Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com> --------- Co-authored-by: Alison Joseph <alisonejoseph@Gmail.com>
carbon-design-system · Feb 7, 2024 · 0eac7a8 · 0eac7a8
1 parent fbec0e1
commit 0eac7a8
Show file tree

Hide file tree

Showing 22 changed files with 535 additions and 0 deletions.
diff --git a/e2e/components/ChatButton/ChatButton-test.avt.e2e.js b/e2e/components/ChatButton/ChatButton-test.avt.e2e.js
@@ -0,0 +1,24 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { expect, test } = require('@playwright/test');
+const { visitStory } = require('../../test-utils/storybook');
+
+test.describe('ChatButton @avt', () => {
+  test('@avt-default-state', async ({ page }) => {
+    await visitStory(page, {
+      component: 'Button',
+      id: 'experimental-unstable-chatbutton--default',
+      globals: {
+        theme: 'white',
+      },
+    });
+    await expect(page).toHaveNoACViolations('ChatButton');
+  });
+});
diff --git a/e2e/components/ChatButton/ChatButton-test.e2e.js b/e2e/components/ChatButton/ChatButton-test.e2e.js
@@ -0,0 +1,26 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+'use strict';
+
+const { test } = require('@playwright/test');
+const { themes } = require('../../test-utils/env');
+const { snapshotStory } = require('../../test-utils/storybook');
+
+test.describe('ChatButton', () => {
+  themes.forEach((theme) => {
+    test.describe(theme, () => {
+      test('default @vrt', async ({ page }) => {
+        await snapshotStory(page, {
+          component: 'ChatButton',
+          id: 'experimental-unstable-chatbutton--default',
+          theme,
+        });
+      });
+    });
+  });
+});
diff --git a/packages/carbon-components-react/scss/components/chat-button/_chat-button.scss b/packages/carbon-components-react/scss/components/chat-button/_chat-button.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/chat-button/chat-button';
diff --git a/packages/carbon-components-react/scss/components/chat-button/_index.scss b/packages/carbon-components-react/scss/components/chat-button/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components-react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/chat-button';
diff --git a/packages/carbon-components/scss/components/chat-button/_chat-button.scss b/packages/carbon-components/scss/components/chat-button/_chat-button.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/chat-button/chat-button';
diff --git a/packages/carbon-components/scss/components/chat-button/_index.scss b/packages/carbon-components/scss/components/chat-button/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by carbon-components. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/chat-button';
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -9696,6 +9696,66 @@ Map {
       },
     },
   },
+  "unstable__ChatButton" => Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "propTypes": Object {
+      "children": Object {
+        "type": "node",
+      },
+      "className": Object {
+        "type": "string",
+      },
+      "disabled": Object {
+        "type": "bool",
+      },
+      "isQuickAction": Object {
+        "type": "bool",
+      },
+      "isSelected": Object {
+        "type": "bool",
+      },
+      "kind": Object {
+        "args": Array [
+          Array [
+            "primary",
+            "secondary",
+            "danger",
+            "ghost",
+            "tertiary",
+          ],
+        ],
+        "type": "oneOf",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+    "render": [Function],
+  },
+  "unstable__ChatButtonSkeleton" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+      "size": Object {
+        "args": Array [
+          Array [
+            "sm",
+            "md",
+            "lg",
+          ],
+        ],
+        "type": "oneOf",
+      },
+    },
+  },
   "unstable__FluidComboBox" => Object {
     "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {

diff --git a/packages/react/scss/components/chat-button/_chat-button.scss b/packages/react/scss/components/chat-button/_chat-button.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/chat-button/chat-button';
diff --git a/packages/react/scss/components/chat-button/_index.scss b/packages/react/scss/components/chat-button/_index.scss
@@ -0,0 +1,9 @@
+// Code generated by @carbon/react. DO NOT EDIT.
+//
+// Copyright IBM Corp. 2018, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@forward '@carbon/styles/scss/components/chat-button';
diff --git a/packages/react/src/__tests__/index-test.js b/packages/react/src/__tests__/index-test.js
@@ -247,6 +247,8 @@ describe('Carbon Components React', () => {
         "unstable_Pagination",
         "unstable_Text",
         "unstable_TextDirection",
+        "unstable__ChatButton",
+        "unstable__ChatButtonSkeleton",
         "unstable__FluidComboBox",
         "unstable__FluidComboBoxSkeleton",
         "unstable__FluidDatePicker",

diff --git a/packages/react/src/components/ChatButton/ChatButton.Skeleton.js b/packages/react/src/components/ChatButton/ChatButton.Skeleton.js
@@ -0,0 +1,38 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import cx from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+
+const ChatButtonSkeleton = ({ className, size, ...rest }) => {
+  const prefix = usePrefix();
+  const skeletonClasses = cx(
+    className,
+    `${prefix}--skeleton`,
+    `${prefix}--btn`,
+    `${prefix}--chat-btn`,
+    { [`${prefix}--layout--size-${size}`]: size }
+  );
+
+  return <div className={skeletonClasses} {...rest} />;
+};
+
+ChatButtonSkeleton.propTypes = {
+  /**
+   * Specify an optional className to add.
+   */
+  className: PropTypes.string,
+
+  /**
+   * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+};
+
+export default ChatButtonSkeleton;
diff --git a/packages/react/src/components/ChatButton/ChatButton.js b/packages/react/src/components/ChatButton/ChatButton.js
@@ -0,0 +1,100 @@
+/**
+ * Copyright IBM Corp. 2022
+ *
+ * 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 PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import Button from '../Button';
+import { usePrefix } from '../../internal/usePrefix';
+
+const ChatButton = React.forwardRef(function ChatButton(
+  {
+    className,
+    children,
+    disabled,
+    isQuickAction,
+    isSelected,
+    kind,
+    size,
+    ...other
+  },
+  ref
+) {
+  const prefix = usePrefix();
+  const classNames = classnames(className, {
+    [`${prefix}--chat-btn`]: true,
+    [`${prefix}--chat-btn--quick-action`]: isQuickAction,
+    [`${prefix}--chat-btn--quick-action--selected`]: isSelected,
+  });
+
+  const allowedSizes = ['sm', 'md', 'lg'];
+
+  if (isQuickAction) {
+    kind = 'ghost';
+    size = 'sm';
+  } else {
+    // Do not allow size larger than `lg`
+    size = allowedSizes.includes(size) ? size : 'lg';
+  }
+
+  return (
+    <Button
+      disabled={disabled}
+      className={classNames}
+      kind={kind}
+      ref={ref}
+      size={size}
+      {...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',
+  ]),
+
+  /**
+   * Specify the size of the `ChatButton`, from the following list of sizes:
+   */
+  size: PropTypes.oneOf(['sm', 'md', 'lg']),
+};
+
+export default ChatButton;