@carbon-labs/react-animated-header 0.22.0 → 0.24.0

package/scss/AnimatedHeader/animated-header.scss

@@ -137,53 +137,6 @@ body {
   background: linear-gradient(0deg, #262626bf 0%, transparent 100%);
 }
 
-.#{$prefix}__heading {
-  @include type-style('heading-05');
-
-  position: relative;
-  z-index: 2;
-  overflow: hidden;
-  margin: $spacing-08 0 $spacing-05 0;
-  text-overflow: ellipsis;
-  transition: font-size 500ms motion.motion(standard, expressive),
-    margin 500ms motion.motion(standard, expressive);
-  white-space: nowrap;
-
-  @supports (-webkit-line-clamp: 3) {
-    display: -webkit-box;
-    overflow: hidden;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: 3;
-    text-overflow: ellipsis;
-    white-space: initial;
-  }
-}
-
-/* support for Safari */
-@supports (font: -apple-system-body) and (-webkit-appearance: none) {
-  .#{$prefix}__heading {
-    transition: margin 500ms motion.motion(standard, expressive);
-  }
-}
-
-.#{$prefix}__heading--collapsed {
-  @include type-style('heading-03');
-
-  margin: $spacing-03 0 $spacing-04 0;
-  line-height: 1.25;
-}
-
-.#{$prefix}__heading-welcome {
-  animation: 250ms ease-in fade-in;
-  animation-fill-mode: both;
-}
-
-.#{$prefix}__heading-name {
-  animation: 250ms ease-in fade-in;
-  animation-delay: 125ms;
-  animation-fill-mode: both;
-}
-
 .#{$prefix}__left-area-container {
   z-index: 3;
   display: flex;
@@ -276,11 +229,13 @@ body {
   display: flex;
   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;
@@ -482,42 +437,22 @@ body {
     margin-block-start: $spacing-06;
   }
 
-  .#{$prefix}__button-collapse--container .cds--popover-container {
-    display: flex;
-  }
-
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(1))
-    > .#{$prefix}__tile {
-    inline-size: calc(50% - 16px);
-  }
-
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(2))
-    > .#{$prefix}__tile {
-    inline-size: calc(50% - 16px);
+  .#{$prefix}__workspace--container {
+    margin-block-start: 0;
   }
 
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(3))
-    > .#{$prefix}__tile {
-    inline-size: calc(50% - 16px);
+  .#{$prefix}__button-collapse--container .cds--popover-container {
+    display: flex;
   }
 
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(4))
-    > .#{$prefix}__tile {
+  .#{$prefix}__tiles-container > .#{$prefix}__tile {
     inline-size: calc(50% - 16px);
   }
 
-  .#{$prefix}__tiles-container:has(> :nth-child(4)) > .#{$prefix}__tile {
-    inline-size: calc(33% - 16px);
-  }
-
   .#{$prefix}__tiles-container:has(> :first-child)
     > ##{$prefix}__ai-prompt-tile {
     inline-size: calc(100% - 16px);
   }
-
-  .#{$prefix}__tiles-container > ##{$prefix}__ai-prompt-tile {
-    flex-grow: 0.5;
-  }
 }
 
 // Large
@@ -535,30 +470,18 @@ body {
   }
 
   .#{$prefix}__content {
-    margin-block-start: 0;
+    margin-block-start: $spacing-08;
   }
 
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(1))
-    > .#{$prefix}__tile {
-    inline-size: calc(33% - 16px);
+  .#{$prefix}__workspace--container {
+    margin-block-start: calc(-1 * $spacing-08);
   }
 
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(2))
-    > .#{$prefix}__tile {
-    inline-size: calc(50% - 16px);
-  }
-
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(3))
-    > .#{$prefix}__tile {
-    inline-size: calc(50% - 16px);
-  }
-
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(4))
-    > .#{$prefix}__tile {
+  .#{$prefix}__tiles-container > .#{$prefix}__tile {
     inline-size: calc(33% - 16px);
   }
 
-  .#{$prefix}__tiles-container:has(> :nth-child(4)) > .#{$prefix}__tile {
+  .#{$prefix}__tiles-container:has(> :nth-child(5)) > .#{$prefix}__tile {
     inline-size: calc(33% - 16px);
   }
 
@@ -584,27 +507,11 @@ body {
     background-size: 89% auto;
   }
 
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(1))
-    > .#{$prefix}__tile {
+  .#{$prefix}__tiles-container > .#{$prefix}__tile {
     inline-size: calc(25% - 16px);
   }
 
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(2))
-    > .#{$prefix}__tile {
-    inline-size: calc(50% - 16px);
-  }
-
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(3))
-    > .#{$prefix}__tile {
-    inline-size: calc(33% - 16px);
-  }
-
-  .#{$prefix}__tiles-container:has(> :last-child:nth-child(4))
-    > .#{$prefix}__tile {
-    inline-size: calc(25% - 16px);
-  }
-
-  .#{$prefix}__tiles-container:has(> :nth-child(4)) > .#{$prefix}__tile {
+  .#{$prefix}__tiles-container:has(> :nth-child(5)) > .#{$prefix}__tile {
     inline-size: calc(25% - 16px);
   }
 
@@ -643,21 +550,21 @@ body {
 }
 
 /*
-   If the user has expressed their preference for
-   reduced motion, then don't use animations
- */
+    If the user has expressed their preference for
+    reduced motion, then don't use animations
+  */
 @media (prefers-reduced-motion: reduce) {
   .#{$prefix},
   .#{$prefix}__static,
-  .#{$prefix}__heading,
+  .#{$prefix}__title,
   .#{$prefix}__left-area-container,
   .#{$prefix}__content,
   .#{$prefix}__lottie-animation {
     transition: none;
   }
 
-  .#{$prefix}__heading-welcome,
-  .#{$prefix}__heading-name,
+  .#{$prefix}__title-first,
+  .#{$prefix}__title-second,
   .#{$prefix}__description,
   .#{$prefix}__button,
   .#{$prefix}__workspace,

package/scss/HeaderTitle/header-title.scss

@@ -0,0 +1,60 @@
+/**
+ * @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.
+ */
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/motion';
+
+$prefix: 'clabs--animated-header__title' !default;
+
+.#{$prefix} {
+  @include type-style('heading-05');
+
+  position: relative;
+  z-index: 2;
+  overflow: hidden;
+  margin: $spacing-08 0 $spacing-05 0;
+  text-overflow: ellipsis;
+  transition: font-size 500ms motion.motion(standard, expressive),
+    margin 500ms motion.motion(standard, expressive);
+  white-space: nowrap;
+
+  @supports (-webkit-line-clamp: 3) {
+    display: -webkit-box;
+    overflow: hidden;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 3;
+    text-overflow: ellipsis;
+    white-space: initial;
+  }
+}
+
+/* support for Safari */
+@supports (font: -apple-system-body) and (-webkit-appearance: none) {
+  .#{$prefix} {
+    transition: margin 500ms motion.motion(standard, expressive);
+  }
+}
+
+.#{$prefix}-collapsed {
+  @include type-style('heading-03');
+
+  margin: $spacing-03 0 $spacing-04 0;
+  line-height: 1.25;
+}
+
+.#{$prefix}-first {
+  animation: 250ms ease-in fade-in;
+  animation-fill-mode: both;
+}
+
+.#{$prefix}-second {
+  animation: 250ms ease-in fade-in;
+  animation-delay: 125ms;
+  animation-fill-mode: both;
+}

package/scss/animated-header.scss

@@ -6,5 +6,6 @@
  */
 
 @use 'AnimatedHeader/animated-header.scss';
+@use 'HeaderTitle/header-title.scss';
 @use 'Tiles/AIPromptTile/ai-prompt-tile.scss';
 @use 'Tiles/GlassTile/glass-tile.scss';