docs(sidepanel, createsidepanel): adds ai label docs

packages/ibm-products/src/components/SidePanel/SidePanel.docs-page.js

@@ -0,0 +1,73 @@
+/**
+ * Copyright IBM Corp. 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 React from 'react';
+import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
+
+import * as stories from './SidePanel';
+
+const DocsPage = () => (
+  <StoryDocsPage
+    blocks={[
+      {
+        story: stories.SlideOver,
+      },
+      {
+        story: stories.SlideIn,
+      },
+      {
+        story: stories.WithActionToolbar,
+      },
+      {
+        story: stories.PanelWithSecondStep,
+      },
+      {
+        story: stories.SpecifyElementToHaveInitialFocus,
+      },
+      {
+        story: stories.WithStaticTitle,
+      },
+      {
+        story: stories.FirstElementDisabled,
+      },
+      {
+        story: stories.WithStaticTitleAndActionToolbar,
+      },
+      {
+        story: stories.WithoutTitle,
+      },
+      {
+        title: 'With AI Label',
+        story: stories.WithAILabel,
+        description:
+          'An AI Label is intended for any scenario where something is being generated by AI to reinforce AI transparency, accountability, and explainability at the UI level. A Carbon AI Label can be provided to the Tearsheet component by including an `aiLabel` property on it and providing the carbon AILabel component as its own custom component.',
+        source: {
+          language: 'html',
+          code: `
+<SidePanel
+  {...args}
+  aiLabel={
+    // carbon AILabel component
+    <AILabel
+      className="ai-label-container"
+      autoAlign={false}
+      align="bottom-right"
+    >
+      <AILabelContent>... ...</AILabelContent>
+    </AILabel>
+  }
+>
+  ...
+</SidePanel>
+                `,
+        },
+      },
+    ]}
+  />
+);
+
+export default DocsPage;

packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx

@@ -33,7 +33,7 @@ import {
 import { Copy, TrashCan, Settings } from '@carbon/react/icons';
 import { SidePanel } from './SidePanel';
 import { sidePanelDecorator } from '../../global/decorators/sidePanelDecorator';
-// import mdx from './SidePanel.mdx';
+import DocsPage from './SidePanel.docs-page';
 
 const prefix = 'side-panel-stories__';
 
@@ -393,11 +393,9 @@ export default {
   parameters: {
     layout: 'fullscreen',
     styles,
-    /*
-docs: {
-      page: mdx,
+    docs: {
+      page: DocsPage,
     },
-*/
   },
   argTypes: {
     actions: {