Change scroll top button to component

docs/_markbind/layouts/default.md

@@ -4,6 +4,7 @@
   <div id="content-wrapper">
     {{ content }}
   </div>
+  <scroll-top-button></scroll-top-button>
 </div>
 
 <include src="footers/footer.md" />

docs/_markbind/layouts/devGuide.md

@@ -42,6 +42,7 @@
       <page-nav />
     </div>
   </nav>
+  <scroll-top-button></scroll-top-button>
 </div>
 
 <include src="footers/footer.md" />

docs/_markbind/layouts/userGuide.md

@@ -54,6 +54,7 @@
       <page-nav />
     </div>
   </nav>
+  <scroll-top-button></scroll-top-button>
 </div>
 
 <include src="footers/footer.md" />

docs/userGuide/fullSyntaxReference.md

@@ -48,6 +48,7 @@
   navBars : ['Nav Bars', ['navigation', 'reader-facing']],
   siteNavigationMenus : ['Site Navigation Menus', ['navigation', 'reader-facing']],
   pageNavigationMenus : ['Page Navigation Menus', ['navigation', 'reader-facing']],
+  scrollTopButton : ['Scroll To Top Button', ['navigation', 'reader-facing']],
   questions : ['Questions and Quizzes', ['others', 'reader-facing']]
 } %}
 

docs/userGuide/syntax/scrollTopButton.md

@@ -0,0 +1,39 @@
+{% from "userGuide/components/advanced.md" import slot_info_trigger %}
+
+## Scroll To Top Button
+
+<div id="content">
+
+The ```scroll-top-button``` component allows users to move to the top of the page.
+
+****Adding a scroll-top-button****
+
+Add ```<scroll-top-button><scroll-top-button/>``` to layout file.
+
+****Options****
+
+| Name                      | Type     | Default                 | Description                                                                                   |
+|---------------------------|----------|-------------------------|-----------------------------------------------------------------------------------------------|
+| icon{{slot_info_trigger}} | `String` | `:fas-arrow-circle-up:` | Inline MarkDown text of the icon displayed on the left.                                       |
+| icon-size                 | `String` | `lg`                    | Resizes the icon. Supports integer-scaling of the icon dimensions e.g. `2x`, `3x`, `4x`, etc. |
+| bottom                    | `String` | `2%`                    | Distance from bottom edge of page.                                                            |
+| right                     | `String` | `2%`                    | Distance from right edge of page.                                                             |
+
+</div>
+
+<div id="short">
+
+```html
+<scroll-top-button
+    icon=":fas-arrow-circle-up:"
+    icon-size="2x"
+    bottom="2%"
+    right="2%"
+></scroll-top-button>
+```
+</div>
+
+<div id="examples" class="d-none">
+
+You can see an example of a scroll to top button on the ==on the bottom right side== of this page.
+</div>

packages/cli/test/functional/test_site/_markbind/layouts/default.md

@@ -26,7 +26,8 @@
     <div class="nav-component slim-scroll">
       <page-nav />
     </div>
-  </nav>
+  </nav>    
+  <scroll-top-button></scroll-top-button>
 </div>
 
 <include src="footers/footer.md" />

packages/cli/test/functional/test_site/expected/bugs/index.html

@@ -214,12 +214,12 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
           <p>Repro:</p>
           <p>Steps to Reproduce</p>
         </div>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/index.html

@@ -793,7 +793,6 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
           </ol>
         </section>
 
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
@@ -843,6 +842,7 @@ <h6 class="always-index" id="level-6-header-outside-headingsearchindex-with-alwa
           </overlay-source>
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/sub_site/index.html

@@ -221,12 +221,12 @@ <h2 id="feature-list"><span id="feature-list" class="anchor"></span>Feature list
         <div id="image">
           <img src="/test_site/sub_site/images/I'm not allowed to use my favorite tool.png">
         </div>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/index.html

@@ -212,12 +212,12 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
           <p><strong>baseUrl in a nested sub-site page's include should correctly evaluate to the nested sub-site</strong></p>
           <p>The base url in the nested_sub_site page's include is /test_site/sub_site/nested_sub_site.</p>
         </div>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/sub_site/nested_sub_site/testNunjucksPathResolving.html

@@ -218,12 +218,12 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
         <p><strong>Test {% import %}</strong></p>
         <p>variable to import</p>
         <hr>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/sub_site/testNunjucksPathResolving.html

@@ -218,12 +218,12 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
         <p><strong>Test {% import %}</strong></p>
         <p>variable to import</p>
         <hr>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/testAnchorGeneration.html

@@ -280,12 +280,12 @@ <h5 id="should-have-anchor-25"><span id="should-have-anchor-25" class="anchor"><
             <h6 id="should-have-anchor-26"><span id="should-have-anchor-26" class="anchor"></span>should have anchor<a class="fa fa-anchor" href="#should-have-anchor-26" onclick="event.stopPropagation()"></a></h6>
           </panel>
         </div>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/testAnnotate.html

@@ -267,12 +267,12 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
           <a-point x="50%" y="50%" content="some test text" label="5" legend="both" header="some test text"></a-point>
           <a-point x="75%" y="50%" content="some test text" label="6" legend="both" header="some test text"></a-point>
         </annotate>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>

packages/cli/test/functional/test_site/expected/testAntiFOUCStyles.html

@@ -235,12 +235,12 @@ <h3 id="testing-site-nav"><span id="testing-site-nav" class="anchor"></span>Test
         <p><strong>Filler text</strong></p>
         <p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
         <p>Some text</p>
-        <i class="fa fa-arrow-circle-up fa-lg d-print-none" id="scroll-top-button" onclick="handleScrollTop()" aria-hidden="true"></i>
       </div>
       <overlay-source id="page-nav" tag-name="nav" to="page-nav">
         <div class="nav-component slim-scroll">
         </div>
       </overlay-source>
+      <scroll-top-button></scroll-top-button>
     </div>
     <div>
       <footer>