limit popular searches

ONSdigital · Jan 30, 2025 · 4d81fc4 · 4d81fc4
1 parent 7bf2beb
commit 4d81fc4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 11 deletions.
diff --git a/...st__components_header_example-header-with-search-button_0_document_2_mobile.png b/...st__components_header_example-header-with-search-button_0_document_2_mobile.png
diff --git a/src/components/header/_macro.njk b/src/components/header/_macro.njk
@@ -268,15 +268,20 @@
                             <h2 class="ons-u-fs-s--b ons-u-mb-s ons-header-nav-search__heading">Popular Searches</h2>
                             <ul class="ons-list ons-list--bare ons-list--inline">
                                 {% for item in params.searchLinks.popularSearches %}
-                                    <li class="ons-list__item">
-                                        {% if item.text %}
-                                            {% if item.url %}
-                                                <a href="{{ item.url }}" class="ons-u-fs-s ons-header-nav-search__text">{{ item.text }} </a>
-                                            {% else %}
-                                                <p class="ons-u-fs-s ons-header-nav-search__text">{{ item.text }}</p>
+                                    {# Limiting the popular searches to 5 #}
+                                    {% if loop.index <= 5 %}
+                                        <li class="ons-list__item">
+                                            {% if item.text %}
+                                                {% if item.url %}
+                                                    <a href="{{ item.url }}" class="ons-u-fs-s ons-header-nav-search__text"
+                                                        >{{ item.text }}
+                                                    </a>
+                                                {% else %}
+                                                    <p class="ons-u-fs-s ons-header-nav-search__text">{{ item.text }}</p>
+                                                {% endif %}
                                             {% endif %}
-                                        {% endif %}
-                                    </li>
+                                        </li>
+                                    {% endif %}
                                 {% endfor %}
                             </ul>
                         </div>

diff --git a/src/components/header/example-header-with-search-button.njk b/src/components/header/example-header-with-search-button.njk
@@ -33,7 +33,8 @@
                         "url": '#0',
                         "text": 'Wellbeing',
                         "external": true
-                    },{
+                    },
+                    {
                         "url": '#0',
                         "text": 'Baby names',
                         "external": true