feat(react:panel): panel wrapper

Signed-off-by: Bogdan Bogdanov <bbogdanov@vmware.com>

packages/react/App.tsx

@@ -39,6 +39,7 @@ import {
 import { CdsTree, CdsTreeItem } from './dist/react/tree-view/index.js';
 import { CdsInternalVisualCheckbox } from './dist/react/visual-checkbox/index.js';
 import { CdsInternalCloseButton } from './dist/react/close-button/index.js';
+import { CdsInternalPanel } from 'src/panel/index.js';
 
 ClarityIcons.addIcons(userIcon, timesIcon);
 
@@ -394,6 +395,9 @@ export default class App extends React.Component<{}, AppState> {
             </CdsCard>
           </div>
 
+          <h2>Internal Panel</h2>
+          <CdsInternalPanel>Hello!</CdsInternalPanel>
+
           <h2>Forms</h2>
           <div cds-layout="vertical gap:lg">
             <CdsControl layout="compact">

packages/react/src/panel/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CdsInternalPanel snapshot 1`] = `
+<div>
+  <CdsInternalPanel>
+    <cds-internal-panel(CustomElement)
+      __forwardedRef={null}
+    >
+      <cds-internal-panel
+        __forwardedRef={null}
+      >
+        Hello!
+      </cds-internal-panel>
+    </cds-internal-panel(CustomElement)>
+  </CdsInternalPanel>
+</div>
+`;

packages/react/src/panel/entrypoint.tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "extends": "../../tsconfig.lib.json",
+  "compilerOptions": {
+    "composite": true
+  },
+  "references": [{ "path": "../converter/entrypoint.tsconfig.json" }]
+}

packages/react/src/panel/index.test.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { mount, shallow } from 'enzyme';
+import { CdsInternalPanel } from './index';
+
+describe('CdsInternalPanel', () => {
+  it('renders', () => {
+    const wrapper = shallow(
+      <div>
+        <CdsInternalPanel>Hello!</CdsInternalPanel>
+      </div>
+    );
+    const renderedComponent = wrapper.find('CdsInternalPanel');
+    expect(renderedComponent.at(0).html()).toMatch('Hello!');
+  });
+
+  it('snapshot', () => {
+    const wrapper = mount(
+      <div>
+        <CdsInternalPanel>Hello!</CdsInternalPanel>
+      </div>
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
+});

packages/react/src/panel/index.tsx

@@ -0,0 +1,4 @@
+import { CdsInternalPanel as Panel } from '@cds/core/internal-components/panel';
+import { createComponent } from '../converter/react-wrapper.js';
+
+export const CdsInternalPanel = createComponent('cds-internal-panel', Panel);

packages/react/src/panel/package.json

@@ -0,0 +1,4 @@
+{
+  "sideEffects": true,
+  "name": "@cds/react/internal/panel"
+}