docs(sidepanel, createsidepanel): adds ai label docs (carbon-design-s…

…ystem#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 <[email protected]>
makafsal · Nov 27, 2024 · 9f31fc3 · 9f31fc3
1 parent 0072e42
commit 9f31fc3
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 39 deletions.
diff --git 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
@@ -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
diff --git 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: {