From 1f1cb3676d2639ffeb9ad1fe4f1aeb441753bd4f Mon Sep 17 00:00:00 2001
From: Martin Leblanc <m26lebla@uwaterloo.ca>
Date: Thu, 13 Mar 2025 15:37:55 -0400
Subject: [PATCH] ISTWCMS-5650: Add new details file for FFS for better code
readability
---
.../_facts-and-figures-details.twig | 19 +++++++
.../facts-and-figures/facts-and-figures.twig | 56 +++----------------
2 files changed, 26 insertions(+), 49 deletions(-)
create mode 100644 src/patterns/04-components/facts-and-figures/_facts-and-figures-details.twig
diff --git a/src/patterns/04-components/facts-and-figures/_facts-and-figures-details.twig b/src/patterns/04-components/facts-and-figures/_facts-and-figures-details.twig
new file mode 100644
index 00000000..8b564921
--- /dev/null
+++ b/src/patterns/04-components/facts-and-figures/_facts-and-figures-details.twig
@@ -0,0 +1,19 @@
+{% 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 %}
diff --git a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
index 1ae3a1fb..298d43c2 100644
--- a/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
+++ b/src/patterns/04-components/facts-and-figures/facts-and-figures.twig
@@ -1,29 +1,13 @@
-<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>
--
GitLab