From 9f31fc33efd601a5ef50baebb998bafd6d568fe8 Mon Sep 17 00:00:00 2001
From: Alexander Melo <alexandermelox@gmail.com>
Date: Wed, 27 Nov 2024 13:06:26 -0500
Subject: [PATCH] docs(sidepanel, createsidepanel): adds ai label docs (#6468)

* feat: starting ai label story for sidepanel

* docs(sidepanel): adds with ai label docs

* docs(createsidepanel): adds aiLabel docs

---------

Co-authored-by: Matt Gallo <mdgallo@us.ibm.com>
---
 .../CreateSidePanel.docs-page.js              | 25 +++++++
 .../SidePanel/SidePanel.docs-page.js          | 73 +++++++++++++++++++
 .../src/components/SidePanel/SidePanel.mdx    | 34 ---------
 .../SidePanel/SidePanel.stories.jsx           |  8 +-
 4 files changed, 101 insertions(+), 39 deletions(-)
 create mode 100644 packages/ibm-products/src/components/SidePanel/SidePanel.docs-page.js
 delete mode 100644 packages/ibm-products/src/components/SidePanel/SidePanel.mdx

diff --git a/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.docs-page.js b/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.docs-page.js
index 420c6916be..37f996ea1a 100644
--- a/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.docs-page.js
+++ b/packages/ibm-products/src/components/CreateSidePanel/CreateSidePanel.docs-page.js
@@ -39,6 +39,31 @@ This includes the following:
 You can find more information on how to validate your form fields in
 [Carbon's Form usage page](https://www.carbondesignsystem.com/components/form/usage).`,
         },
+        {
+          title: 'With AI Label',
+          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: `
+<CreateSidePanel
+  {...args}
+  slug={
+    // carbon AILabel component
+    <AILabel
+      className="ai-label-container"
+      autoAlign={false}
+      align="bottom-right"
+    >
+      <AILabelContent>... ...</AILabelContent>
+    </AILabel>
+  }
+>
+  ...
+</CreateSidePanel>
+                `,
+          },
+        },
       ]}
     />
   );
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.docs-page.js b/packages/ibm-products/src/components/SidePanel/SidePanel.docs-page.js
new file mode 100644
index 0000000000..12911e413c
--- /dev/null
+++ b/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;
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.mdx b/packages/ibm-products/src/components/SidePanel/SidePanel.mdx
deleted file mode 100644
index eab7a6de4a..0000000000
--- a/packages/ibm-products/src/components/SidePanel/SidePanel.mdx
+++ /dev/null
@@ -1,34 +0,0 @@
-import { Story, Controls, Canvas } from '@storybook/addon-docs';
-import { CodesandboxLink } from '../../global/js/utils/story-helper';
-import { SidePanel } from '.';
-import * as stories from './SidePanel.stories';
-
-# Side Panel
-
-[CD&AI Side Panel usage guidelines](https://pages.github.ibm.com/carbon/ibm-products/components/side-panel/usage)
-
-## Overview
-
-`Side panel`s keep users in-context of a page while performing tasks like
-navigating, editing, viewing details, or configuring something new.
-
-`Side panel`s are a fluid component and found in a few primary use-cases used
-for various reasons. The user needs to see the panel information in the context
-of the page for reference, the second being for configuration flows that affect
-the content on the page, and simple create flows. There are variants for these
-use-cases that require different widths and behaviors based on the content
-within them.
-
-### Default SidePanel component
-
-<Canvas>
-  <Story of={stories.SlideOver} />
-</Canvas>
-
-## Code sample
-
-<CodesandboxLink exampleDirectory="SidePanel" />
-
-## Component API
-
-<Controls />
diff --git a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx b/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx
index 596ff1d105..b177af89f6 100644
--- a/packages/ibm-products/src/components/SidePanel/SidePanel.stories.jsx
+++ b/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: {