@carbon-labs/react-animated-header 0.32.0 → 0.33.0

package/es/components/AnimatedHeader/AnimatedHeader.js

@@ -43,14 +43,10 @@ const AnimatedHeader = ({
   const blockClass = `${prefix}--animated-header`;
   const animationContainer = useRef(null);
   const animRef = useRef(null);
-  const [open, setOpen] = useState(true);
+  const [isOpen, setIsOpen] = useState(true);
   const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
-  const collapsed = `${blockClass}--collapsed`;
-  const contentCollapsed = `${blockClass}__content--collapsed`;
-  const descriptionCollapsed = `${blockClass}__left-area-container--collapsed`;
-  const lottieCollapsed = `${blockClass}__lottie-animation--collapsed`;
   const handleButtonCollapseClick = () => {
-    setOpen(!open);
+    setIsOpen(!isOpen);
   };
   useEffect(() => {
     // Make sure any prior instance is destroyed before creating a new one
@@ -100,8 +96,11 @@ const AnimatedHeader = ({
     // Re-init when the JSON or reduced-motion preference changes
   }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("header", {
-    className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
-  }, /*#__PURE__*/React.createElement(Grid, null, /*#__PURE__*/React.createElement("div", {
+    className: blockClass,
+    "data-expanded": isOpen
+  }, /*#__PURE__*/React.createElement(Grid, {
+    className: `${blockClass}__grid`
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__container--gradient`
@@ -119,7 +118,8 @@ const AnimatedHeader = ({
     className: `${blockClass}__lottie-animation--container`
   }, /*#__PURE__*/React.createElement("div", {
     ref: animationContainer,
-    className: `${blockClass}__lottie-animation${!open ? ` ${lottieCollapsed}` : ''}`,
+    className: `${blockClass}__lottie-animation`,
+    "data-expanded": isOpen,
     "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement(Column, {
     sm: 4,
@@ -128,14 +128,15 @@ const AnimatedHeader = ({
   }, /*#__PURE__*/React.createElement(HeaderTitle, {
     userName: userName,
     welcomeText: welcomeText,
-    headerExpanded: open,
+    headerExpanded: isOpen,
     ariaLabels: ariaLabels
   })), (description || tasksControllerConfig) && /*#__PURE__*/React.createElement(Column, {
     sm: 4,
     md: 8,
     lg: 4,
     id: `${blockClass}-content`,
-    className: `${blockClass}__left-area-container${!open ? ` ${descriptionCollapsed}` : ''}`
+    className: `${blockClass}__left-area-container`,
+    "data-expanded": isOpen
   }, description && /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`,
     "aria-label": ariaLabels?.description ?? `Header description`
@@ -151,7 +152,8 @@ const AnimatedHeader = ({
     lg: 12,
     className: `${blockClass}__content`
   }, !!workspaceSelectorConfig?.allWorkspaces?.length && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__workspace--container${!open ? ` ${contentCollapsed}` : ''}`
+    className: `${blockClass}__workspace--container`,
+    "data-expanded": isOpen
   }, /*#__PURE__*/React.createElement(WorkspaceSelector, {
     workspaceSelectorConfig: workspaceSelectorConfig,
     userName: userName,
@@ -173,7 +175,7 @@ const AnimatedHeader = ({
       key: key,
       tileId: resolvedTileId
     }, rest, {
-      open: open,
+      open: isOpen,
       productName: productName,
       isLoading: isLoading || tile.isLoading,
       disabledTaskLabel: disabledTaskLabel,
@@ -191,12 +193,12 @@ const AnimatedHeader = ({
   }, /*#__PURE__*/React.createElement(Button, {
     id: `${blockClass}__button-collapse`,
     kind: "ghost",
-    renderIcon: open ? ChevronUp : ChevronDown,
+    renderIcon: isOpen ? ChevronUp : ChevronDown,
     onClick: handleButtonCollapseClick,
-    "aria-expanded": open,
+    "aria-expanded": isOpen,
     "aria-controls": `${blockClass}-content`,
-    "aria-label": open ? ariaLabels?.collapseButton ?? 'Collapse header details' : ariaLabels?.expandButton ?? 'Expand header details'
-  }, open ? collapseButtonLabel : expandButtonLabel))));
+    "aria-label": isOpen ? ariaLabels?.collapseButton ?? 'Collapse header details' : ariaLabels?.expandButton ?? 'Expand header details'
+  }, isOpen ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {

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

@@ -27,7 +27,6 @@ const AIPromptTile = ({
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
-  const collapsed = `${blockClass}--collapsed`;
   const disabled = `${blockClass}--disabled`;
   const [textInput, setTextInput] = useState('');
   const handleTextInput = e => {
@@ -54,7 +53,8 @@ const AIPromptTile = ({
   }, isLoading ? /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
     className: `${blockClass}--loading-skeleton`
   }) : /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
+    className: `${blockClass}--body`,
+    "data-expanded": open
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`
   }), /*#__PURE__*/React.createElement("div", {

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

@@ -20,14 +20,14 @@ const GlassTileBody = ({
 }) => {
   const prefix = usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
-  const collapsed = `${blockClass}--collapsed`;
   if (isLoading) {
     return /*#__PURE__*/React.createElement(SkeletonPlaceholder, {
       className: `${blockClass}--loading-skeleton`
     });
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
+    className: `${blockClass}--body`,
+    "data-expanded": open
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`
   }), customContent ? /*#__PURE__*/React.createElement("div", {

package/lib/components/AnimatedHeader/AnimatedHeader.js

@@ -47,14 +47,10 @@ const AnimatedHeader = ({
   const blockClass = `${prefix}--animated-header`;
   const animationContainer = React.useRef(null);
   const animRef = React.useRef(null);
-  const [open, setOpen] = React.useState(true);
+  const [isOpen, setIsOpen] = React.useState(true);
   const isReduced = window.matchMedia('(prefers-reduced-motion)').matches;
-  const collapsed = `${blockClass}--collapsed`;
-  const contentCollapsed = `${blockClass}__content--collapsed`;
-  const descriptionCollapsed = `${blockClass}__left-area-container--collapsed`;
-  const lottieCollapsed = `${blockClass}__lottie-animation--collapsed`;
   const handleButtonCollapseClick = () => {
-    setOpen(!open);
+    setIsOpen(!isOpen);
   };
   React.useEffect(() => {
     // Make sure any prior instance is destroyed before creating a new one
@@ -104,8 +100,11 @@ const AnimatedHeader = ({
     // Re-init when the JSON or reduced-motion preference changes
   }, [headerAnimation, isReduced]);
   return /*#__PURE__*/React.createElement("header", {
-    className: `${blockClass}${!open ? ` ${collapsed}` : ''}`
-  }, /*#__PURE__*/React.createElement(react.Grid, null, /*#__PURE__*/React.createElement("div", {
+    className: blockClass,
+    "data-expanded": isOpen
+  }, /*#__PURE__*/React.createElement(react.Grid, {
+    className: `${blockClass}__grid`
+  }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__gradient--overlay`
   }), /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}__container--gradient`
@@ -123,7 +122,8 @@ const AnimatedHeader = ({
     className: `${blockClass}__lottie-animation--container`
   }, /*#__PURE__*/React.createElement("div", {
     ref: animationContainer,
-    className: `${blockClass}__lottie-animation${!open ? ` ${lottieCollapsed}` : ''}`,
+    className: `${blockClass}__lottie-animation`,
+    "data-expanded": isOpen,
     "aria-hidden": "true"
   })), /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
@@ -132,14 +132,15 @@ const AnimatedHeader = ({
   }, /*#__PURE__*/React.createElement(HeaderTitle.default, {
     userName: userName,
     welcomeText: welcomeText,
-    headerExpanded: open,
+    headerExpanded: isOpen,
     ariaLabels: ariaLabels
   })), (description || tasksControllerConfig) && /*#__PURE__*/React.createElement(react.Column, {
     sm: 4,
     md: 8,
     lg: 4,
     id: `${blockClass}-content`,
-    className: `${blockClass}__left-area-container${!open ? ` ${descriptionCollapsed}` : ''}`
+    className: `${blockClass}__left-area-container`,
+    "data-expanded": isOpen
   }, description && /*#__PURE__*/React.createElement("h2", {
     className: `${blockClass}__description`,
     "aria-label": ariaLabels?.description ?? `Header description`
@@ -155,7 +156,8 @@ const AnimatedHeader = ({
     lg: 12,
     className: `${blockClass}__content`
   }, !!workspaceSelectorConfig?.allWorkspaces?.length && /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}__workspace--container${!open ? ` ${contentCollapsed}` : ''}`
+    className: `${blockClass}__workspace--container`,
+    "data-expanded": isOpen
   }, /*#__PURE__*/React.createElement(WorkspaceSelector.default, {
     workspaceSelectorConfig: workspaceSelectorConfig,
     userName: userName,
@@ -177,7 +179,7 @@ const AnimatedHeader = ({
       key: key,
       tileId: resolvedTileId
     }, rest, {
-      open: open,
+      open: isOpen,
       productName: productName,
       isLoading: isLoading || tile.isLoading,
       disabledTaskLabel: disabledTaskLabel,
@@ -195,12 +197,12 @@ const AnimatedHeader = ({
   }, /*#__PURE__*/React.createElement(react.Button, {
     id: `${blockClass}__button-collapse`,
     kind: "ghost",
-    renderIcon: open ? iconsReact.ChevronUp : iconsReact.ChevronDown,
+    renderIcon: isOpen ? iconsReact.ChevronUp : iconsReact.ChevronDown,
     onClick: handleButtonCollapseClick,
-    "aria-expanded": open,
+    "aria-expanded": isOpen,
     "aria-controls": `${blockClass}-content`,
-    "aria-label": open ? ariaLabels?.collapseButton ?? 'Collapse header details' : ariaLabels?.expandButton ?? 'Expand header details'
-  }, open ? collapseButtonLabel : expandButtonLabel))));
+    "aria-label": isOpen ? ariaLabels?.collapseButton ?? 'Collapse header details' : ariaLabels?.expandButton ?? 'Expand header details'
+  }, isOpen ? collapseButtonLabel : expandButtonLabel))));
 };
 AnimatedHeader.displayName = 'Animated Header';
 AnimatedHeader.propTypes = {

package/lib/components/Tiles/AIPromptTile/AIPromptTile.js

@@ -29,7 +29,6 @@ const AIPromptTile = ({
 }) => {
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__ai-prompt-tile`;
-  const collapsed = `${blockClass}--collapsed`;
   const disabled = `${blockClass}--disabled`;
   const [textInput, setTextInput] = React.useState('');
   const handleTextInput = e => {
@@ -56,7 +55,8 @@ const AIPromptTile = ({
   }, isLoading ? /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
     className: `${blockClass}--loading-skeleton`
   }) : /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
+    className: `${blockClass}--body`,
+    "data-expanded": open
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`
   }), /*#__PURE__*/React.createElement("div", {

package/lib/components/Tiles/GlassTile/GlassTileBody.js

@@ -22,14 +22,14 @@ const GlassTileBody = ({
 }) => {
   const prefix = usePrefix.usePrefix();
   const blockClass = `${prefix}--animated-header__glass-tile`;
-  const collapsed = `${blockClass}--collapsed`;
   if (isLoading) {
     return /*#__PURE__*/React.createElement(react.SkeletonPlaceholder, {
       className: `${blockClass}--loading-skeleton`
     });
   }
   return /*#__PURE__*/React.createElement("div", {
-    className: `${blockClass}--body${!open ? ` ${collapsed}` : ''}`
+    className: `${blockClass}--body`,
+    "data-expanded": open
   }, /*#__PURE__*/React.createElement("div", {
     className: `${blockClass}--body-background`
   }), customContent ? /*#__PURE__*/React.createElement("div", {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon-labs/react-animated-header",
-  "version": "0.32.0",
+  "version": "0.33.0",
   "publishConfig": {
     "access": "public",
     "provenance": true
@@ -45,5 +45,5 @@
   "devDependencies": {
     "@carbon-labs/utilities": "canary"
   },
-  "gitHead": "0b30143dcd8880b14e38986db3979f6b32f2c484"
+  "gitHead": "2cb890436fa0c3e0f5a0b9738f2d59fb1a50eb31"
 }

package/scss/AnimatedHeader/animated-header.scss

@@ -46,17 +46,37 @@ body {
 .#{$prefix} {
   position: relative;
   display: flex;
-  overflow: visible;
   background: $background;
   inline-size: 100%;
-  max-block-size: 200vh;
-  outline: 1px solid transparent;
-  padding-block: 0 $spacing-10;
-  transition: padding 500ms motion.motion(standard, expressive),
-    max-block-size 500ms motion.motion(standard, expressive), color 200ms linear,
-    background-color 200ms linear,
-    outline 500ms motion.motion(standard, expressive);
+  max-block-size: 85vh;
   writing-mode: horizontal-tb;
+
+  &[data-expanded='true'] {
+    overflow: visible;
+    max-block-size: 85vh;
+    outline: 1px solid transparent;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-block-size 500ms motion.motion(entrance, expressive),
+        color 200ms linear, background-color 200ms linear,
+        outline 500ms motion.motion(entrance, expressive);
+    }
+  }
+
+  &[data-expanded='false'] {
+    overflow: hidden;
+    max-block-size: $spacing-09;
+    outline: 1px solid $border-subtle-00;
+
+    @media (prefers-reduced-motion: no-preference) {
+      transition: max-block-size 500ms motion.motion(exit, expressive),
+        outline 500ms motion.motion(exit, expressive);
+    }
+  }
+}
+
+.#{$prefix}__grid {
+  padding-block: 0 $spacing-10;
 }
 
 .#{$prefix}__static--container {
@@ -88,8 +108,6 @@ body {
 
   background-position: top right;
   background-repeat: no-repeat;
-  transform: translateY(0);
-  transition: transform 500ms motion.motion(standard, expressive);
 }
 
 .#{$prefix}__ui-heading {
@@ -151,12 +169,20 @@ body {
   flex-direction: column;
   gap: $spacing-07;
   margin-block-start: $spacing-08;
-  opacity: 1;
-  transition: opacity 500ms linear;
-}
 
-.#{$prefix}__left-area-container--collapsed {
-  opacity: 0;
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 .#{$prefix}__description {
@@ -238,15 +264,25 @@ body {
   flex-direction: column;
   margin: 0;
   margin-block-start: $spacing-08;
-  opacity: 1;
-  transition: opacity 500ms linear;
 }
 
 .#{$prefix}__workspace--container {
   margin-block-start: calc(-1 * $spacing-08);
   min-block-size: $spacing-08;
-  opacity: 1;
-  transition: opacity 500ms linear;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 .#{$prefix}__workspace {
@@ -264,10 +300,6 @@ body {
   gap: $spacing-05;
 }
 
-.#{$prefix}__content--collapsed {
-  opacity: 0;
-}
-
 .#{$prefix}__tile {
   animation: 500ms motion.motion(standard, expressive) 0ms 1 slide-in;
   animation-fill-mode: both;
@@ -326,12 +358,17 @@ body {
   z-index: 0;
   display: flex;
 
-  transform: translateY(0);
-  transition: transform 500ms motion.motion(standard, expressive);
-}
+  @media (prefers-reduced-motion: no-preference) {
+    transition: transform 500ms motion.motion(standard, expressive);
+  }
 
-.#{$prefix}__lottie-animation--collapsed {
-  transform: translateY(-16px);
+  &[data-expanded='true'] {
+    transform: translateY(0);
+  }
+
+  &[data-expanded='false'] {
+    transform: translateY(-16px);
+  }
 }
 
 .#{$prefix}__button-collapse--container {
@@ -383,13 +420,6 @@ body {
   color: $text-primary;
 }
 
-.#{$prefix}--collapsed {
-  overflow: hidden;
-  padding: 0;
-  max-block-size: $spacing-09;
-  outline: 1px solid $border-subtle-00;
-}
-
 // Small
 @media only screen and (width >= 20rem) {
   .#{$prefix}__lottie-animation {
@@ -564,7 +594,7 @@ body {
 /*
     If the user has expressed their preference for
     reduced motion, then don't use animations
-  */
+   */
 @media (prefers-reduced-motion: reduce) {
   .#{$prefix},
   .#{$prefix}__static,

package/scss/Tiles/AIPromptTile/ai-prompt-tile.scss

@@ -50,8 +50,20 @@ $prefix: 'clabs--animated-header__ai-prompt-tile' !default;
   padding: $spacing-05;
   background-color: transparent;
   color: $text-primary;
-  opacity: 1;
-  transition: opacity 500ms linear;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 /* Semi-transparent background layer */

package/scss/Tiles/GlassTile/glass-tile.scss

@@ -50,8 +50,20 @@ $prefix: 'clabs--animated-header__glass-tile' !default;
   padding: $spacing-05;
   background-color: transparent;
   color: $text-primary;
-  opacity: 1;
-  transition: opacity 500ms linear;
+
+  @media (prefers-reduced-motion: no-preference) {
+    transition: opacity 500ms linear;
+  }
+
+  &[data-expanded='true'] {
+    opacity: 1;
+    transition-delay: 110ms;
+  }
+
+  &[data-expanded='false'] {
+    opacity: 0;
+    transition-delay: 0ms;
+  }
 }
 
 /* Semi-transparent background layer */