forked from carbon-design-system/carbon-for-ibm-dotcom
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(chat-button): experimental wc (carbon-design-system#11510)
### Related Ticket(s) Closes carbon-design-system#11498 ### Description create cwc chat button ### Changelog **New** - chat button, chat button skeleton, examples, stories, readme <!-- React and Web Component deploy previews are enabled by default. --> <!-- To enable additional available deploy previews, apply the following --> <!-- labels for the corresponding package: --> <!-- *** "test: e2e": Codesandbox examples and e2e integration tests --> <!-- *** "package: services": Services --> <!-- *** "package: utilities": Utilities --> <!-- *** "RTL": React / Web Components (RTL) --> <!-- *** "feature flag": React / Web Components (experimental) -->
- Loading branch information
1 parent
2d22385
commit a1560a5
Showing
24 changed files
with
542 additions
and
40 deletions.
There are no files selected for viewing
Binary file not shown.
Binary file not shown.
22 changes: 22 additions & 0 deletions
22
packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.babelrc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| { | ||
| "presets": [ | ||
| [ | ||
| "@babel/preset-env", | ||
| { | ||
| "modules": false, | ||
| "targets": [ | ||
| "last 1 version", | ||
| "Firefox ESR", | ||
| "not opera > 0", | ||
| "not op_mini > 0", | ||
| "not op_mob > 0", | ||
| "not android > 0", | ||
| "not edge > 0", | ||
| "not ie > 0", | ||
| "not ie_mob > 0" | ||
| ] | ||
| } | ||
| ] | ||
| ], | ||
| "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]] | ||
| } |
22 changes: 22 additions & 0 deletions
22
packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.gitignore
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # See https://help.github.com/ignore-files/ for more about ignoring files. | ||
|
|
||
| # dependencies | ||
| /node_modules | ||
|
|
||
| # testing | ||
| /coverage | ||
|
|
||
| # production | ||
| /build | ||
|
|
||
| # misc | ||
| .DS_Store | ||
| .cache | ||
| .env.local | ||
| .env.development.local | ||
| .env.test.local | ||
| .env.production.local | ||
|
|
||
| npm-debug.log* | ||
| yarn-debug.log* | ||
| yarn-error.log* |
6 changes: 6 additions & 0 deletions
6
packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.sassrc
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| { | ||
| "includePaths": [ | ||
| "node_modules", | ||
| "../../node_modules" | ||
| ] | ||
| } |
31 changes: 31 additions & 0 deletions
31
packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/cdn.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!-- | ||
| @license | ||
| Copyright IBM Corp. 2020 | ||
| This source code is licensed under the Apache-2.0 license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| --> | ||
|
|
||
| <html> | ||
| <head> | ||
| <title>@carbon/ibmdotcom-web-components example</title> | ||
| <meta charset="UTF-8"/> | ||
| <link rel="stylesheet" | ||
| href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/> | ||
| <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" /> | ||
| <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> | ||
| <style> | ||
| /* Suppress custom element until styles are loaded */ | ||
| cds-chat-button:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/chat-button.min.js"></script> | ||
| </head> | ||
| <body class="cds-theme-zone-white"> | ||
| <cds-chat-button> | ||
| Chat button | ||
| </cds-chat-button> | ||
| </body> | ||
| </html> |
31 changes: 31 additions & 0 deletions
31
packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/index.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| <!-- | ||
| @license | ||
| Copyright IBM Corp. 2020 | ||
| This source code is licensed under the Apache-2.0 license found in the | ||
| LICENSE file in the root directory of this source tree. | ||
| --> | ||
|
|
||
| <html> | ||
| <head> | ||
| <title>carbon-web-components example</title> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="stylesheet" | ||
| href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/> | ||
|
|
||
| <link rel="stylesheet" href="src/styles.scss" /> | ||
| <style> | ||
| /* Suppress custom element until styles are loaded */ | ||
| cds-chat-button:not(:defined) { | ||
| display: none; | ||
| } | ||
| </style> | ||
| <script type="module" src="src/index.js"></script> | ||
| </head> | ||
| <body> | ||
| <cds-chat-button> | ||
| Chat button | ||
| </cds-chat-button> | ||
| </body> | ||
| </html> |
23 changes: 23 additions & 0 deletions
23
...ages/carbon-web-components/examples/codesandbox/basic/components/chat-button/package.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| { | ||
| "name": "carbon-web-components-chat-button-example", | ||
| "version": "0.1.0", | ||
| "private": true, | ||
| "description": "Sample project for getting started with the Web Components from Carbon.", | ||
| "license": "Apache-2", | ||
| "main": "index.html", | ||
| "scripts": { | ||
| "build": "parcel build *.html --no-minify --public-url ./", | ||
| "clean": "rimraf node_modules dist .cache", | ||
| "start": "parcel index.html --port=9000 --no-hmr" | ||
| }, | ||
| "dependencies": { | ||
| "@carbon/styles": "^1.34.0", | ||
| "@carbon/web-components": "latest", | ||
| "sass": "^1.64.1" | ||
| }, | ||
| "devDependencies": { | ||
| "@babel/core": "^7.0.0-0", | ||
| "parcel-bundler": "1.12.3", | ||
| "rimraf": "^3.0.2" | ||
| } | ||
| } |
3 changes: 3 additions & 0 deletions
3
...rbon-web-components/examples/codesandbox/basic/components/chat-button/sandbox.config.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| { | ||
| "template": "node" | ||
| } |
10 changes: 10 additions & 0 deletions
10
...ages/carbon-web-components/examples/codesandbox/basic/components/chat-button/src/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * 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. | ||
| */ | ||
|
|
||
| import '@carbon/web-components/es/components/chat-button/index.js'; |
22 changes: 22 additions & 0 deletions
22
...s/carbon-web-components/examples/codesandbox/basic/components/chat-button/src/styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * 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. | ||
| */ | ||
|
|
||
| @use '@carbon/styles/scss/reset'; | ||
| @use '@carbon/styles/scss/theme'; | ||
| @use '@carbon/styles/scss/themes'; | ||
|
|
||
| @use '@carbon/styles/scss/components/button/tokens' as button-tokens; | ||
| @include theme.add-component-tokens(button-tokens.$button-tokens); | ||
|
|
||
|
|
||
| :root { | ||
| @include theme.theme(themes.$white); | ||
| background-color: var(--cds-background); | ||
| color: var(--cds-text-primary); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
46 changes: 46 additions & 0 deletions
46
packages/carbon-web-components/src/components/chat-button/chat-button-skeleton.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2019, 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 { classMap } from 'lit/directives/class-map.js'; | ||
| import { LitElement, html } from 'lit'; | ||
| import { property } from 'lit/decorators.js'; | ||
| import { prefix } from '../../globals/settings'; | ||
| import { CHAT_BUTTON_SIZE } from './defs'; | ||
| import styles from './chat-button.scss'; | ||
| import { carbonElement as customElement } from '../../globals/decorators/carbon-element'; | ||
|
|
||
| export { CHAT_BUTTON_SIZE }; | ||
| /** | ||
| * Chat button skeleton. | ||
| * | ||
| * @element cds-chat-button-skeleton | ||
| */ | ||
| @customElement(`${prefix}-chat-button-skeleton`) | ||
| class CDSChatButtonSkeleton extends LitElement { | ||
| /** | ||
| * Specify the size of the `ChatButtonSkeleton`, from the following list of sizes: 'sm', 'md', 'lg' | ||
| */ | ||
| @property({ reflect: true }) | ||
| size = CHAT_BUTTON_SIZE.LARGE; | ||
|
|
||
| render() { | ||
| const skeletonClasses = classMap({ | ||
| [`${prefix}--skeleton`]: true, | ||
| [`${prefix}--btn`]: true, | ||
| [`${prefix}--chat-btn`]: true, | ||
| [`${prefix}--layout--size-${this.size}`]: this.size, | ||
| }); | ||
|
|
||
| return html` <div class="${skeletonClasses}"></div> `; | ||
| } | ||
|
|
||
| static styles = styles; | ||
| } | ||
|
|
||
| export default CDSChatButtonSkeleton; |
39 changes: 39 additions & 0 deletions
39
packages/carbon-web-components/src/components/chat-button/chat-button-story.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| import { Props, Description } from '@storybook/addon-docs/blocks'; | ||
| import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn'; | ||
|
|
||
| # Chat Button | ||
|
|
||
| > 💡 Check our | ||
| > [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button) | ||
| > example implementation. | ||
| [](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button) | ||
|
|
||
| ## Getting started | ||
|
|
||
| Here's a quick example to get you started. | ||
|
|
||
| ### JS (via import) | ||
|
|
||
| ```javascript | ||
| import '@carbon/web-components/es/components/chat-button/index.js'; | ||
| ``` | ||
|
|
||
| <Description markdown={`${cdnJs({ components: ['chat-button'] })}`} /> | ||
| <Description markdown={`${cdnCss()}`} /> | ||
|
|
||
| ```javascript | ||
| import '@carbon/web-components/es/components/chat-button/index.js'; | ||
| import Add16 from '@carbon/web-components/es/icons/add/16'; | ||
|
|
||
| function App() { | ||
| return html`<cds-chat-button> | ||
| Primary ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button>`; | ||
| } | ||
| ``` | ||
|
|
||
| ## `<cds-chat-button>` attributes and properties | ||
|
|
||
| <Props of="cds-chat-button" /> | ||
| ```` |
15 changes: 15 additions & 0 deletions
15
packages/carbon-web-components/src/components/chat-button/chat-button-story.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| // | ||
| // Copyright IBM Corp. 2019, 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. | ||
| // | ||
| div[class*='test-button-'] { | ||
| margin-block-end: 4rem; | ||
|
|
||
| /* stylelint-disable */ | ||
| & > * { | ||
| margin-inline-end: 2rem; | ||
| } | ||
| /* stylelint-enable */ | ||
| } |
87 changes: 87 additions & 0 deletions
87
packages/carbon-web-components/src/components/chat-button/chat-button-story.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| /** | ||
| * @license | ||
| * | ||
| * Copyright IBM Corp. 2019, 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 { html } from 'lit'; | ||
| import './index'; | ||
| import storyDocs from './chat-button-story.mdx'; | ||
| import Add16 from '@carbon/icons/lib/add/16'; | ||
| import styles from './chat-button-story.scss'; | ||
|
|
||
| export const Default = () => { | ||
| return html` | ||
| <style> | ||
| ${styles} | ||
| </style> | ||
| <div class="test-button"> | ||
| <div class="test-button-sizes"> | ||
| <h3>Sizes</h3> | ||
| <br /> | ||
| <cds-chat-button size="sm"> | ||
| Primary ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button size="md"> | ||
| Primary ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button size="lg"> | ||
| Primary ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| </div> | ||
| <div class="test-button-kinds"> | ||
| <h3>Kinds</h3> | ||
| <br /> | ||
| <cds-chat-button kind="primary"> | ||
| Primary ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button kind="secondary"> | ||
| Secondary ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button kind="tertiary"> | ||
| Tertiary ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button kind="ghost"> | ||
| Ghost ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button kind="danger"> | ||
| Danger ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| </div> | ||
| <div class="test-button-quick-action"> | ||
| <h3>Quick action</h3> | ||
| <br /> | ||
| <cds-chat-button is-quick-action> | ||
| Quick action ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button is-quick-action is-selected> | ||
| Selected and Enabled ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button is-quick-action is-selected disabled> | ||
| Selected and disabled ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| <cds-chat-button is-quick-action disabled> | ||
| Disabled ${Add16({ slot: 'icon' })} | ||
| </cds-chat-button> | ||
| </div> | ||
| <div class="test-button-skeleton"> | ||
| <h3>Skeleton</h3> | ||
| <br /> | ||
| <cds-chat-button-skeleton size="sm"></cds-chat-button-skeleton> | ||
| <cds-chat-button-skeleton size="md"></cds-chat-button-skeleton> | ||
| <cds-chat-button-skeleton size="lg"></cds-chat-button-skeleton> | ||
| </div> | ||
| </div> | ||
| `; | ||
| }; | ||
|
|
||
| export default { | ||
| parameters: { | ||
| ...storyDocs.parameters, | ||
| }, | ||
| title: 'Experimental/Chat button', | ||
| decorators: [(story) => html` ${story()} `], | ||
| }; |
Oops, something went wrong.