Add back to top component

src/index.html

@@ -806,6 +806,29 @@ <h2 class="text-h3">Heading</h2>
         Maintained by DesignLab
       </p>
     </div>
+    <div id="BackToTop" class="BlockBackToTop">
+      <button
+        class="BaseButton text-contrast-none inline-block -primary -compact fixed bottom-10 right-10 z-60"
+      >
+        <span class="label block">
+          <svg
+            class="IconDropdown"
+            width="12"
+            height="8"
+            viewBox="0 0 12 8"
+            xmlns="http://www.w3.org/2000/svg"
+            aria-hidden="true"
+            focusable="false"
+          >
+            <path
+              d="M.343 2L1.757.586 6 4.828 10.243.586 11.657 2 6 7.657.343 2z"
+              fill="currentColor"
+            ></path>
+          </svg>
+          <span class="label-text">Back to top</span>
+        </span>
+      </button>
+    </div>
     <script type="module" src="./js/scripts.js"></script>
   </body>
 </html>

src/js/components/_BlockBackToTop.js

@@ -0,0 +1,29 @@
+/*
+ **
+ ** Back To Top button for scrolling to the top
+ **
+ */
+
+document.addEventListener('DOMContentLoaded', () => {
+  const backToTopBtn = document
+    .getElementById('BackToTop')
+    .querySelector('button')
+  const alwaysVisible = backToTopBtn.classList.contains('always-visible')
+  const threshold = 300
+
+  const onScroll = () => {
+    if (!alwaysVisible) {
+      showBackToTop = window.scrollY > threshold
+      showBackToTop
+        ? (backToTopBtn.style.display = 'block')
+        : (backToTopBtn.style.display = 'none')
+    }
+  }
+
+  const scrollToTop = () => {
+    window.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
+  window.addEventListener('scroll', onScroll)
+  backToTopBtn.addEventListener('click', scrollToTop)
+})

src/js/scripts.js

@@ -4,3 +4,4 @@ require('./vendors/_swiper.js')
 require('./components/_HeroMedia.js')
 require('./components/_BlockAccordion.js')
 require('./components/_HeaderInternal.js')
+require('./components/_BlockBackToTop.js')

src/scss/_components.scss

@@ -4,6 +4,7 @@
 @import 'components/BaseImageCaption';
 @import 'components/BaseImagePlaceholder';
 @import 'components/BasePlaceholder';
+@import 'components/BlockBackToTop';
 @import 'components/BlockImageCarousel';
 @import 'components/BlockImageCarouselItem';
 @import 'components/BlockImageGallery';

src/scss/components/_BlockBackToTop.scss

@@ -0,0 +1,25 @@
+.BlockBackToTop {
+  > button {
+    @apply hidden;
+
+    &.always-visible {
+      @apply block;
+    }
+  }
+
+  .IconDropdown {
+    @apply transform rotate-180 text-sm;
+
+    @screen sm {
+      @apply mr-2;
+    }
+  }
+
+  .label-text {
+    @apply hidden;
+
+    @screen sm {
+      @apply block;
+    }
+  }
+}

storybook/stories/_docs/overview_blocks.stories.mdx

@@ -89,6 +89,11 @@ Reserved for the top of the page. Learn more about our heroes on the [heroes ove
       canvasClass: 'sbdocs-inline-height',
       fullWidth: true,
     },
+    {
+      heading: 'BlockBackToTop',
+      description: 'Allows users to scroll back to the top of the page',
+      storyId: 'components-blocks-blockbacktotop--default',
+    },
   ]}
 />
 

storybook/stories/components/BaseButton/BaseButton.js

@@ -7,6 +7,7 @@ import { IconSocialInstagramTemplate } from '../Icons/IconSocialInstagram'
 import { IconSocialYoutubeTemplate } from '../Icons/IconSocialYoutube'
 import { IconExpandTemplate } from '../Icons/IconExpand'
 import { IconExternalTemplate } from '../Icons/IconExternal'
+import { IconDropdownTemplate } from '../Icons/IconDropdown'
 
 export const BaseButtonTemplate = ({
   label,
@@ -17,11 +18,13 @@ export const BaseButtonTemplate = ({
   compact,
   disabled,
   icon,
+  iconBefore,
   iconOnly,
   cssClass,
   fancybox,
   target,
 }) => {
+  if (iconBefore == undefined) iconBefore = false
   if (iconOnly == undefined) iconOnly = false
   fancybox = fancybox ? fancybox : ''
   let iconTemplate = ''
@@ -35,6 +38,7 @@ export const BaseButtonTemplate = ({
   else if (icon == 'instagram') iconTemplate = IconSocialInstagramTemplate({})
   else if (icon == 'youtube') iconTemplate = IconSocialYoutubeTemplate({})
   else if (icon == 'external') iconTemplate = IconExternalTemplate({})
+  else if (icon == 'dropdown') iconTemplate = IconDropdownTemplate({})
   else if (caret) iconTemplate = IconCaretTemplate({})
 
   // setup classnames
@@ -51,6 +55,10 @@ export const BaseButtonTemplate = ({
     label = ''
   }
 
+  const content = iconBefore
+    ? `${iconTemplate}<span class="label-text">${label}</span>`
+    : `<span class="label-text">${label}</span>${iconTemplate}`
+
   if (disabled) {
     return `
       <button 
@@ -60,7 +68,7 @@ export const BaseButtonTemplate = ({
     }
       >
         <span class="label block">
-          ${label}${iconTemplate}
+          ${content}
         </span>
       </button>
     `
@@ -81,7 +89,7 @@ export const BaseButtonTemplate = ({
     }
       >
         <span class="label block">
-          ${label}${iconTemplate}
+          ${content}
         </span>
       </a>
     `
@@ -96,7 +104,7 @@ export const BaseButtonTemplate = ({
     } ${fancybox}
       >
         <span class="label block">
-          ${label}${iconTemplate}
+          ${content}
         </span>
       </button>
     `

storybook/stories/components/BaseButton/BaseButton.stories.js

@@ -81,12 +81,23 @@ export default {
           'twitter',
           'instagram',
           'youtube',
+          'dropdown',
         ],
       },
       table: {
         defaultValue: { summary: 'none' },
       },
     },
+    iconBefore: {
+      type: 'boolean',
+      description: 'If the icon should be positioned before the text.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
     iconOnly: {
       type: 'boolean',
       description: 'If the button will only include an icon and no text.',
@@ -127,6 +138,7 @@ Primary_Button.args = {
   compact: false,
   disabled: false,
   icon: null,
+  iconBefore: false,
   iconOnly: false,
 }
 export const Primary_Internal_Button = BaseButtonTemplate.bind({})

storybook/stories/components/BlockBackToTop/BlockBackToTop.js

@@ -0,0 +1,14 @@
+import { BaseButtonTemplate } from '../BaseButton/BaseButton'
+
+export const BlockBackToTopTemplate = ({ alwaysVisible }) => {
+  return `<div id="BackToTop" class="BlockBackToTop">
+  ${BaseButtonTemplate({
+    variant: 'primary',
+    cssClass: `z-60 ${alwaysVisible ? 'always-visible' : ''}`,
+    compact: true,
+    icon: 'dropdown',
+    iconBefore: true,
+    label: 'Back to top',
+  })}
+  </div>`
+}

storybook/stories/components/BlockBackToTop/BlockBackToTop.stories.js

@@ -0,0 +1,23 @@
+import { BlockBackToTopTemplate } from './BlockBackToTop.js'
+
+export default {
+  title: 'Components/Blocks/BlockBackToTop',
+  argTypes: {
+    alwaysVisible: {
+      type: 'boolean',
+      description: 'Toggles visibility based on the scrolling position.',
+    },
+  },
+  parameters: {
+    viewMode: 'docs',
+    docs: {
+      description: {
+        component: 'Allows users to scroll back to the top of the page',
+      },
+    },
+  },
+}
+
+export const Default = BlockBackToTopTemplate.bind({})
+Default.storyName = 'BlockBackToTop'
+Default.args = { alwaysVisible: true }