feat(chat-button): experimental wc

ariellalgilmore · Feb 9, 2024 · 32fd90b · 32fd90b
1 parent 945436b
commit 32fd90b
Show file tree

Hide file tree

Showing 27 changed files with 564 additions and 29 deletions.
diff --git a/...act-npm-11.35.0-7d5dfd9a6c-d3d431efa0.zip → ...act-npm-11.36.0-6a85f113d5-ecb6ec76ce.zip b/...act-npm-11.35.0-7d5dfd9a6c-d3d431efa0.zip → ...act-npm-11.36.0-6a85f113d5-ecb6ec76ce.zip
diff --git a/...eact-npm-1.49.0-c0508c83b7-18e74975d7.zip → ...eact-npm-1.50.0-45fd777863-c5858a0811.zip b/...eact-npm-1.49.0-c0508c83b7-18e74975d7.zip → ...eact-npm-1.50.0-45fd777863-c5858a0811.zip
diff --git a/...yles-npm-1.49.0-deec63f77b-7f44cd8fb4.zip → ...yles-npm-1.50.0-0dc51225b8-cf8b476de5.zip b/...yles-npm-1.49.0-deec63f77b-7f44cd8fb4.zip → ...yles-npm-1.50.0-0dc51225b8-cf8b476de5.zip
diff --git a/.yarn/cache/@carbon-themes-npm-11.30.0-a7ac8caa0a-e22b61ba56.zip b/.yarn/cache/@carbon-themes-npm-11.30.0-a7ac8caa0a-e22b61ba56.zip
diff --git a/.yarn/cache/@carbon-themes-npm-11.31.0-a999274d52-71a07e8fcc.zip b/.yarn/cache/@carbon-themes-npm-11.31.0-a999274d52-71a07e8fcc.zip
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.babelrc
@@ -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" }]]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.gitignore
@@ -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*
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/cdn.html
@@ -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>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/chat-button/index.html
@@ -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>
diff --git a/...ages/carbon-web-components/examples/codesandbox/basic/components/chat-button/package.json b/...ages/carbon-web-components/examples/codesandbox/basic/components/chat-button/package.json
@@ -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"
+  }
+}
diff --git a/...rbon-web-components/examples/codesandbox/basic/components/chat-button/sandbox.config.json b/...rbon-web-components/examples/codesandbox/basic/components/chat-button/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/...ages/carbon-web-components/examples/codesandbox/basic/components/chat-button/src/index.js b/...ages/carbon-web-components/examples/codesandbox/basic/components/chat-button/src/index.js
@@ -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';
diff --git a/...s/carbon-web-components/examples/codesandbox/basic/components/chat-button/src/styles.scss b/...s/carbon-web-components/examples/codesandbox/basic/components/chat-button/src/styles.scss
@@ -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);
+}
diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
@@ -69,7 +69,7 @@
   "dependencies": {
     "@babel/runtime": "^7.16.3",
     "@carbon/ibm-products-styles": "2.20.1",
-    "@carbon/styles": "1.49.0",
+    "@carbon/styles": "1.50.0",
     "flatpickr": "4.6.1",
     "lit": "^2.7.6",
     "lodash-es": "^4.17.21"

diff --git a/packages/carbon-web-components/src/components/button/button.scss b/packages/carbon-web-components/src/components/button/button.scss
@@ -15,6 +15,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/components/popover/index';
 @use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
 @use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/components/chat-button' as *;
 @use '@carbon/styles/scss/layout' as *;
 
 @include code-snippet;

diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button-skeleton.ts b/packages/carbon-web-components/src/components/chat-button/chat-button-skeleton.ts
@@ -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;
diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button-story.mdx b/packages/carbon-web-components/src/components/chat-button/chat-button-story.mdx
@@ -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.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](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" />
+````
diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button-story.scss b/packages/carbon-web-components/src/components/chat-button/chat-button-story.scss
@@ -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 */
+}
diff --git a/packages/carbon-web-components/src/components/chat-button/chat-button-story.ts b/packages/carbon-web-components/src/components/chat-button/chat-button-story.ts
@@ -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()} `],
+};