chore(components): update back to top button to adapt to sticky header

.changeset/smart-walls-carry.md

@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Adjusted the placement of the Back-to-top button to accommodate the sticky header.

packages/components/src/components/post-back-to-top/post-back-to-top.scss

@@ -8,15 +8,19 @@
 tokens.$default-map: components.$post-floating-button;
 
 :host {
-  --post-floating-button-translate-y: calc(-1 * #{tokens.get('floating-button-translate-y')});
+  --post-floating-button-position-top: #{tokens.get('floating-button-position-top')};
+  --post-back-to-top-position-top: calc(
+    var(--post-header-height) + var(--post-floating-button-position-top)
+  );
+  --post-back-to-top-elevation: #{tokens.get('floating-button-elevation')};
   position: fixed;
-  top: tokens.get('floating-button-position-top');
+  top: var(--post-back-to-top-position-top);
   right: tokens.get('floating-button-position-right');
 
   .back-to-top {
     @include button-mx.reset-button;
     @include utilities.focus-style;
-    box-shadow: tokens.get('floating-button-elevation');
+    box-shadow: var(--post-back-to-top-elevation);
     cursor: pointer;
     border-radius: tokens.get('floating-button-border-radius-round');
     width: tokens.get('floating-button-size-outer');
@@ -28,11 +32,13 @@ tokens.$default-map: components.$post-floating-button;
     display: flex;
     align-items: center;
     justify-content: center;
+
     &:hover {
       border-color: tokens.get('floating-button-hover-border');
       color: tokens.get('floating-button-hover-fg');
       background-color: tokens.get('floating-button-hover-bg');
     }
+
     post-icon {
       height: tokens.get('floating-button-size-icon');
       width: tokens.get('floating-button-size-icon');

packages/components/src/components/post-back-to-top/post-back-to-top.tsx

@@ -25,11 +25,11 @@ export class PostBackToTop {
     return window.scrollY > window.innerHeight;
   }
 
-  private handleScroll = () => {
+  private readonly handleScroll = () => {
     this.belowFold = this.isBelowFold();
   };
 
-  // Watch for changes in belowFold
+  // Watch for changes in belowFold to show/hide the back to top button
   @Watch('belowFold')
   watchBelowFold(newValue: boolean) {
     if (newValue) {
@@ -60,17 +60,43 @@ export class PostBackToTop {
   componentDidLoad() {
     window.addEventListener('scroll', this.handleScroll, false);
 
-    this.translateY = window
-      .getComputedStyle(this.host)
-      .getPropertyValue('--post-floating-button-translate-y');
+    // Get the back-to-top button top postiion
+    const positionTop = window.getComputedStyle(this.host).getPropertyValue('top');
 
-    if (!this.belowFold) {
-      this.host.style.transform = `translateY(${this.translateY})`;
+    const buttonElement = this.host.shadowRoot.querySelector('button');
+
+    // Extract the elevation height from the back-to-top button elevation token
+    const elevation = getComputedStyle(buttonElement).getPropertyValue(
+      '--post-back-to-top-elevation',
+    );
+    const elevationParts = elevation.split(',');
+
+    function getSecondPixelValue(parts: string[]) {
+      for (const part of parts) {
+        const pixelValues = part.match(/\b\d+px\b/g);
+
+        if (pixelValues && pixelValues.length > 1) {
+          return pixelValues[1];
+        }
+      }
     }
 
-    // Initial load
+    const elevationHeight = getSecondPixelValue(elevationParts);
+
+    // The translateY is calculated as => -100% (btt button height) - topPosition - elevationHeight
+    this.translateY =
+      String(
+        (-1 * 100) / 100 -
+          parseFloat(positionTop.replace('px', '')) -
+          parseFloat(elevationHeight.replace('px', '')),
+      ) + 'px';
+
     if (this.belowFold) {
-      slideUp(this.host, this.translateY);
+      slideDown(this.host, this.translateY);
+    }
+
+    if (!this.belowFold) {
+      this.host.style.transform = `translateY(${this.translateY})`;
     }
 
     this.validateLabel();

packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts

@@ -25,7 +25,7 @@ const meta: MetaComponent = {
       language="en"
     ></swisspost-internet-header>
     ${fakeContent(17)}
-    <post-back-to-top />
+    <post-back-to-top label="Back to top button" />
   </div>`,
   decorators: [
     (story: StoryFn, { args, context }: StoryContext) => html` ${story(args, context)} `,

packages/styles/src/tokens/_post-theme.scss

@@ -5,4 +5,6 @@
 
 :root {
   @include tokens.from(themes.$post-post);
+
+  --post-header-height: 120px; //dummy value
 }