From c4b6fb8c8b7a9cf9c91318b9f8b9a8caa643f5f4 Mon Sep 17 00:00:00 2001 From: Steven Spriggs Date: Tue, 5 Sep 2023 13:11:54 -0400 Subject: [PATCH 01/47] feat(back-to-top): add back-to-top --- elements/package.json | 1 + elements/pf-back-to-top/README.md | 13 +++ .../pf-back-to-top/demo/always-visible.html | 6 ++ elements/pf-back-to-top/demo/demo.css | 14 +++ .../pf-back-to-top/demo/pf-back-to-top.html | 8 ++ .../pf-back-to-top/demo/pf-back-to-top.js | 1 + .../pf-back-to-top/demo/scroll-distance.html | 7 ++ .../pf-back-to-top/docs/pf-back-to-top.md | 90 +++++++++++++++++ elements/pf-back-to-top/pf-back-to-top.css | 31 ++++++ elements/pf-back-to-top/pf-back-to-top.ts | 97 +++++++++++++++++++ .../pf-back-to-top/test/pf-back-to-top.e2e.ts | 12 +++ .../test/pf-back-to-top.spec.ts | 21 ++++ 12 files changed, 301 insertions(+) create mode 100644 elements/pf-back-to-top/README.md create mode 100644 elements/pf-back-to-top/demo/always-visible.html create mode 100644 elements/pf-back-to-top/demo/demo.css create mode 100644 elements/pf-back-to-top/demo/pf-back-to-top.html create mode 100644 elements/pf-back-to-top/demo/pf-back-to-top.js create mode 100644 elements/pf-back-to-top/demo/scroll-distance.html create mode 100644 elements/pf-back-to-top/docs/pf-back-to-top.md create mode 100644 elements/pf-back-to-top/pf-back-to-top.css create mode 100644 elements/pf-back-to-top/pf-back-to-top.ts create mode 100644 elements/pf-back-to-top/test/pf-back-to-top.e2e.ts create mode 100644 elements/pf-back-to-top/test/pf-back-to-top.spec.ts diff --git a/elements/package.json b/elements/package.json index 0cd47fe88f..a3b0b1fc74 100644 --- a/elements/package.json +++ b/elements/package.json @@ -18,6 +18,7 @@ "./pf-accordion/pf-accordion.js": "./pf-accordion/pf-accordion.js", "./pf-avatar/BaseAvatar.js": "./pf-avatar/BaseAvatar.js", "./pf-avatar/pf-avatar.js": "./pf-avatar/pf-avatar.js", + "./pf-back-to-top/pf-back-to-top.js": "./pf-back-to-top/pf-back-to-top.js", "./pf-badge/BaseBadge.js": "./pf-badge/BaseBadge.js", "./pf-badge/pf-badge.js": "./pf-badge/pf-badge.js", "./pf-banner/pf-banner.js": "./pf-banner/pf-banner.js", diff --git a/elements/pf-back-to-top/README.md b/elements/pf-back-to-top/README.md new file mode 100644 index 0000000000..07dedec369 --- /dev/null +++ b/elements/pf-back-to-top/README.md @@ -0,0 +1,13 @@ +# Back to Top +Add a description of the component here. + +## Usage +Describe how best to use this web component along with best practices. + +```html + + Back to Top + + + +``` diff --git a/elements/pf-back-to-top/demo/always-visible.html b/elements/pf-back-to-top/demo/always-visible.html new file mode 100644 index 0000000000..001f3dfabe --- /dev/null +++ b/elements/pf-back-to-top/demo/always-visible.html @@ -0,0 +1,6 @@ + + + +Back to Top + +
diff --git a/elements/pf-back-to-top/demo/demo.css b/elements/pf-back-to-top/demo/demo.css new file mode 100644 index 0000000000..05741b9fb5 --- /dev/null +++ b/elements/pf-back-to-top/demo/demo.css @@ -0,0 +1,14 @@ +div[data-demo] { + height: 200vh; +} + +main { + /* ensure main is scrollable depending on demo view point */ + overflow-y: scroll; +} + +.scroll-indicator { + height: 400px; + padding: var(--pf-global--spacer--md, 1rem); + background-color: var(--pf-global--palette--cyan-50, #f2f9f9) !important; +} diff --git a/elements/pf-back-to-top/demo/pf-back-to-top.html b/elements/pf-back-to-top/demo/pf-back-to-top.html new file mode 100644 index 0000000000..c597ebcb04 --- /dev/null +++ b/elements/pf-back-to-top/demo/pf-back-to-top.html @@ -0,0 +1,8 @@ + + + +
+ Scroll down to end of cyan box, 400px (default). +
+Back to Top + diff --git a/elements/pf-back-to-top/demo/pf-back-to-top.js b/elements/pf-back-to-top/demo/pf-back-to-top.js new file mode 100644 index 0000000000..6427ca1d1e --- /dev/null +++ b/elements/pf-back-to-top/demo/pf-back-to-top.js @@ -0,0 +1 @@ +import '@patternfly/elements/pf-back-to-top/pf-back-to-top.js'; diff --git a/elements/pf-back-to-top/demo/scroll-distance.html b/elements/pf-back-to-top/demo/scroll-distance.html new file mode 100644 index 0000000000..baf30d874b --- /dev/null +++ b/elements/pf-back-to-top/demo/scroll-distance.html @@ -0,0 +1,7 @@ + + + +
+ Scroll down to end of cyan box, 200px. +
+ diff --git a/elements/pf-back-to-top/docs/pf-back-to-top.md b/elements/pf-back-to-top/docs/pf-back-to-top.md new file mode 100644 index 0000000000..5c1f43f676 --- /dev/null +++ b/elements/pf-back-to-top/docs/pf-back-to-top.md @@ -0,0 +1,90 @@ + + +{% renderOverview %} + Back to Top +{% endrenderOverview %} + +{% band header="Usage" %} + + ### Default + {% htmlexample %}Back to Top{% endhtmlexample %} + + ### Title attribute + {% htmlexample %}{% endhtmlexample %} + +
+ + ### Scrollable Selector + {% htmlexample %} +
+
+
+ Scroll down to end of cyan box, 400px (default). +
+
+ Back to Top +
+ {% endhtmlexample %} + + ### Scroll Distance + {% htmlexample %} +
+
+
+ Scroll down to end of cyan box, 100px. +
+
+ Back to Top +
+ {% endhtmlexample %} + +
+{% endband %} + +{% renderSlots %}{% endrenderSlots %} + +{% renderAttributes %}{% endrenderAttributes %} + +{% renderMethods %}{% endrenderMethods %} + +{% renderEvents %}{% endrenderEvents %} + +{% renderCssCustomProperties %}{% endrenderCssCustomProperties %} + +{% renderCssParts %}{% endrenderCssParts %} diff --git a/elements/pf-back-to-top/pf-back-to-top.css b/elements/pf-back-to-top/pf-back-to-top.css new file mode 100644 index 0000000000..29159ce753 --- /dev/null +++ b/elements/pf-back-to-top/pf-back-to-top.css @@ -0,0 +1,31 @@ +:host { + display: block; + position: absolute; + right: var(--pf-c-back-to-top--Right, var(--pf-global--spacer--2xl, 3rem)); + bottom: var(--pf-c-back-to-top--Bottom, var(--pf-global--spacer--lg, 1.5rem)); +} + +:host([hidden]) { + display: none; +} + +pf-button { + box-shadow: var(--pf-c-back-to-top--c-button--BoxShadow, var(--pf-global--BoxShadow--lg-bottom, 0 0.75rem 0.75rem -0.5rem rgba(3, 3, 3, 0.18))); + + --pf-c-button--FontSize: var(--pf-c-back-to-top--c-button--FontSize, var(--pf-global--FontSize--xs,0.75rem)); + --pf-c-button--BorderRadius: var(--pf-c-back-to-top--c-button--BorderRadius, var(--pf-global--BorderRadius--lg, 30em)); + --pf-c-button--PaddingTop: var(--pf-c-back-to-top--c-button--PaddingTop, var(--pf-global--spacer--xs, 0.25rem)); + --pf-c-button--PaddingRight: var(--pf-c-back-to-top--c-button--PaddingRight, var(--pf-global--spacer--sm, 0.5rem)); + --pf-c-button--PaddingBottom: var(--pf-c-back-to-top--c-button--PaddingBottom, var(--pf-global--spacer--xs, 0.25rem)); + --pf-c-button--PaddingLeft: var(--pf-c-back-to-top--c-button--PaddingLeft, var(--pf-global--spacer--sm, 0.5rem)); +} + +span { + margin-inline-start: var(--pf-c-button__icon--m-end--MarginLeft, var(--pf-global--spacer--xs, 0.25rem)); +} + +@media (min-width: 768px) { + :host { + --pf-c-back-to-top--Bottom: var(--pf-c-back-to-top--md--Bottom); + } +} diff --git a/elements/pf-back-to-top/pf-back-to-top.ts b/elements/pf-back-to-top/pf-back-to-top.ts new file mode 100644 index 0000000000..0cff7c5eaa --- /dev/null +++ b/elements/pf-back-to-top/pf-back-to-top.ts @@ -0,0 +1,97 @@ +import { LitElement, html, type PropertyValueMap } from 'lit'; +import { customElement } from 'lit/decorators/custom-element.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; + +import '@patternfly/elements/pf-button/pf-button.js'; + +import styles from './pf-back-to-top.css'; +import { property } from 'lit/decorators/property.js'; + +import { Logger } from '@patternfly/pfe-core/controllers/logger.js'; + +/** + * The **back to top** component is a shortcut that allows users to quickly navigate to the top of a lengthy content page. + * @summary A shortcut that allows users to quickly navigate to the top of a lengthy content page. + * @slot icon + * Contains the button's icon or state indicator, e.g. a spinner. + * @slot + * Must contain exactly one `