chore(createtearsheet): rename slug to decorator

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

@@ -149,13 +149,13 @@ sections, you can utilize the below included class names.
         {
           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 CreateTearsheet component by including an `slug` property on it and providing the carbon AILabel component as its own custom component. Please note that the `slug` and `aiLabel` attributes are being deprecated and will soon be replaced by `decorator` to align with the Carbon.',
+            '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 CreateTearsheet component by including a `decorator` or `slug` property on it and providing the carbon AILabel component as its own custom component. Please note that the `slug` attribute is being deprecated and will soon be replaced by `decorator` to align with the Carbon.<br/> The `decorator` is versatile and can also be used to render other components.',
           source: {
             language: 'html',
             code: `
 <CreateTearsheet
   {...args}
-  slug={
+  decorator={
     <AILabel
       className="ai-label-container"
       autoAlign={false}

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

@@ -5,7 +5,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { slugArgTypes } from '../../global/js/story-parts/slug';
+import {
+  decoratorArgTypes,
+  slugArgTypes,
+} from '../../global/js/story-parts/decorator';
 import styles from './_storybook-styles.scss?inline';
 import { CreateTearsheet } from './CreateTearsheet';
 import DocsPage from './CreateTearsheet.docs-page';
@@ -26,6 +29,7 @@ export default {
     open: { control: { disable: true } },
     children: { control: { disable: true } },
     ...slugArgTypes(),
+    ...decoratorArgTypes(),
   },
   parameters: {
     styles,

packages/ibm-products/src/components/CreateTearsheet/CreateTearsheet.tsx

@@ -24,6 +24,7 @@ import {
   useResetCreateComponent,
   useValidCreateStepCount,
 } from '../../global/js/hooks';
+import { deprecateProp } from '../../global/js/utils/props-helper';
 
 import { CreateInfluencer } from '../CreateInfluencer';
 import { Form } from '@carbon/react';
@@ -87,6 +88,11 @@ export interface CreateTearsheetProps extends PropsWithChildren {
    */
   experimentalSecondarySubmitText?: string;
 
+  /**
+   * Optional prop that allows you to pass any component.
+   */
+  decorator?: ReactNode;
+
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -139,11 +145,6 @@ export interface CreateTearsheetProps extends PropsWithChildren {
    */
   open?: boolean;
 
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-   */
-  slug?: ReactNode;
-
   /**
    * The submit button text
    */
@@ -162,6 +163,12 @@ export interface CreateTearsheetProps extends PropsWithChildren {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition?: 'normal' | 'lower';
+
+  // Deprecated props
+  /**
+   * @deprecated Property replaced by `decorator`
+   */
+  slug?: ReactNode;
 }
 
 interface Step {
@@ -190,7 +197,8 @@ export let CreateTearsheet = forwardRef(
       onRequestSubmit,
       open,
       firstFocusElement,
-      slug,
+      slug: deprecated_slug,
+      decorator,
       submitButtonText,
       title,
       verticalPosition = 'normal',
@@ -305,7 +313,7 @@ export let CreateTearsheet = forwardRef(
           onClose,
           open,
           size: 'wide',
-          slug,
+          decorator: decorator || deprecated_slug,
           title,
           verticalPosition,
           closeIconDescription: '',
@@ -346,6 +354,12 @@ CreateTearsheet = pkg.checkComponentEnabled(CreateTearsheet, componentName);
 // is used in preference to relying on function.name.
 CreateTearsheet.displayName = componentName;
 
+const deprecatedProps = {
+  /**
+   *  @deprecated Property replaced by `decorator`
+   */
+  slug: deprecateProp(PropTypes.node, 'Property replaced by `decorator`'),
+};
 // Note that the descriptions here should be kept in sync with those for the
 // corresponding props for TearsheetNarrow and TearsheetShell components.
 CreateTearsheet.propTypes = {
@@ -369,6 +383,11 @@ CreateTearsheet.propTypes = {
    */
   className: PropTypes.string,
 
+  /**
+   *  Optional prop that allows you to pass any component.
+   */
+  decorator: PropTypes.node,
+
   /**
    * A description of the flow, displayed in the header area of the tearsheet.
    */
@@ -426,11 +445,6 @@ CreateTearsheet.propTypes = {
    */
   open: PropTypes.bool,
 
-  /**
-   *  **Experimental:** Provide a `Slug` component to be rendered inside the `Tearsheet` component
-   */
-  slug: PropTypes.node,
-
   /**
    * The submit button text
    */
@@ -449,4 +463,5 @@ CreateTearsheet.propTypes = {
    * to allow an action bar navigation or breadcrumbs to also show through.
    */
   verticalPosition: PropTypes.oneOf(['normal', 'lower']),
+  ...deprecatedProps,
 };

packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepTearsheet.js

@@ -24,7 +24,7 @@ import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
 import { CreateTearsheetStep } from '../CreateTearsheetStep';
-import { SlugSample } from '../../../global/js/story-parts/slug';
+import { sampleDecorator } from '../../../global/js/story-parts/decorator';
 
 const blockClass = `${pkg.prefix}--tearsheet-create-multi-step`;
 
@@ -56,6 +56,7 @@ export const MultiStepTearsheet = ({
   label,
   nextButtonText,
   slug,
+  decorator,
   submitButtonText,
   title,
   ...rest
@@ -115,7 +116,8 @@ export const MultiStepTearsheet = ({
           })
         }
         firstFocusElement={firstFocusElement}
-        slug={slug && SlugSample()}
+        slug={slug && sampleDecorator(slug)}
+        decorator={decorator && sampleDecorator(decorator)}
         {...rest}
       >
         <CreateTearsheetStep

packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepWithIntro.js

@@ -25,7 +25,7 @@ import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
 import { CreateTearsheetStep } from '../CreateTearsheetStep';
 import { NoDataIllustration } from '../../EmptyStates/assets/NoDataIllustration';
-import { SlugSample } from '../../../global/js/story-parts/slug';
+import { sampleDecorator } from '../../../global/js/story-parts/decorator';
 
 const blockClass = `${pkg.prefix}--tearsheet-create-multi-step`;
 
@@ -38,6 +38,7 @@ export const MultiStepWithIntro = ({
   label,
   nextButtonText,
   slug,
+  decorator,
   submitButtonText,
   title,
 }) => {
@@ -92,7 +93,8 @@ export const MultiStepWithIntro = ({
             }, simulatedDelay);
           })
         }
-        slug={slug && SlugSample()}
+        slug={slug && sampleDecorator(slug)}
+        decorator={decorator && sampleDecorator(decorator)}
       >
         <CreateTearsheetStep
           title="Select a category"

packages/ibm-products/src/components/CreateTearsheet/preview-components/MultiStepWithStepInErrorState.js

@@ -12,7 +12,7 @@ import cx from 'classnames';
 import { pkg } from '../../../settings';
 import { CreateTearsheet } from '../CreateTearsheet';
 import { CreateTearsheetStep } from '../CreateTearsheetStep';
-import { SlugSample } from '../../../global/js/story-parts/slug';
+import { sampleDecorator } from '../../../global/js/story-parts/decorator';
 
 const blockClass = `${pkg.prefix}--tearsheet-create-multi-step`;
 
@@ -25,6 +25,7 @@ export const MultiStepWithStepInErrorState = ({
   label,
   nextButtonText,
   slug,
+  decorator,
   submitButtonText,
   title,
 }) => {
@@ -72,7 +73,8 @@ export const MultiStepWithStepInErrorState = ({
             }, simulatedDelay);
           })
         }
-        slug={slug && SlugSample()}
+        slug={slug && sampleDecorator(slug)}
+        decorator={decorator && sampleDecorator(decorator)}
       >
         <CreateTearsheetStep
           title="Topic name"

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

@@ -19,7 +19,11 @@ import { pkg } from '../../settings';
 import { CreateTearsheetNarrow } from '.';
 import styles from './_storybook-styles.scss?inline';
 import { StoryDocsPage } from '../../global/js/utils/StoryDocsPage';
-import { SlugSample, slugArgTypes } from '../../global/js/story-parts/slug';
+import {
+  sampleDecorator,
+  slugArgTypes,
+  decoratorArgTypes,
+} from '../../global/js/story-parts/decorator';
 
 export default {
   title: 'IBM Products/Patterns/Create flows/CreateTearsheetNarrow',
@@ -28,6 +32,7 @@ export default {
   argTypes: {
     children: { control: { disable: true } },
     ...slugArgTypes(),
+    ...decoratorArgTypes(),
   },
   parameters: {
     styles,
@@ -54,7 +59,7 @@ const defaultStoryProps = {
   selectorPrimaryFocus: '#tearsheet-narrow-story-text-input--1',
 };
 
-const Template = ({ slug, ...args }) => {
+const Template = ({ slug, decorator, ...args }) => {
   const [open, setOpen] = useState(false);
   const [topicName, setTopicName] = useState('');
   const [partitionCount, setPartitionCount] = useState(1);
@@ -80,7 +85,8 @@ const Template = ({ slug, ...args }) => {
         onRequestClose={() => setOpen(false)}
         onRequestSubmit={action('onRequestSubmit action called')}
         disableSubmit={!topicName || numberInputsInvalid}
-        slug={slug && SlugSample()}
+        slug={slug && sampleDecorator(slug)}
+        decorator={decorator && sampleDecorator(decorator)}
         {...args}
       >
         <TextInput
@@ -156,7 +162,7 @@ const Template = ({ slug, ...args }) => {
   );
 };
 
-const WithValidationTemplate = ({ slug, ...args }) => {
+const WithValidationTemplate = ({ slug, decorator, ...args }) => {
   const [open, setOpen] = useState(false);
   const [topicName, setTopicName] = useState('');
   const [partitionCount, setPartitionCount] = useState(1);
@@ -187,7 +193,8 @@ const WithValidationTemplate = ({ slug, ...args }) => {
         }}
         onRequestSubmit={action('onRequestSubmit action called')}
         disableSubmit={!topicName || numberInputsInvalid}
-        slug={slug && SlugSample()}
+        slug={slug && sampleDecorator(slug)}
+        decorator={decorator && sampleDecorator(decorator)}
         {...args}
       >
         <FormGroup

packages/ibm-products/src/global/js/story-parts/decorator.jsx

@@ -0,0 +1,98 @@
+/**
+ * Copyright IBM Corp. 2024, 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 {
+  AILabel,
+  AILabelContent,
+  Toggletip,
+  ToggletipButton,
+  ToggletipContent,
+} from '@carbon/react';
+import { Information } from '@carbon/react/icons';
+
+export const sampleDecorator = (decorator) => {
+  switch (decorator) {
+    case 1:
+      return (
+        <AILabel className="decorator-container" size="xs">
+          <AILabelContent>
+            <div>
+              <p className="secondary">AI Explained</p>
+              <h1>84%</h1>
+              <p className="secondary bold">Confidence score</p>
+              <p className="secondary">
+                This is not really Lorem Ipsum but the spell checker did not
+                like the previous text with it&apos;s non-words which is why
+                this unwieldy sentence, should one choose to call it that, here.
+              </p>
+              <hr />
+              <p className="secondary">Model type</p>
+              <p className="bold">Foundation model</p>
+            </div>
+          </AILabelContent>
+        </AILabel>
+      );
+    case 2:
+      return (
+        <Toggletip>
+          <ToggletipButton label="Additional information">
+            <Information />
+          </ToggletipButton>
+          <ToggletipContent>
+            <p>Custom content here</p>
+          </ToggletipContent>
+        </Toggletip>
+      );
+    default:
+      return;
+  }
+};
+
+export const decoratorArgTypes = ({
+  _default = 0,
+  withHollow = false,
+} = {}) => {
+  const decorator = {
+    control: {
+      type: 'select',
+      labels: {
+        0: 'No AI Label',
+        1: 'with AI Label',
+        2: 'With non AI Label component',
+      },
+      default: _default,
+    },
+    options: [0, 1, 2],
+  };
+
+  if (withHollow) {
+    decorator.control.labels[3] = 'with hollow AI Label (boolean)';
+    decorator.options.push(3);
+  }
+  return { decorator };
+};
+
+export const slugArgTypes = ({ _default = 0, withHollow = false } = {}) => {
+  const slug = {
+    control: {
+      type: 'select',
+      labels: {
+        0: 'No AI slug',
+        1: 'with AI Slug',
+      },
+      default: _default,
+    },
+    options: [0, 1],
+  };
+
+  if (withHollow) {
+    slug.control.labels[2] = 'with hollow AI Slug (boolean)';
+    slug.options.push(2);
+  }
+  return { slug };
+};