feat(filter-panel): introducing react wrapper

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={

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).

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>
+  );
+};

packages/web-components/examples/codesandbox/components-react/filter-panel/.gitignore

@@ -0,0 +1,2 @@
+/build
+/node_modules

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>

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"
+  }
+}

packages/web-components/examples/codesandbox/components-react/filter-panel/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "node"
+}

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;
+}

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'));

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',
+  },
+};

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>