docs(Slug): add dev docs to Slug overview (#15812)

* docs(Slug): add dev docs to Slug overview

* refactor(Slug): remove unused imports

* docs(Slug): add more docs for examples, datatable slug overview

* docs(Slug): make tweaks to links

packages/react/src/components/DataTable/stories/DataTable-slug.stories.js

@@ -22,7 +22,7 @@ import DataTable, {
   TableExpandedRow,
 } from '..';
 import { rows, headers } from './shared';
-import mdx from '../DataTable.mdx';
+import mdx from '../../Slug/SlugDatatable.mdx';
 import Button from '../../Button';
 import { IconButton } from '../../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';

packages/react/src/components/Slug/Slug-examples.stories.js

@@ -40,10 +40,16 @@ import {
 } from '@carbon/icons-react';
 import { Slug, SlugContent, SlugActions } from '../Slug';
 import './slug-story.scss';
+import mdx from './SlugExamples.mdx';
 
 export default {
   title: 'Experimental/unstable__Slug/Examples',
   component: null,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 const args = {

packages/react/src/components/Slug/Slug-form.stories.js

@@ -26,13 +26,19 @@ import { IconButton } from '../IconButton';
 import { View, FolderOpen, Folders } from '@carbon/icons-react';
 import { Slug, SlugContent, SlugActions } from '.';
 import './slug-story.scss';
+import mdx from './SlugForm.mdx';
 
 export default {
   title: 'Experimental/unstable__Slug/Form',
   component: Form,
   subcomponents: {
     Slug,
   },
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 const numberInputProps = {

packages/react/src/components/Slug/Slug.mdx

@@ -1 +1,200 @@
-Hello
+import { ArgsTable, Canvas, Story } from '@storybook/blocks';
+import { Slug, SlugContent, SlugActions } from '../Slug';
+import * as SlugStories from './Slug.stories';
+
+# Slug
+
+[Source code](https://github.com/carbon-design-system/carbon/tree/main/packages/react/src/components/Slug)
+|
+[Slug release status](https://airtable.com/appCAqlGVN8tRUbAp/shr71ZyLlIGORz3Vh/tblHqPusgkK8hIeHo)
+|
+[Using AI-enhanced components in V10](https://github.com/carbon-design-system/carbon-for-ai/blob/main/docs/support-for-carbon-v10.md)
+
+## Table of Contents
+
+- [Overview](#overview)
+- [Slug anatomy](#slug-anatomy)
+- [Component API](#component-api)
+  - [Slug `aiText`](#slug-aitext)
+  - [Slug `aiTextLabel`](#slug-aitextlabel)
+  - [Slug `dotType`](#slug-dottype)
+  - [Slug `kind`](#slug-kind)
+  - [Slug `revertActive` and `onRevertClick`](#slug-revertactive-and-onrevertclick)
+- [Feedback](#feedback)
+
+## Overview
+
+The AI slug is intended for any scenario where something is being generated by
+(or with) AI to reinforce AI transparency, accountability, and explainability at
+any interface level. This also enables more effective recognition and recall of
+AI instances in a way that is identifiable across any IBM product.
+
+<Canvas>
+  <Story of={SlugStories.Default} />
+</Canvas>
+
+## Slug anatomy
+
+The `Slug` itself is a button that acts as a `Toggletip` trigger. To construct
+the contents of the `Slug` callout, you can place the desired elements as a
+child of `Slug` in `SlugContent`, like so:
+
+```jsx
+<Slug>
+  <SlugContent>
+    {Content Here}
+  </SlugContent>
+</Slug>
+```
+
+The `Slug` also supports the rendering of an action bar at the bottom of the
+callout. To achieve this, you can pass in `SlugActions` as a child of `Slug`,
+placed inside the `SlugContent`
+
+```jsx
+<Slug>
+  <SlugContent>
+    {Content Here}
+    {Optional Slug action bar}
+    <SlugActions>
+      <IconButton kind="ghost" label="View">
+        <View />
+      </IconButton>
+      <IconButton kind="ghost" label="Open Folder">
+        <FolderOpen />
+      </IconButton>
+      <IconButton kind="ghost" label="Folders">
+        <Folders />
+      </IconButton>
+      <Button>View details</Button>
+    </SlugActions>
+  </SlugContent>
+</Slug>
+```
+
+## Component API
+
+<ArgsTable />
+
+### Slug `aiText`
+
+If needed, you can change the text inside the `Slug` when translating to
+different languages.
+
+<Slug aiText="IA" className="sbdocs-slug">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+
+```jsx
+<Slug aiText="IA">
+  <SlugContent>Explanation of AI-generated content</SlugContent>
+</Slug>
+```
+
+### Slug `aiTextLabel`
+
+When using the `inline` variant, you can add text adjacent to the AI label with
+the `aiTextLabel` prop.
+
+<Slug kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+<br />
+<Slug kind="inline" className="sbdocs-slug">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+
+```jsx
+<Slug kind="inline" aiTextLabel="Text goes here">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+
+<Slug kind="inline">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+```
+
+### Slug `dotType`
+
+When using the `inline` variant, you can switch between the `hollow` slug for
+content that does not need additional explainability or the `default` variant
+that will render the AI callout.
+
+<Slug
+  kind="inline"
+  dotType="default"
+  aiTextLabel="Text goes here"
+  className="sbdocs-slug">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+<br />
+<Slug
+  kind="inline"
+  dotType="hollow"
+  aiTextLabel="Text goes here"
+  className="sbdocs-slug">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+
+```jsx
+<Slug
+  kind="inline"
+  dotType="default"
+  aiTextLabel="Text goes here">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+
+<Slug
+  kind="inline"
+  dotType="hollow"
+  aiTextLabel="Text goes here">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+```
+
+### Slug `kind`
+
+The `Slug` component has three variants, `default`, `hollow`, and `inline`. The
+`hollow` slugs represent items that don’t have any additional explainability.
+Therefore they don’t use the AI callout and instead use the standard Carbon
+tooltip, with a simple message.
+
+<Slug kind="hollow" size="xs" className="sbdocs-slug">
+  <SlugContent>AI was used to generate this content</SlugContent>
+</Slug>
+
+```jsx
+<Slug kind="hollow" size="xs">
+  <SlugContent>AI was used to generate this content</SlugContent>
+</Slug>
+```
+
+The `inline` `Slug` with the standard icon can also trigger the AI
+explainability callout.
+
+<Slug kind="inline" aiTextLabel="Text goes here" className="sbdocs-slug">
+  <SlugContent>Explanation of AI generated content</SlugContent>
+</Slug>
+
+```jsx
+<Slug kind="inline" aiTextLabel="Text goes here" size="xs">
+  <SlugContent>Explanation of AI-generated content</SlugContent>
+</Slug>
+```
+
+### Slug `revertActive` and `onRevertClick`
+
+`revertActive` is a boolean prop that can be set on `Slug` that transforms the
+`Slug` into a revert action button. This is useful if a user edits an
+AI-generated input to show that the element has been modified. This can be used
+in conjunction with the `onRevertClick` callback to handle restoring the element
+to the AI-generated state. For an example, please take a look at the
+[Revert Test story](https://react.carbondesignsystem.com/?path=/story/experimental-unstable-slug-form--revert-test)
+or take a look at the example story
+[source code](https://github.com/carbon-design-system/carbon/blob/main/packages/react/src/components/Slug/Slug-form.stories.js#L96).
+
+## Feedback
+
+Help us improve this component by providing feedback, asking questions on Slack,
+or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/react/src/components/Slug/Slug.mdx).