diff --git a/e2e/components/ChatButton/ChatButton-test.avt.e2e.js b/e2e/components/ChatButton/ChatButton-test.avt.e2e.js new file mode 100644 index 000000000000..64f3728006dd --- /dev/null +++ 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 new file mode 100644 index 000000000000..506689a09c21 --- /dev/null +++ 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 new file mode 100644 index 000000000000..6486d7f955a4 --- /dev/null +++ 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 new file mode 100644 index 000000000000..2a93f58c0602 --- /dev/null +++ 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 new file mode 100644 index 000000000000..3356ea2e1480 --- /dev/null +++ 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 new file mode 100644 index 000000000000..1c2ed0de5cdd --- /dev/null +++ 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 index 27ed75d275f6..d589f1f2fde7 100644 --- 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 new file mode 100644 index 000000000000..c4bc30c2d3cb --- /dev/null +++ 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 new file mode 100644 index 000000000000..8756e252b492 --- /dev/null +++ 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 index c97af0534eda..40c89429b1b9 100644 --- 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 new file mode 100644 index 000000000000..8056365c7f4d --- /dev/null +++ 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
; +}; + +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 new file mode 100644 index 000000000000..6f181e854ecb --- /dev/null +++ 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 ( + + ); +}); + +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; diff --git a/packages/react/src/components/ChatButton/ChatButton.stories.js b/packages/react/src/components/ChatButton/ChatButton.stories.js new file mode 100644 index 000000000000..8f2d940cb18d --- /dev/null +++ b/packages/react/src/components/ChatButton/ChatButton.stories.js @@ -0,0 +1,111 @@ +/** + * 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 React from 'react'; +import { ChatButton, ChatButtonSkeleton } from './'; +import { Add } from '@carbon/icons-react'; +import './chat-button-story.scss'; + +export default { + title: 'Experimental/unstable__ChatButton', + component: ChatButton, + parameters: {}, + argTypes: { + onChange: { + action: 'onChange', + table: { + disable: true, + }, + }, + children: { + table: { + disable: true, + }, + }, + className: { + table: { + disable: true, + }, + }, + defaultValue: { + table: { + disable: true, + }, + }, + id: { + table: { + disable: true, + }, + }, + light: { + table: { + disable: true, + }, + }, + }, +}; + +export const Default = () => ( +