@qld-gov-au/qgds-bootstrap5 2.0.10 → 2.0.12

package/src/components/bs5/pageLayout/{ThemeShowcase.stories.js → PaletteShowcase.stories.js}

@@ -1,34 +1,35 @@
 export default {
-  title: "5. Templates/Theme Showcase",
+  title: "5. Templates/Palette Showcase",
   render: (args) => {
     return args.content;
   },
   argTypes: {
-    themeClass: {
-      control: { type: 'select' },
-      options: ['', 'default', 'light', 'alt', 'dark', 'dark-alt'],
-      description: 'Theme class to apply to the content area',
+    paletteClass: {
+      control: { type: "select" },
+      options: ["", "default", "light", "alt", "dark", "dark-alt"],
+      description: "Palette class to apply to the content area",
     },
   },
   parameters: {
     layout: "padded",
     docs: {
       description: {
-        story: 'This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.',
+        story:
+          "This showcase demonstrates the theme palette classes (.default, .light, .alt, .dark, .dark-alt) that automatically apply color and background-color styling.",
       },
     },
   },
 };
 
 /**
- * Default Theme
- * The default theme uses the base color scheme without additional background styling
+ * Default Palette
+ * The default palette uses the base color scheme without additional background styling
  */
-export const DefaultTheme = {
+export const DefaultPalette = {
   args: {
     content: `
       <div class="default p-4 mb-4 border">
-        <h2>Default Theme</h2>
+        <h2>Default Palette</h2>
         <p>This demonstrates the default theme palette. It provides a clean, neutral appearance suitable for most content.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -60,19 +61,19 @@ export const DefaultTheme = {
 };
 
 /**
- * Light Theme
- * The light theme provides a bright, clean appearance
+ * Light Palette
+ * The light palette provides a bright, clean appearance
  */
-export const LightTheme = {
+export const LightPalette = {
   args: {
     content: `
       <div class="light p-4 mb-4 border">
-        <h2>Light Theme</h2>
+        <h2>Light Palette</h2>
         <p>This demonstrates the light theme palette. It provides enhanced readability with a light background.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
         
-        <h3 class="mt-4">Theme Features</h3>
+        <h3 class="mt-4">Palette Features</h3>
         <ul>
           <li>Automatic color and background-color application</li>
           <li>Optimized contrast ratios</li>
@@ -84,14 +85,14 @@ export const LightTheme = {
 };
 
 /**
- * Alt Theme
+ * Alt Palette
  * The alt theme provides an alternative light styling
  */
-export const AltTheme = {
+export const AltPalette = {
   args: {
     content: `
       <div class="alt p-4 mb-4 border">
-        <h2>Alt Theme</h2>
+        <h2>Alt Palette</h2>
         <p>This demonstrates the alt theme palette. It provides a subtle alternative to the standard light theme.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -106,14 +107,14 @@ export const AltTheme = {
 };
 
 /**
- * Dark Theme
+ * Dark Palette
  * The dark theme provides a bold, high-contrast appearance
  */
-export const DarkTheme = {
+export const DarkPalette = {
   args: {
     content: `
       <div class="dark p-4 mb-4 border">
-        <h2>Dark Theme</h2>
+        <h2>Dark Palette</h2>
         <p>This demonstrates the dark theme palette. It provides excellent contrast and a modern appearance.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -128,14 +129,14 @@ export const DarkTheme = {
 };
 
 /**
- * Dark Alt Theme
+ * Dark Alt Palette
  * The dark alt theme provides an alternative dark styling
  */
-export const DarkAltTheme = {
+export const DarkAltPalette = {
   args: {
     content: `
       <div class="dark-alt p-4 mb-4 border">
-        <h2>Dark Alt Theme</h2>
+        <h2>Dark Alt Palette</h2>
         <p>This demonstrates the dark alt theme palette. It provides a variation of the dark theme with different background styling.</p>
         <a href="#" class="btn btn-primary me-2">Primary Button</a>
         <a href="#" class="btn btn-secondary">Secondary Button</a>
@@ -161,21 +162,21 @@ export const DarkAltTheme = {
 };
 
 /**
- * Theme Comparison
- * Shows all themes in a single view for comparison
+ * Palette Comparison
+ * Shows all palettes in a single view for comparison
  */
-export const ThemeComparison = {
+export const PaletteComparison = {
   args: {
     content: `
       <div class="mb-4">
-        <h2>Theme Palette Comparison</h2>
-        <p>Compare all available theme classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
+        <h2>Palette Comparison</h2>
+        <p>Compare all available palette classes side by side. Each theme automatically applies appropriate color and background-color styling.</p>
       </div>
       
       <div class="row g-4">
         <div class="col-lg-6">
           <div class="default p-3 border">
-            <h3>Default Theme</h3>
+            <h3>Default Palette</h3>
             <p>Base theme with neutral styling.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -183,7 +184,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="light p-3 border">
-            <h3>Light Theme</h3>
+            <h3>Light Palette</h3>
             <p>Clean, bright appearance.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -191,7 +192,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="alt p-3 border">
-            <h3>Alt Theme</h3>
+            <h3>Alt Palette</h3>
             <p>Alternative light styling.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -199,7 +200,7 @@ export const ThemeComparison = {
         
         <div class="col-lg-6">
           <div class="dark p-3 border">
-            <h3>Dark Theme</h3>
+            <h3>Dark Palette</h3>
             <p>High contrast, modern look.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -207,7 +208,7 @@ export const ThemeComparison = {
         
         <div class="col-12">
           <div class="dark-alt p-3 border">
-            <h3>Dark Alt Theme</h3>
+            <h3>Dark Alt Palette</h3>
             <p>Alternative dark styling with different background treatment.</p>
             <a href="#" class="btn btn-sm btn-primary">Button</a>
           </div>
@@ -216,7 +217,7 @@ export const ThemeComparison = {
       
       <div class="mt-5">
         <h3>Background Utility Classes</h3>
-        <p>These utilities can be used independently of theme classes for specific background styling:</p>
+        <p>These utilities can be used independently of palette classes for specific background styling:</p>
         <div class="row g-3">
           <div class="col-md-3">
             <div class="bg-default p-2 text-center rounded">.bg-default</div>

package/src/components/bs5/searchInput/__snapshots__/searchInput.test.js.snap

@@ -1,4 +1,4 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html  
 
 exports[`SearchInput > Renders as expected 1`] = `
 "<!-- 
@@ -11,35 +11,31 @@ exports[`SearchInput > Renders as expected 1`] = `
         <span class="btn-icon"></span>
         <span class="btn-label">Search</span>
     </button>
-    <div class="suggestions suggestions__group d-none">
-        <div class="default-suggestions">
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Popular services</strong>
-                <ul class="mt-2">
-                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
-                </ul>
-            </div>
-
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Browse by category</strong>
-                <ul class="mt-12 mb-0">
-                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
-                    <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
-                </ul>
-            </div>
+    <div class="suggestions suggestions__group d-none default">
+            <div class="default-suggestions">
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">Popular</strong>
+                    <ul>
+                        <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application">Apply for leave now</a></li>
+                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/starting-a-new-job/apply-for-higher-duties-or-relieving-at-level">Apply for higher duties or relieving at level</a></li>
+                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment/extending-my-job/extend-a-temporary-or-casual-employee">Extend a temporary or casual employee</a></li>
+                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment">Hire a staff member (recruitment)</a></li>
+                            <li><a href="/queenslanders" class="view-more">View more</a></li>
+                    </ul>
+                </div>
 
-            <div class="suggestions-category">
-                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
-                    href="/queenslanders">Browse all categories</a>
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">Collection</strong>
+                    <ul>
+                        <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/directives-policies-circulars-and-guidelines">Search for directives, policies, circulars, and guidelines</a></li>
+                        <li><a href="https://www.forgov.qld.gov.au/pay-benefits-and-policy/benefits/employee-pay-and-benefits">Employee pay and benefits</a></li>
+                        <li><a href="https://www.forgov.qld.gov.au/sandbox/archive/queensland-shared-services">Queensland Shared Services</a></li>
+                        <li><a href="https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development">Career development</a></li>
+                            <li><a href="/queenslanders" class="view-more">View all</a></li>
+                    </ul>
+                </div>
             </div>
-        </div>
-        <div class="dynamic-suggestions"></div>
+            <div class="dynamic-suggestions" data-view-more="/queenslanders"></div>
     </div>
-    
 </div>"
 `;

package/src/components/bs5/searchInput/search.functions.js

@@ -34,7 +34,7 @@ export function selectSuggestion(value, form) {
 
   if (searchInput && suggestions) {
     searchInput.value = value.trim();
-    suggestions.classList.add("d-none");
+    // suggestions.classList.add("d-none");
 
     // Retrieve additional params
     const collection =
@@ -87,9 +87,13 @@ export async function showSuggestions(value = "", isDefault = false, form) {
 
   // Hide/show default suggestions
   if (isDefault) {
-    defaultSuggestionsContainer.classList.remove("d-none");
-    dynamicSuggestionsContainer.innerHTML = "";
-    dynamicSuggestionsContainer.classList.add("d-none");
+    if (defaultSuggestionsContainer) {
+      defaultSuggestionsContainer.classList.remove("d-none");
+    }
+    if (dynamicSuggestionsContainer) {
+      dynamicSuggestionsContainer.innerHTML = "";
+      dynamicSuggestionsContainer.classList.add("d-none");
+    }
     createPopper(searchInput, suggestions, {
       placement: "bottom-start",
     });
@@ -97,30 +101,34 @@ export async function showSuggestions(value = "", isDefault = false, form) {
     return;
   }
 
-  if (value.length === 0) {
-    dynamicSuggestionsContainer.innerHTML = "";
-    dynamicSuggestionsContainer.classList.add("d-none");
-    return;
+  if (dynamicSuggestionsContainer) {
+    if (value.length === 0) {
+      dynamicSuggestionsContainer.innerHTML = "";
+      dynamicSuggestionsContainer.classList.add("d-none");
+      return;
+    }
   }
 
-  defaultSuggestionsContainer.classList.add("d-none");
+  if (defaultSuggestionsContainer) {
+    defaultSuggestionsContainer.classList.add("d-none");
+  }
 
   // Fetch dynamic suggestions if available
-  const suggestUrl = searchInput.getAttribute("data-suggestions");
-  if (suggestUrl) {
-    const collection =
-      searchInput.getAttribute("data-collection") || "qgov~sp-search";
-    const profile = searchInput.getAttribute("data-profile") || "qld";
-    const fetchedSuggestions = await fetchData(
-      `${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`,
-      "suggestions",
-    );
-
-    if (fetchedSuggestions.length > 0) {
-      dynamicSuggestionsContainer.innerHTML = `
-        <div class="suggestions-category mt-16">
-          <strong class="suggestions-category-label d-block">Suggestions</strong>
-          <ul class="mt-2">${fetchedSuggestions
+  if (dynamicSuggestionsContainer) {
+    const suggestUrl = searchInput.getAttribute("data-suggestions");
+    if (suggestUrl) {
+      const collection =
+        searchInput.getAttribute("data-collection") || "qgov~sp-search";
+      const profile = searchInput.getAttribute("data-profile") || "qld";
+      const fetchedSuggestions = await fetchData(
+        `${suggestUrl}?collection=${collection}&profile=${profile}&fmt=json&alpha=0.5&partial_query=${encodeURIComponent(value)}`,
+        "suggestions",
+      );
+
+      if (fetchedSuggestions.length > 0) {
+        dynamicSuggestionsContainer.innerHTML = `
+        <div class="suggestions-category">
+          <ul>${fetchedSuggestions
             .slice(0, 4)
             .map((item) => {
               const highlightedText = item.replace(
@@ -131,61 +139,70 @@ export async function showSuggestions(value = "", isDefault = false, form) {
             })
             .join("")}</ul>
         </div>`;
-      dynamicSuggestionsContainer.classList.remove("d-none");
-      createPopper(searchInput, suggestions, {
-        placement: "bottom-start",
-      });
-      suggestions.classList.remove("d-none");
-
-      // Attach click event listeners to each suggestion item
-      form.querySelectorAll(".suggestions li").forEach((item) => {
-        item.addEventListener("click", () =>
-          selectSuggestion(item.innerText, form),
-        );
-      });
-    } else {
-      dynamicSuggestionsContainer.innerHTML = "";
-      dynamicSuggestionsContainer.classList.add("d-none");
-      suggestions.classList.add("d-none");
+        dynamicSuggestionsContainer.classList.remove("d-none");
+        createPopper(searchInput, suggestions, {
+          placement: "bottom-start",
+        });
+        suggestions.classList.remove("d-none");
+
+        // Attach click event listeners to each suggestion item
+        form.querySelectorAll(".suggestions li").forEach((item) => {
+          item.addEventListener("click", () =>
+            selectSuggestion(item.innerText, form),
+          );
+        });
+      } else {
+        dynamicSuggestionsContainer.innerHTML = "";
+        dynamicSuggestionsContainer.classList.add("d-none");
+        suggestions.classList.add("d-none");
+      }
     }
-  }
 
-  const resultsUrl = searchInput.getAttribute("data-results-url");
-  if (resultsUrl) {
-    const collection =
-      searchInput.getAttribute("data-collection") || "qgov~sp-search";
-    const profile = searchInput.getAttribute("data-profile") || "qld";
-    const fetchedServices = await fetchData(
-      `${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`,
-      "services",
-    );
-
-    if (
-      fetchedServices.response.resultPacket &&
-      fetchedServices.response.resultPacket.results.length > 0
-    ) {
-      dynamicSuggestionsContainer.innerHTML += `
-        <div class="suggestions-category feature pt-16">
-          <strong class="suggestions-category-label d-block">Services</strong>
-          <ul class="mt-2">${fetchedServices.response.resultPacket.results
-            .slice(0, 4)
-            .map(
-              (item) => `<li><a href="${item.liveUrl}">${item.title}</a></li>`,
-            )
-            .join("")}</ul>
+    const resultsUrl = searchInput.getAttribute("data-results-url");
+    if (resultsUrl) {
+      const collection =
+        searchInput.getAttribute("data-collection") || "qgov~sp-search";
+      const profile = searchInput.getAttribute("data-profile") || "qld";
+      const fetchedServices = await fetchData(
+        `${resultsUrl}?collection=${collection}&profile=${profile}&smeta_sfinder_sand=yes&query=${encodeURIComponent(value)}`,
+        "services",
+      );
+
+      if (
+        fetchedServices.response.resultPacket &&
+        fetchedServices.response.resultPacket.results.length > 0
+      ) {
+        const viewMoreUrl =
+          dynamicSuggestionsContainer.getAttribute("data-view-more");
+
+        // Build the services HTML safely
+        const servicesItems = fetchedServices.response.resultPacket.results
+          .slice(0, 4)
+          .map((item) => `<li><a href="${item.liveUrl}">${item.title}</a></li>`)
+          .join("");
+
+        const viewMoreItem = viewMoreUrl
+          ? `<li><a href="${viewMoreUrl}" class="view-more">View more</a></li>`
+          : "";
+
+        dynamicSuggestionsContainer.innerHTML += `
+        <div class="suggestions-category feature">
+          <strong class="suggestions-category-label d-block">Related services</strong>
+          <ul>${servicesItems}${viewMoreItem}</ul>
         </div>`;
-      dynamicSuggestionsContainer.classList.remove("d-none");
-      createPopper(searchInput, suggestions, {
-        placement: "bottom-start",
-      });
-      suggestions.classList.remove("d-none");
-
-      // Attach click event listeners to each suggestion item
-      form.querySelectorAll(".suggestions li").forEach((item) => {
-        item.addEventListener("click", () =>
-          selectSuggestion(item.innerText, form),
-        );
-      });
+        dynamicSuggestionsContainer.classList.remove("d-none");
+        createPopper(searchInput, suggestions, {
+          placement: "bottom-start",
+        });
+        suggestions.classList.remove("d-none");
+
+        // Attach click event listeners to each suggestion item
+        form.querySelectorAll(".suggestions li").forEach((item) => {
+          item.addEventListener("click", () =>
+            selectSuggestion(item.innerText, form),
+          );
+        });
+      }
     }
   }
 }

package/src/components/bs5/searchInput/searchInput.data.json

@@ -6,7 +6,6 @@
   "buttonType": "submit",
   "buttonLabel": "Search",
   "ariaLabel": "Search website",
-  "suggestions": true,
   "tags": {
     "collection": "qgov~sp-search",
     "profile": "qld",
@@ -15,10 +14,20 @@
     "suggestions": "https://discover.search.qld.gov.au/s/suggest.json",
     "results-url": "https://discover.search.qld.gov.au/s/search.json"
   },
-  "default_suggestions": {
-    "popular_services": [
+  "hasDynamicSuggestions": true,
+  "hasDefaultSuggestions": true,
+  "dynamicSuggestionsServiceLink": {
+    "href": "/queenslanders"
+  },
+  "defaultSuggestions": {
+    "popularServicesTitle": "Popular",
+    "popularServicesLink": {
+      "label": "View more",
+      "href": "/queenslanders"
+    },
+    "popularServices": [
       {
-        "title": "Apply for leave",
+        "title": "Apply for leave now",
         "link": "https://www.forgov.qld.gov.au/pay-benefits-and-policy/leave/submit-a-leave-application"
       },
       {
@@ -34,6 +43,11 @@
         "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/recruitment"
       }
     ],
+    "categoriesTitle": "Collection",
+    "categoriesLink": {
+      "label": "View all",
+      "href": "/queenslanders"
+    },
     "categories": [
       {
         "title": "Search for directives, policies, circulars, and guidelines",
@@ -51,11 +65,6 @@
         "title": "Career development",
         "link": "https://www.forgov.qld.gov.au/recruitment-performance-and-career/career-development"
       }
-    ],
-    "options": {
-      "label": "Browse all categories",
-      "view_more": true,
-      "href": "/queenslanders"
-    }
+    ]
   }
 }

package/src/components/bs5/searchInput/searchInput.hbs

@@ -8,36 +8,38 @@
         <span class="btn-icon"></span>
         <span class="btn-label">{{ buttonLabel }}</span>
     </button>
-    {{#if suggestions}}
-    <div class="suggestions suggestions__group d-none">
-        <div class="default-suggestions">
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Popular services</strong>
-                <ul class="mt-2">
-                    {{#each default_suggestions.popular_services}}
-                    <li><a href="{{link}}">{{title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
-
-            <div class="suggestions-category mt-16">
-                <strong class="suggestions-category-label d-block">Browse by category</strong>
-                <ul class="mt-12 mb-0">
-                    {{#each default_suggestions.categories}}
-                    <li><a href="{{link}}">{{title}}</a></li>
-                    {{/each}}
-                </ul>
-            </div>
+    {{#ifCond hasDynamicSuggestions '||' hasDefaultSuggestions}}
+    <div class="suggestions suggestions__group d-none default">
+        {{#if hasDefaultSuggestions}}
+            <div class="default-suggestions">
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">{{defaultSuggestions.popularServicesTitle}}</strong>
+                    <ul>
+                        {{#each defaultSuggestions.popularServices}}
+                        <li><a href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                        {{#if defaultSuggestions.popularServicesLink}}
+                            <li><a href="{{defaultSuggestions.popularServicesLink.href}}" class="view-more">{{#if defaultSuggestions.popularServicesLink.label}}{{defaultSuggestions.popularServicesLink.label}}{{else}}View More{{/if}}</a></li>
+                        {{/if}}
+                    </ul>
+                </div>
 
-            {{#if default_suggestions.options.view_more}}
-            <div class="suggestions-category">
-                <a class="px-16 pt-12 pb-16 d-block suggestions-category-view-more"
-                    href="{{default_suggestions.options.href}}">{{default_suggestions.options.label}}</a>
+                <div class="suggestions-category">
+                    <strong class="suggestions-category-label d-block">{{defaultSuggestions.categoriesTitle}}</strong>
+                    <ul>
+                        {{#each defaultSuggestions.categories}}
+                        <li><a href="{{link}}">{{title}}</a></li>
+                        {{/each}}
+                        {{#if defaultSuggestions.categoriesLink}}
+                            <li><a href="{{defaultSuggestions.categoriesLink.href}}" class="view-more">{{#if defaultSuggestions.categoriesLink.label}}{{defaultSuggestions.categoriesLink.label}}{{else}}View More{{/if}}</a></li>
+                        {{/if}}
+                    </ul>
+                </div>
             </div>
-            {{/if}}
-        </div>
-        <div class="dynamic-suggestions"></div>
+        {{/if}}
+        {{#if hasDynamicSuggestions}}
+            <div class="dynamic-suggestions" {{#if dynamicSuggestionsServiceLink.href}}data-view-more="{{dynamicSuggestionsServiceLink.href}}"{{/if}}></div>
+        {{/if}}
     </div>
-    {{/if}}
-    
+    {{/ifCond}}    
 </div>