feat(back-to-top): add <rh-back-to-top> (#1517)

* feat(back-to-top): add `<rh-back-to-top>`

* chore(back-to-top): lint

* fix(back-to-top): support dev server and docs demo

* fix(back-to-top): suggestion for focus ring when on differnt backgrounds

* docs(back-to-top): update readme

* test(back-to-top): add tests

* chore(back-to-top): add changeset

* docs(back-to-top): remove comment

* chore(back-to-top): update changeset with example

* chore(back-to-top): remove unused demo.css

* docs(back-to-top): improve screenshot

* docs(back-to-top): attempt fix for playground view

* fix(back-to-top): change attribute to visible="always"

* docs(back-to-top): add back to top to repo status

* docs: fix bug when component isnt yet in the repoStatus.yml

* docs(back-to-top): update shortcodes for repoStatus

---------

Co-authored-by: Benny Powers - עם ישראל חי! <[email protected]>

.changeset/late-cobras-hammer.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+
+✨ Added `<rh-back-to-top>`.
+
+Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content.
+
+```html
+<rh-back-to-top href="#top">Back to top</rh-back-to-top>
+```

docs/_data/repoStatus.yaml

@@ -54,6 +54,20 @@
       status: Ready
     - name: Documentation
       status: Ready
+- name: "Back To Top"
+  type: "Element"
+  overallStatus: "Available"
+  libraries:
+    - name: Figma library
+      status: Ready
+    - name: Responsive
+      status: Ready
+    - name: RH Elements
+      status: Ready
+    - name: webRH
+      status: Planned
+    - name: Documentation
+      status: In Progress
 - name: "Badge"
   type: "Element"
   overallStatus: "Available"

docs/_plugins/shortcodes/repoStatus.cjs

@@ -19,7 +19,7 @@ const STATUS_LEGEND = {
 </svg>
  `
   },
-  'In progress': {
+  'In Progress': {
     description: 'In the design or development process',
     color: 'green',
     variant: 'outline',
@@ -166,7 +166,7 @@ function getRepoData() {
   const docsPage = this.ctx._;
   const allStatuses = this.ctx.repoStatus ?? docsPage?.repoStatus ?? [];
   const title = this.ctx.title ?? docsPage?.title;
-  return allStatuses.find(component => component.name === title && component.type === 'Element').libraries;
+  return allStatuses.find(component => component.name === title && component.type === 'Element')?.libraries;
 }
 
 /**
@@ -175,7 +175,7 @@ function getRepoData() {
  */
 function repoStatusList({ heading = 'Status', level = 2 } = {}) {
   // Removing Documentation status from the repoStatusList
-  const statusList = getRepoData.call(this).filter(repo => repo.name !== 'Documentation');
+  const statusList = getRepoData.call(this)?.filter(repo => repo.name !== 'Documentation');
 
   if (!Array.isArray(statusList) || !statusList.length) {
     return '';
@@ -279,7 +279,7 @@ ${listItem.libraries.map(lib => {
  */
 function repoStatusChecklist({ heading = 'Status checklist', level = 2 } = {}) {
   const headingLevel = Array.from({ length: level }, () => '#').join('');
-  const statusList = getRepoData.call(this).filter(repo => repo.name !== 'Documentation');
+  const statusList = getRepoData.call(this)?.filter(repo => repo.name !== 'Documentation');
   if (!Array.isArray(statusList) || !statusList.length) {
     return '';
   } else {

elements/rh-back-to-top/README.md

@@ -0,0 +1,23 @@
+# Back to Top
+The back to top component is a shortcut that allows users to quickly navigate to the top of a lengthy content page.
+
+
+## Installation
+
+If using npm/bundlers:
+
+```bash
+npm install @rhds/elements
+```
+
+Then once installed, import it to your application:
+
+```js
+import '@rhds/elements/rh-button/rh-button.js';
+``` 
+## Usage
+Back to top button is designed to only be used once per page. 
+
+```html
+<rh-back-to-top href="#top">Back to top</rh-back-to-top>
+```

elements/rh-back-to-top/demo/always-visible.html

@@ -0,0 +1,20 @@
+<rh-back-to-top visible="always" href="#top">Back to top</rh-back-to-top>
+<script type="module">
+  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+</script>
+
+<style>
+  main {
+    display: block;
+    scroll-behavior: smooth;
+    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+  }
+  #bottom {
+    position: absolute;
+    bottom: 0;
+  }
+  #nav {
+    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)); !important;
+  }
+</style>

elements/rh-back-to-top/demo/color-context.html

@@ -0,0 +1,74 @@
+<rh-context-demo>
+  <div id="overflow">
+    <a id="top" href="#bottom">Go to bottom</a>
+    <p>Scroll down or press tab to see the back to top button</p>
+    <a id="bottom" href="#top">Go to top</a>
+  <div>
+</rh-context-demo>
+
+<rh-back-to-top href="#top">Back to top</rh-back-to-top>
+
+<script type="module">
+  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+  import '@rhds/elements/lib/elements/rh-context-demo/rh-context-demo.js';
+</script>
+
+<style>
+  a {
+    color: var(--rh-color-interactive-blue-darker, #0066cc);
+  }
+
+  a:is(:hover,:focus) {
+    color: var(--rh-color-interactive-blue-darkest, #003366);
+  }
+
+  [color-palette^="dark"] a {
+    color: var(--rh-color-accent-base-on-dark, #92c5f9);
+  }
+
+  [color-palette^="dark"] a:is(:hover,:focus) {
+    color: var(--rh-color-interactive-blue-lightest, #b9dafc);
+  }
+
+  main {
+    display: block;
+    scroll-behavior: smooth;
+    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+  }
+
+  #nav {
+    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+  }
+
+  #overflow {
+    min-height: calc(100dvh + 401px);
+    position: relative;
+  }
+
+  #bottom {
+    position: absolute;
+    bottom: 0;
+  }
+
+  rh-context-demo {
+    height: auto;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    main {
+      scroll-behavior: auto;
+    }
+  }
+</style>
+
+
+<script type="module">
+  /* add support for demo/fullscreen and dev server */
+  const b2t = document.querySelector('rh-back-to-top');
+  const main = document.querySelector('main');
+  // if main isn't scrollable use window
+  if (window.getComputedStyle(main).overflow === 'scroll') {
+    b2t.scrollableSelector = 'main';
+  }
+</script>

elements/rh-back-to-top/demo/no-slotted-text.html

@@ -0,0 +1,47 @@
+<div id="overflow">
+  <a id="top" href="#bottom">Go to bottom</a>
+  <p>Scroll down or press tab to see the back to top button</p>
+  <a id="bottom" href="#top">Go to top</a>
+  <rh-back-to-top href="#top" label="Return to top"></rh-back-to-top>
+</div>
+<script type="module">
+  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+</script>
+
+<style>
+  main {
+    display: block;
+    scroll-behavior: smooth;
+    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+  }
+
+  #nav {
+    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+  }
+
+  #overflow {
+    min-height: calc(100dvh + 401px);
+    position: relative;
+  }
+
+  #bottom {
+    position: absolute;
+    bottom: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    main {
+      scroll-behavior: auto;
+    }
+  }
+</style>
+<script type="module">
+  /* add support for demo/fullscreen and dev server */
+  const b2t = document.querySelector('rh-back-to-top');
+  const main = document.querySelector('main');
+  // if main isn't scrollable use window
+  if (window.getComputedStyle(main).overflow === 'scroll') {
+    b2t.scrollableSelector = 'main';
+  }
+</script>

elements/rh-back-to-top/demo/position-sticky.html

@@ -0,0 +1,100 @@
+<div id="mock" class="viewport">
+  <div class="nav" id="top"></div>
+  <div class="page-body" >
+    <div class="hero">
+      <div>
+        <h2>Back to Top Demo</h2>
+        <p><pf-icon icon="arrow-down"></pf-icon> Scroll down or press tab to show back to top link.</p>
+        <p>Back to top link will stay above the footer</p>
+      </div>
+    </div>
+    <div class="main">
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tellus nec erat sodales ultrices. Morbi fringilla, purus ut cursus volutpat, dui ipsum varius massa, a lobortis mauris mi et justo. Integer lobortis sed magna in aliquet. Pellentesque suscipit elit enim, in consectetur metus tincidunt eu. In quam dolor, bibendum ac lorem et, blandit lacinia lorem. Praesent bibendum magna vel finibus facilisis. Cras eleifend est sed nisi malesuada, vitae varius sem venenatis. Nam maximus ligula bibendum quam porttitor tempor. Cras in lacus in lacus consectetur placerat lobortis ac velit. Pellentesque venenatis leo sit amet neque commodo pulvinar. Integer quis nulla ac eros luctus scelerisque. Pellentesque interdum sapien eros. Integer id velit sed eros fringilla porttitor.</p>
+      <p>Integer sit amet ultricies felis. Pellentesque consectetur metus lacus, vitae ultricies augue imperdiet non. Phasellus consectetur sapien elit, at blandit sapien scelerisque at. Sed congue venenatis sem nec ultrices. Aenean vel nunc semper, auctor lacus id, imperdiet ipsum. Aliquam gravida ultricies auctor. Suspendisse potenti.</p>
+      <p>Maecenas volutpat nisi lacus, sed facilisis sapien porta eget. Fusce interdum euismod faucibus. Curabitur sit amet lorem eu massa rutrum tempor vitae vitae urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam ultricies lacinia nisl, sed pharetra tortor porttitor vitae. Donec tincidunt lectus vitae quam volutpat malesuada. Nunc felis orci, commodo vitae euismod non, vestibulum vel mauris. Quisque vel ipsum non dolor faucibus porttitor. Aenean porttitor sollicitudin elit, sit amet dictum ante dapibus vitae.</p>
+      <p>Nam imperdiet id ipsum sit amet congue. Sed nisl felis, pharetra in convallis varius, pretium a sem. Duis tincidunt luctus ipsum, a vestibulum nulla pharetra eget. In varius pellentesque lorem sed viverra. Phasellus ut leo pellentesque, finibus urna quis, elementum sapien. Nunc lacinia risus tortor, sit amet hendrerit dui vehicula ornare. Phasellus porttitor hendrerit mauris, vel euismod elit posuere ut.</p>
+      <p>Nullam tristique egestas ligula vitae interdum. Aliquam erat volutpat. Morbi gravida, enim eget convallis efficitur, risus ante sagittis magna, a viverra dolor felis a velit. Sed blandit semper nulla eu congue. Etiam gravida iaculis diam, ut vehicula tortor consectetur et. Mauris vitae tincidunt est. Phasellus sit amet nulla leo. Phasellus luctus et libero non mollis. Pellentesque efficitur, massa non vehicula auctor, risus dui vehicula sem, at aliquet elit justo et nibh. Ut sodales lectus vitae lacus aliquam, quis pharetra ante viverra. Aliquam tristique, mi non egestas viverra, nunc turpis malesuada lectus, vitae malesuada enim ante et arcu. Nullam interdum nulla et purus molestie interdum. Nulla et eros porttitor, dignissim sapien nec, ornare augue.</p>
+      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In quis tellus nec erat sodales ultrices. Morbi fringilla, purus ut cursus volutpat, dui ipsum varius massa, a lobortis mauris mi et justo. Integer lobortis sed magna in aliquet. Pellentesque suscipit elit enim, in consectetur metus tincidunt eu. In quam dolor, bibendum ac lorem et, blandit lacinia lorem. Praesent bibendum magna vel finibus facilisis. Cras eleifend est sed nisi malesuada, vitae varius sem venenatis. Nam maximus ligula bibendum quam porttitor tempor. Cras in lacus in lacus consectetur placerat lobortis ac velit. Pellentesque venenatis leo sit amet neque commodo pulvinar. Integer quis nulla ac eros luctus scelerisque. Pellentesque interdum sapien eros. Integer id velit sed eros fringilla porttitor.</p>
+      <a id="bottom" href="#focusable-element-bottom">Focusable element</a>
+    </div>
+    <rh-back-to-top scrollable-selector="#mock" href="#top">Back to top</rh-back-to-top>
+    <div class="footer"></div>
+  </div>
+
+</div>
+
+<script type="module">
+  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+</script>
+
+<style>
+  /* override to place rh-back-to-top in context of page elements */
+  rh-back-to-top {
+    position: sticky;
+    float: right;
+  }
+
+  /* Addtional styles for demo page layout */
+  #mock {
+    --_nav-height: 70px;
+    --_footer-height: 400px;
+    --_hero-height: 300px;
+    --_content-width: 60rem;
+
+    scroll-behavior: smooth;
+    height: calc(100vh - calc(24px * 2) - var(--pf-demo-header-height));
+    overflow-y: scroll;
+    border: var(--rh-border-width-md, 2px) solid var(--rh-color-border-subtle-on-light, #c7c7c7);
+  }
+  #mock .page-body {
+    position: relative;
+  }
+  #mock .nav {
+    background-color: #151515;
+    height: var(--_nav-height);
+    color: #ffffff;
+  }
+  #mock .main {
+    position: relative;
+    margin: 0 auto;
+    max-width: var(--_content-width);
+    margin-block: var(--rh-spacer-2xl, 32px);
+    padding: var(--rh-spacer-2xl, 32px);
+    min-height: calc(100dvh - var(--_nav-height) - var(--_hero-height));
+
+  }
+  #mock .hero {
+    display: flex;
+    justify-content: space-evenly;
+    height: var(--_hero-height);
+    background-color: var(--rh-color-surface-lighter, #f2f2f2);
+    padding-inline: var(--rh-spacer-2xl, 32px);
+    flex-direction: column;
+  }
+  #mock .hero div {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+    padding-inline: var(--rh-spacer-2xl, 32px);
+    margin: 0 auto;
+    max-width: var(--_content-width);
+  }
+  #mock .footer {
+    position: static;
+    background-color: #151515;
+    height: var(--_footer-height);
+    margin-block-start: var(--rh-space-6xl, 96px);
+    color: #ffffff;
+  }
+  #mock #bottom {
+    position: absolute;
+    bottom: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    #mock .viewport {
+      scroll-behavior: auto;
+    }
+  }
+</style>

elements/rh-back-to-top/demo/rh-back-to-top.html

@@ -0,0 +1,48 @@
+<div id="overflow">
+  <a id="top" href="#bottom">Go to bottom</a>
+  <p>Scroll down or press tab to see the back to top button</p>
+  <a id="bottom" href="#top">Go to top</a>
+  <rh-back-to-top href="#top">Back to top</rh-back-to-top>
+</div>
+<script type="module">
+  import '@rhds/elements/rh-back-to-top/rh-back-to-top.js';
+  import '@patternfly/elements/pf-icon/pf-icon.js';
+</script>
+
+<style>
+  main {
+    display: block;
+    scroll-behavior: smooth;
+    max-height: calc(100dvh - var(--pf-demo-header-height)) !important;
+  }
+
+  #nav {
+    height: calc(100dvh - var(--pf-demo-header-height, 4.375rem)) !important;
+  }
+
+  #overflow {
+    min-height: calc(100dvh + 401px);
+    position: relative;
+  }
+
+  #bottom {
+    position: absolute;
+    bottom: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    main {
+      scroll-behavior: auto;
+    }
+  }
+</style>
+
+<script type="module">
+  /* add support for demo/fullscreen and dev server */
+  const b2t = document.querySelector('rh-back-to-top');
+  const main = document.querySelector('main');
+  // if main isn't scrollable use window
+  if (window.getComputedStyle(main).overflow === 'scroll') {
+    b2t.scrollableSelector = 'main';
+  }
+</script>