@carbon-labs/react-animated-header 0.3.0 → 0.5.0

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

@@ -1,18 +1,10 @@
-/**
- * @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 workspaceData: {
     id: string;
-    text: string;
+    label: string;
 }[];
 export const headerTiles: ({
     id: number;
-    name: string;
+    label: string;
     tiles: ({
         id: string;
         href: string;
@@ -28,7 +20,7 @@ export const headerTiles: ({
     })[];
 } | {
     id: number;
-    name: string;
+    label: string;
     tiles: ({
         id: string;
         href: 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/lib/components/AnimatedHeader/AnimatedHeader.d.ts

@@ -1,39 +1,52 @@
 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;
+    label: 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 {
     id: number;
-    name: string;
+    label: string;
     tiles: Tile[];
 }
 export interface AnimatedHeaderProps {
-    name?: string;
+    allTiles: TileGroup[];
+    allWorkspaces?: SelectedWorkspace[];
     description?: string;
-    buttonText?: string;
-    buttonType?: ButtonKind;
-    buttonIcon?: any;
-    headerDropdown?: boolean;
+    handleHeaderItemsToString: (item: TileGroup | null) => string;
+    handleWorkspaceItemsToString: (item: SelectedWorkspace | null) => string;
+    headerAnimation?: object;
+    headerStatic?: React.JSX.Element;
     productName?: string;
-    selectedWorkspace?: SelectedWorkspace[] | any;
-    setSelectedWorkspace: (e: any) => void;
-    allWorkspaces?: SelectedWorkspace[];
     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/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -25,25 +25,26 @@ var _PauseFilled, _PlayFilledAlt;
 
 const AnimatedHeader = _ref => {
   let {
-    name,
+    allTiles,
+    allWorkspaces,
     description,
-    buttonText,
-    buttonType = 'tertiary',
-    buttonIcon = null,
-    headerDropdown = false,
+    handleHeaderItemsToString,
+    handleWorkspaceItemsToString,
+    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`
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header`;
-  let animationContainer = /*#__PURE__*/React.createRef();
+  const animationContainer = /*#__PURE__*/React.createRef();
   const [open, setOpen] = React.useState(true);
   const [playing, setPlaying] = React.useState(true);
   const [headingTextAnimation, setHeadingTextAnimation] = React.useState('');
@@ -67,7 +68,7 @@ const AnimatedHeader = _ref => {
     setPlaying(!playing);
   };
   React.useEffect(() => {
-    let animation = lottie.default.loadAnimation({
+    const animation = lottie.default.loadAnimation({
       container: animationContainer.current,
       animationData: headerAnimation,
       renderer: 'svg',
@@ -88,7 +89,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 {
@@ -100,9 +101,15 @@ const AnimatedHeader = _ref => {
       // Run Looped Animation
       animation.addEventListener('complete', loop);
     }
-  }, []);
+    return () => {
+      animation?.removeEventListener('DOMLoaded', reducedMotion);
+      animation?.removeEventListener('DOMLoaded', load);
+      animation?.removeEventListener('complete', loop);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("section", {
-    className: `${blockClass} ${!open && collapsed}`
+    className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
   }, /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
@@ -125,14 +132,14 @@ const AnimatedHeader = _ref => {
     lg: 16
   }, /*#__PURE__*/React.createElement(react.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(react.Column, {
+  }, userName)))), (description || tasksConfig && tasksConfig.type === 'button' && tasksConfig.button?.text || tasksConfig && tasksConfig.type === 'dropdown' && tasksConfig.dropdown?.label) && /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 8,
     lg: 4,
@@ -142,24 +149,23 @@ const AnimatedHeader = _ref => {
     label: description
   }, /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`
-  }, description)), buttonText && /*#__PURE__*/React.createElement(react.Button, {
+  }, description)), tasksConfig?.button?.text && /*#__PURE__*/React.createElement(react.Button, {
     className: `${blockClass}__button`,
-    kind: buttonType,
-    renderIcon: buttonIcon
-  }, buttonText), !buttonText && headerDropdown && allTiles && /*#__PURE__*/React.createElement("div", {
+    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(react.Dropdown, {
     id: `${blockClass}__header-dropdown`,
     className: `${blockClass}__header-dropdown`,
     size: "md",
-    autoAlign: true,
     titleText: "Label",
-    initialSelectedItem: allTiles[0],
-    label: allTiles[0].name || 'Select an option below',
+    label: tasksConfig.dropdown?.label || allTiles[0].label,
     hideLabel: true,
     type: "inline",
     items: allTiles,
-    itemToString: item => item ? item.name : '',
+    itemToString: item => handleHeaderItemsToString(item),
     onChange: e => setSelectedTileGroup(e)
   }))), selectedTileGroup && /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
@@ -173,11 +179,11 @@ const AnimatedHeader = _ref => {
     className: `${blockClass}__workspace`,
     size: "sm",
     titleText: "Label",
-    label: `Open in: ${name}'s workspace` || 'Select a workspace',
+    label: workspaceLabel,
     hideLabel: true,
     type: "inline",
     items: allWorkspaces,
-    itemToString: item => item ? item['text'] : '',
+    itemToString: item => handleWorkspaceItemsToString(item),
     onChange: e => setSelectedWorkspace(e)
   })), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__tiles-container`
@@ -219,76 +225,85 @@ const AnimatedHeader = _ref => {
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.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),
+  /**
+   * Specify an optional className to be added to your Animated Header
+   */
+  className: PropTypes.string,
   /**
    * Provide short sentence in max. 3 lines related to product context
    */
   description: 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)
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list. (Dropdown
+   * under description in header).
    */
-  buttonText: PropTypes.string,
+  handleHeaderItemsToString: PropTypes.func,
   /**
-   * Specify the carbon button type
+   * Helper function passed to downshift that allows the library to render a
+   * given item to a string label. By default, it extracts the `label` field
+   * from a given item to serve as the item label in the list. (Dropdown
+   * related to workspace selection).
    */
-  buttonType: react.ButtonKinds,
+  handleWorkspaceItemsToString: PropTypes.func,
   /**
-   * (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,
+  /**
+   * 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 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
 };
 
 exports.default = AnimatedHeader;

package/lib/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/lib/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -19,12 +19,12 @@ var _AILabel;
 
 const AIPromptTile = _ref => {
   let {
-    id,
     href,
-    open,
+    id,
     mainIcon,
-    title,
-    productName
+    open,
+    productName,
+    title
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
@@ -37,7 +37,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') {

package/lib/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/lib/components/Tiles/GlassTile/GlassTile.js

@@ -16,13 +16,13 @@ var usePrefix = require('../../../node_modules/@carbon-labs/utilities/es/usePref
 
 const GlassTile = _ref => {
   let {
-    id,
     href,
-    open,
+    id,
     mainIcon,
+    open,
     secondaryIcon,
-    title,
-    subtitle
+    subtitle,
+    title
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;

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

@@ -9,7 +9,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../icon-helpers/es/index.js');
+var index = require('../node_modules/@carbon/icon-helpers/es/index.js');
 var PropTypes = require('prop-types');
 var React = require('react');
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.3.0",
+  "version": "0.5.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -32,5 +32,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "df4ac10450dbb1a5deb4684898c5573f9d697194"
+  "gitHead": "00c3ca091be01c1085927e424eae56588e74b7fe"
 }

package/scss/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;
   }
 

package/scss/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);
 }