DS-541 Floating Action Buttons

docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-10a-floating-action-buttons-demo-show-on-scroll-position.twig

@@ -11,21 +11,19 @@
     {% include '@bolt-layouts-layout/layout-item.twig' with {
       content: banner,
     } only %}
+
+    {% set title %}
+      {% include '@bolt-components-headline/headline.twig' with {
+        text: 'Article Title',
+        attributes: {
+          id: 'main-title'
+        },
+      } only %}
+    {% endset %}
     {% include '@bolt-layouts-layout/layout-item.twig' with {
-      content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.',
-    } only %}
-    {% include '@bolt-layouts-layout/layout-item.twig' with {
-      content: 'Ground round kielbasa meatloaf, bacon flank rump pancetta. Burgdoggen hamburger jowl turducken chicken, jerky flank kielbasa pork belly beef ribs fatback boudin shankle rump turkey. Fatback andouille chicken ground round beef, tail buffalo pastrami capicola chislic sausage leberkas short ribs. Kielbasa jowl jerky, swine porchetta boudin drumstick andouille chicken flank ribeye.',
-    } only %}
-    {% include '@bolt-layouts-layout/layout-item.twig' with {
-      content: 'Picanha biltong salami pork chop capicola t-bone jowl tongue. Cow pork chop jowl capicola, doner pork jerky short loin spare ribs turducken frankfurter shankle sausage. Spare ribs pork biltong, chicken alcatra cow picanha brisket drumstick tongue prosciutto shank beef tail pig. Kielbasa t-bone venison chislic, tongue pork tenderloin capicola chuck pastrami jerky.',
-    } only %}
-    {% include '@bolt-layouts-layout/layout-item.twig' with {
-      content: 'Hamburger pastrami short loin pork belly salami pig. Spare ribs sausage t-bone ham hock turkey pork chop tri-tip picanha. Venison turducken beef ribs cow, corned beef swine spare ribs pork chop. Turducken venison pork chop short ribs, fatback tri-tip turkey leberkas t-bone pig andouille ham brisket tongue. Meatloaf bresaola frankfurter pork loin chicken doner, flank beef ground round biltong beef ribs landjaeger pastrami leberkas.',
-    } only %}
-    {% include '@bolt-layouts-layout/layout-item.twig' with {
-      content: 'Short loin andouille ball tip, filet mignon beef ribs chicken cupim ground round pork chop beef tongue. Swine flank jerky pastrami kielbasa short loin tenderloin short ribs prosciutto turkey sirloin turducken jowl. Salami ribeye ball tip, buffalo kielbasa tail doner burgdoggen leberkas meatball. Rump buffalo salami chislic venison landjaeger boudin, ribeye tongue.',
+      content: title,
     } only %}
+
     {% include '@bolt-layouts-layout/layout-item.twig' with {
       content: 'Bacon ipsum dolor amet burgdoggen beef rump sausage. Chislic beef hamburger turducken pork chop. Shank drumstick biltong, landjaeger ham hock meatloaf swine flank. Swine tenderloin shank, sirloin pork chicken jerky chislic ball tip.',
     } only %}
@@ -121,11 +119,11 @@
     {% set fab_list_items %}
       {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
         content: scroll_to_top_button,
-        show_on_scroll_position: '100px'
+        show_on_scroll_selector: '#main-title'
       } only %}
       {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
         content: placeholder_button,
-        show_on_scroll_position: '50px'
+        show_on_scroll_selector: '#main-title'
       } only %}
       {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
         content: placeholder_button,

docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/-15a-floating-action-buttons-demo-toggle-button.twig

@@ -174,7 +174,6 @@
     {% set fab_list_items %}
       {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
         content: scroll_to_top_button,
-        show_on_scroll_position: '100px'
       } only %}
       {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
         content: share_button,

docs-site/src/pages/pattern-lab/_patterns/40-components/floating-action-buttons/10-floating-action-buttons-show-on-scroll-position.twig

@@ -1,5 +1,5 @@
 {% set description %}
-  The <code>show_on_scroll_position</code> prop on the list item allows floating action buttons to show on scroll.
+  The <code>show_on_scroll_selector</code> prop on the list item allows floating action buttons to show on scroll.
 {% endset %}
 
 {% set notes %}
@@ -29,7 +29,7 @@
 {% set twig_markup %}{% verbatim %}
   {% include '@bolt-components-floating-action-buttons/floating-action-buttons-li.twig' with {
     content: content,
-    show_on_scroll_position: '100px'
+    show_on_scroll_selector: '#main-title'
   } only %}
 {% endverbatim %}{% endset %}
 

packages/components/bolt-floating-action-buttons/__tests__/__snapshots__/floating-action-buttons.js.snap

@@ -2,7 +2,7 @@
 
 exports[`Bolt Floating Action Buttons default 1`] = `
 <div class="c-bolt-floating-action-buttons">
-  <ul class="c-bolt-floating-action-buttons__list js-bolt-floating-action-buttons-list">
+  <ul class="c-bolt-floating-action-buttons__list c-bolt-floating-action-buttons__list--hidden js-bolt-floating-action-buttons-list">
     <li class="c-bolt-floating-action-buttons__list-item js-bolt-floating-action-buttons-list-item">
       <button type="button"
               class="e-bolt-button e-bolt-button--icon-only"
@@ -91,7 +91,7 @@ exports[`Bolt Floating Action Buttons default 1`] = `
           Toggle Menu
         </span>
       </bolt-tooltip>
-      <ul class="c-bolt-floating-action-buttons__list js-bolt-floating-action-buttons-list">
+      <ul class="c-bolt-floating-action-buttons__list c-bolt-floating-action-buttons__list--hidden js-bolt-floating-action-buttons-list">
       </ul>
     </li>
   </ul>

packages/components/bolt-floating-action-buttons/__tests__/floating-action-buttons.js

@@ -1,7 +1,4 @@
 import { render, stopServer } from '../../../testing/testing-helpers';
-import schema from '../floating-action-buttons.schema';
-// eslint-disable-next-line camelcase
-const { show_on_scroll_position } = schema.properties;
 let page, fixtures;
 
 afterAll(async () => {

packages/components/bolt-floating-action-buttons/floating-action-buttons-li.schema.js

@@ -18,10 +18,10 @@ module.exports = {
       description:
         'Renders a list of secondary buttons. Use the floating-action-buttons-ul.twig template to render a list. Only use this prop if the floating-action-buttons-toggle-button.twig template is used for the content prop.',
     },
-    show_on_scroll_position: {
+    show_on_scroll_selector: {
       type: 'string',
       description:
-        'This will leave the list item hidden until the page is scrolled to a certain position. A percentage or pixel value must be passed here as a string (ie. "20%" or "200px").',
+        'This will leave the list item hidden until the page is scrolled to to show then hide a certain element (ie. "h1").',
     },
   },
 };

packages/components/bolt-floating-action-buttons/src/floating-action-buttons-li.twig

@@ -12,13 +12,13 @@
   'c-bolt-floating-action-buttons__list-item',
   'js-bolt-floating-action-buttons-list-item',
   children ? 'c-bolt-floating-action-buttons__list-item--has-children',
-  show_on_scroll_position ? 'c-bolt-floating-action-buttons__list-item--hidden',
-  show_on_scroll_position ? 'js-bolt-floating-action-buttons-list-item--hidden'
+  show_on_scroll_selector ? 'c-bolt-floating-action-buttons__list-item--hidden',
+  show_on_scroll_selector ? 'js-bolt-floating-action-buttons-list-item--hidden'
 ] %}
 
 <li {{ attributes.addClass(classes) }}
-    {% if this.data.show_on_scroll_position.value %}data-show-on-scroll-position="{{ this.data.show_on_scroll_position.value }}"{% endif %}
-    {{ this.props|without("class")|without("show_on_scroll_position") }}>
+    {% if this.data.show_on_scroll_selector.value %}data-show-on-scroll-selector="{{ this.data.show_on_scroll_selector.value }}"{% endif %}
+    {{ this.props|without("class")|without("show_on_scroll_selector") }}>
   {{ content }}
 
   {% if children %}

packages/components/bolt-floating-action-buttons/src/floating-action-buttons.js

@@ -95,35 +95,30 @@ export class BoltFloatingActionButtons {
     }
   }
 
-  getScrollPositionFromProp(el) {
-    let revealPosition = 0;
-    const scrollInt = parseInt(el.dataset.showOnScrollPosition, 10);
-    const pageHeight = window.innerHeight;
-
-    if (el.dataset.showOnScrollPosition.includes('px')) {
-      revealPosition = scrollInt;
-    } else if (el.dataset.showOnScrollPosition.includes('%')) {
-      // set a pixel value based on the percentage value.
-      revealPosition = pageHeight * (scrollInt / 100);
-    }
-    return revealPosition;
-  }
-
   addScrollHandler(el) {
-    let scrollPosition = window.scrollY;
-    const revealPosition = this.getScrollPositionFromProp(el);
+    const callback = entries => {
+      entries.forEach(entry => {
+        const isIntersectingTop =
+          entry.intersectionRect.top >= entry.boundingClientRect.top;
+        const isLeaving = entry.intersectionRatio === 0;
 
-    const scrollHandler = () => {
-      scrollPosition = window.scrollY;
-      if (revealPosition > 0 && scrollPosition >= revealPosition) {
-        el.classList.remove(
-          'c-bolt-floating-action-buttons__list-item--hidden',
-        );
-      } else {
-        el.classList.add('c-bolt-floating-action-buttons__list-item--hidden');
-      }
+        if (isIntersectingTop) {
+          if (isLeaving) {
+            // leaving
+            el.classList.remove(
+              'c-bolt-floating-action-buttons__list-item--hidden',
+            );
+          } else {
+            // entering
+            el.classList.add(
+              'c-bolt-floating-action-buttons__list-item--hidden',
+            );
+          }
+        }
+      });
     };
 
-    window.addEventListener('scroll', scrollHandler);
+    const observer = new IntersectionObserver(callback);
+    observer.observe(document.querySelector(el.dataset.showOnScrollSelector));
   }
 }

packages/components/bolt-floating-action-buttons/src/floating-action-buttons.twig

@@ -10,7 +10,7 @@
 {# Array of classes based on the defined + default props #}
 {% set classes = [
   'c-bolt-floating-action-buttons',
-  (this.data.hide_on_load.value or this.data.show_on_scroll_position.value) ? 'c-bolt-floating-action-buttons--hidden' : '',
+  this.data.hide_on_load.value ? 'c-bolt-floating-action-buttons--hidden' : '',
 ] %}
 
 <div