review comments and errors update

swisspost · Nov 15, 2024 · 3048c57 · 3048c57
1 parent bf864a3
commit 3048c57
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 156 deletions.
diff --git a/packages/components/src/animations/back-to-top.ts b/packages/components/src/animations/back-to-top.ts
diff --git a/packages/components/src/animations/slide.ts b/packages/components/src/animations/slide.ts
@@ -0,0 +1,31 @@
+const easing: string = 'ease';
+const duration: number = 500;
+const fill: FillMode = 'forwards';
+
+export const slideUp = (el: HTMLElement, translateSize: string = '8rem'): Animation => {
+  return el.animate(
+    [
+      { transform: `translateY(${translateSize})` }, // Starting position (no translation)
+      { transform: 'translateY(0)' }, // End position
+    ],
+    {
+      duration: duration,
+      easing,
+      fill,
+    },
+  );
+};
+
+export const slideDown = (el: HTMLElement, translateSize: string = '8rem'): Animation => {
+  return el.animate(
+    [
+      { transform: 'translateY(0)' }, // Starting position (no translation)
+      { transform: `translateY(${translateSize})` }, // End position
+    ],
+    {
+      duration: duration,
+      easing,
+      fill,
+    },
+  );
+};
diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -94,6 +94,7 @@ export namespace Components {
         "userid"?: string;
     }
     interface PostBackToTop {
+        "bttptitle": string;
     }
     interface PostBreadcrumbItem {
         /**
@@ -880,6 +881,7 @@ declare namespace LocalJSX {
         "userid"?: string;
     }
     interface PostBackToTop {
+        "bttptitle"?: string;
     }
     interface PostBreadcrumbItem {
         /**

diff --git a/packages/components/src/components/post-back-to-top/post-back-to-top.scss b/packages/components/src/components/post-back-to-top/post-back-to-top.scss
@@ -19,12 +19,11 @@ tokens.$default-map: (
   post-floating-button-hover-border: #504f4b,
   post-floating-button-hover-fg: #504f4b,
   post-floating-button-hover-bg: white,
-  post-floating-button-translate-y: 36px
+  post-floating-button-translate-y: 8rem
 );
 
 :host {
-  --post-floating-button-translate-y: tokens.get('post-floating-button-translate-y');
-
+  --post-floating-button-translate-y: #{tokens.get('post-floating-button-translate-y')};
   position: fixed;
   bottom: tokens.get('post-floating-button-position-bottom');
   right: tokens.get('post-floating-button-position-right');

diff --git a/packages/components/src/components/post-back-to-top/post-back-to-top.tsx b/packages/components/src/components/post-back-to-top/post-back-to-top.tsx
@@ -1,5 +1,5 @@
-import { Component, Element, Host, State, h, Watch } from '@stencil/core';
-import { showUp, hideDown } from '@/animations/back-to-top';
+import { Component, Element, Host, State, h, Watch, Prop } from '@stencil/core';
+import { slideUp, slideDown } from '@/animations/slide';
 
 // Token for different translate values depending on the breakpoint
 
@@ -11,33 +11,27 @@ import { showUp, hideDown } from '@/animations/back-to-top';
 export class PostBackToTop {
   @Element() el: HTMLElement;
 
+  @Prop() bttptitle: string;
+
   @State() belowFold: boolean = false;
-  @State() translateY: string = '';
 
-  getFoldHeight(): number {
-    return window.innerHeight;
-  }
+  private translateY: string;
 
-  getScrollPositionPercentage(): number {
-    // Window.innerHeight is the foldHeight
-    return (window.scrollY / this.getFoldHeight()) * 100;
-  }
-
-  calcIfIsBelowFold(): boolean {
-    return this.getScrollPositionPercentage() > 100;
+  IsBelowFold(): boolean {
+    return window.scrollY > window.innerHeight;
   }
 
   handleScroll = () => {
-    this.belowFold = this.calcIfIsBelowFold();
+    this.belowFold = this.IsBelowFold();
   };
 
   // Watch for changes in belowFold
   @Watch('belowFold')
   watchBelowFold(newValue: boolean) {
     if (newValue) {
-      showUp(this.el, this.translateY);
+      slideUp(this.el, this.translateY);
     } else {
-      hideDown(this.el, this.translateY);
+      slideDown(this.el, this.translateY);
     }
   }
 
@@ -50,24 +44,23 @@ export class PostBackToTop {
 
   // Set the initial state
   componentWillLoad() {
-    this.belowFold = this.calcIfIsBelowFold();
-    if (!this.belowFold) {
-      this.el.style.transform = `translateY(${this.translateY})`;
-    }
-
-    const translateYValue = window
-      .getComputedStyle(this.el)
-      .getPropertyValue('--post-floating-button-translate-y');
-    console.log(translateYValue);
-    this.translateY = translateYValue;
+    this.belowFold = this.IsBelowFold();
   }
 
   componentDidLoad() {
     window.addEventListener('scroll', this.handleScroll, false);
 
+    this.translateY = window
+      .getComputedStyle(this.el)
+      .getPropertyValue('--post-floating-button-translate-y');
+
+    if (!this.belowFold) {
+      this.el.style.transform = `translateY(${this.translateY})`;
+    }
+
     // Initial load
     if (this.belowFold) {
-      showUp(this.el, this.translateY);
+      slideUp(this.el, this.translateY);
     }
   }
 
@@ -85,7 +78,7 @@ export class PostBackToTop {
           onClick={this.scrollToTop}
         >
           <post-icon aria-hidden={this.belowFold ? 'false' : 'true'} name="3026"></post-icon>
-          <span class="visually-hidden">Back To Top Button</span>
+          <span class="visually-hidden">{this.bttptitle}</span>
         </button>
       </Host>
     );

diff --git a/packages/components/src/components/post-back-to-top/readme.md b/packages/components/src/components/post-back-to-top/readme.md
@@ -5,6 +5,13 @@
 <!-- Auto Generated Below -->
 
 
+## Properties
+
+| Property    | Attribute   | Description | Type     | Default     |
+| ----------- | ----------- | ----------- | -------- | ----------- |
+| `bttptitle` | `bttptitle` |             | `string` | `undefined` |
+
+
 ## Dependencies
 
 ### Depends on

diff --git a/packages/documentation/src/stories/components/back-to-top/back-to-top.snapshot.stories.ts b/packages/documentation/src/stories/components/back-to-top/back-to-top.snapshot.stories.ts
@@ -1,4 +1,4 @@
-import type { StoryObj } from '@storybook/web-components';
+import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
 import meta from './back-to-top.stories';
 import { html } from 'lit';
 
@@ -12,66 +12,15 @@ export default {
 type Story = StoryObj;
 
 export const BackToTopLight: Story = {
-  render: () => {
-    return html`<div data-color-scheme="light" class="back-to-top-example bg-white">
-      <div class="header-story-wrapper" style="--header-z-index: 1;overflow: auto; ">
-        <swisspost-internet-header
-          project="test"
-          environment="int01"
-          language="en"
-        ></swisspost-internet-header>
-        <div class="container">
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <post-back-to-top />
-        </div>
-      </div>
-    </div>`;
-  },
+  decorators: [
+    (story: StoryFn, { args, context }: StoryContext) =>
+      html`<div data-color-scheme="light" class="bg-white">${story(args, context)}</div>`,
+  ],
 };
 
 export const BackToTopDark: Story = {
-  render: () => {
-    return html`<div data-color-scheme="dark" class="back-to-top-example bg-dark">
-      <div class="header-story-wrapper" style="--header-z-index: 1;overflow: auto; ">
-        <swisspost-internet-header
-          project="test"
-          environment="int01"
-          language="en"
-        ></swisspost-internet-header>
-        <div class="container">
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <post-back-to-top />
-        </div>
-      </div>
-    </div>`;
-  },
+  decorators: [
+    (story: StoryFn, { args, context }: StoryContext) =>
+      html`<div data-color-scheme="dark" class="bg-dark">${story(args, context)}</div>`,
+  ],
 };
diff --git a/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts b/packages/documentation/src/stories/components/back-to-top/back-to-top.stories.ts
@@ -13,43 +13,43 @@ const meta: MetaComponent = {
       url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=18-11',
     },
   },
+  render: () => html` <div
+    class="header-story-wrapper"
+    style="--header-z-index: 1;overflow: auto; "
+  >
+    <swisspost-internet-header
+      project="test"
+      environment="int01"
+      language="en"
+    ></swisspost-internet-header>
+    <div class="container">
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+      <p class="fake-content my-32"></p>
+    </div>
+    <post-back-to-top />
+  </div>`,
+  decorators: [
+    (story: StoryFn, { args, context }: StoryContext) => html` ${story(args, context)} `,
+  ],
 };
 
 export default meta;
 
 type Story = StoryObj;
 
-export const Default: Story = {
-  decorators: [
-    (story: StoryFn, { args, context }: StoryContext) => html`
-      <div class="header-story-wrapper" style="--header-z-index: 1;overflow: auto; ">
-        <swisspost-internet-header
-          project="test"
-          environment="int01"
-          language="en"
-        ></swisspost-internet-header>
-        <div class="container">
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-          <p class="fake-content my-32"></p>
-        </div>
-      </div>
-      ${story(args, context)}
-    `,
-  ],
-  render: () => html`<post-back-to-top />`,
-};
+export const Default: Story = {};