feat: change header counter type to ReactNode (slot) to allow arbitrary content. (#4018)

Author: SpyZzey

pages/header/permutations.page.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
-import { Button, Link } from '~components';
+import { Button, Link, Spinner } from '~components';
 import Header, { HeaderProps } from '~components/header';
 
 import createPermutations from '../utils/permutations';
@@ -22,7 +22,7 @@ const permutations = createPermutations<HeaderProps>([
       'A description text with some content to simulate a text shown below the title of this header.',
       null,
     ],
-    counter: ['(1/10)', undefined],
+    counter: ['(1/10)', <Spinner key="spinner" />, undefined],
     actions: [
       <Button key="button" variant="primary">
         Create Resource
@@ -36,7 +36,7 @@ export default function HeaderPermutations() {
   return (
     <article>
       <h1>Header - Permutations</h1>
-      <ScreenshotArea>
+      <ScreenshotArea disableAnimations={true}>
         <PermutationsView permutations={permutations} render={props => <Header {...props}>{props.variant}</Header>} />
       </ScreenshotArea>
     </article>

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -13127,13 +13127,6 @@ exports[`Components definition for header matches the snapshot: header 1`] = `
       "optional": true,
       "type": "string",
     },
-    {
-      "description": "Specifies secondary text that's displayed to the right of the heading title. This is commonly used
-to display resource counters in table and cards components.",
-      "name": "counter",
-      "optional": true,
-      "type": "string",
-    },
     {
       "description": "Overrides the default [HTML heading tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
 provided by the variant. Using this property does not change the visual appearance of the component.",
@@ -13197,6 +13190,12 @@ HTML heading tag based on the specified \`variant\` or \`headingTagOverride\`.",
       "isDefault": true,
       "name": "children",
     },
+    {
+      "description": "Specifies secondary content that's displayed to the right of the heading title. This is commonly used
+to display resource counters in table and cards components.",
+      "isDefault": false,
+      "name": "counter",
+    },
     {
       "description": "Supplementary text below the heading.",
       "isDefault": false,

src/header/__tests__/header.test.tsx

@@ -7,6 +7,7 @@ import Container from '../../../lib/components/container';
 import ExpandableSection from '../../../lib/components/expandable-section';
 import Header from '../../../lib/components/header';
 import { DATA_ATTR_FUNNEL_KEY, FUNNEL_KEY_SUBSTEP_NAME } from '../../../lib/components/internal/analytics/selectors';
+import Spinner from '../../../lib/components/spinner';
 import createWrapper from '../../../lib/components/test-utils/dom';
 
 import styles from '../../../lib/components/header/styles.css.js';
@@ -41,6 +42,12 @@ test('renders everything provided', () => {
   expect(wrapper.findActions()!.find('button')!.getElement()).toHaveTextContent('Click me');
 });
 
+test('renders arbitrary counter content', () => {
+  const { wrapper } = renderHeader(<Header counter={<Spinner />} />);
+  expect(wrapper.findCounter()).not.toBeNull();
+  expect(wrapper.findCounter()!.findSpinner()).not.toBeNull();
+});
+
 test('renders h2 tag and variant by default', () => {
   const { wrapper } = renderHeader(<Header>title</Header>);
   expect(wrapper.find('h2')!.getElement()).toHaveTextContent('title');

src/header/analytics/use-table-integration.ts

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import { useEffect, useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import { parseCountValue } from '../../internal/analytics/utils/parse-count-text';
 import { useTableComponentsContext } from '../../internal/context/table-component-context';
@@ -11,9 +11,15 @@ import { useTableComponentsContext } from '../../internal/context/table-componen
  * The extracted count value is automatically synchronized with the table header
  * component through the table context, updating the countText property.
  */
-export const useTableIntegration = (countText: string | undefined) => {
+export const useTableIntegration = (countText: React.ReactNode | undefined) => {
   const tableComponentContext = useTableComponentsContext();
-  const countValue = useMemo(() => parseCountValue(countText), [countText]);
+  const countValue = useMemo(() => {
+    if (typeof countText === 'string') {
+      return parseCountValue(countText);
+    } else {
+      return undefined;
+    }
+  }, [countText]);
 
   useEffect(() => {
     if (tableComponentContext?.headerRef?.current && countValue !== undefined) {

src/header/interfaces.ts

@@ -34,10 +34,10 @@ export interface HeaderProps extends BaseComponentProps {
    */
   actions?: React.ReactNode;
   /**
-   * Specifies secondary text that's displayed to the right of the heading title. This is commonly used
+   * Specifies secondary content that's displayed to the right of the heading title. This is commonly used
    * to display resource counters in table and cards components.
    */
-  counter?: string;
+  counter?: React.ReactNode;
   /**
    * Area next to the heading to display an Info link.
    */