swedbank-pay-design-guide-jekyll-theme 2.5.5 → 2.6.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7efc8ed7b9bd61eaf3288c2a4a4e4d23c7f01fd631ef8946ba2d75e4ced2053a
-  data.tar.gz: 88fe0fa979eb17b6cb91d827808f5552bb5408fd6eb7bc681ccb91cdf92209ed
+  metadata.gz: 43f30d3e0dbcbb4f245c6b139c5088e377f9b31a7b3fabee50af5f221731e140
+  data.tar.gz: f3ca2d804cb52e7f7bfe07f170ce39a39bcc12468e71434f7444cf6627f188fa
 SHA512:
-  metadata.gz: 2af7a399665ee6e819387dd0b283b655c1a03dbb61c4a03e8c9856c6074c2115283d520f100b63f4f1a85a2763a497a226ec19c2c1a77004290937f051945ba7
-  data.tar.gz: 76ed7dd05bae395cded6af01da6309f9fda44cfbfae6574ba627b87a96d90fe94d47e99197748e5634cc934543e5a04e98b2b09b1652fe769f32b92d117ad97c
+  metadata.gz: 89660adaa6374392391b463406236f7730728c47438dc785978323b6686e81ea4da1ee2348178dc06711709e8e55380a82fe23e01cf97b5ff1f726a59fe451e5
+  data.tar.gz: b28a9be2d346fb985e8420d69800878742e462f480ec8d68ce9a1db21580c68c829bf107492cd11f932ce6e456ef96fa335f77ab6cc1f541b3af008c72b8ed75

data/_includes/title-header.html

@@ -26,6 +26,4 @@
             <p>{{ description | markdownify }}</p>
             {% endif %}
         </div>
-
-        {% include github.html %}
     </div>

data/_layouts/default.html

@@ -72,8 +72,8 @@
                     </a>
             </header>
             <div class="documentation">
-                <div class="form-group search-box search-expander">
-                    {% if site.search.enabled == true %}
+                <div id="search-box-container" class="form-group search-box search-expander">
+                    {% if site.search.enabled == true and page.name != "search.md" %}
                     <form class="search d-flex"
                         method="get" action="{{ site.search.url | relative_url }}">
                         <input name="q" type="text" id="tipue_search_input"

data/_layouts/search.html

@@ -1,5 +1,24 @@
 ---
 layout: default
 ---
+<form class="search d-flex" method="get" action="{{ site.search.url | relative_url }}">
+    <input name="q" type="text" id="tipue_search_input" class="form-control search-input"
+        placeholder="Search in documentation" onfocus="this.placeholder=''"
+        onblur="this.placeholder='Search in documentation'" pattern=".{3,}" title="At least 3 characters">
+    <script>
+        (function () {
+            var params = new URLSearchParams(window.location.search);
+            var q = params.get('q');
+            if (q) {
+                document.getElementById('tipue_search_input').value = q;
+            }
+        })();
+    </script>
+    <button id="search-btn" class="btn btn-primary btn-icon-lg" type="submit" aria-label="Search button">
+        <i class="material-icons-outlined" aria-hidden="true">search</i>
+    </button>
+</form>
+<p id="search-hint-text" class="hint-text mb-5">Tip: Try using quotes for more precise
+    results. <code>online payments</code> will give a different result compare to <code>"online payments"</code></p>
 
-<div id="tipue_search_content"></div>
+<div id="tipue_search_content"></div>

data/_sass/swedbank-pay-design-guide-theme.scss

@@ -9,6 +9,7 @@
 @import 'paragraph-highlight.scss';
 @import 'sidebar.scss';
 @import 'title-header.scss';
+@import 'tipue_search.scss';
 
 $bg: #f5f2f0;
 $darkened-bg: darken($bg, 10%);
@@ -27,7 +28,7 @@ img {
     padding-left: 0;
 }
 
-.cards:has(.cards-cta){
+.cards:has(.cards-cta) {
     min-width: 100% !important;
 }
 
@@ -442,40 +443,43 @@ body {
     }
 }
 
+#search-btn {
+    height: 56px;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.search-input {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
 .search-box {
     position: absolute;
-    right: 8rem;
-    top: 1.5rem;
+    right: 1rem;
+    top: 1rem;
     z-index: 2;
 
-
-    .search-input {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-    }
-
-    #search-btn {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        height: 56px;
-    }
-
     @media screen and (max-width: $breakpoint-lg) {
         position: fixed;
         right: 1rem;
         top: 1rem;
         z-index: 401;
 
-        #tipue_search_input {
-            display: none;
-        }
-
         #search-btn {
             border-top-left-radius: 8px;
             border-top-left-radius: var(--border-radius);
             border-bottom-left-radius: 8px;
             border-bottom-left-radius: var(--border-radius);
         }
+
+        #tipue_search_input {
+            display: none;
+        }
+
+        #search-box-container {
+            max-width: 54px;
+        }
     }
 }
 

data/_sass/tipue_search.scss

@@ -0,0 +1,22 @@
+#tipue_search_content {
+
+    nav {
+        display: flex;
+        font-family: Swedbank Headline, Arial, sans-serif;
+        font-family: var(--brand-headline);
+        justify-content: center;
+        margin: 1rem 0;
+        padding-left: 0;
+
+        ul {
+            display: flex;
+            cursor: pointer;
+
+            li {
+                border-radius: .125rem;
+                display: flex;
+                margin: .5rem;
+            }
+        }
+    }
+}

data/_sass/title-header.scss

@@ -7,7 +7,7 @@
 
     .title-header-container {
         width: 100%;
-        padding: 3rem 1rem;
+        padding: 4rem 1rem;
 
         h1,
         h4,

data/assets/js/swedbank-pay-design-guide-theme.js

@@ -96,7 +96,7 @@
 
 // Simple sidebar functionality while dg.js is being loaded
 
-function _handleSimpleSidebar (e) {
+function _handleSimpleSidebar(e) {
     const target = e.target.parentElement.parentElement;
 
     if (target.tagName === "LI") {
@@ -121,7 +121,7 @@ function _handleSimpleSidebar (e) {
 
 // Remove simple sidebar functionality when proper sidebar functionality is loaded
 (function () {
-    document.addEventListener("DOMContentLoaded", function(e) {
+    document.addEventListener("DOMContentLoaded", function (e) {
         const sidebar = document.querySelector(".sidebar");
 
         sidebar.removeEventListener("click", _handleSimpleSidebar);
@@ -131,7 +131,7 @@ function _handleSimpleSidebar (e) {
 
 // Override the topbar click to show and hide our own sidebar
 (function () {
-    const isLeaf = function(currentUrl) {
+    const isLeaf = function (currentUrl) {
         const path = window.location.pathname;
         const href = currentUrl || window.location.href;
         const pathIndex = href.indexOf(path);
@@ -142,11 +142,11 @@ function _handleSimpleSidebar (e) {
             : false;
     };
 
-    const isHome = function() {
+    const isHome = function () {
         return window.location.pathname === "/";
     };
 
-    const controlVisibility = function(currentUrl) {
+    const controlVisibility = function (currentUrl) {
         const sidebar = document.querySelector(".sidebar");
         const overlay = document.querySelector("#overlay");
         const topbarButton = document.querySelector(".topbar-btn");
@@ -158,12 +158,10 @@ function _handleSimpleSidebar (e) {
             overlay.style.display = "none";
             topbarButton.style.display = "flex";
             topbarClose.style.display = "none";
-        } else {
-            sidebar.classList.add("visible");
         }
     };
 
-    document.addEventListener("DOMContentLoaded", function() {
+    document.addEventListener("DOMContentLoaded", function () {
         const topbarButton = document.querySelector(".topbar-btn");
         const newTopbarButton = topbarButton.cloneNode(true);
         const sidebar = document.querySelector(".sidebar");
@@ -179,7 +177,7 @@ function _handleSimpleSidebar (e) {
             overlay.style.display = "block";
         }
 
-        newTopbarButton.addEventListener("click", function(e) {
+        newTopbarButton.addEventListener("click", function (e) {
             if (sidebar.classList.contains("visible")) {
                 sidebar.classList.remove("visible");
                 newTopbarButton.style.display = "flex";
@@ -194,7 +192,7 @@ function _handleSimpleSidebar (e) {
             }
         });
 
-        topbarClose.addEventListener("click", function(e) {
+        topbarClose.addEventListener("click", function (e) {
             if (sidebar.classList.contains("visible")) {
                 sidebar.classList.remove("visible");
                 newTopbarButton.style.display = "flex";
@@ -208,7 +206,7 @@ function _handleSimpleSidebar (e) {
             }
         });
 
-        overlay.addEventListener("click", function(e) {
+        overlay.addEventListener("click", function (e) {
             if (sidebar.classList.contains("visible")) {
                 sidebar.classList.remove("visible");
                 newTopbarButton.style.display = "flex";
@@ -217,15 +215,15 @@ function _handleSimpleSidebar (e) {
             }
         });
 
-        document.querySelectorAll(".nav-leaf a").forEach(function(a) {
-            a.addEventListener("click", function(e) {
+        document.querySelectorAll(".nav-leaf a").forEach(function (a) {
+            a.addEventListener("click", function (e) {
                 controlVisibility(e.target.href);
             });
         });
 
         topbarButton.parentNode.replaceChild(newTopbarButton, topbarButton);
 
-        searchButton.addEventListener("click", function(e) {
+        searchButton.addEventListener("click", function (e) {
             const searchInput = document.querySelector(".search-input");
             const searchBtn = document.querySelector("#search-btn");
             return false;
@@ -233,9 +231,8 @@ function _handleSimpleSidebar (e) {
     });
 })();
 
-
 // Initialize Tipue search
-(function() {
+(function () {
     $(document).ready(function () {
         $("#tipue_search_input").tipuesearch();
     });

data/lib/gem_version.rb

@@ -4,7 +4,7 @@ module Gem
   # Gem Specification
   class Specification
     def self.gem_version
-      '2.5.5'
+      '2.6.1'
     end
   end
 end

data/lib/sidebar_html_builder.rb

@@ -65,9 +65,9 @@ module SwedbankPay
     end
 
     def change_root_class(current_page)
-      return if current_page.path != '/'
-
-      # On 'home', set the 'class' to 'sidebar dg-sidebar' to effectively remove 'has-secondary-nav'.
+      return unless current_page.path == '/search/' || current_page.path == '/'
+      
+      # On 'home' or 'search', set the 'class' to 'sidebar dg-sidebar' to effectively remove 'has-secondary-nav'.
       current_page.doc.xpath('//*[@id="dg-sidebar"]').first.set_attribute('class', 'sidebar dg-sidebar')
     end
 

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 2.5.5
+  version: 2.6.1
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-06-10 00:00:00.000000000 Z
+date: 2025-07-02 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
@@ -445,6 +445,7 @@ files:
 - _sass/paragraph-highlight.scss
 - _sass/sidebar.scss
 - _sass/swedbank-pay-design-guide-theme.scss
+- _sass/tipue_search.scss
 - _sass/title-header.scss
 - _sass/variables.scss
 - assets/css/pygments-autumn.css