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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7efc8ed7b9bd61eaf3288c2a4a4e4d23c7f01fd631ef8946ba2d75e4ced2053a
-  data.tar.gz: 88fe0fa979eb17b6cb91d827808f5552bb5408fd6eb7bc681ccb91cdf92209ed
+  metadata.gz: 5f064c159a68f7f5ad682ffc591d3f2bb7bac1fd8fa59eec465307b87fe6544a
+  data.tar.gz: e6214d9121ffbacd0723992c3dcbc3c7181c3e4e04c589f8e34b69592dea3057
 SHA512:
-  metadata.gz: 2af7a399665ee6e819387dd0b283b655c1a03dbb61c4a03e8c9856c6074c2115283d520f100b63f4f1a85a2763a497a226ec19c2c1a77004290937f051945ba7
-  data.tar.gz: 76ed7dd05bae395cded6af01da6309f9fda44cfbfae6574ba627b87a96d90fe94d47e99197748e5634cc934543e5a04e98b2b09b1652fe769f32b92d117ad97c
+  metadata.gz: 1d0a28aef9616de7940d184f845b6af4e99741d57a6397724a75ccbb0d0908160512699b61a68c35acf6b31ead7af147cea52e921c3e846759771dafb2888945
+  data.tar.gz: de9915b0c2305b9b49d8c80129339e38ecae283e84ba7b13efae52344b0920c61144659aab5786001cee2ddc793b0dad4a3429c9cdb7bf8e884c5efa708a2080

data/_includes/sidebar.html

@@ -16,6 +16,7 @@ Original creator: https://sebnitu.com/2016/10/13/dynamic-menus-in-jekyll/
               placeholder="Search..." autocomplete="off" pattern=".{3,}"
               title="At least 3 characters">
       </form>
+      <p id="search-hint-text" class="hint-text">Tip: Try using quotes for more precise results.</p>
       {% endif %}
 
       <ul class="main-nav-ul">

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"
@@ -87,6 +87,7 @@
                             <i class="material-icons-outlined" aria-hidden="true">search</i>
                         </button>
                     </form>
+                    <p id="search-hint-text" class="hint-text">Tip: Try using quotes for more precise results.</p>
                     {% endif %}
                 </div>
                 <div class="d-md-flex">

data/_layouts/search.html

@@ -1,5 +1,23 @@
 ---
 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. Ex: "online payments"</p>
 
-<div id="tipue_search_content"></div>
+<div id="tipue_search_content"></div>

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

@@ -27,7 +27,7 @@ img {
     padding-left: 0;
 }
 
-.cards:has(.cards-cta){
+.cards:has(.cards-cta) {
     min-width: 100% !important;
 }
 
@@ -442,43 +442,51 @@ 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,
+        #search-hint-text {
+            display: none;
+        }
+
+        #search-box-container {
+            max-width: 54px;
+        }
     }
 }
 
+.light {
+    color: white !important;
+}
+
 .topbar-logo {
     @media screen and (max-width: $breakpoint-sm) {
         display: block;

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,60 @@ function _handleSimpleSidebar (e) {
     });
 })();
 
+//set SearchHintText color depending on background
+(function () {
+    document.addEventListener("DOMContentLoaded", function () {
+        const searchHintTexts = document.querySelectorAll("#search-hint-text");
+        let visibleSearchHintText = null;
+        searchHintTexts.forEach(function (el) {
+            if (el.offsetParent !== null) { // visible in DOM
+                visibleSearchHintText = el;
+            }
+        });
+        if (visibleSearchHintText) {
+            let parentElement = visibleSearchHintText.parentElement;
+            let siblingWithTitleHeader = null;
+            if (parentElement && parentElement.nextElementSibling) {
+                siblingWithTitleHeader = parentElement.nextElementSibling.querySelector(".title-header");
+            }
+
+            let bgColor = "white";
+            
+            if (siblingWithTitleHeader) {
+                bgColor = window.getComputedStyle(siblingWithTitleHeader).backgroundColor;
+            }
+
+            // Check for fully transparent background
+            const isTransparent = bgColor === "transparent" || /^rgba\(\s*\d+,\s*\d+,\s*\d+,\s*0\s*\)$/.test(bgColor);
+
+            // Function to calculate luminance
+            function getLuminance(rgb) {
+                const match = rgb.match(/\d+/g);
+                if (!match) return 1; // fallback to white
+                // Convert to sRGB
+                let [r, g, b] = match.map(Number).map(v => v / 255);
+                [r, g, b] = [r, g, b].map(c => {
+                    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+                });
+                return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+            }
+
+            let luminance = 1; // default to high luminance
+            if (!isTransparent) {
+                luminance = getLuminance(bgColor);
+            }
+
+            // Set color: dark text on light bg, light text on dark bg
+            if (luminance > 0.5)
+                visibleSearchHintText.classList.remove("light");
+            else
+                visibleSearchHintText.classList.add("light");
+        }
+    });
+})();
 
 // 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.0'
     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.0
 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