ISTWCMS-5650: Add new details file for FFS for better code readability

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

+{% for detail in details %}
+  {% if detail.type == 'infographic' %}
+    {% include '@components/facts-and-figures/_infographics.twig' with {
+      'infographics': detail,
+    } %}
+  {% elseif detail.type == 'icon' %}
+    <div class="uw-ff--text uw-ff--text__{{ detail.type }}">
+      <img src="{{ detail.icon }}" alt="{{ detail.alt }}" />
+    </div>
+  {% elseif detail.type == 'caption' %}
+    {% if detail.caption %}
+      <span class="uw-ff--text uw-ff--text__caption balance-text">
+        {{ detail.caption }}
+      </span>
+    {% endif %}
+  {% else %}
+    <span class="uw-ff--text uw-ff--text__{{ detail.type }} balance-text">{{ detail.text }}</span>
+  {% endif %}
+{% endfor %}

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

-<div id="uw-ff-{{ ffs.id }}" class="uw-ff {% if ffs.show %}uw-ff--with-bubbles uw-ff--with-bubbles__{{ ffs.bg_colour}}{% else%}uw-ff__{{ ffs.bg_colour}}{% endif %} {% if ffs.num_per_carousel == ffs.details|length %} uw-hide-ff-nav{% endif %} {% if ffs.num_per_carousel  == '1' and ffs.details|length == '1'%} uw-hide-ff-nav-all {% endif %}" data-carousel="{{ ffs.num_per_carousel ? 'yes' :'no' }}" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
+<div id="uw-ff-{{ ffs.id }}" class="uw-ff {% if ffs.show %}uw-ff--with-bubbles uw-ff--with-bubbles__{{ ffs.bg_colour}}{% else%}uw-ff__{{ ffs.bg_colour}}{% endif %}" data-carousel="{{ ffs.num_per_carousel ? 'yes' :'no' }}" data-num-per-carousel="{{ ffs.num_per_carousel }}" data-id="{{ ffs.id }}">
   <div class="uw-ff--wrapper uw-ff--wrapper__text-{{ ffs.text_align }} {{ ffs.num_per_carousel ? 'uw-ff--carousel' : 'uw-ff--no-carousel' }} {{ ffs.theme }}">
     {% if ffs.num_per_carousel >= 1%}
       {% embed '@layouts/carousel/carousel.twig' %}
         {% block content %}
           {% for details in ffs.details %}
             <div class="uw-ff--fact">
-              {% for detail in details %}
-                {% if detail.type == 'infographic' %}
-                  {% include '@components/facts-and-figures/_infographics.twig' with {
-                    'infographics': detail,
-                  } %}
-                {% elseif detail.type == 'icon' %}
-                  <div class="uw-ff--text uw-ff--text__{{ detail.type }}">
-                    <img src="{{ detail.icon }}" alt="{{ detail.alt }}" />
-                  </div>
-                {% elseif detail.type == 'caption' %}
-                  {% if detail.caption %}
-                    <span class="uw-ff--text uw-ff--text__caption balance-text">
-                      {{ detail.caption }}
-                    </span>
-                  {% endif %}
-                {% else %}
-                  <span class="uw-ff--text uw-ff--text__{{ detail.type }} balance-text">{{ detail.text }}</span>
-                {% endif %}
-              {% endfor %}
+              {% include '@components/facts-and-figures/_facts-and-figures-details.twig' with {
+                details: details
+              } %}
             </div>
           {% endfor %}
         {% endblock %}
@@ -31,37 +15,11 @@
     {% else %}
       {% for details in ffs.details %}
         <div class="uw-ff--fact">
-        {% for detail in details %}
-
-          {% if detail.type == 'infographic' %}
-
-            {% include '@components/facts-and-figures/_infographics.twig' with {
-              'infographics': detail,
-            } %}
-          {% elseif detail.type == 'icon' %}
-            <div class="uw-ff--text uw-ff--text__{{ detail.type }}">
-              <img src="{{ detail.icon }}" alt="{{ detail.alt }}" />
-            </div>
-          {% elseif detail.type == 'caption' %}
-            {% if detail.caption %}
-              <span class="uw-ff--text uw-ff--text__caption balance-text">
-                {{ detail.caption }}
-              </span>
-            {% endif %}
-          {% else %}
-            <span class="uw-ff--text uw-ff--text__{{ detail.type }} balance-text">{{ detail.text }}</span>
-          {% endif %}
-        {% endfor %}
+          {% include '@components/facts-and-figures/_facts-and-figures-details.twig' with {
+            details: details
+          } %}
         </div>
       {% 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>