diff --git a/packages/components/src/animations/back-to-top.ts b/packages/components/src/animations/back-to-top.ts
deleted file mode 100644
index 209e51e27d..0000000000
--- a/packages/components/src/animations/back-to-top.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-export const showUp = (
- el: HTMLElement,
- translateSize: string = '8rem',
- easing: string = 'ease',
- duration: number = 500,
- fill = 'forwards' as FillMode,
-): Animation => {
- return el.animate(
- [
- { transform: `translateY(${translateSize})`, opacity: '0%' },
- { transform: 'translateY(0)', opacity: '100%' },
- ],
- { duration: duration, easing, fill: fill },
- );
-};
-
-export const hideDown = (
- el: HTMLElement,
- translateSize: string = '8rem',
- easing: string = 'ease',
- duration: number = 500,
- fill = 'forwards' as FillMode,
-): Animation => {
- return el.animate(
- [
- { transform: 'translateY(0)', opacity: '100%' },
- { transform: `translateY(${translateSize})`, opacity: '0%' },
- ],
- { duration: duration, easing, fill: fill },
- );
-};
diff --git a/packages/components/src/animations/slide.ts b/packages/components/src/animations/slide.ts
new file mode 100644
index 0000000000..dd8f1355c1
--- /dev/null
+++ 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
index c4578da381..bb72ebc77f 100644
--- 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
index d46f5db4f4..24530cdf61 100644
--- 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
index c1dbe70fa9..0defb8033f 100644
--- 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}
>
- Back To Top Button
+ {this.bttptitle}
);
diff --git a/packages/components/src/components/post-back-to-top/readme.md b/packages/components/src/components/post-back-to-top/readme.md
index f446a9f452..e4eca6208e 100644
--- 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 @@
+## 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
index 15c7561792..e958c23ecd 100644
--- 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`
-
-
`;
- },
+ decorators: [
+ (story: StoryFn, { args, context }: StoryContext) =>
+ html`${story(args, context)}
`,
+ ],
};
export const BackToTopDark: Story = {
- render: () => {
- return html`
-
-
`;
- },
+ decorators: [
+ (story: StoryFn, { args, context }: StoryContext) =>
+ html`${story(args, context)}
`,
+ ],
};
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
index 179211e38d..23b5ef4444 100644
--- 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` `,
+ 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`
-
- ${story(args, context)}
- `,
- ],
- render: () => html``,
-};
+export const Default: Story = {};