feat(workbench): make WorkbenchHeader description accept ReactElement (…

…#2342)

* feat(Workbench): make WorkbenchHeader description accept ReactElement

* chore: add changeset

* Apply suggestions from code review

Co-authored-by: Bohdan Hutsol <bohdan.hutsol@contentful.com>

* feat(workbench): update type for description prop

Co-authored-by: Bohdan Hutsol <bohdan.hutsol@contentful.com>

.changeset/rotten-beds-pay.md

@@ -0,0 +1,5 @@
+---
+'@contentful/f36-workbench': minor
+---
+
+Make WorkbenchHeader description prop accept ReactElement

packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.styles.ts

@@ -21,6 +21,7 @@ export const getWorkbenchHeaderStyles = (hasBackButton = false) => ({
     flexGrow: 1,
   }),
   description: css({
+    color: tokens.gray700,
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',

packages/components/workbench/src/WorkbenchHeader/WorkbenchHeader.tsx

@@ -18,7 +18,7 @@ export interface WorkbenchHeaderProps extends CommonProps {
   /** This is the icon that will be shown on the left side of the title and it's possible to use Forma 36’s icons or external icons */
   icon?: IconComponent | ReactElement;
   /** This is the text that will be shown on the right side of the title in the Header component */
-  description?: string;
+  description?: ReactNode;
   /** It's possible to pass a ReactNode to be shown at the end of the Header */
   actions?: ReactNode;
   /** If a function is passed to the onBack prop the Header will show a back button that will call this function when clicked */
@@ -39,6 +39,23 @@ export const WorkbenchHeader = ({
   const iconComponent =
     Icon === undefined ? null : isValidElement(Icon) ? Icon : <Icon />;
 
+  const renderDescription = (
+    description: WorkbenchHeaderProps['description'],
+  ) => {
+    if (typeof description === 'string') {
+      return (
+        <Paragraph
+          className={styles.description}
+          marginBottom="none"
+          marginRight="spacingM"
+        >
+          {description}
+        </Paragraph>
+      );
+    }
+    return description;
+  };
+
   return (
     <header
       className={cx(styles.workbenchHeader, className)}
@@ -73,15 +90,7 @@ export const WorkbenchHeader = ({
         title
       )}
 
-      {description && (
-        <Paragraph
-          className={styles.description}
-          marginBottom="none"
-          marginRight="spacingM"
-        >
-          {description}
-        </Paragraph>
-      )}
+      {description && renderDescription(description)}
 
       {actions}
     </header>

packages/components/workbench/stories/Workbench.stories.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import type { Meta, Story } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
 import tokens from '@contentful/f36-tokens';
@@ -42,7 +42,7 @@ export default {
 
 interface Args {
   ['Header Title']: string;
-  ['Header Description']: string;
+  ['Header Description']: ReactNode;
   ['Content Type']: WorkbenchContentProps['type'];
 }
 
@@ -308,6 +308,17 @@ export const HeaderOverview = () => {
           />
         </span>
 
+        <span>
+          <SectionHeading as="h3" marginBottom="spacingS">
+            Header with custom description element
+          </SectionHeading>
+
+          <Workbench.Header
+            title="Page title"
+            description={<HelpCircleIcon variant="muted" />}
+          />
+        </span>
+
         <span>
           <SectionHeading as="h3" marginBottom="spacingS">
             Header with custom icon element