ISTWCMS-3594: updating stylings for FF

source/_patterns/04-components/facts-and-figures/_facts-and-figures.scss

@@ -74,12 +74,13 @@ $highlighted-fact-round: $global-rounded;
     float: left;
     height: auto;
     margin-bottom: 0;
-    margin-left: 5px;
-    margin-right: 5px;
+    margin-left: auto;
+    margin-right: auto;
     max-height: 30rem;
     min-height: 20rem;
     padding: 1rem;
     position: relative;
+    text-align: center;
     width: 100%;
 
     &.no-icon {
@@ -92,11 +93,8 @@ $highlighted-fact-round: $global-rounded;
   }
 
   &__text {
-    clear: both;
     color: $uw-black;
     display: block;
-    float: none;
-    text-align: center;
 
     &--big {
       font-family: BureauGrotCond,impact,"avenir next condensed heavy","Droid Sans",sans-serif;
@@ -107,6 +105,7 @@ $highlighted-fact-round: $global-rounded;
 
     &--small {
       background-color: $uw-gold;
+      display: inline-block !important;
       font-family: Typ1451-Medium, verdana, sans-serif;
       font-size: 1rem;
       hyphens: none;

source/_patterns/04-components/facts-and-figures/facts-and-figures.twig

-<div id="uw-ff-{{ ffs.id }}" class="uw-ff {{ ffs.show ? 'uw-ff--with-bubbles' }}">
+<div id="uw-ff-{{ ffs.id }}" class="uw-ff {{ ffs.show ? 'uw-ff--with-bubbles' }}" data-carousel="Yes" data-num-per-carousel="3" data-id="{{ ffs.id }}">
   <div class="uw-ff__wrapper">
     {% embed '@layouts/carousel/carousel.twig' %}
       {% block content %}
-        {% for ff in ffs.facts %}
+        {% for details in ffs.details %}
           <div class="uw-ff__fact {{ icon != '' ? 'with-icon' : 'no-icon' }}">
-            {% for detail in ff.details %}
+            {% for detail in details %}
               <span class="uw-ff__text uw-ff__text--{{ detail.type }}">{{ detail.text }}</span>
             {% endfor %}
           </div>
@@ -13,3 +13,4 @@
     {% endembed %}
   </div>
 </div>
+

source/_patterns/04-components/facts-and-figures/facts-and-figures.yml

 ffs:
+  id: 1
   show: true
   theme: 'uwaterloo'
   text_align: 'center'
-  facts:
+  details:
     -
-      id: '1'
-      details:
-        -
-          text: 'Big #1'
-          type: 'big'
-        - text: 'Small #1'
-          type: 'small'
+      -
+        text: 'Big #1'
+        type: 'big'
+      -
+        text: 'Small #1'
+        type: 'small'
     -
-      id: '2'
-      details:
-        - text: 'Big #2'
-          type: 'big'
-        - text: 'Small #2'
-          type: 'small'
+      -
+        text: 'Big #2'
+        type: 'big'
+      -
+        text: 'Small #1'
+        type: 'small'
     -
-      id: '3'
-      details:
-        - text: 'Big #3'
-          type: 'big'
-        - text: 'Small #3'
-          type: 'small'
-    -
-      id: '4'
-      details:
-        - text: 'Big #4'
-          type: 'big'
-        - text: 'Small #4'
-          type: 'small'
+      -
+        text: 'Big #3'
+        type: 'big'
+      -
+        text: 'Small #3'
+        type: 'small'