Updated ContentGroup.tsx to receive a component as title prop

CHANGELOG.md

@@ -10,18 +10,20 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 
 -   `<ApplicationViewability />`
     -   component for hiding elements in specific media
+-   `<ContentGroup />`
+    -   `title` property now accepts a React component in addition to a string
 -   `<InlineText />`
-    -    force children to get displayed as inline content
+    -   force children to get displayed as inline content
 -   `<StringPreviewContentBlobToggler />`
-    - `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
+    -   `useOnly` property: specify if only parts of the content should be used for the shortened preview, this property replaces `firstNonEmptyLineOnly`
 
 ### Fixed
 
 -   `<Tag />`
     -   create more whitespace inside `small` tag
     -   reduce visual impact of border
 -   `<StringPreviewContentBlobToggler />`
-    -    take Markdown rendering into account before testing the maximum preview length
+    -   take Markdown rendering into account before testing the maximum preview length
 -   `<NodeContent />`
     -   header-menu items are vertically centered now
 
@@ -41,7 +43,7 @@ The format is based on [Keep a Changelog](http://keepachangelog.com/) and this p
 ### Deprecated
 
 -   `<StringPreviewContentBlobToggler />`
-    -    `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
+    -   `firstNonEmptyLineOnly` will be removed, is replaced by `useOnly="firstNonEmptyLine"`
 
 ## [25.0.0] - 2025-12-01
 

src/components/ContentGroup/ContentGroup.stories.tsx

@@ -45,3 +45,8 @@ BasicExample.args = {
         </HtmlContentBlock>
     ),
 };
+
+export const TitleAsElement = BasicExample.bind({});
+TitleAsElement.args = {
+    title: <div>Title as element</div>,
+};

src/components/ContentGroup/ContentGroup.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { ReactElement } from "react";
 import classNames from "classnames";
 import Color from "color";
+import { isString } from "lodash";
 
 import { TestableComponent } from "../../components/interfaces";
 import { CLASSPREFIX as eccgui } from "../../configuration/constants";
@@ -19,11 +20,13 @@ import {
     Tooltip,
 } from "../index";
 
+const MAX_HEADLINE_LEVEL = 6;
+
 export interface ContentGroupProps extends Omit<React.HTMLAttributes<HTMLElement>, "title">, TestableComponent {
     /**
      * Title of the content group.
      */
-    title?: string;
+    title?: string | ReactElement;
     /**
      * Level of the content group.
      */
@@ -138,9 +141,17 @@ export const ContentGroup = ({
         }, []);
     }
 
-    const contextInfoElements = Array.isArray(contextInfo) ? contextInfo : [contextInfo];
+    const contextInfoElements = React.Children.toArray(contextInfo);
     const { className: contentClassName, ...otherContentProps } = contentProps ?? {};
 
+    const headerLevel = Math.min(Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel), MAX_HEADLINE_LEVEL);
+    const titleComponent = isString(title)
+        ? React.createElement(`h${headerLevel}`, {
+              children: <OverflowText>{title}</OverflowText>,
+              className: `${eccgui}-contentgroup__header__title`,
+          })
+        : title;
+
     const headerContent = displayHeader ? (
         <>
             <SectionHeader className={`${eccgui}-contentgroup__header`}>
@@ -158,17 +169,7 @@ export const ContentGroup = ({
                     )}
                     {title && (
                         <ToolbarSection canShrink>
-                            {React.createElement(
-                                "h" +
-                                    Math.min(
-                                        Math.max(minimumHeadlineLevel, level + minimumHeadlineLevel),
-                                        6
-                                    ).toString(),
-                                {
-                                    children: <OverflowText>{title}</OverflowText>,
-                                    className: `${eccgui}-contentgroup__header__title`,
-                                }
-                            )}
+                            {titleComponent}
                             {description && (
                                 <>
                                     <Spacing vertical size="tiny" />
@@ -179,8 +180,8 @@ export const ContentGroup = ({
                             )}
                         </ToolbarSection>
                     )}
-                    {contextInfoElements &&
-                        contextInfoElements[0]?.props &&
+                    {contextInfoElements.length > 0 &&
+                        React.isValidElement(contextInfoElements[0]) &&
                         Object.values(contextInfoElements[0].props).every((v) => v !== undefined) && (
                             <ToolbarSection className={`${eccgui}-contentgroup__header__context`} canGrow>
                                 <div className={`${eccgui}-contentgroup__content `}>