@carbon-labs/react-animated-header 0.2.0 → 0.4.0

package/es/__stories__/data/index.d.ts

@@ -1,12 +1,4 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2025
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-export const tileDropdownData: {
+export const workspaceData: {
     id: string;
     text: string;
 }[];
@@ -45,3 +37,21 @@ export const headerTiles: ({
         subtitle?: undefined;
     })[];
 })[];
+export namespace tasksConfigButton {
+    let type: string;
+    namespace button {
+        export let href: string;
+        export { Add as icon };
+        export let text: string;
+        let type_1: "tertiary";
+        export { type_1 as type };
+    }
+}
+export namespace tasksConfigDropdown {
+    let type_2: string;
+    export { type_2 as type };
+    export namespace dropdown {
+        let label: string;
+    }
+}
+import { Add } from '@carbon/react/icons';

package/es/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -1,11 +1,29 @@
 import React from 'react';
 import { ButtonKind } from '@carbon/react';
 /** 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 {
+    href: string | null;
     id: string;
-    href: string;
-    title: string;
-    mainIcon: string;
+    mainIcon: string | null;
+    secondaryIcon?: string | null;
+    subtitle?: string | null;
+    title: string | null;
 }
 export interface TileGroup {
     id: number;
@@ -13,19 +31,20 @@ export interface TileGroup {
     tiles: Tile[];
 }
 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;
-    tileDropdownItems?: Array<object>;
     selectedTileGroup: TileGroup[] | any;
+    selectedWorkspace?: SelectedWorkspace | any;
     setSelectedTileGroup: (e: any) => void;
-    allTiles: TileGroup[];
-    headerAnimation?: object;
-    headerStatic?: React.JSX.Element;
+    setSelectedWorkspace: (e: any) => void;
+    tasksConfig?: TasksConfig;
+    userName?: string;
+    welcomeText?: string;
+    workspaceLabel?: string;
 }
 declare const AnimatedHeader: React.FC<AnimatedHeaderProps>;
 export default AnimatedHeader;

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -7,7 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React, { useState, useEffect, createRef } from 'react';
-import { ButtonKinds, Grid, Column, Tooltip, Button, Dropdown, IconButton } from '@carbon/react';
+import { Grid, Column, Tooltip, Button, Dropdown, IconButton } from '@carbon/react';
 import lottie from '../../_virtual/lottie.js';
 import { usePrefix } from '../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
 import { BaseTile } from '../Tiles/BaseTile/BaseTile.js';
@@ -21,23 +21,24 @@ var _PauseFilled, _PlayFilledAlt;
 
 const AnimatedHeader = _ref => {
   let {
-    name,
+    allTiles,
+    allWorkspaces,
     description,
-    buttonText,
-    buttonType = 'tertiary',
-    buttonIcon = null,
-    headerDropdown = false,
+    headerAnimation,
+    headerStatic,
     productName = '[Product name]',
-    tileDropdownItems,
     selectedTileGroup,
+    selectedWorkspace,
     setSelectedTileGroup,
-    allTiles,
-    headerAnimation,
-    headerStatic
+    setSelectedWorkspace,
+    tasksConfig,
+    userName,
+    welcomeText,
+    workspaceLabel = `Open in: ${userName}'s workspace` || `Select a workspace`
   } = _ref;
   const prefix = usePrefix();
-  const blockClass = `${prefix}-animated-header`;
-  let animationContainer = /*#__PURE__*/createRef();
+  const blockClass = `${prefix}--animated-header`;
+  const animationContainer = /*#__PURE__*/createRef();
   const [open, setOpen] = useState(true);
   const [playing, setPlaying] = useState(true);
   const [headingTextAnimation, setHeadingTextAnimation] = useState('');
@@ -61,7 +62,7 @@ const AnimatedHeader = _ref => {
     setPlaying(!playing);
   };
   useEffect(() => {
-    let animation = lottie.loadAnimation({
+    const animation = lottie.loadAnimation({
       container: animationContainer.current,
       animationData: headerAnimation,
       renderer: 'svg',
@@ -82,7 +83,7 @@ const AnimatedHeader = _ref => {
       animation.setSpeed(lottieLoopSpeed);
       animation.playSegments([animationData.markers.at(1).tm, animationData.op], true);
     }
-    if (!!isReduced) {
+    if (isReduced) {
       // reduced motion on
       animation.addEventListener('DOMLoaded', reducedMotion);
     } else {
@@ -94,7 +95,12 @@ const AnimatedHeader = _ref => {
       // Run Looped Animation
       animation.addEventListener('complete', loop);
     }
-  }, []);
+    return () => {
+      animation?.removeEventListener('DOMLoaded', reducedMotion);
+      animation?.removeEventListener('DOMLoaded', load);
+      animation?.removeEventListener('complete', loop);
+    };
+  }, [animationContainer, headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("section", {
     className: `${blockClass} ${!open && collapsed}`
   }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
@@ -119,14 +125,14 @@ const AnimatedHeader = _ref => {
     lg: 16
   }, /*#__PURE__*/React.createElement(Tooltip, {
     align: "bottom",
-    label: `Welcome, ${name}`
+    label: `${welcomeText}, ${userName}`
   }, /*#__PURE__*/React.createElement("h1", {
     className: `${blockClass}__heading ${headingTextAnimation}`
   }, /*#__PURE__*/React.createElement("span", {
     className: `${blockClass}__heading-welcome`
-  }, "Welcome,", ' '), /*#__PURE__*/React.createElement("span", {
+  }, welcomeText, ",", ' '), /*#__PURE__*/React.createElement("span", {
     className: `${blockClass}__heading-name`
-  }, name)))), (description || buttonText || headerDropdown) && /*#__PURE__*/React.createElement(Column, {
+  }, userName)))), (description || tasksConfig && tasksConfig.type === 'button' && tasksConfig.button?.text || tasksConfig && tasksConfig.type === 'dropdown' && tasksConfig.dropdown?.label) && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 4,
@@ -136,40 +142,42 @@ const AnimatedHeader = _ref => {
     label: description
   }, /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`
-  }, description)), buttonText && /*#__PURE__*/React.createElement(Button, {
+  }, description)), tasksConfig?.button?.text && /*#__PURE__*/React.createElement(Button, {
     className: `${blockClass}__button`,
-    kind: buttonType,
-    renderIcon: buttonIcon
-  }, buttonText), !buttonText && headerDropdown && allTiles && /*#__PURE__*/React.createElement(Dropdown, {
+    kind: tasksConfig.button.type,
+    renderIcon: tasksConfig.button.icon,
+    href: tasksConfig.button.href
+  }, tasksConfig.button.text), !tasksConfig?.button?.text && tasksConfig && tasksConfig.type === 'dropdown' && allTiles && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__header-dropdown--container`
+  }, /*#__PURE__*/React.createElement(Dropdown, {
     id: `${blockClass}__header-dropdown`,
     className: `${blockClass}__header-dropdown`,
     size: "md",
-    autoAlign: true,
     titleText: "Label",
-    initialSelectedItem: allTiles[0],
-    label: allTiles[0].name,
+    label: tasksConfig.dropdown?.label || allTiles[0].name,
     hideLabel: true,
     type: "inline",
     items: allTiles,
     itemToString: item => item ? item.name : '',
     onChange: e => setSelectedTileGroup(e)
-  })), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
+  }))), selectedTileGroup && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 12,
     className: `${blockClass}__content`
-  }, tileDropdownItems && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__tile-dropdown--container ${!open && contentCollapsed}`
+  }, allWorkspaces && /*#__PURE__*/React.createElement("div", {
+    className: `${blockClass}__workspace--container ${!open && contentCollapsed}`
   }, /*#__PURE__*/React.createElement(Dropdown, {
-    id: `${blockClass}__tile-dropdown`,
-    className: `${blockClass}__tile-dropdown`,
+    id: `${blockClass}__workspace`,
+    className: `${blockClass}__workspace`,
     size: "sm",
     titleText: "Label",
-    label: `Open in: ${name}'s sandbox`,
+    label: workspaceLabel,
     hideLabel: true,
     type: "inline",
-    items: tileDropdownItems,
-    itemToString: item => item ? item['text'] : ''
+    items: allWorkspaces,
+    itemToString: item => item ? item['text'] : '',
+    onChange: e => setSelectedWorkspace(e)
   })), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
   }, selectedTileGroup.tiles.map(tile => {
@@ -210,68 +218,71 @@ const AnimatedHeader = _ref => {
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {
   /**
-   * Specify an optional className to be added to your Animated Header
-   */
-  className: PropTypes.string,
-  /**
-   * Specify the current username of active user
+   * Array of each tile group setup
    */
-  name: PropTypes.string,
+  allTiles: PropTypes.arrayOf(PropTypes.object),
   /**
-   * Provide short sentence in max. 3 lines related to product context
+   * Array of all workspace options
    */
-  description: PropTypes.string,
+  allWorkspaces: PropTypes.arrayOf(PropTypes.object),
   /**
-   * (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)
+   * Specify an optional className to be added to your Animated Header
    */
-  buttonText: PropTypes.string,
+  className: PropTypes.string,
   /**
-   * Specify the carbon button type
+   * Provide short sentence in max. 3 lines related to product context
    */
-  buttonType: ButtonKinds,
+  description: PropTypes.string,
   /**
-   * (optional), Provide the renderIcon used in the button
-   * ex. Launch, Add, ect.
+   * In-product imagery / lottie animation (.json) dim. 1312 x 738
+   * (to update headerAnimation content storybook requires remount in toolbar)
    */
-  buttonIcon: PropTypes.any,
+  headerAnimation: PropTypes.object,
   /**
-   * Header dropdown menu when button/buttonText is not in use
+   * In-product imagery / static imagery dim. 1312 x 738
+   * Only active when headerAnimation is not in use
    */
-  headerDropdown: PropTypes.bool,
+  headerStatic: PropTypes.object,
   /**
    * Provide current product name
    */
   productName: PropTypes.string,
-  /**
-   * Object containing dropdown items
-   * `Open in: "_"`
-   */
-  tileDropdownItems: PropTypes.arrayOf(PropTypes.object),
   /**
    * The tile group that is active in the header
    * ex. "AI Chat Tile w/ two glass tiles", "Four glass tiles", ect.
    */
   selectedTileGroup: PropTypes.object,
+  /**
+   * Object containing workspace selection
+   * `Open in: "_"`
+   */
+  selectedWorkspace: PropTypes.object,
   /**
    * Provide function to be called when switching selected tile group
    */
   setSelectedTileGroup: PropTypes.func,
   /**
-   * Array of each tile group setup
+   * Provide function to be called when switching workspace selection
    */
-  allTiles: PropTypes.arrayOf(PropTypes.object),
+  setSelectedWorkspace: PropTypes.func,
   /**
-   * In-product imagery / lottie animation (.json) dim. 1312 x 738
-   * (to update headerAnimation content storybook requires remount in toolbar)
+   * 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.
    */
-  headerAnimation: PropTypes.object,
+  tasksConfig: PropTypes.object,
   /**
-   * In-product imagery / static imagery dim. 1312 x 738
-   * Only active when headerAnimation is not in use
+   * Specify the current username of active user
+   */
+  userName: PropTypes.string,
+  /**
+   * Specify the current welcome text on the header
+   */
+  welcomeText: PropTypes.string,
+  /**
+   * Specify the default workspace label above the tiles
    */
-  headerStatic: PropTypes.object
+  workspaceLabel: PropTypes.string
 };
 
 export { AnimatedHeader as default };

package/es/components/Tiles/AIPromptTile/AIPromptTile.d.ts

@@ -9,12 +9,12 @@
 import React from 'react';
 /** 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 declare const AIPromptTile: React.FC<AIPromptTileProps>;
 export {};

package/es/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -9,7 +9,7 @@ import React, { useState } from 'react';
 import { AILabel, TextInput, IconButton, Button } from '@carbon/react';
 import * as index from '../../../node_modules/@carbon/icons-react/es/index.js';
 import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePrefix.js';
-import { Send } from '../../../node_modules/@carbon/icons-react/es/generated/bucket-14.js';
+import { Send } from '../../../node_modules/@carbon/icons-react/es/generated/bucket-15.js';
 
 var _AILabel;
 
@@ -17,15 +17,15 @@ var _AILabel;
 
 const AIPromptTile = _ref => {
   let {
-    id,
     href,
-    open,
+    id,
     mainIcon,
-    title,
-    productName
+    open,
+    productName,
+    title
   } = _ref;
   const prefix = usePrefix();
-  const blockClass = `${prefix}-animated-header__ai-prompt-tile`;
+  const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
   const collapsed = `${blockClass}--collapsed`;
   const [textInput, setTextInput] = useState('');
   const MainIcon = mainIcon ? index[mainIcon] : null;
@@ -35,7 +35,9 @@ const AIPromptTile = _ref => {
   };
   const openInNewTab = url => {
     const newWindow = window.open(url, '_blank', 'noopener,noreferrer');
-    if (newWindow) newWindow.opener = null;
+    if (newWindow) {
+      newWindow.opener = null;
+    }
   };
   const handleTextInputKeyDown = event => {
     if (event.key === 'Enter') {
@@ -45,7 +47,7 @@ const AIPromptTile = _ref => {
   };
   return /*#__PURE__*/React.createElement("div", {
     id: `${blockClass}`,
-    className: `${prefix}-animated-header__tile ${blockClass}`,
+    className: `${prefix}--animated-header__tile ${blockClass}`,
     key: id
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body ${!open && collapsed}`

package/es/components/Tiles/BaseTile/BaseTile.d.ts

@@ -15,8 +15,8 @@ interface BaseTileProps {
     mainIcon?: string;
     secondaryIcon?: string;
     title?: string;
-    productName?: string;
     subtitle?: string;
+    productName?: string;
 }
 export declare const BaseTile: React.FC<BaseTileProps>;
 export {};

package/es/components/Tiles/BaseTile/BaseTile.js

@@ -19,8 +19,8 @@ const BaseTile = _ref => {
     mainIcon,
     secondaryIcon,
     title,
-    productName,
-    subtitle
+    subtitle,
+    productName
   } = _ref;
   const props = {
     id,
@@ -29,8 +29,8 @@ const BaseTile = _ref => {
     mainIcon,
     secondaryIcon,
     title,
-    productName,
-    subtitle
+    subtitle,
+    productName
   };
   const tile = id === 'ai-tile' ? /*#__PURE__*/React.createElement(AIPromptTile, props) : /*#__PURE__*/React.createElement(GlassTile, props);
   return tile;

package/es/components/Tiles/GlassTile/GlassTile.d.ts

@@ -9,13 +9,13 @@
 import React from 'react';
 /** 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 declare const GlassTile: React.FC<GlassTileProps>;
 export {};

package/es/components/Tiles/GlassTile/GlassTile.js

@@ -14,21 +14,21 @@ import { usePrefix } from '../../../node_modules/@carbon-labs/utilities/es/usePr
 
 const GlassTile = _ref => {
   let {
-    id,
     href,
-    open,
+    id,
     mainIcon,
+    open,
     secondaryIcon,
-    title,
-    subtitle
+    subtitle,
+    title
   } = _ref;
   const prefix = usePrefix();
-  const blockClass = `${prefix}-animated-header__glass-tile`;
+  const blockClass = `${prefix}--animated-header__glass-tile`;
   const collapsed = `${blockClass}--collapsed`;
   const MainIcon = mainIcon ? index[mainIcon] : null;
   const SecondaryIcon = secondaryIcon ? index[secondaryIcon] : null;
   return /*#__PURE__*/React.createElement(Link, {
-    className: `${prefix}-animated-header__tile ${blockClass}`,
+    className: `${prefix}--animated-header__tile ${blockClass}`,
     key: id,
     href: href
   }, /*#__PURE__*/React.createElement("div", {

package/es/node_modules/@carbon/icons-react/es/Icon.js

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { getAttributes } from '../../icon-helpers/es/index.js';
+import { getAttributes } from '../node_modules/@carbon/icon-helpers/es/index.js';
 import PropTypes from 'prop-types';
 import React from 'react';