Repository: carbon-design-system/carbon-labs
Pull request #523: fix(animated-header): bug fixes
Author: login: glapadre
Created: 2025-03-17T20:13:13Z | Merged: 2025-03-26T21:20:02Z

Closes #

Add `welcomeText` prop to deal with internationalization issue of static "Welcome" text
Fix bug related to dropdown button overflow use in Animated header
AI tile and Glass tile same height
Update snapshot

#### Changelog

**New**

- N/A

**Changed**

-Note above

**Removed**

- N/A

#### Testing / Reviewing

Test with storybook


Diff:
diff --git a/examples/react/AnimatedHeader/src/App.tsx b/examples/react/AnimatedHeader/src/App.tsx
index a0425717c..66d261359 100644
--- a/examples/react/AnimatedHeader/src/App.tsx
+++ b/examples/react/AnimatedHeader/src/App.tsx
@@ -13,7 +13,7 @@ import {
   watsonXAnimatedLight,
   watsonXStaticLight,
 } from '@carbon-labs/react-animated-header/assets';
-import { headerTiles, workspaceData } from './data';
+import { headerTiles, workspaceData, tasksConfigDropdown } from './data';
 
 function App() {
   const [tiles] = useState(headerTiles);
@@ -31,21 +31,20 @@ function App() {
 
   return (
     <AnimatedHeader
-      name="Drew"
+      allTiles={tiles}
+      allWorkspaces={workspaces}
       description="Connect, monitor, and manage data."
-      buttonText="Manage data"
-      buttonType="tertiary"
-      buttonIcon="Launch"
-      headerDropdown={false}
-      productName="[Product name]"
       headerAnimation={watsonXAnimatedLight}
       headerStatic={watsonXStaticLight}
-      selectedWorkspace={selectedWorkspace}
-      setSelectedWorkspace={handleWorkspaceSelect}
-      allWorkspaces={workspaces}
+      productName="[Product name]"
       selectedTileGroup={selectedTile}
+      selectedWorkspace={selectedWorkspace}
       setSelectedTileGroup={handleTileGroup}
-      allTiles={tiles}
+      setSelectedWorkspace={handleWorkspaceSelect}
+      tasksConfig={tasksConfigDropdown}
+      userName="Drew"
+      welcomeText="Welcome"
+      workspaceLabel="Open in: Drew's workspace"
     />
   );
 }
diff --git a/examples/react/AnimatedHeader/src/data/index.jsx b/examples/react/AnimatedHeader/src/data/index.jsx
index 7aac68585..d64c46e23 100644
--- a/examples/react/AnimatedHeader/src/data/index.jsx
+++ b/examples/react/AnimatedHeader/src/data/index.jsx
@@ -6,6 +6,10 @@
  * 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 { Add } from '@carbon/react/icons';
+import { ButtonKinds } from '@carbon/react';
+
 export const workspaceData = [
   {
     id: 'workspace-1',
@@ -316,3 +320,20 @@ export const headerTiles = [
     ],
   },
 ];
+
+export const tasksConfigButton = {
+  type: 'button',
+  button: {
+    href: '#',
+    icon: Add,
+    text: 'Action button',
+    type: ButtonKinds[7],
+  },
+};
+
+export const tasksConfigDropdown = {
+  type: 'dropdown',
+  dropdown: {
+    label: 'Customize your journey',
+  },
+};
diff --git a/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.mdx b/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.mdx
index 36ee4933a..a001d1a4d 100644
--- a/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.mdx
+++ b/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.mdx
@@ -42,6 +42,16 @@ Whether these are links to specific tasks, workspaces or other information is
 defined by each product and their user’s needs. In product-imagery has to be
 very settled and subtil to not distract users in performing their tasks.
 
+<Canvas
+  of={AnimatedHeaderStories.ThemeG10}
+  additionalActions={[
+    {
+      title: 'Open in Stackblitz',
+      onClick: () => stackblitzPrefillConfig(AnimatedHeaderStories.ThemeG10),
+    },
+  ]}
+/>
+
 ### Anatomy
 
 **Title:** Welcomes the user (Welcome, username)
@@ -56,15 +66,34 @@ achieve highest contrast to the background.
 
 **Collapse / Expand:** Icon to collapse or expand the header
 
-<Canvas
-  of={AnimatedHeaderStories.ThemeG10}
-  additionalActions={[
-    {
-      title: 'Open in Stackblitz',
-      onClick: () => stackblitzPrefillConfig(AnimatedHeaderStories.ThemeG10),
-    },
-  ]}
-/>
+### Theming
+
+The default theme for Animated Header is _g10_ (Light theme).
+
+Animated header supports both _g10_ (Light theme) and _g100_ (Dark Theme).
+
+To use dark theme in your product/app wrap the componenet in the Carbon
+[GlobalTheme](https://react.carbondesignsystem.com/?path=/docs/components-theme--overview#setting-the-global-theme)
+component. Following the example from the Carbon website it would like this:
+
+```
+import { useEffect } from 'react';
+import { GlobalTheme } from '@carbon/react';
+
+function App() {
+  const theme = 'g100'; // ← your implementation, e.g. fetching user settings
+
+  useEffect(() => {
+    document.documentElement.dataset.carbonTheme = theme;
+  }, [theme]);
+
+  return (
+    <GlobalTheme theme={theme}>
+      <AnimatedHeader />
+    </GlobalTheme>;
+  );
+}
+```
 
 ## Getting started
 
@@ -106,20 +135,19 @@ Example of Animated Header with all prop types enabled.
 
 ```jsx
 <AnimatedHeader
-  name="Drew"
+  allTiles={tiles}
+  allWorkspaces={workspaces}
   description="Connect, monitor, and manage data."
-  buttonText="Manage data"
-  buttonType="tertiary"
-  buttonIcon="Launch"
-  headerDropdown={false}
-  productName="[Product name]"
   headerAnimation={watsonXAnimatedLight}
   headerStatic={watsonXStaticLight}
-  selectedWorkspace={selectedWorkspace}
-  setSelectedWorkspace={handleWorkspaceSelect}
-  allWorkspaces={workspaces}
+  productName="[Product name]"
   selectedTileGroup={selectedTile}
+  selectedWorkspace={selectedWorkspace}
   setSelectedTileGroup={handleTileGroup}
-  allTiles={tiles}
+  setSelectedWorkspace={handleWorkspaceSelect}
+  tasksConfig={tasksConfig}
+  userName="Drew"
+  welcomeText="Welcome"
+  workspaceLabel="Open in: Drew's workspace"
 />
 ```
diff --git a/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.stories.tsx b/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.stories.tsx
index 4948f689a..38dc59750 100644
--- a/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.stories.tsx
+++ b/packages/react/src/components/AnimatedHeader/__stories__/AnimatedHeader.stories.tsx
@@ -9,14 +9,16 @@
 import React from 'react';
 import mdx from './AnimatedHeader.mdx';
 import AnimatedHeader from '../components/AnimatedHeader/AnimatedHeader';
-import { AIPromptTile, BaseTile, GlassTile } from '../components/Tiles/index';
-import { Launch, Add, DocumentImport } from '@carbon/react/icons';
 import { useArgs } from '@storybook/preview-api';
 import type { Meta, StoryObj } from '@storybook/react';
-import { ButtonKinds } from '@carbon/react';
 import '../components/animated-header.scss';
 
-import { workspaceData, headerTiles } from './data';
+import {
+  workspaceData,
+  headerTiles,
+  tasksConfigButton,
+  tasksConfigDropdown,
+} from './data';
 import {
   dataFabricAnimatedLight,
   dataFabricAnimatedDark,
@@ -33,11 +35,6 @@ import {
 const meta: Meta<typeof AnimatedHeader> = {
   title: 'Components/Animated Header',
   component: AnimatedHeader,
-  // subcomponents: {
-  //   AIPromptTile,
-  //   BaseTile,
-  //   GlassTile,
-  // },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   //tags: ["autodocs"],
   globals: {
@@ -60,78 +57,13 @@ export default meta;
 type Story = StoryObj<typeof AnimatedHeader>;
 
 const sharedArgTypes = {
-  name: {
-    description: 'Header welcome username',
-  },
   description: {
-    description: 'Header description text',
-  },
-  buttonText: {
-    description: 'Header button text',
-  },
-  productName: {
-    description: 'Product name in the AI Chat Tile',
-  },
-  headerDropdown: {
     description:
-      'Header dropdown menu when **button/buttonText is not in use**',
-    type: 'boolean',
-    control: {
-      type: 'boolean',
-      default: false,
-    },
-  },
-  selectedWorkspace: {
-    description: 'Options for workspace selection',
-    type: 'array',
-    control: {
-      type: 'select',
-      labels: {
-        0: 'None',
-        1: '1 option',
-        2: '2 options',
-        3: '3 options',
-      },
-    },
-    options: [0, 1, 2, 3],
-    mapping: {
-      0: null,
-      1: workspaceData.slice(0, 1),
-      2: workspaceData.slice(0, 2),
-      3: workspaceData,
-    },
-  },
-  selectedTileGroup: {
-    description: 'Set the number of header tiles',
-    type: 'object',
-    control: {
-      type: 'select',
-      labels: {
-        0: 'None',
-        1: headerTiles[0].name,
-        2: headerTiles[1].name,
-        3: headerTiles[2].name,
-        4: headerTiles[3].name,
-        5: headerTiles[4].name,
-        6: headerTiles[5].name,
-        7: headerTiles[6].name,
-      },
-    },
-    options: [0, 1, 2, 3, 4, 5, 6, 7],
-    mapping: {
-      0: null,
-      1: headerTiles[0],
-      2: headerTiles[1],
-      3: headerTiles[2],
-      4: headerTiles[3],
-      5: headerTiles[4],
-      6: headerTiles[5],
-      7: headerTiles[6],
-    },
+      'Provide short sentence in max. 3 lines related to product context',
   },
   headerAnimation: {
     description:
-      'Lottie animation (to update headerAnimation content storybook requires remount in toolbar) dim. 1312 x 738',
+      'In-product imagery / lottie animation (.json) dim. 1312 x 738 **To update headerAnimation content storybook requires remount in toolbar**',
     type: 'json',
     control: {
       type: 'select',
@@ -156,90 +88,106 @@ const sharedArgTypes = {
       6: wxbiaAnimatedDark,
     },
   },
-  buttonType: {
-    description: 'Specify the kind of Button you want to create',
+  headerStatic: {
+    description:
+      'In-product imagery / static imagery dim. 1312 x 738 **Only active when headerAnimation is not in use**',
+    type: 'image',
     control: {
       type: 'select',
       labels: {
-        0: 'primary',
-        1: 'secondary',
-        2: 'danger',
-        3: 'ghost',
-        4: 'danger--primary',
-        5: 'danger--ghost',
-        6: 'danger--tertiary',
-        7: 'tertiary',
+        0: 'None',
+        1: 'watsonx (light theme)',
+        2: 'watsonx (dark theme)',
+        3: 'data fabric (light theme)',
+        4: 'data fabric (dark theme)',
       },
     },
-    options: [0, 1, 2, 3, 4, 5, 6, 7],
+    options: [0, 1, 2, 3, 4],
     mapping: {
-      0: ButtonKinds[0],
-      1: ButtonKinds[1],
-      2: ButtonKinds[2],
-      3: ButtonKinds[3],
-      4: ButtonKinds[4],
-      5: ButtonKinds[5],
-      6: ButtonKinds[6],
-      7: ButtonKinds[7],
+      0: null,
+      1: watsonXStaticLight,
+      2: watsonXStaticDark,
+      3: dataFabricStaticLight,
+      4: dataFabricStaticDark,
     },
   },
-  buttonIcon: {
-    description: 'Specify the kind of Button icon to use',
+  productName: {
+    description: 'Provide current product name',
+  },
+  selectedTileGroup: {
+    description:
+      'The tile group that is active in the header ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.',
+    type: 'object',
     control: {
       type: 'select',
       labels: {
         0: 'None',
-        1: 'Launch',
-        2: 'Add',
-        3: 'Document Import',
+        1: headerTiles[0].name,
+        2: headerTiles[1].name,
+        3: headerTiles[2].name,
+        4: headerTiles[3].name,
+        5: headerTiles[4].name,
+        6: headerTiles[5].name,
+        7: headerTiles[6].name,
       },
     },
-    options: [0, 1, 2, 3],
+    options: [0, 1, 2, 3, 4, 5, 6, 7],
     mapping: {
       0: null,
-      1: Launch,
-      2: Add,
-      3: DocumentImport,
+      1: headerTiles[0],
+      2: headerTiles[1],
+      3: headerTiles[2],
+      4: headerTiles[3],
+      5: headerTiles[4],
+      6: headerTiles[5],
+      7: headerTiles[6],
     },
   },
-  headerStatic: {
+  selectedWorkspace: {
+    description: 'Object containing workspace selection `Open in: "_"`',
+    type: 'object',
+  },
+  tasksConfig: {
     description:
-      'Static header image when **headerAnimation is not in use** dim. 1312 x 738',
-    type: 'image',
+      'Configuration for Carbon button or dropdown menu in header. Customized tasks are used to allow users that have multiple roles and permissions to experience better tailored content based on their need.',
     control: {
       type: 'select',
       labels: {
         0: 'None',
-        1: 'watsonx (light theme)',
-        2: 'watsonx (dark theme)',
-        3: 'data fabric (light theme)',
-        4: 'data fabric (dark theme)',
+        1: 'Button',
+        2: 'Dropdown',
       },
     },
-    options: [0, 1, 2, 3, 4],
+    options: [0, 1, 2],
     mapping: {
       0: null,
-      1: watsonXStaticLight,
-      2: watsonXStaticDark,
-      3: dataFabricStaticLight,
-      4: dataFabricStaticDark,
+      1: tasksConfigButton,
+      2: tasksConfigDropdown,
     },
   },
+  userName: {
+    description: 'Specify the current username of active user',
+  },
+  welcomeText: {
+    description:
+      'Specify the current welcome text on the header ex. `Welcome` `Welcome back`',
+  },
+  workspaceLabel: {
+    description: 'Specify the default workspace label above the tiles',
+  },
 };
 
 const sharedArgs = {
-  name: 'Drew',
+  allTiles: headerTiles,
+  allWorkspaces: workspaceData,
   description: 'Train, deploy, validate, and govern AI models responsibly.',
-  buttonText: 'Customize my journey',
-  productName: '[Product name]',
-  buttonType: 7,
-  buttonIcon: 0,
   headerStatic: 0,
-  headerDropdown: false,
-  selectedWorkspace: 3,
-  allWorkspaces: workspaceData,
+  productName: '[Product name]',
   selectedTileGroup: 1,
-  allTiles: headerTiles,
+  selectedWorkspace: workspaceData[0],
+  tasksConfig: 2,
+  userName: 'Drew',
+  welcomeText: 'Welcome',
 };
 
 export const ThemeG10 = (args) => {
diff --git a/packages/react/src/components/AnimatedHeader/__stories__/data/index.jsx b/packages/react/src/components/AnimatedHeader/__stories__/data/index.jsx
index 7aac68585..d64c46e23 100644
--- a/packages/react/src/components/AnimatedHeader/__stories__/data/index.jsx
+++ b/packages/react/src/components/AnimatedHeader/__stories__/data/index.jsx
@@ -6,6 +6,10 @@
  * 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 { Add } from '@carbon/react/icons';
+import { ButtonKinds } from '@carbon/react';
+
 export const workspaceData = [
   {
     id: 'workspace-1',
@@ -316,3 +320,20 @@ export const headerTiles = [
     ],
   },
 ];
+
+export const tasksConfigButton = {
+  type: 'button',
+  button: {
+    href: '#',
+    icon: Add,
+    text: 'Action button',
+    type: ButtonKinds[7],
+  },
+};
+
+export const tasksConfigDropdown = {
+  type: 'dropdown',
+  dropdown: {
+    label: 'Customize your journey',
+  },
+};
diff --git a/packages/react/src/components/AnimatedHeader/__tests__/AnimatedHeader-test.js b/packages/react/src/components/AnimatedHeader/__tests__/AnimatedHeader-test.tsx
similarity index 55%
rename from packages/react/src/components/AnimatedHeader/__tests__/AnimatedHeader-test.js
rename to packages/react/src/components/AnimatedHeader/__tests__/AnimatedHeader-test.tsx
index 0c7b81052..a9b042693 100644
--- a/packages/react/src/components/AnimatedHeader/__tests__/AnimatedHeader-test.js
+++ b/packages/react/src/components/AnimatedHeader/__tests__/AnimatedHeader-test.tsx
@@ -12,6 +12,7 @@ import 'jest-canvas-mock';
 import '@testing-library/jest-dom';
 
 import AnimatedHeader from '../components/AnimatedHeader/AnimatedHeader';
+import { headerTiles, workspaceData, tasksConfigDropdown } from '../data';
 
 window.matchMedia =
   window.matchMedia ||
@@ -27,7 +28,22 @@ jest.mock('./animated-header.scss', () => ({}));
 describe('AnimatedHeader', () => {
   describe('renders as expected - Component API', () => {
     it('should match snapshot', () => {
-      const { container } = render(<AnimatedHeader />);
+      const { container } = render(
+        <AnimatedHeader
+          allTiles={headerTiles}
+          allWorkspaces={workspaceData}
+          description="Connect, monitor, and manage data."
+          productName="[Product name]"
+          selectedTileGroup={headerTiles[0]}
+          selectedWorkspace={workspaceData[0]}
+          setSelectedTileGroup={() => {}}
+          setSelectedWorkspace={() => {}}
+          tasksConfig={tasksConfigDropdown}
+          userName="Drew"
+          welcomeText="Welcome"
+          workspaceLabel="Open in: Drew's workspace"
+        />
+      );
       expect(container).toMatchSnapshot();
     });
   });
diff --git a/packages/react/src/components/AnimatedHeader/__tests__/__snapshots__/AnimatedHeader-test.js.snap b/packages/react/src/components/AnimatedHeader/__tests__/__snapshots__/AnimatedHeader-test.js.snap
deleted file mode 100644
index c52a150fa..000000000
--- a/packages/react/src/components/AnimatedHeader/__tests__/__snapshots__/AnimatedHeader-test.js.snap
+++ /dev/null
@@ -1,97 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`AnimatedHeader renders as expected - Component API should match snapshot 1`] = `
-<div>
-  <section
-    class="clabs--animated-header false"
-  >
-    <div
-      class="cds--css-grid"
-    >
-      <div
-        class="clabs--animated-header__gradient--overlay"
-      />
-      <div
-        class="clabs--animated-header__container--gradient"
-      />
-      <div
-        class="clabs--animated-header__lottie-animation--container"
-      >
-        <div
-          class="clabs--animated-header__lottie-animation false"
-        />
-      </div>
-      <div
-        class="cds--sm:col-span-4 cds--md:col-span-8 cds--lg:col-span-16 cds--css-grid-column"
-      >
-        <span
-          class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip"
-        >
-          <div
-            class="cds--tooltip-trigger__wrapper"
-          >
-            <h1
-              aria-labelledby="tooltip-:r0:"
-              class="clabs--animated-header__heading "
-            >
-              <span
-                class="clabs--animated-header__heading-welcome"
-              >
-                Welcome,
-                 
-              </span>
-              <span
-                class="clabs--animated-header__heading-name"
-              />
-            </h1>
-          </div>
-          <span
-            aria-hidden="true"
-            class="cds--popover"
-            id="tooltip-:r0:"
-            role="tooltip"
-          >
-            <span
-              class="cds--popover-content cds--tooltip-content"
-            >
-              Welcome, undefined
-            </span>
-            <span
-              class="cds--popover-caret"
-            />
-          </span>
-        </span>
-      </div>
-      <div
-        class="clabs--animated-header__button-collapse--gradient"
-      />
-      <div
-        class="clabs--animated-header__button-collapse--container"
-      >
-        <button
-          class="cds--btn cds--btn--ghost"
-          id="clabs--animated-header__button-collapse"
-          type="button"
-        >
-          Collapse
-          <svg
-            aria-hidden="true"
-            class="cds--btn__icon"
-            fill="currentColor"
-            focusable="false"
-            height="16"
-            preserveAspectRatio="xMidYMid meet"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
-            />
-          </svg>
-        </button>
-      </div>
-    </div>
-  </section>
-</div>
-`;
diff --git a/packages/react/src/components/AnimatedHeader/__tests__/__snapshots__/AnimatedHeader-test.tsx.snap b/packages/react/src/components/AnimatedHeader/__tests__/__snapshots__/AnimatedHeader-test.tsx.snap
new file mode 100644
index 000000000..71f9f4820
--- /dev/null
+++ b/packages/react/src/components/AnimatedHeader/__tests__/__snapshots__/AnimatedHeader-test.tsx.snap
@@ -0,0 +1,527 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AnimatedHeader renders as expected - Component API should match snapshot 1`] = `
+<div>
+  <section
+    class="clabs--animated-header false"
+  >
+    <div
+      class="cds--css-grid"
+    >
+      <div
+        class="clabs--animated-header__gradient--overlay"
+      />
+      <div
+        class="clabs--animated-header__container--gradient"
+      />
+      <div
+        class="clabs--animated-header__lottie-animation--container"
+      >
+        <div
+          class="clabs--animated-header__lottie-animation false"
+        />
+      </div>
+      <div
+        class="cds--sm:col-span-4 cds--md:col-span-8 cds--lg:col-span-16 cds--css-grid-column"
+      >
+        <span
+          class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip"
+        >
+          <div
+            class="cds--tooltip-trigger__wrapper"
+          >
+            <h1
+              aria-labelledby="tooltip-:r0:"
+              class="clabs--animated-header__heading "
+            >
+              <span
+                class="clabs--animated-header__heading-welcome"
+              >
+                Welcome
+                ,
+                 
+              </span>
+              <span
+                class="clabs--animated-header__heading-name"
+              >
+                Drew
+              </span>
+            </h1>
+          </div>
+          <span
+            aria-hidden="true"
+            class="cds--popover"
+            id="tooltip-:r0:"
+            role="tooltip"
+          >
+            <span
+              class="cds--popover-content cds--tooltip-content"
+            >
+              Welcome, Drew
+            </span>
+            <span
+              class="cds--popover-caret"
+            />
+          </span>
+        </span>
+      </div>
+      <div
+        class="clabs--animated-header__left-area-container false cds--sm:col-span-4 cds--md:col-span-8 cds--lg:col-span-4 cds--css-grid-column"
+      >
+        <span
+          class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--bottom cds--tooltip"
+        >
+          <div
+            class="cds--tooltip-trigger__wrapper"
+          >
+            <h2
+              aria-labelledby="tooltip-:r2:"
+              class="clabs--animated-header__description"
+            >
+              Connect, monitor, and manage data.
+            </h2>
+          </div>
+          <span
+            aria-hidden="true"
+            class="cds--popover"
+            id="tooltip-:r2:"
+            role="tooltip"
+          >
+            <span
+              class="cds--popover-content cds--tooltip-content"
+            >
+              Connect, monitor, and manage data.
+            </span>
+            <span
+              class="cds--popover-caret"
+            />
+          </span>
+        </span>
+        <div
+          class="clabs--animated-header__header-dropdown--container"
+        >
+          <div
+            class="cds--dropdown__wrapper cds--list-box__wrapper clabs--animated-header__header-dropdown cds--dropdown__wrapper--inline cds--list-box__wrapper--inline"
+          >
+            <label
+              class="cds--label cds--visually-hidden"
+              for="downshift-:r6:-toggle-button"
+              id="downshift-:r6:-label"
+            >
+              Label
+            </label>
+            <div
+              class="cds--dropdown cds--dropdown--inline cds--dropdown--md cds--list-box cds--list-box--md"
+              id="clabs--animated-header__header-dropdown"
+            >
+              <button
+                aria-activedescendant=""
+                aria-controls="downshift-:r6:-menu"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-:r6:-label"
+                class="cds--list-box__field"
+                id="downshift-:r6:-toggle-button"
+                role="combobox"
+                tabindex="0"
+                title="Customize your journey"
+                type="button"
+              >
+                <span
+                  class="cds--list-box__label"
+                >
+                  Customize your journey
+                </span>
+                <div
+                  class="cds--list-box__menu-icon"
+                >
+                  <svg
+                    aria-label="Open menu"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    name="chevron--down"
+                    preserveAspectRatio="xMidYMid meet"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                    />
+                    <title>
+                      Open menu
+                    </title>
+                  </svg>
+                </div>
+              </button>
+              <ul
+                aria-labelledby="downshift-:r6:-label"
+                class="cds--list-box__menu"
+                id="downshift-:r6:-menu"
+                role="listbox"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="clabs--animated-header__content cds--sm:col-span-4 cds--md:col-span-8 cds--lg:col-span-12 cds--css-grid-column"
+      >
+        <div
+          class="clabs--animated-header__workspace--container false"
+        >
+          <div
+            class="cds--dropdown__wrapper cds--list-box__wrapper clabs--animated-header__workspace cds--dropdown__wrapper--inline cds--list-box__wrapper--inline"
+          >
+            <label
+              class="cds--label cds--visually-hidden"
+              for="downshift-:r9:-toggle-button"
+              id="downshift-:r9:-label"
+            >
+              Label
+            </label>
+            <div
+              class="cds--dropdown cds--dropdown--inline cds--dropdown--sm cds--list-box cds--list-box--sm"
+              id="clabs--animated-header__workspace"
+            >
+              <button
+                aria-activedescendant=""
+                aria-controls="downshift-:r9:-menu"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-labelledby="downshift-:r9:-label"
+                class="cds--list-box__field"
+                id="downshift-:r9:-toggle-button"
+                role="combobox"
+                tabindex="0"
+                title="Open in: Drew's workspace"
+                type="button"
+              >
+                <span
+                  class="cds--list-box__label"
+                >
+                  Open in: Drew's workspace
+                </span>
+                <div
+                  class="cds--list-box__menu-icon"
+                >
+                  <svg
+                    aria-label="Open menu"
+                    fill="currentColor"
+                    focusable="false"
+                    height="16"
+                    name="chevron--down"
+                    preserveAspectRatio="xMidYMid meet"
+                    role="img"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
+                    />
+                    <title>
+                      Open menu
+                    </title>
+                  </svg>
+                </div>
+              </button>
+              <ul
+                aria-labelledby="downshift-:r9:-label"
+                class="cds--list-box__menu"
+                id="downshift-:r9:-menu"
+                role="listbox"
+              />
+            </div>
+          </div>
+        </div>
+        <div
+          class="clabs--animated-header__tiles-container"
+        >
+          <div
+            class="clabs--animated-header__tile clabs--animated-header__ai-prompt-tile"
+            id="clabs--animated-header__ai-prompt-tile"
+          >
+            <div
+              class="clabs--animated-header__ai-prompt-tile--body false"
+            >
+              <div
+                class="clabs--animated-header__ai-prompt-tile--icons"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="var(--cds-icon-secondary)"
+                  focusable="false"
+                  height="24"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 32 32"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M28,26H25V24h3V8H25V6h3a2.0023,2.0023,0,0,1,2,2V24A2.0027,2.0027,0,0,1,28,26Z"
+                  />
+                  <circle
+                    cx="23"
+                    cy="16"
+                    r="2"
+                  />
+                  <circle
+                    cx="16"
+                    cy="16"
+                    r="2"
+                  />
+                  <circle
+                    cx="9"
+                    cy="16"
+                    r="2"
+                  />
+                  <path
+                    d="M7,26H4a2.0023,2.0023,0,0,1-2-2V8A2.002,2.002,0,0,1,4,6H7V8H4V24H7Z"
+                  />
+                </svg>
+                <div
+                  class="cds--ai-label"
+                  id="AILabel-:ra:"
+                >
+                  <span
+                    class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--auto-align cds--autoalign cds--popover--bottom cds--toggletip cds--autoalign"
+                  >
+                    <button
+                      aria-controls="id-:rb:"
+                      aria-expanded="false"
+                      aria-label="AI Show information"
+                      class="cds--toggletip-button cds--ai-label__button cds--ai-label__button--mini cds--ai-label__button--default"
+                      type="button"
+                    >
+                      <span
+                        class="cds--ai-label__text"
+                      >
+                        AI
+                      </span>
+                    </button>
+                  </span>
+                </div>
+              </div>
+              <div
+                class="clabs--animated-header__ai-prompt-tile--title"
+              >
+                Short description of the type of prompt
+              </div>
+              <div
+                class="clabs--animated-header__ai-prompt-tile--text-input-container "
+              >
+                <div
+                  class="cds--form-item clabs--animated-header__ai-prompt-tile--text-input cds--text-input-wrapper"
+                >
+                  <div
+                    class="cds--text-input__label-wrapper"
+                  >
+                    <label
+                      class="cds--label cds--visually-hidden"
+                      dir="auto"
+                      for="clabs--animated-header__ai-prompt-tile--text-input"
+                    >
+                      AI Chat Input
+                    </label>
+                  </div>
+                  <div
+                    class="cds--text-input__field-outer-wrapper"
+                  >
+                    <div
+                      class="cds--text-input__field-wrapper"
+                    >
+                      <input
+                        class="cds--text-input cds--text-input--sm cds--layout--size-sm"
+                        id="clabs--animated-header__ai-prompt-tile--text-input"
+                        placeholder="Start chatting..."
+                        title="Start chatting..."
+                        type="text"
+                        value=""
+                      />
+                      <span
+                        aria-atomic="true"
+                        aria-live="assertive"
+                        class="cds--text-input__counter-alert"
+                        role="alert"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <span
+                  class="cds--popover-container cds--popover--caret cds--popover--high-contrast cds--popover--top-end cds--tooltip cds--icon-tooltip cds--icon-tooltip--disabled"
+                >
+                  <div
+                    class="cds--tooltip-trigger__wrapper"
+                  >
+                    <button
+                      aria-labelledby="tooltip-:rd:"
+                      class="cds--btn--icon-only clabs--animated-header__ai-prompt-tile--icon-button  cds--btn cds--btn--sm cds--layout--size-sm cds--btn--ghost cds--btn--disabled"
+                      disabled=""
+                      type="button"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        fill="currentColor"
+                        focusable="false"
+                        height="16"
+                        preserveAspectRatio="xMidYMid meet"
+                        viewBox="0 0 32 32"
+                        width="16"
+                        xmlns="http://www.w3.org/2000/svg"
+                      >
+                        <path
+                          d="M27.45,15.11l-22-11a1,1,0,0,0-1.08.12,1,1,0,0,0-.33,1L7,16,4,26.74A1,1,0,0,0,5,28a1,1,0,0,0,.45-.11l22-11a1,1,0,0,0,0-1.78Zm-20.9,10L8.76,17H18V15H8.76L6.55,6.89,24.76,16Z"
+                        />
+                      </svg>
+                    </button>
+                  </div>
+                  <span
+                    aria-hidden="true"
+                    class="cds--popover"
+                    id="tooltip-:rd:"
+                    role="tooltip"
+                  >
+                    <span
+                      class="cds--popover-content cds--tooltip-content"
+                    >
+                      Chat in [Product name]
+                    </span>
+                    <span
+                      class="cds--popover-caret"
+                    />
+                  </span>
+                </span>
+              </div>
+              <div
+                class="clabs--animated-header__ai-prompt-tile--footer"
+              >
+                <a
+                  class="cds--btn cds--btn--sm cds--layout--size-sm cds--btn--ghost"
+                  href="#"
+                >
+                  Open 
+                  [Product name]
+                </a>
+              </div>
+            </div>
+          </div>
+          <a
+            class="cds--link clabs--animated-header__tile clabs--animated-header__glass-tile"
+            href="#"
+          >
+            <div
+              class="clabs--animated-header__glass-tile--body false"
+            >
+              <div
+                class="clabs--animated-header__glass-tile--icons"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="var(--cds-icon-secondary)"
+                  focusable="false"
+                  height="24"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 32 32"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M25 12L25 3 23 3 23 5 20 5 20 7 23 7 23 12 20 12 20 14 28 14 28 12 25 12zM8.5 5c1.9299 0 3.5 1.5701 3.5 3.5s-1.5701 3.5-3.5 3.5-3.5-1.5701-3.5-3.5 1.5701-3.5 3.5-3.5m0-2c-3.0376 0-5.5 2.4624-5.5 5.5s2.4624 5.5 5.5 5.5 5.5-2.4624 5.5-5.5-2.4624-5.5-5.5-5.5h0zM8.5 20c1.9299 0 3.5 1.5701 3.5 3.5s-1.5701 3.5-3.5 3.5-3.5-1.5701-3.5-3.5 1.5701-3.5 3.5-3.5m0-2c-3.0376 0-5.5 2.4624-5.5 5.5s2.4624 5.5 5.5 5.5 5.5-2.4624 5.5-5.5-2.4624-5.5-5.5-5.5h0zM23.5 20c1.9299 0 3.5 1.5701 3.5 3.5s-1.5701 3.5-3.5 3.5-3.5-1.5701-3.5-3.5 1.5701-3.5 3.5-3.5m0-2c-3.0376 0-5.5 2.4624-5.5 5.5s2.4624 5.5 5.5 5.5 5.5-2.4624 5.5-5.5-2.4624-5.5-5.5-5.5h0z"
+                  />
+                </svg>
+              </div>
+              <div
+                class="clabs--animated-header__glass-tile--title"
+              >
+                Load data
+              </div>
+              <div
+                class="clabs--animated-header__glass-tile--footer"
+              >
+                <div
+                  class="clabs--animated-header__glass-tile--subtitle"
+                >
+                  with Data explorer
+                </div>
+              </div>
+            </div>
+          </a>
+          <a
+            class="cds--link clabs--animated-header__tile clabs--animated-header__glass-tile"
+            href="#"
+          >
+            <div
+              class="clabs--animated-header__glass-tile--body false"
+            >
+              <div
+                class="clabs--animated-header__glass-tile--icons"
+              >
+                <svg
+                  aria-hidden="true"
+                  fill="var(--cds-icon-secondary)"
+                  focusable="false"
+                  height="24"
+                  preserveAspectRatio="xMidYMid meet"
+                  viewBox="0 0 32 32"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M10.06,17.88A4.25,4.25,0,0,0,11,18a4,4,0,0,0,2.23-.68l3.22,2.87a3.88,3.88,0,0,0-.2,3.17A4,4,0,1,0,22.62,19l2.54-5.09a3.78,3.78,0,0,0,2.91-.53A4,4,0,1,0,23.38,13l-2.54,5.09A3.86,3.86,0,0,0,20,18a4,4,0,0,0-2.23.68l-3.22-2.87a3.88,3.88,0,0,0,.2-3.17A4,4,0,1,0,8.3,16.93L4,25V2H2V28a2,2,0,0,0,2,2H30V28H4.67ZM26,8a2,2,0,1,1-2,2A2,2,0,0,1,26,8ZM22,22a2,2,0,1,1-2-2A2,2,0,0,1,22,22ZM11,12a2,2,0,1,1-2,2A2,2,0,0,1,11,12Z"
+                  />
+                </svg>
+              </div>
+              <div
+                class="clabs--animated-header__glass-tile--title"
+              >
+                Monitor data performance and system capacity
+              </div>
+              <div
+                class="clabs--animated-header__glass-tile--footer"
+              >
+                <div
+                  class="clabs--animated-header__glass-tile--subtitle"
+                >
+                  with Monitoring hub
+                </div>
+              </div>
+            </div>
+          </a>
+        </div>
+      </div>
+      <div
+        class="clabs--animated-header__button-collapse--gradient"
+      />
+      <div
+        class="clabs--animated-header__button-collapse--container"
+      >
+        <button
+          class="cds--btn cds--btn--ghost"
+          id="clabs--animated-header__button-collapse"
+          type="button"
+        >
+          Collapse
+          <svg
+            aria-hidden="true"
+            class="cds--btn__icon"
+            fill="currentColor"
+            focusable="false"
+            height="16"
+            preserveAspectRatio="xMidYMid meet"
+            viewBox="0 0 16 16"
+            width="16"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M8 5L13 10 12.3 10.7 8 6.4 3.7 10.7 3 10z"
+            />
+          </svg>
+        </button>
+      </div>
+    </div>
+  </section>
+</div>
+`;
diff --git a/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx b/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
index e00565b02..2b0a58731 100644
--- a/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
+++ b/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
@@ -16,7 +16,6 @@ import {
   IconButton,
   Tooltip,
   ButtonKind,
-  ButtonKinds,
 } from '@carbon/react';
 import {
   ChevronUp,
@@ -31,18 +30,31 @@ import { BaseTile } from '../Tiles/index';
 
 /** Animated Header */
 
+export interface TasksConfig {
+  type: 'button' | 'dropdown' | string;
+  button?: {
+    href?: string;
+    icon?: any;
+    text?: string;
+    type?: ButtonKind;
+  };
+  dropdown?: {
+    label?: string;
+  };
+}
+
 export interface SelectedWorkspace {
   id: string;
   text: string;
 }
 
 export interface Tile {
-  id: string;
   href: string | null;
-  title: string | null;
-  subtitle: string | null;
+  id: string;
   mainIcon: string | null;
-  secondaryIcon: string | null;
+  secondaryIcon?: string | null;
+  subtitle?: string | null;
+  title: string | null;
 }
 
 export interface TileGroup {
@@ -52,44 +64,42 @@ export interface TileGroup {
 }
 
 export interface AnimatedHeaderProps {
-  name?: string;
+  allTiles: TileGroup[];
+  allWorkspaces?: SelectedWorkspace[];
   description?: string;
-  buttonText?: string;
-  buttonType?: ButtonKind;
-  buttonIcon?: any;
-  headerDropdown?: boolean;
+  headerAnimation?: object;
+  headerStatic?: React.JSX.Element;
   productName?: string;
-  selectedWorkspace?: SelectedWorkspace[] | any;
-  setSelectedWorkspace: (e) => void;
-  allWorkspaces?: SelectedWorkspace[];
   selectedTileGroup: TileGroup[] | any;
+  selectedWorkspace?: SelectedWorkspace | any;
   setSelectedTileGroup: (e) => void;
-  allTiles: TileGroup[];
-  headerAnimation?: object;
-  headerStatic?: React.JSX.Element;
+  setSelectedWorkspace: (e) => void;
+  tasksConfig?: TasksConfig;
+  userName?: string;
+  welcomeText?: string;
+  workspaceLabel?: string;
 }
 
 const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
-  name,
+  allTiles,
+  allWorkspaces,
   description,
-  buttonText,
-  buttonType = 'tertiary',
-  buttonIcon = null,
-  headerDropdown = false,
+  headerAnimation,
+  headerStatic,
   productName = '[Product name]',
-  selectedWorkspace,
-  setSelectedWorkspace,
-  allWorkspaces,
   selectedTileGroup,
+  selectedWorkspace,
   setSelectedTileGroup,
-  allTiles,
-  headerAnimation,
-  headerStatic,
+  setSelectedWorkspace,
+  tasksConfig,
+  userName,
+  welcomeText,
+  workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`,
 }: AnimatedHeaderProps) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header`;
 
-  let animationContainer = createRef<HTMLDivElement>();
+  const animationContainer = createRef<HTMLDivElement>();
   const [open, setOpen] = useState(true);
   const [playing, setPlaying] = useState(true);
   const [headingTextAnimation, setHeadingTextAnimation] = useState('');
@@ -121,7 +131,7 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
   };
 
   useEffect(() => {
-    let animation = lottie.loadAnimation({
+    const animation = lottie.loadAnimation({
       container: animationContainer.current as HTMLDivElement,
       animationData: headerAnimation,
       renderer: 'svg',
@@ -153,7 +163,7 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
       );
     }
 
-    if (!!isReduced) {
+    if (isReduced) {
       // reduced motion on
       animation.addEventListener('DOMLoaded', reducedMotion);
     } else {
@@ -165,7 +175,12 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
       // Run Looped Animation
       animation.addEventListener('complete', loop);
     }
-  }, []);
+    return () => {
+      animation?.removeEventListener('DOMLoaded', reducedMotion);
+      animation?.removeEventListener('DOMLoaded', load);
+      animation?.removeEventListener('complete', loop);
+    };
+  }, [animationContainer, headerAnimation, isReduced]);
 
   return (
     <section className={`${blockClass} ${!open && collapsed}`}>
@@ -192,17 +207,23 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
         </div>
 
         <Column sm={4} md={8} lg={16}>
-          <Tooltip align="bottom" label={`Welcome, ${name}`}>
+          <Tooltip align="bottom" label={`${welcomeText}, ${userName}`}>
             <h1 className={`${blockClass}__heading ${headingTextAnimation}`}>
               <span className={`${blockClass}__heading-welcome`}>
-                Welcome,{' '}
+                {welcomeText},{' '}
               </span>
-              <span className={`${blockClass}__heading-name`}>{name}</span>
+              <span className={`${blockClass}__heading-name`}>{userName}</span>
             </h1>
           </Tooltip>
         </Column>
 
-        {(description || buttonText || headerDropdown) && (
+        {(description ||
+          (tasksConfig &&
+            tasksConfig.type === 'button' &&
+            tasksConfig.button?.text) ||
+          (tasksConfig &&
+            tasksConfig.type === 'dropdown' &&
+            tasksConfig.dropdown?.label)) && (
           <Column
             sm={4}
             md={8}
@@ -216,33 +237,35 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
               </Tooltip>
             )}
 
-            {buttonText && (
+            {tasksConfig?.button?.text && (
               <Button
                 className={`${blockClass}__button`}
-                kind={buttonType}
-                renderIcon={buttonIcon}>
-                {buttonText}
+                kind={tasksConfig.button.type}
+                renderIcon={tasksConfig.button.icon}
+                href={tasksConfig.button.href}>
+                {tasksConfig.button.text}
               </Button>
             )}
 
-            {!buttonText && headerDropdown && allTiles && (
-              <div className={`${blockClass}__header-dropdown--container`}>
-                <Dropdown
-                  id={`${blockClass}__header-dropdown`}
-                  className={`${blockClass}__header-dropdown`}
-                  size="md"
-                  autoAlign
-                  titleText="Label"
-                  initialSelectedItem={allTiles[0]}
-                  label={allTiles[0].name || 'Select an option below'}
-                  hideLabel
-                  type="inline"
-                  items={allTiles}
-                  itemToString={(item) => (item ? item.name : '')}
-                  onChange={(e) => setSelectedTileGroup(e)}
-                />
-              </div>
-            )}
+            {!tasksConfig?.button?.text &&
+              tasksConfig &&
+              tasksConfig.type === 'dropdown' &&
+              allTiles && (
+                <div className={`${blockClass}__header-dropdown--container`}>
+                  <Dropdown
+                    id={`${blockClass}__header-dropdown`}
+                    className={`${blockClass}__header-dropdown`}
+                    size="md"
+                    titleText="Label"
+                    label={tasksConfig.dropdown?.label || allTiles[0].name}
+                    hideLabel
+                    type="inline"
+                    items={allTiles}
+                    itemToString={(item) => (item ? item.name : '')}
+                    onChange={(e) => setSelectedTileGroup(e)}
+                  />
+                </div>
+              )}
           </Column>
         )}
 
@@ -258,7 +281,7 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
                   className={`${blockClass}__workspace`}
                   size="sm"
                   titleText="Label"
-                  label={`Open in: ${name}'s workspace` || 'Select a workspace'}
+                  label={workspaceLabel}
                   hideLabel
                   type="inline"
                   items={allWorkspaces}
@@ -319,47 +342,47 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
 (AnimatedHeader as React.FC).displayName = 'Animated Header';
 (AnimatedHeader as React.FC).propTypes = {
   /**
-   * Specify an optional className to be added to your Animated Header
+   * Array of each tile group setup
    */
-  className: PropTypes.string,
+  allTiles: PropTypes.arrayOf(PropTypes.object),
 
   /**
-   * Specify the current username of active user
+   * Array of all workspace options
    */
-  name: PropTypes.string,
+  allWorkspaces: PropTypes.arrayOf(PropTypes.object),
 
   /**
-   * Provide short sentence in max. 3 lines related to product context
+   * Specify an optional className to be added to your Animated Header
    */
-  description: PropTypes.string,
+  className: PropTypes.string,
 
   /**
-   * (optional), Provide content that needs highest attention from
-   * the user or content that triggers an action and allow users to
-   * directly start working and gain value (within one click)
+   * Provide short sentence in max. 3 lines related to product context
    */
-  buttonText: PropTypes.string,
+  description: PropTypes.string,
 
   /**
-   * Specify the carbon button type
+   * In-product imagery / lottie animation (.json) dim. 1312 x 738
+   * (to update headerAnimation content storybook requires remount in toolbar)
    */
-  buttonType: ButtonKinds,
+  headerAnimation: PropTypes.object,
 
   /**
-   * (optional), Provide the renderIcon used in the button
-   * ex. Launch, Add, ect.
+   * In-product imagery / static imagery dim. 1312 x 738
+   * Only active when headerAnimation is not in use
    */
-  buttonIcon: PropTypes.any,
+  headerStatic: PropTypes.object,
 
   /**
-   * Header dropdown menu when button/buttonText is not in use
+   * Provide current product name
    */
-  headerDropdown: PropTypes.bool,
+  productName: PropTypes.string,
 
   /**
-   * Provide current product name
+   * The tile group that is active in the header
+   * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
    */
-  productName: PropTypes.string,
+  selectedTileGroup: PropTypes.object,
 
   /**
    * Object containing workspace selection
@@ -368,42 +391,36 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
   selectedWorkspace: PropTypes.object,
 
   /**
-   * Provide function to be called when switching workspace selection
-   */
-  setSelectedWorkspace: PropTypes.func,
-
-  /**
-   * Array of all workspace options
+   * Provide function to be called when switching selected tile group
    */
-  allWorkspaces: PropTypes.arrayOf(PropTypes.object),
+  setSelectedTileGroup: PropTypes.func,
 
   /**
-   * The tile group that is active in the header
-   * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
+   * Provide function to be called when switching workspace selection
    */
-  selectedTileGroup: PropTypes.object,
+  setSelectedWorkspace: PropTypes.func,
 
   /**
-   * Provide function to be called when switching selected tile group
+   * Configuration for Carbon button or dropdown menu in header. Customized
+   * tasks are used to allow users that have multiple roles and permissions
+   * to experience better tailored content based on their need.
    */
-  setSelectedTileGroup: PropTypes.func,
+  tasksConfig: PropTypes.object,
 
   /**
-   * Array of each tile group setup
+   * Specify the current username of active user
    */
-  allTiles: PropTypes.arrayOf(PropTypes.object),
+  userName: PropTypes.string,
 
   /**
-   * In-product imagery / lottie animation (.json) dim. 1312 x 738
-   * (to update headerAnimation content storybook requires remount in toolbar)
+   * Specify the current welcome text on the header
    */
-  headerAnimation: PropTypes.object,
+  welcomeText: PropTypes.string,
 
   /**
-   * In-product imagery / static imagery dim. 1312 x 738
-   * Only active when headerAnimation is not in use
+   * Specify the default workspace label above the tiles
    */
-  headerStatic: PropTypes.object,
+  workspaceLabel: PropTypes.string,
 };
 
 export default AnimatedHeader;
diff --git a/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/animated-header.scss b/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/animated-header.scss
index d129733f5..a0a5d651b 100644
--- a/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/animated-header.scss
+++ b/packages/react/src/components/AnimatedHeader/components/AnimatedHeader/animated-header.scss
@@ -16,20 +16,24 @@
 
 $prefix: 'clabs--animated-header' !default;
 
+:root {
+  @include theme(themes.$g10);
+}
+
 [data-carbon-theme='white'] {
-  @include theme(themes.$white, true);
+  @include theme(themes.$white);
 }
 
 [data-carbon-theme='g10'] {
-  @include theme(themes.$g10, true);
+  @include theme(themes.$g10);
 }
 
 [data-carbon-theme='g90'] {
-  @include theme(themes.$g90, true);
+  @include theme(themes.$g90);
 }
 
 [data-carbon-theme='g100'] {
-  @include theme(themes.$g100, true);
+  @include theme(themes.$g100);
 }
 
 body {
@@ -42,9 +46,9 @@ body {
 .#{$prefix} {
   position: relative;
   display: flex;
-  overflow: hidden;
+  overflow: visible;
   background: $background;
-  inline-size: 100vw;
+  inline-size: 100%;
   max-block-size: 90vh;
   outline: 1px solid transparent;
   padding-block: 0 $spacing-10;
@@ -58,6 +62,7 @@ body {
 .#{$prefix}__static--container {
   position: absolute;
   display: flex;
+  overflow: hidden;
   justify-content: flex-end;
 
   block-size: 100%;
@@ -125,6 +130,7 @@ body {
   padding-inline: var(--cds-grid-margin);
 }
 
+:root .#{$prefix}__container--gradient,
 [data-carbon-theme='white'] .#{$prefix}__container--gradient,
 [data-carbon-theme='g10'] .#{$prefix}__container--gradient {
   background: linear-gradient(0deg, #e0e0e0bf 0%, transparent 100%);
@@ -295,6 +301,7 @@ body {
 .#{$prefix}__lottie-animation--container {
   position: absolute;
   display: flex;
+  overflow: hidden;
   justify-content: flex-end;
 
   block-size: 100%;
@@ -344,6 +351,7 @@ body {
   inset-inline-end: 0;
 }
 
+:root .#{$prefix}__button-collapse--gradient,
 [data-carbon-theme='white'] .#{$prefix}__button-collapse--gradient,
 [data-carbon-theme='g10'] .#{$prefix}__button-collapse--gradient {
   background: radial-gradient(
@@ -372,6 +380,7 @@ body {
 }
 
 .#{$prefix}--collapsed {
+  overflow: hidden;
   padding: 0;
   max-block-size: $spacing-09;
   outline: 1px solid $border-subtle-00;
@@ -395,10 +404,6 @@ body {
     display: none;
   }
 
-  .#{$prefix}__workspace {
-    margin-block-start: $spacing-06;
-  }
-
   .#{$prefix}__content {
     display: none;
   }
@@ -437,6 +442,7 @@ body {
 
   .#{$prefix}__content {
     display: flex;
+    margin-block-start: $spacing-06;
   }
 
   .#{$prefix}__button-collapse--container .cds--popover-container {
@@ -493,7 +499,7 @@ body {
     background: linear-gradient(90deg, $background 25%, transparent 75%);
   }
 
-  .#{$prefix}__workspace {
+  .#{$prefix}__content {
     margin-block-start: 0;
   }
 
diff --git a/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/AIPromptTile.tsx b/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/AIPromptTile.tsx
index dc1d31ab2..c96913256 100644
--- a/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/AIPromptTile.tsx
+++ b/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/AIPromptTile.tsx
@@ -14,21 +14,21 @@ import { usePrefix } from '@carbon-labs/utilities/es/index.js';
 /** Primary UI component for user interaction */
 
 interface AIPromptTileProps {
-  id?: string;
   href?: string;
-  open?: boolean;
+  id?: string;
   mainIcon?: string;
-  title?: string;
+  open?: boolean;
   productName?: string;
+  title?: string;
 }
 
 export const AIPromptTile: React.FC<AIPromptTileProps> = ({
-  id,
   href,
-  open,
+  id,
   mainIcon,
-  title,
+  open,
   productName,
+  title,
 }: AIPromptTileProps) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
@@ -44,7 +44,9 @@ export const AIPromptTile: React.FC<AIPromptTileProps> = ({
 
   const openInNewTab = (url) => {
     const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-    if (newWindow) newWindow.opener = null;
+    if (newWindow) {
+      newWindow.opener = null;
+    }
   };
 
   const handleTextInputKeyDown = (event) => {
diff --git a/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/ai-prompt-tile.scss b/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/ai-prompt-tile.scss
index dfea03c87..25ee820e8 100644
--- a/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/ai-prompt-tile.scss
+++ b/packages/react/src/components/AnimatedHeader/components/Tiles/AIPromptTile/ai-prompt-tile.scss
@@ -19,7 +19,7 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   display: flex;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
-  min-block-size: 176px;
+  min-block-size: 192px;
   text-decoration: none;
 }
 
@@ -35,14 +35,14 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   flex: 1;
   flex-direction: column;
   justify-content: flex-start;
-  padding: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
+  padding: $spacing-05;
   background-color: transparent;
   color: $text-primary;
-  gap: $spacing-05;
   opacity: 1;
   transition: opacity 500ms linear;
 }
 
+:root .#{$prefix}--body::before,
 [data-carbon-theme='white'] .#{$prefix}--body::before,
 [data-carbon-theme='g10'] .#{$prefix}--body::before {
   background-color: $layer-01;
@@ -101,6 +101,7 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   z-index: 3;
   display: flex;
   justify-content: space-between;
+  margin-block-end: $spacing-05;
 }
 
 .#{$prefix}--title {
@@ -127,7 +128,12 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   z-index: 3;
   display: flex;
   justify-content: flex-end;
-  gap: 10px;
+  margin-block: $spacing-03 calc(-1 * $spacing-05);
+  margin-inline-end: calc(-1 * $spacing-05);
+}
+
+.#{$prefix}--footer > a {
+  padding: 14px $spacing-05;
 }
 
 .#{$prefix}--subtitle {
@@ -144,6 +150,7 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   border: 1px solid $border-subtle-01;
   border-radius: 8px;
   background-color: $layer-01;
+  margin-block-start: $spacing-06;
   transition: border 200ms motion.motion(standard, expressive);
 }
 
diff --git a/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/GlassTile.tsx b/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/GlassTile.tsx
index bf0c79dd5..7b86d7ac0 100644
--- a/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/GlassTile.tsx
+++ b/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/GlassTile.tsx
@@ -14,23 +14,23 @@ import { usePrefix } from '@carbon-labs/utilities/es/index.js';
 /** Primary UI component for user interaction */
 
 interface GlassTileProps {
-  id?: string;
   href?: string;
-  open?: boolean;
+  id?: string;
   mainIcon?: string;
+  open?: boolean;
   secondaryIcon?: string;
-  title?: string;
   subtitle?: string;
+  title?: string;
 }
 
 export const GlassTile: React.FC<GlassTileProps> = ({
-  id,
   href,
-  open,
+  id,
   mainIcon,
+  open,
   secondaryIcon,
-  title,
   subtitle,
+  title,
 }: GlassTileProps) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
diff --git a/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/glass-tile.scss b/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/glass-tile.scss
index 9a57fa594..bf7b66463 100644
--- a/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/glass-tile.scss
+++ b/packages/react/src/components/AnimatedHeader/components/Tiles/GlassTile/glass-tile.scss
@@ -19,7 +19,7 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   display: flex;
   -webkit-backdrop-filter: blur(3px);
   backdrop-filter: blur(3px);
-  min-block-size: 176px;
+  min-block-size: 192px;
   text-decoration: none;
 }
 
@@ -39,7 +39,6 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   background-color: transparent;
   color: $text-primary;
   cursor: pointer;
-  gap: $spacing-05;
   opacity: 1;
   transition: opacity 500ms linear;
 }
@@ -48,6 +47,7 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   opacity: 0;
 }
 
+:root .#{$prefix}--body::before,
 [data-carbon-theme='white'] .#{$prefix}--body::before,
 [data-carbon-theme='g10'] .#{$prefix}--body::before {
   background-color: $layer-01;
@@ -75,6 +75,8 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   position: relative;
   display: flex;
   justify-content: space-between;
+
+  margin-block-end: $spacing-05;
 }
 
 .#{$prefix}--title {
diff --git a/packages/react/src/components/AnimatedHeader/data/index.jsx b/packages/react/src/components/AnimatedHeader/data/index.jsx
index 7aac68585..d64c46e23 100644
--- a/packages/react/src/components/AnimatedHeader/data/index.jsx
+++ b/packages/react/src/components/AnimatedHeader/data/index.jsx
@@ -6,6 +6,10 @@
  * 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 { Add } from '@carbon/react/icons';
+import { ButtonKinds } from '@carbon/react';
+
 export const workspaceData = [
   {
     id: 'workspace-1',
@@ -316,3 +320,20 @@ export const headerTiles = [
     ],
   },
 ];
+
+export const tasksConfigButton = {
+  type: 'button',
+  button: {
+    href: '#',
+    icon: Add,
+    text: 'Action button',
+    type: ButtonKinds[7],
+  },
+};
+
+export const tasksConfigDropdown = {
+  type: 'dropdown',
+  dropdown: {
+    label: 'Customize your journey',
+  },
+};


Reviews:
user: login: IronZDev
body: Nice job! I have added few additional suggestions, please take a look.
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-20T16:21:57Z
user: login: glapadre
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T15:43:34Z
user: login: glapadre
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-24T16:33:09Z
user: login: IronZDev
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-26T12:21:45Z
user: login: mikeolasov
state: APPROVED
author_association: NONE
submitted_at: 2025-03-26T18:01:00Z

Review comments:
diff_hunk: @@ -258,7 +259,9 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
                   className={`${blockClass}__workspace`}
                   size="sm"
                   titleText="Label"
-                  label={`Open in: ${name}'s workspace` || 'Select a workspace'}
+                  label={
+                    `Open in: ${userName}'s workspace` || 'Select a workspace'
+                  }
path: packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
user: login: IronZDev
body: What do you think about exporting this label as prop as well? It will solve the internationalisation problems for it.
created_at: 2025-03-20T16:14:48Z
author_association: CONTRIBUTOR
diff_hunk: @@ -231,7 +233,6 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
                   id={`${blockClass}__header-dropdown`}
                   className={`${blockClass}__header-dropdown`}
                   size="md"
-                  autoAlign
                   titleText="Label"
                   initialSelectedItem={allTiles[0]}
                   label={allTiles[0].name || 'Select an option below'}
path: packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
user: login: IronZDev
body: What do you think about exporting this label as prop as well? It will solve the internationalisation problems for it and give move flexibility. We have a requirement to have a custom label non-dependant on first tile name.
created_at: 2025-03-20T16:15:32Z
author_association: CONTRIBUTOR
diff_hunk: @@ -165,7 +167,7 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
       // Run Looped Animation
       animation.addEventListener('complete', loop);
     }
-  }, []);
+  }, [animationContainer, headerAnimation, isReduced]);
path: packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
user: login: IronZDev
body: I believe we should add a cleanup function here to make sure there are no dangling eventListeners.
```suggestion
    return () => {
      animation?.removeEventListener('DOMLoaded', reducedMotion);
      animation?.removeEventListener('DOMLoaded', load);
      animation?.removeEventListener('complete', loop);
    } 
  }, [animationContainer, headerAnimation, isReduced]);
```
created_at: 2025-03-20T16:19:33Z
author_association: CONTRIBUTOR
diff_hunk: @@ -258,7 +259,9 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
                   className={`${blockClass}__workspace`}
                   size="sm"
                   titleText="Label"
-                  label={`Open in: ${name}'s workspace` || 'Select a workspace'}
+                  label={
+                    `Open in: ${userName}'s workspace` || 'Select a workspace'
+                  }
path: packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
user: login: glapadre
body: No issue with doing this to fix the internationalization issue, although the designs recommend starting with a similar text format of `Open in: ${userName}'s workspace` depending on the language. Once a item is clicked from the dropdown it is removed essentially acting as just the placeholder. 
created_at: 2025-03-24T15:43:34Z
author_association: CONTRIBUTOR
diff_hunk: @@ -231,7 +233,6 @@ const AnimatedHeader: React.FC<AnimatedHeaderProps> = ({
                   id={`${blockClass}__header-dropdown`}
                   className={`${blockClass}__header-dropdown`}
                   size="md"
-                  autoAlign
                   titleText="Label"
                   initialSelectedItem={allTiles[0]}
                   label={allTiles[0].name || 'Select an option below'}
path: packages/react/src/components/AnimatedHeader/components/AnimatedHeader/AnimatedHeader.tsx
user: login: glapadre
body: Can you show an example where the label wouldn't represent the Tile Group that is selected? 

I just want to understand logically how this would work. In the current setup, the Dropdown label represents the tiles/items selected to the right. 

Since the labels are coming from the Tile data there should be no issues with internationalization since the data is directly coming from the end user. The 'Select an option below' is the backup option which is English only currently.
created_at: 2025-03-24T16:33:09Z
author_association: CONTRIBUTOR

PR comments:
user: login: netlify[bot]
created_at: 2025-03-17T20:13:31Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *carbon-labs-web-components* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 3e563444712eb240f3a13fde71e24bfd69842f73 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/carbon-labs-web-components/deploys/67e43a6cc4aef40008fb25fa |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-523--carbon-labs-web-components.netlify.app](https://deploy-preview-523--carbon-labs-web-components.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTUyMy0tY2FyYm9uLWxhYnMtd2ViLWNvbXBvbmVudHMubmV0bGlmeS5hcHAifQ.5-mbdnYD9GnB7jSxvB0Ns_UUND_OARY1i5GgBam3oEo)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [carbon-labs-web-components Preview](https://deploy-preview-523--carbon-labs-web-components.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/carbon-labs-web-components/configuration/notifications#deploy-webhooks)._
author_association: NONE
user: login: netlify[bot]
created_at: 2025-03-17T20:13:31Z
body: ### <span aria-hidden="true">✅</span> Deploy Preview for *carbon-labs-react* ready!


|  Name | Link |
|:-:|------------------------|
|<span aria-hidden="true">🔨</span> Latest commit | 3e563444712eb240f3a13fde71e24bfd69842f73 |
|<span aria-hidden="true">🔍</span> Latest deploy log | https://app.netlify.com/sites/carbon-labs-react/deploys/67e43a6c59421c0008728846 |
|<span aria-hidden="true">😎</span> Deploy Preview | [https://deploy-preview-523--carbon-labs-react.netlify.app](https://deploy-preview-523--carbon-labs-react.netlify.app) |
|<span aria-hidden="true">📱</span> Preview on mobile | <details><summary> Toggle QR Code... </summary><br /><br />![QR Code](https://app.netlify.com/qr-code/eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ1cmwiOiJodHRwczovL2RlcGxveS1wcmV2aWV3LTUyMy0tY2FyYm9uLWxhYnMtcmVhY3QubmV0bGlmeS5hcHAifQ.DhC2iPlSVn3nN-_w-zSPG5icNI4c6evT0gZdqe8qDLg)<br /><br />_Use your smartphone camera to open QR code link._</details> |
---
<!-- [carbon-labs-react Preview](https://deploy-preview-523--carbon-labs-react.netlify.app) -->
_To edit notification comments on pull requests, go to your [Netlify site configuration](https://app.netlify.com/sites/carbon-labs-react/configuration/notifications#deploy-webhooks)._
author_association: NONE