From b828912a07f3ccb53369f12dadb35cb99528329c Mon Sep 17 00:00:00 2001
From: Ignacio Becerra <i1becerr@ucsd.edu>
Date: Wed, 27 Oct 2021 07:34:41 -0700
Subject: [PATCH] feat(filter-panel): introducing react wrapper (#7470)

### Related Ticket(s)
#6644

### Description
Introducing the React wrapper for the Filter Panel component.

### Changelog

**New**

- added comments to the getter functions

**Changed**

- included the `filter-panel` and `filter-panel-modal` components in `filter-panel-composite` in order for the  wrapper component to properly render

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->
---
 .../__snapshots__/storyshots.test.js.snap     |  76 ++++++++++
 .../components/FilterPanel/README.stories.mdx |   3 +
 .../__stories__/FilterPanel.stories.js        |  37 +++++
 .../components-react/filter-panel/.gitignore  |   2 +
 .../components-react/filter-panel/index.html  |  22 +++
 .../filter-panel/package.json                 |  35 +++++
 .../filter-panel/sandbox.config.json          |   3 +
 .../filter-panel/src/index.css                |  43 ++++++
 .../filter-panel/src/index.js                 |  71 ++++++++++
 .../filter-panel/webpack.config.js            |  47 +++++++
 .../__stories__/README.stories.mdx            |   2 +-
 .../__stories__/README.stories.react.mdx      | 133 ++++++++++++++++++
 .../filter-panel.stories.react.tsx            | 112 +++++++++++++++
 .../__stories__/filter-panel.stories.ts       |   2 +-
 .../filter-panel/filter-group-item.ts         |   1 +
 .../components/filter-panel/filter-group.ts   |   1 +
 .../filter-panel/filter-modal-button.ts       |   1 +
 .../filter-panel/filter-modal-footer.ts       |   1 +
 .../filter-panel/filter-modal-heading.ts      |   1 +
 .../filter-panel/filter-panel-checkbox.ts     |   4 +
 .../filter-panel/filter-panel-composite.ts    |  37 ++++-
 .../filter-panel/filter-panel-heading.ts      |   1 +
 .../filter-panel-input-select-item.ts         |   1 +
 .../filter-panel/filter-panel-input-select.ts |  12 +-
 .../filter-panel/filter-panel-modal.ts        |  20 ++-
 .../components/filter-panel/filter-panel.scss |   2 +
 .../components/filter-panel/filter-panel.ts   |   9 ++
 27 files changed, 662 insertions(+), 17 deletions(-)
 create mode 100644 packages/react/src/components/FilterPanel/README.stories.mdx
 create mode 100644 packages/react/src/components/FilterPanel/__stories__/FilterPanel.stories.js
 create mode 100644 packages/web-components/examples/codesandbox/components-react/filter-panel/.gitignore
 create mode 100644 packages/web-components/examples/codesandbox/components-react/filter-panel/index.html
 create mode 100644 packages/web-components/examples/codesandbox/components-react/filter-panel/package.json
 create mode 100644 packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json
 create mode 100644 packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.css
 create mode 100644 packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js
 create mode 100644 packages/web-components/examples/codesandbox/components-react/filter-panel/webpack.config.js
 create mode 100644 packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
 create mode 100644 packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx

diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
index 10ed36171a1..706e5d8f6fa 100644
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
@@ -102326,6 +102326,82 @@ exports[`Storyshots Components|Feature section Default 1`] = `
 </Container>
 `;
 
+exports[`Storyshots Components|Filter panel Default 1`] = `
+<Container
+  parameters={
+    Object {
+      "__id": "components-filter-panel--default",
+      "component": undefined,
+      "docs": Object {},
+      "fileName": "./components/FilterPanel/__stories__/FilterPanel.stories.js",
+      "framework": "react",
+      "options": Object {
+        "name": "Carbon for IBM.com React",
+        "storySort": [Function],
+        "theme": Object {
+          "appBg": "#F6F9FC",
+          "appBorderColor": "rgba(0,0,0,.1)",
+          "appBorderRadius": 4,
+          "appContentBg": "#FFFFFF",
+          "barBg": "#FFFFFF",
+          "barSelectedColor": "#1EA7FD",
+          "barTextColor": "#999999",
+          "base": "light",
+          "brandTitle": "Carbon for IBM.com React v1.26.0",
+          "brandUrl": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/react",
+          "colorPrimary": "#FF4785",
+          "colorSecondary": "#1EA7FD",
+          "fontBase": "\\"IBM Plex Sans\\", \\"Helvetica Neue\\", Arial, sans-serif",
+          "fontCode": "\\"IBM Plex Mono\\", Menlo, \\"DejaVu Sans Mono\\", \\"Bitstream Vera Sans Mono\\", Courier, monospace",
+          "inputBg": "#FFFFFF",
+          "inputBorder": "rgba(0,0,0,.1)",
+          "inputBorderRadius": 4,
+          "inputTextColor": "#333333",
+          "textColor": "#333333",
+          "textInverseColor": "#FFFFFF",
+        },
+        "url": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom",
+      },
+      "percy": Object {
+        "skip": true,
+      },
+      "proxy": true,
+      "subcomponents": undefined,
+    }
+  }
+  story={[Function]}
+>
+  <div
+    className="storybook-proxy-story"
+    data-floating-menu-container=""
+    role="main"
+  >
+    <p>
+      This component is maintained in
+       
+      <code>
+        @carbon/ibmdotcom-web-components
+      </code>
+       library with a
+       
+      <a
+        className="bx--link"
+        href="https://ibmdotcom-web-components-react.mybluemix.net/?path=/story/components-filter-panel"
+        target="_blank"
+      >
+        React wrapper
+      </a>
+      .
+    </p>
+  </div>
+  <input
+    aria-label="input-text-offleft"
+    className="bx--visually-hidden"
+    type="text"
+  />
+</Container>
+`;
+
 exports[`Storyshots Components|Footer Default 1`] = `
 <Container
   parameters={
diff --git a/packages/react/src/components/FilterPanel/README.stories.mdx b/packages/react/src/components/FilterPanel/README.stories.mdx
new file mode 100644
index 00000000000..540205457aa
--- /dev/null
+++ b/packages/react/src/components/FilterPanel/README.stories.mdx
@@ -0,0 +1,3 @@
+# Filter panel
+
+This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://ibmdotcom-web-components-react.mybluemix.net/?path=/story/components-filter-panel).
diff --git a/packages/react/src/components/FilterPanel/__stories__/FilterPanel.stories.js b/packages/react/src/components/FilterPanel/__stories__/FilterPanel.stories.js
new file mode 100644
index 00000000000..75d92082cf1
--- /dev/null
+++ b/packages/react/src/components/FilterPanel/__stories__/FilterPanel.stories.js
@@ -0,0 +1,37 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * 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 readme from '../README.stories.mdx';
+
+export default {
+  title: 'Components|Filter panel',
+
+  parameters: {
+    ...readme.parameters,
+    percy: {
+      skip: true,
+    },
+    proxy: true,
+  },
+};
+
+export const Default = () => {
+  return (
+    <p>
+      This component is maintained in{' '}
+      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
+      <a
+        className="bx--link"
+        target="_blank"
+        href="https://ibmdotcom-web-components-react.mybluemix.net/?path=/story/components-filter-panel">
+        React wrapper
+      </a>
+      .
+    </p>
+  );
+};
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/.gitignore b/packages/web-components/examples/codesandbox/components-react/filter-panel/.gitignore
new file mode 100644
index 00000000000..07bcde1c131
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/.gitignore
@@ -0,0 +1,2 @@
+/build
+/node_modules
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/index.html b/packages/web-components/examples/codesandbox/components-react/filter-panel/index.html
new file mode 100644
index 00000000000..771a41d17cb
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/index.html
@@ -0,0 +1,22 @@
+<!--
+@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.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>carbon-web-components example with React</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="index.js"></script>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/package.json b/packages/web-components/examples/codesandbox/components-react/filter-panel/package.json
new file mode 100644
index 00000000000..adf4a16493d
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "ibmdotcom-web-components-react-filter-panel-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
+  "license": "Apache-2",
+  "scripts": {
+    "start": "webpack serve"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "canary",
+    "@carbon/icons-react": "~10.22.0",
+    "carbon-components": "~10.23.0",
+    "lit-element": "~2.4.0",
+    "lit-html": "~1.3.0",
+    "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.10.0",
+    "@types/lodash-es": "^4.17.0",
+    "@types/react": "^16.9.0",
+    "babel-loader": "^8.2.0",
+    "css-loader": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json
new file mode 100644
index 00000000000..7ba0865f11c
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json
@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.css b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.css
new file mode 100644
index 00000000000..cdb0cae7fa0
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.css
@@ -0,0 +1,43 @@
+/**
+ * @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,
+body {
+  margin: 0;
+}
+
+body {
+  padding: 2rem;
+}
+
+/* Minimum setting to use IBM Plex font */
+@font-face {
+  font-weight: 400;
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  src: local('IBM Plex Sans'), local('IBMPlexSans'),
+    url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYXgKVElMYYaJe8bpLHnCwDKhdHeEw.woff) format('woff');
+  font-display: auto;
+}
+
+@font-face {
+  font-weight: 600;
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
+    url(https://fonts.gstatic.com/s/ibmplexsans/v6/zYX9KVElMYYaJe8bpLHnCwDKjQ76AIFscg.woff) format('woff');
+  font-display: auto;
+}
+
+/* From: https://github.com/carbon-design-system/carbon/blob/v10.22.0/packages/type/scss/_reset.scss#L31-L32 */
+body {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js
new file mode 100644
index 00000000000..b985242c22c
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js
@@ -0,0 +1,71 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 { render } from 'react-dom';
+import DDSFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
+import DDSFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
+import DDSFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
+import DDSFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
+import DDSFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
+import DDSFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
+import DDSFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
+import './index.css';
+
+const App = () => (
+  <DDSFilterPanelComposite>
+    <DDSFilterPanelHeading slot="heading">{heading}</DDSFilterPanelHeading>
+    <DDSFilterGroup>
+      <DDSFilterGroupItem title-text="Product types">
+        <DDSFilterPanelCheckbox value="API">API</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="Application">Application</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="Data Set">Data Set</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="Free Trial">Free Trial</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="Hardware">Hardware</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="Service">Service</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="Service Assets">Service Assets</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="Software">Software</DDSFilterPanelCheckbox>
+      </DDSFilterGroupItem>
+      <DDSFilterGroupItem title-text="Technologies">
+        <DDSFilterPanelInputSelect header-value="Analytics" title="Analytics"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Artificial intelligence" title="Artificial intelligence">
+          <DDSFilterPanelInputSelectItem value="Machine Learning">Machine Learning</DDSFilterPanelInputSelectItem>
+          <DDSFilterPanelInputSelectItem value="Natural language processing">
+            Natural language processing
+          </DDSFilterPanelInputSelectItem>
+          <DDSFilterPanelInputSelectItem value="Speech recognition">Speech recognition</DDSFilterPanelInputSelectItem>
+        </DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Automation" title="Automation"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Blockchain" title="Blockchain"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Cloud computing" title="Cloud computing"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="IT infrastructure" title="IT infrastructure"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="IT management" title="IT management"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Mobile technologys" title="Mobile technology"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Security" title="Security"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Software development" title="Software development"></DDSFilterPanelInputSelect>
+      </DDSFilterGroupItem>
+      <DDSFilterGroupItem title-text="Business needs">
+        <DDSFilterPanelInputSelect header-value="Business operations" title="Business operations"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Content Management" title="Content Management"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Customer service" title="Customer service"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Finance" title="Finance"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect header-value="Marketing and sales" title="Marketing and sales"></DDSFilterPanelInputSelect>
+        <DDSFilterPanelInputSelect
+          header-value="Supply chain management"
+          title="Supply chain management"></DDSFilterPanelInputSelect>
+      </DDSFilterGroupItem>
+      <DDSFilterGroupItem title-text="Deployment types">
+        <DDSFilterPanelCheckbox value="On-premises">On-premises</DDSFilterPanelCheckbox>
+        <DDSFilterPanelCheckbox value="SaaS">SaaS</DDSFilterPanelCheckbox>
+      </DDSFilterGroupItem>
+    </DDSFilterGroup>
+  </DDSFilterPanelComposite>
+);
+
+render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/filter-panel/webpack.config.js
new file mode 100644
index 00000000000..b8a5ef508bc
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/webpack.config.js
@@ -0,0 +1,47 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  module: {
+    rules: [
+      {
+        test: /\.js$/,
+        use: [
+          {
+            loader: 'babel-loader',
+            options: {
+              presets: ['@babel/preset-react'],
+            },
+          },
+        ],
+      },
+      {
+        test: /\.css$/,
+        sideEffects: true,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  plugins: [
+    // Lets WebPack Dev Server serve `.html` file.
+    // If you have other means to server `.html` content, this is not needed.
+    new HtmlWebpackPlugin({
+      template: 'index.html',
+      inject: false,
+    }),
+  ],
+  output: {
+    library: 'index',
+    filename: 'index.js',
+  },
+};
diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
index 654b191205d..955cd475b55 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
@@ -71,7 +71,7 @@ import '@carbon/ibmdotcom-web-components/es/components/filter-panel/index.js';
             <dds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></dds-filter-panel-input-select>
           </dds-filter-group-item>
           <dds-filter-group-item title-text="Deployment types">
-            <dds-filter-panel-checkbox value="On-premisis">On-premisis</dds-filter-panel-checkbox>
+            <dds-filter-panel-checkbox value="On-premises">On-premises</dds-filter-panel-checkbox>
             <dds-filter-panel-checkbox value="SaaS">SaaS</dds-filter-panel-checkbox>
           </dds-filter-group-item>
         </dds-filter-group>
diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
new file mode 100644
index 00000000000..caea4cb7ff5
--- /dev/null
+++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
@@ -0,0 +1,133 @@
+import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { PropTypesRef as FilterPanelProps } from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel';
+import { PropTypesRef as FilterPanelInputSelectProps } from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
+import { PropTypesRef as FilterPanelInputSelectItemProps } from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
+import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+
+# Filter Panel
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/components-react/filter-panel)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/components-react/filter-panel)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS
+
+```javascript
+import DDSFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
+import DDSFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
+import DDSFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
+import DDSFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
+import DDSFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
+import DDSFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
+import DDSFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
+
+<Description markdown={`${cdnJs({ components: ['filter-panel'] })}`} />
+
+<Description markdown={`${cdnCss()}`} />
+
+function App() {
+  return (
+    <DDSFilterPanelComposite>
+      <DDSFilterPanelHeading slot="heading">{heading}</DDSFilterPanelHeading>
+      <DDSFilterGroup>
+        <DDSFilterGroupItem title-text="Product types">
+          <DDSFilterPanelCheckbox value="API">API</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="Application">Application</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="Data Set">Data Set</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="Free Trial">Free Trial</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="Hardware">Hardware</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="Service">Service</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="Service Assets">Service Assets</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="Software">Software</DDSFilterPanelCheckbox>
+        </DDSFilterGroupItem>
+        <DDSFilterGroupItem title-text="Technologies">
+          <DDSFilterPanelInputSelect header-value="Analytics" title="Analytics"></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect header-value="Artificial intelligence" title="Artificial intelligence">
+            <DDSFilterPanelInputSelectItem value="Machine Learning">Machine Learning</DDSFilterPanelInputSelectItem>
+            <DDSFilterPanelInputSelectItem value="Natural language processing"
+              >Natural language processing
+            </DDSFilterPanelInputSelectItem>
+            <DDSFilterPanelInputSelectItem value="Speech recognition"
+              >Speech recognition
+            </DDSFilterPanelInputSelectItem>
+          </DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect header-value="Automation" title="Automation"></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect header-value="Blockchain" title="Blockchain"></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect header-value="Cloud computing" title="Cloud computing"></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect
+            header-value="IT infrastructure"
+            title="IT infrastructure"
+          ></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect header-value="IT management" title="IT management"></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect
+            header-value="Mobile technologys"
+            title="Mobile technology"
+          ></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect header-value="Security" title="Security"></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect
+            header-value="Software development"
+            title="Software development"
+          ></DDSFilterPanelInputSelect>
+        </DDSFilterGroupItem>
+        <DDSFilterGroupItem title-text="Business needs">
+          <DDSFilterPanelInputSelect
+            header-value="Business operations"
+            title="Business operations"
+          ></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect
+            header-value="Content Management"
+            title="Content Management"
+          ></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect
+            header-value="Customer service"
+            title="Customer service"
+          ></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect header-value="Finance" title="Finance"></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect
+            header-value="Marketing and sales"
+            title="Marketing and sales"
+          ></DDSFilterPanelInputSelect>
+          <DDSFilterPanelInputSelect
+            header-value="Supply chain management"
+            title="Supply chain management"
+          ></DDSFilterPanelInputSelect>
+        </DDSFilterGroupItem>
+        <DDSFilterGroupItem title-text="Deployment types">
+          <DDSFilterPanelCheckbox value="On-premises">On-premises</DDSFilterPanelCheckbox>
+          <DDSFilterPanelCheckbox value="SaaS">SaaS</DDSFilterPanelCheckbox>
+        </DDSFilterGroupItem>
+      </DDSFilterGroup>
+    </DDSFilterPanelComposite>
+  );
+}
+```
+
+## Props
+
+# DDSFilterPanel
+<Props of={FilterPanelProps} />
+
+# DDSFilterPanelInputSelect
+<Props of={FilterPanelInputSelectProps} />
+
+# DDSFilterPanelInputSelectItem
+<Props of={FilterPanelInputSelectItemProps} />
+
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector | Compatibility selector         | Description |
+| ----------------------- | ------------------------------ | ----------- |
+| `<dds-filter-panel>`                 | `data-autoid="dds--filter-panel"` | Component   |
+| `<dds-filter-panel-modal>`           | `data-autoid="dds--filter-panel-modal"` | Component   |
+| `<dds-filter-panel-composite>`       | `data-autoid="dds--filter-panel-composite"` | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx
new file mode 100644
index 00000000000..30a0e8cf847
--- /dev/null
+++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx
@@ -0,0 +1,112 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2021
+ *
+ * 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 { select, text } from '@storybook/addon-knobs';
+import React from 'react';
+// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
+// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
+// @ts-ignore
+import DDSFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
+import DDSFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
+import DDSFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
+import DDSFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
+import DDSFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
+/* eslint-disable max-len */
+import DDSFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
+import DDSFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
+/* eslint-enable max-len */
+
+import readme from './README.stories.react.mdx';
+
+export const Default = ({ parameters }) => {
+  const { heading, gridKnobs } = parameters?.props?.FilterPanel ?? {};
+
+  return (
+    <>
+      <div
+        className={`grid-alignment ${gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'}`}
+        style={{ paddingRight: '1rem' }}>
+        <DDSFilterPanelComposite>
+          <DDSFilterPanelHeading slot="heading">{heading}</DDSFilterPanelHeading>
+          <DDSFilterGroup>
+            <DDSFilterGroupItem title-text="Product types">
+              <DDSFilterPanelCheckbox value="API">API</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="Application">Application</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="Data Set">Data Set</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="Free Trial">Free Trial</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="Hardware">Hardware</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="Service">Service</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="Service Assets">Service Assets</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="Software">Software</DDSFilterPanelCheckbox>
+            </DDSFilterGroupItem>
+            <DDSFilterGroupItem title-text="Technologies">
+              <DDSFilterPanelInputSelect header-value="Analytics" title="Analytics"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Artificial intelligence" title="Artificial intelligence">
+                <DDSFilterPanelInputSelectItem value="Machine Learning">Machine Learning</DDSFilterPanelInputSelectItem>
+                <DDSFilterPanelInputSelectItem value="Natural language processing">
+                  Natural language processing
+                </DDSFilterPanelInputSelectItem>
+                <DDSFilterPanelInputSelectItem value="Speech recognition">Speech recognition</DDSFilterPanelInputSelectItem>
+              </DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Automation" title="Automation"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Blockchain" title="Blockchain"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Cloud computing" title="Cloud computing"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="IT infrastructure" title="IT infrastructure"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="IT management" title="IT management"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Mobile technologys" title="Mobile technology"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Security" title="Security"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect
+                header-value="Software development"
+                title="Software development"></DDSFilterPanelInputSelect>
+            </DDSFilterGroupItem>
+            <DDSFilterGroupItem title-text="Business needs">
+              <DDSFilterPanelInputSelect
+                header-value="Business operations"
+                title="Business operations"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Content Management" title="Content Management"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Customer service" title="Customer service"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect header-value="Finance" title="Finance"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect
+                header-value="Marketing and sales"
+                title="Marketing and sales"></DDSFilterPanelInputSelect>
+              <DDSFilterPanelInputSelect
+                header-value="Supply chain management"
+                title="Supply chain management"></DDSFilterPanelInputSelect>
+            </DDSFilterGroupItem>
+            <DDSFilterGroupItem title-text="Deployment types">
+              <DDSFilterPanelCheckbox value="On-premises">On-premises</DDSFilterPanelCheckbox>
+              <DDSFilterPanelCheckbox value="SaaS">SaaS</DDSFilterPanelCheckbox>
+            </DDSFilterGroupItem>
+          </DDSFilterGroup>
+        </DDSFilterPanelComposite>
+      </div>
+    </>
+  );
+};
+
+export default {
+  title: 'Components/Filter panel',
+  decorators: [
+    story => (
+      <div className="bx--grid bx--grid--condensed">
+        <div className="bx--row">{story()}</div>
+      </div>
+    ),
+  ],
+  hasStoryPadding: true,
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      FilterPanel: ({ groupId }) => ({
+        heading: text('heading', 'Filter', groupId),
+        gridKnobs: select('Grid alignment', ['3 columns', '4 columns'], '4 columns', groupId),
+      }),
+    },
+  },
+};
diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
index 4bf831e44ba..0602c3a57bc 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
+++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
@@ -15,7 +15,7 @@ import readme from './README.stories.mdx';
 export const Default = ({ parameters }) => {
   const { heading, gridKnobs } = parameters?.props?.FilterPanel ?? {};
   return html`
-    <div class="${gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'}">
+    <div class="${gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'}" style="padding-right: 1rem;">
       <dds-filter-panel-composite>
         <dds-filter-panel-heading slot="heading">${heading}</dds-filter-panel-heading>
         <dds-filter-group>
diff --git a/packages/web-components/src/components/filter-panel/filter-group-item.ts b/packages/web-components/src/components/filter-panel/filter-group-item.ts
index 7b9885e724a..8c8901a7010 100644
--- a/packages/web-components/src/components/filter-panel/filter-group-item.ts
+++ b/packages/web-components/src/components/filter-panel/filter-group-item.ts
@@ -32,4 +32,5 @@ class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterGroupItem;
diff --git a/packages/web-components/src/components/filter-panel/filter-group.ts b/packages/web-components/src/components/filter-panel/filter-group.ts
index 64caa7bc616..d0e6f59135d 100644
--- a/packages/web-components/src/components/filter-panel/filter-group.ts
+++ b/packages/web-components/src/components/filter-panel/filter-group.ts
@@ -33,4 +33,5 @@ class DDSFilterGroup extends StableSelectorMixin(BXAccordion) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterGroup;
diff --git a/packages/web-components/src/components/filter-panel/filter-modal-button.ts b/packages/web-components/src/components/filter-panel/filter-modal-button.ts
index dc290ef4f0f..90249dd5668 100644
--- a/packages/web-components/src/components/filter-panel/filter-modal-button.ts
+++ b/packages/web-components/src/components/filter-panel/filter-modal-button.ts
@@ -29,4 +29,5 @@ class DDSFilterModalButton extends StableSelectorMixin(BXModalFooterButton) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterModalButton;
diff --git a/packages/web-components/src/components/filter-panel/filter-modal-footer.ts b/packages/web-components/src/components/filter-panel/filter-modal-footer.ts
index 669deba3f11..77162b2ef4c 100644
--- a/packages/web-components/src/components/filter-panel/filter-modal-footer.ts
+++ b/packages/web-components/src/components/filter-panel/filter-modal-footer.ts
@@ -30,4 +30,5 @@ class DDSFilterModalFooter extends StableSelectorMixin(BXModalFooter) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterModalFooter;
diff --git a/packages/web-components/src/components/filter-panel/filter-modal-heading.ts b/packages/web-components/src/components/filter-panel/filter-modal-heading.ts
index fd3ae9220d4..c314dad2aa1 100644
--- a/packages/web-components/src/components/filter-panel/filter-modal-heading.ts
+++ b/packages/web-components/src/components/filter-panel/filter-modal-heading.ts
@@ -29,4 +29,5 @@ class DDSFilterModalHeading extends StableSelectorMixin(BXModalHeading) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterModalHeading;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts b/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts
index af90b111a6a..cff20b503ff 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts
@@ -43,6 +43,9 @@ class DDSFilterPanelCheckbox extends StableSelectorMixin(BXCheckbox) {
     );
   }
 
+  /**
+   * The name of the event that fires upon checkbox is selected
+   */
   static get eventChange() {
     return `${ddsPrefix}-checkbox-select`;
   }
@@ -54,4 +57,5 @@ class DDSFilterPanelCheckbox extends StableSelectorMixin(BXCheckbox) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterPanelCheckbox;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts
index ab990ed1c2f..56adc4b702f 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts
@@ -13,6 +13,8 @@ import settings from 'carbon-components/es/globals/js/settings';
 import Filter from 'carbon-web-components/es/icons/filter/16';
 import HostListenerMixin from 'carbon-web-components/es/globals/mixins/host-listener';
 import './filter-group';
+import './filter-panel';
+import './filter-panel-modal';
 import { baseFontSize, breakpoints } from '@carbon/layout';
 import { unsafeHTML } from 'lit-html/directives/unsafe-html';
 import HostListener from 'carbon-web-components/es/globals/decorators/host-listener';
@@ -324,26 +326,46 @@ class DDSFilterPanelComposite extends HostListenerMixin(StableSelectorMixin(LitE
     `;
   }
 
+  /**
+   * The name of the custom event captured upon selecting a checkbox
+   */
+
+  static get eventCheckboxSelect() {
+    return `${ddsPrefix}-checkbox-select`;
+  }
+
+  /**
+   * The name of the custom event captured upon selecting an option
+   */
+
   static get eventContentStateChange() {
     return `${ddsPrefix}-filter-panel-input-select`;
   }
 
+  /**
+   * The name of the custom event captured upon closing the modal
+   */
+
+  static get eventModalClose() {
+    return `${prefix}-modal-beingclosed`;
+  }
+
+  /**
+   * The name of the custom event capture upon selecting a title
+   */
+
   static get eventTitleChange() {
     return `${ddsPrefix}-filter-panel-input-select-title`;
   }
 
-  static get eventCheckboxSelect() {
-    return `${ddsPrefix}-checkbox-select`;
-  }
+  /**
+   * The name of the custom event fired to clear selections
+   */
 
   static get eventSelectionClear() {
     return `${ddsPrefix}-selection-clear`;
   }
 
-  static get eventModalClose() {
-    return `${prefix}-modal-beingclosed`;
-  }
-
   static get stableSelector() {
     return `${ddsPrefix}-filter-panel-composite`;
   }
@@ -351,4 +373,5 @@ class DDSFilterPanelComposite extends HostListenerMixin(StableSelectorMixin(LitE
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterPanelComposite;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-heading.ts b/packages/web-components/src/components/filter-panel/filter-panel-heading.ts
index 3264e91b71d..d2d7d38bbb9 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-heading.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-heading.ts
@@ -51,4 +51,5 @@ class DDSFilterPanelHeading extends StableSelectorMixin(LitElement) {
   static styles = styles;
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterPanelHeading;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts b/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts
index 2b432df77ec..ee5dfe699f7 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts
@@ -81,4 +81,5 @@ class DDSFilterPanelInputSelectItem extends StableSelectorMixin(LitElement) {
   static styles = styles;
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterPanelInputSelectItem;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts
index 4d6e02e2568..78d74fad31c 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts
@@ -133,10 +133,6 @@ class DDSFilterPanelInputSelect extends StableSelectorMixin(LitElement) {
   @property({ attribute: 'header-value' })
   headerValue: string = '';
 
-  static get eventTitleChange() {
-    return `${ddsPrefix}-filter-panel-input-select-title`;
-  }
-
   /**
    * Toggles the input select dropdown and sets the header to selected and sets the value
    *
@@ -205,6 +201,13 @@ class DDSFilterPanelInputSelect extends StableSelectorMixin(LitElement) {
     `;
   }
 
+  /**
+   * The name of the custom event fired upon selecting the title
+   */
+  static get eventTitleChange() {
+    return `${ddsPrefix}-filter-panel-input-select-title`;
+  }
+
   /**
    * The name of the custom event fired after the search content is changed upon a user gesture.
    */
@@ -219,4 +222,5 @@ class DDSFilterPanelInputSelect extends StableSelectorMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterPanelInputSelect;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts
index c082de7c1bb..7930a375de5 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts
@@ -89,10 +89,6 @@ class DDSFilterPanelModal extends HostListenerMixin(StableSelectorMixin(BXModal)
     }
   }
 
-  static get eventBeforeClose() {
-    return `${prefix}-modal-beingclosed`;
-  }
-
   render() {
     return html`
       <a id="start-sentinel" class="${prefix}--visually-hidden" href="javascript:void 0" role="navigation"></a>
@@ -115,10 +111,25 @@ class DDSFilterPanelModal extends HostListenerMixin(StableSelectorMixin(BXModal)
     `;
   }
 
+  /**
+   * The name of the custom event fired upon the modal being closed
+   */
+  static get eventBeforeClose() {
+    return `${prefix}-modal-beingclosed`;
+  }
+
+  /**
+   * The name of the custom event captured upon cleared selections
+   */
+
   static get eventSelectionClear() {
     return `${ddsPrefix}-selection-clear`;
   }
 
+  /**
+   * The name of the heading selector
+   */
+
   static get selectorHeading() {
     return `${ddsPrefix}-filter-panel-heading`;
   }
@@ -130,4 +141,5 @@ class DDSFilterPanelModal extends HostListenerMixin(StableSelectorMixin(BXModal)
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterPanelModal;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel.scss b/packages/web-components/src/components/filter-panel/filter-panel.scss
index da95daeec1a..7d8e257fb74 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel.scss
+++ b/packages/web-components/src/components/filter-panel/filter-panel.scss
@@ -13,6 +13,8 @@
 :host(#{$dds-prefix}-filter-panel-modal) {
   @extend :host(#{$prefix}-modal);
 
+  left: 0;
+
   @include carbon--breakpoint('lg') {
     display: none;
   }
diff --git a/packages/web-components/src/components/filter-panel/filter-panel.ts b/packages/web-components/src/components/filter-panel/filter-panel.ts
index fbec941cb6f..eb992a1b455 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel.ts
@@ -85,10 +85,18 @@ class DDSFilterPanel extends HostListenerMixin(StableSelectorMixin(LitElement))
     `;
   }
 
+  /**
+   * The name of the custom event captured upon option being seleced
+   */
+
   static get eventContentStateChange() {
     return `${ddsPrefix}-filter-panel-input-select`;
   }
 
+  /**
+   * The name of the custom event fired to clear selections
+   */
+
   static get eventSelectionClear() {
     return `${ddsPrefix}-selection-clear`;
   }
@@ -100,4 +108,5 @@ class DDSFilterPanel extends HostListenerMixin(StableSelectorMixin(LitElement))
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
 export default DDSFilterPanel;