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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5f064c159a68f7f5ad682ffc591d3f2bb7bac1fd8fa59eec465307b87fe6544a
-  data.tar.gz: e6214d9121ffbacd0723992c3dcbc3c7181c3e4e04c589f8e34b69592dea3057
+  metadata.gz: 43f30d3e0dbcbb4f245c6b139c5088e377f9b31a7b3fabee50af5f221731e140
+  data.tar.gz: f3ca2d804cb52e7f7bfe07f170ce39a39bcc12468e71434f7444cf6627f188fa
 SHA512:
-  metadata.gz: 1d0a28aef9616de7940d184f845b6af4e99741d57a6397724a75ccbb0d0908160512699b61a68c35acf6b31ead7af147cea52e921c3e846759771dafb2888945
-  data.tar.gz: de9915b0c2305b9b49d8c80129339e38ecae283e84ba7b13efae52344b0920c61144659aab5786001cee2ddc793b0dad4a3429c9cdb7bf8e884c5efa708a2080
+  metadata.gz: 89660adaa6374392391b463406236f7730728c47438dc785978323b6686e81ea4da1ee2348178dc06711709e8e55380a82fe23e01cf97b5ff1f726a59fe451e5
+  data.tar.gz: b28a9be2d346fb985e8420d69800878742e462f480ec8d68ce9a1db21580c68c829bf107492cd11f932ce6e456ef96fa335f77ab6cc1f541b3af008c72b8ed75

data/_includes/sidebar.html

@@ -16,7 +16,6 @@ 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/_layouts/default.html

@@ -87,7 +87,6 @@
                             <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

@@ -6,7 +6,7 @@ layout: default
         placeholder="Search in documentation" onfocus="this.placeholder=''"
         onblur="this.placeholder='Search in documentation'" pattern=".{3,}" title="At least 3 characters">
     <script>
-        (function() {
+        (function () {
             var params = new URLSearchParams(window.location.search);
             var q = params.get('q');
             if (q) {
@@ -18,6 +18,7 @@ layout: default
         <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>
+<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>

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%);
@@ -472,8 +473,7 @@ body {
             border-bottom-left-radius: var(--border-radius);
         }
 
-        #tipue_search_input,
-        #search-hint-text {
+        #tipue_search_input {
             display: none;
         }
 
@@ -483,10 +483,6 @@ body {
     }
 }
 
-.light {
-    color: white !important;
-}
-
 .topbar-logo {
     @media screen and (max-width: $breakpoint-sm) {
         display: block;

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/assets/js/swedbank-pay-design-guide-theme.js

@@ -231,58 +231,6 @@ 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 () {
     $(document).ready(function () {

data/lib/gem_version.rb

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

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 2.6.0
+  version: 2.6.1
 platform: ruby
 authors:
 - Swedbank Pay
@@ -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