ISTWCMS-5650:Remove custom prev next for facts figures, use flickity buttons and styled to UW

src/patterns/04-components/facts-and-figures/_facts-and-figures.scss

@@ -802,6 +802,7 @@ are the same height. */
     .carousel {
       display: flex;
       flex-flow: column;
+      margin-bottom: var(--size-16);
       .flickity-slider {
         display: flex;
       }
@@ -905,50 +906,75 @@ are the same height. */
         overflow-y: visible;
         padding-top: var(--size-4);
       }
+      .flickity-prev-next-button {
+        top: inherit;
+        bottom: -9rem;
+        height: var(--size-7);
+        width: var(--size-10);
+        border-radius: inherit;
+        background: var(--gray-2);
+        color: var(--uw-black);
+        display: inline-block;
+        font-family: var(--font-condensedbook);
+        font-size: var(--font-size-1);
+        font-weight: 200;
+        letter-spacing: .055rem;
+        margin: 0 var(--size-1);
+        max-width: inherit;
+        padding: var(--size-105);
+        text-decoration: none;
+        text-transform: uppercase;
+        -webkit-user-select: none;
+        -moz-user-select: none;
+        user-select: none;
+        vertical-align: middle;
+        white-space: nowrap;
+        &:hover,
+        &:focus {
+          background: var(--gray-5) !important;
+          color: var(--uw-white) !important;
+        }
+        .flickity-button-icon {
+          position: absolute;
+          top: 40%;
+          left: inherit;
+          height: var(--size-110);
+          width: var(--size-110);
+        }
+        &.hide {
+          display: none;
+        }
+        &.next {
+          left:49.5%;
+          .flickity-button-icon {
+            left: 3.25rem;
+          }
+          &:before {
+            width: var(--size-10);
+            text-align: left;
+            display:block;
+            content: 'NEXT';
+            position:relative;
+          }
+        }
+        &.previous{
+          left: 42%;
+          .flickity-button-icon {
+            left: inherit;
+            left: 20%;
+          }
+          &:before {
+            width: var(--size-10);
+            display:block;
+            content: 'PREV';
+            position:relative;
+          }
+        }
+      }
     }
   }
-}
 
-.uw-button--wrap {
-  display: flex;
-  width:100%;
-  justify-content: center;
-  margin-top: var(--size-8);
-  .uw-hide-ff-nav & {
-    @media(min-width: $screen-lg) {
-      visibility: hidden;
-    }
-  }
-  .uw-hide-ff-nav-all & {
-    visibility: hidden;
-  }
-  button {
-    background: var(--gray-2);
-    color: var(--uw-black);
-    display: inline-block;
-    font-family: var(--font-condensedbook);
-    font-size: var(--font-size-1);
-    font-weight: 200;
-    letter-spacing: .055rem;
-    margin: 0 var(--size-1);
-    max-width: inherit;
-    padding: var(--size-105);
-    text-decoration: none;
-    text-transform: uppercase;
-    -webkit-user-select: none;
-    -moz-user-select: none;
-    user-select: none;
-    vertical-align: middle;
-    white-space: nowrap;
-    width: auto;
-    &:hover,
-    &:focus {
-      background: var(--gray-5) !important;
-      color: var(--uw-white) !important;
-    }
-  }
 }
-
 .infographic-fields-inline .fieldset-wrapper {
   display: grid;
   grid-gap: var(--size-2);

src/patterns/04-components/facts-and-figures/facts-and-figures.js

@@ -18,7 +18,7 @@
         if ($carousel.length) {
           $carousel.flickity({
             pageDots: true,
-            prevNextButtons: false,
+            prevNextButtons: true,
             wrapAround: false,
             contain: true,
             groupCells: function () {
@@ -39,7 +39,13 @@
           var flkty = $carousel.data('flickity');
 
           // Handle keyboard navigation for Flickity pagination dots.
-          var dots = document.querySelectorAll('.uw-ff .flickity-page-dots .dot');
+          var dots = $carousel.find('.flickity-page-dots .dot').toArray();          // var dots = $carousel.find('.flickity-page-dots .dot').toArray();
+          console.log(numOfItems + ' : ' + dots.length);
+
+          if (dots.length === 0 || dots.length === 1) {
+            alert('here');
+            $carousel.find('.flickity-button').addClass('hide');
+          }
 
           if (!dots.length) {
             return;

src/patterns/04-components/facts-and-figures/facts-and-figures.twig

@@ -22,12 +22,4 @@
       {% endfor %}
     {% endif %}
   </div>
-
-{% if ffs.num_per_carousel %}
-    <div class="uw-button--wrap">
-    <button tabindex="0" class="uw-button--previous"> < Prev</button>
-    <button tabindex="0" class="uw-button--next">Next ></button>
-  </div>
-
-{% endif %}
 </div>