swedbank-pay-design-guide-jekyll-theme 1.16.0 → 1.17.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d8e950e6c0a65361656afb452a7830d9e3e4fcb656859802e68ae4ba94d95c3
-  data.tar.gz: b0d60a81f3a8183a6159118bcb01cb19b6f591e4993da99dc1a1b66ed065c81d
+  metadata.gz: 216bd16da1e18a58dfe126c5db52cb37c7e244d12a9dd4b70580a3137fa992d1
+  data.tar.gz: 7cd79606950e7907a8414d50d245036a1b2f52ae37325bd6db146a3958825c70
 SHA512:
-  metadata.gz: 58f79e9da80e44d92b46cf05b252f1949664110654488375b1065ea4d7c4e5c8e8e6a48a22574384018599d7a2243473d186ba39ca79af9bb6f38c1a9a9836a7
-  data.tar.gz: 0260b42d62168844d5aa4b4e51ec0feefa83867671bc93ff123409110e0eb6f2549fe324b89b4ef29be60f89367bd182a5497e13b00d40d5aec87569a338c4a8
+  metadata.gz: efb0eab9682e771974c7cc04e4c8a85811939f88760e8b0773696567e752bb9daa069144df787423af5cec97e47db9687946a8941bb95557a3207404f53efbfc
+  data.tar.gz: 76bc0e7ca8006e0a4db4bb7c019a2804706f33cb7b7e73e232960a19b70a6f9d1fa13e7259df93c7611fdd6af4f89fdd7895e9ba7a97a060bb2e25abd500af58

data/_layouts/default.html

@@ -60,17 +60,15 @@
         <div id="designguide">
             <div class="documentation">
                 <div class="row">
-                    <div class="col-xxl-2 col-lg-3 pr-0">
-                        <div class="sidebar dg-sidebar">
-                            <nav class="sidebar-nav">
-                                <a href="/" class="sidebar-header">
-                                    <img src="{{ design_guide_url }}/designguide/assets/swedbankpay-logo-v.svg"
+                        <div id="dg-sidebar" class="sidebar dg-sidebar has-secondary-nav">
+                            <nav class="sidebar-main-nav">
+                                <div class="sidebar-logo">
+                                    <a href="/" class="sidebar-header">
+                                        <img src="{{ design_guide_url }}/designguide/assets/swedbankpay-logo-v.svg"
                                         alt="Swedbank Pay vertical logo" class="logotype-vertical logotype-lg"/>
-                                    <div class="sidebar-header-text">
-                                        <span>{</span>developer portal<span>}</span>
-                                    </div>
-                                </a>
-                                {% if site.search.enabled == true %}
+                                    </a>
+                                </div>
+                                <!-- {% if site.search.enabled == true %}
                                 <form class="search-container mx-2 my-4 px-3 py-2 d-flex"
                                     method="get" action="{{ site.search.url | relative_url }}">
                                     <input name="q" type="text" id="tipue_search_input"
@@ -84,14 +82,12 @@
                                         <i class="material-icons m-0" aria-hidden="true">search</i>
                                     </button>
                                 </form>
-                                {% endif %}
+                                {% endif %} -->
                                 <ul id="dx-sidebar-main-nav-ul" class="main-nav-ul">
                                 </ul>
                             </nav>
                         </div>
-                    </div>
-
-                    <main class="doc-view col-xxl-10 col-lg-9">
+                    <main class="doc-view">
                         {% if page.layout != 'front-page' %}
                             {% include title-header.html %}
                         {% endif %}

data/_sass/sidebar.scss

@@ -1,104 +1,30 @@
-@import 'colors.scss';
-
-.sidebar {
-    .sidebar-nav {
-        .sidebar-header {
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            margin-top: 2rem;
-            text-decoration: none;
-            color: #512b2b;
-
-            img {
-                margin-top: 1.5rem;
-                margin-bottom: 1.25rem;
-            }
-
-            span {
-                color: #fdc129;
-            }
-
-            .sidebar-header-text {
-                margin-top: -0.5rem;
-                font-size: 1.125rem;
-                line-height: 1.5rem;
-                color: $black;
-                font-family: "Akkurat Mono", monospace;
-                white-space: nowrap;
-            }
+#dg-sidebar {
+    &.sidebar {
+        .nav-ul {
+            list-style: none;
+            overflow: hidden;
+            padding: 0;
+            top: auto;
+            position: relative;
+            transition: none;
         }
+    }
 
-        .search-container {
-            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
-            border-radius: 0.125rem;
-
-            &:focus-within {
-                outline: -webkit-focus-ring-color auto 0.5px;
-            }
-
-            .search-input {
-                color: $medium-brown;
-                font-size: 0.875rem;
-                border: none;
-                padding: 0.375rem;
-                
-                &:focus {
-                    color: $brown;
-                    outline: none
-                }
-            }
-
-            i {
-                display: block;
-                color: $brown;
-
-                &:hover {
-                    color: $turquoise-link;
+    .main-nav-ul {
+        a {
+            &.disabled {
+                ~nav {
+                    display: none;
                 }
             }
-
-            button {
-                background-color: $white;
-                border: none;
-                cursor: pointer;
-            }
-
         }
 
-        .main-nav-ul {
-            .nav-group {
-                .nav-ul {
-                    .nav-subgroup {
-                        &.active {
-                            >.nav-subgroup-heading {
-                                a {
-                                    color: #257886;
-                                    font-weight: 700;
-                                }
-                            }
-                        }
-
-                        .nav-subgroup-heading {
-                            padding: 0;
-
-                            i {
-                                padding: 0.5rem 0;
-                            }
-
-                            a {
-                                color: #512b2b;
-                                padding: .5rem;
-                                font-size: 1rem;
-                                line-height: 1.5rem;
-                                text-decoration: none;
-                                width: 100%;
-
-                                &:hover,
-                                &:focus {
-                                    color: #257886;
-                                }
-                            }
+        .leaf {
+            &.active {
+                > a {
+                    &:hover {
+                        &:after {
+                            content: none;
                         }
                     }
                 }

data/lib/gem_version.rb

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

data/lib/sidebar_html_builder.rb

@@ -47,26 +47,36 @@ module SwedbankPay
       level = is_leaf ? -1 : page.level
       title_markup = title_markup(page, level, is_leaf)
       item_class = item_class(page, current_page, level, is_leaf)
-      group_heading_class = group_heading_class(level)
-
+      level.zero? &&
+        page.doc.xpath('//*[@id="dg-sidebar"]').first.set_attribute('class', 'sidebar dg-sidebar')
       "<li class=\"#{item_class}\">
-        <div class=\"#{group_heading_class}\">
-          <i class=\"material-icons\">arrow_right</i>
           #{title_markup}
-        </div>
-        #{sub_items_markup}
-      </li>"
+          #{item_class === 'main-nav-li' || item_class === 'main-nav-li active' ? "<nav class=\"sidebar-secondary-nav\">
+              <header class=\"secondary-nav-header\">#{page.title.section || page.title}</header>
+                #{sub_items_markup}
+              </nav>" : sub_items_markup}
+        </li>"
     end
 
     def item_class(page, current_page, level, is_leaf)
       active = page.active?(current_page, is_leaf: is_leaf)
       item_class = group_class(level)
+      if item_class != 'main-nav-li'
+        item_class += page.children.empty? ? ' group' : ' leaf'
+      end
+
       item_class += ' active' if active
       item_class
     end
 
     def group_class(level)
-      level.zero? ? 'nav-group' : 'nav-subgroup'
+      if level.zero?
+        'main-nav-li'
+      elsif level == 1
+        'secondary-nav-li'
+      else
+        ''
+      end
     end
 
     def group_heading_class(level)
@@ -76,29 +86,37 @@ module SwedbankPay
 
     def title_markup(page, level, is_leaf)
       lead_title = lead_title(page)
-      return "<span>#{lead_title}</span>" if level.zero?
+      return "<a>
+                <i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>
+                #{lead_title}
+              </a>" if level.zero? && lead_title != 'Home'
 
       main_title = main_title(page, is_leaf)
-
-      "<a href=\"#{page.path}\">#{main_title}</a>"
+      home = main_title == 'Home' ? 'disabled' : ''
+      "<a class=\"#{home}\" href=\"#{page.path}\"><i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>#{main_title}</a>"
     end
 
     def sub_items_markup(page, current_page)
       headers_markup = headers_markup(page, current_page)
       child_markup = build_markup(page.children, current_page)
-
       return '' if headers_markup.empty? && child_markup.empty?
 
-      "<ul class=\"nav-ul\">
-        #{headers_markup}
-        #{child_markup}
+      "<ul class=\"#{page.level.zero? ? 'secondary-nav-ul' : ''}\">
+          #{if page.level.positive? && page.children?
+              "<a href=\"#\" class=\"previous-nav\">
+                <i class=\"material-icons\" aria-hidden=\"true\">arrow_back_ios</i>
+                <span>Back to #{page.parent.title}</span>
+              </a>
+              <header>#{page.title.section || page.title}</header>"
+            end}
+          #{headers_markup}
+          #{child_markup}
       </ul>"
     end
 
     def headers_markup(page, current_page)
       # If there's no page headers, only return a leaf item for the page itself.
-      main_title = page.title.nil? ? nil : page.title.main
-      return leaf_markup(page.path, main_title, page.level) unless page.headers?
+      return '' unless page.headers?
 
       # If there's no children, only return the headers as leaf node items.
       return page.headers.map { |h| header_markup(page, h) }.join unless page.children?
@@ -117,7 +135,7 @@ module SwedbankPay
     end
 
     def leaf_markup(href, title, level = 0)
-      leaf_class = level.positive? ? 'nav-leaf nav-subgroup-leaf' : 'nav-leaf'
+      leaf_class = level.positive? ? 'leaf' : 'nav-leaf'
       "<li class=\"#{leaf_class}\"><a href=\"#{href}\">#{title}</a></li>"
     end
 

data/lib/sidebar_page.rb

@@ -13,7 +13,7 @@ module SwedbankPay
   class SidebarPage
     FIXNUM_MAX = ((2**((0.size * 8) - 2)) - 1)
 
-    attr_reader :path, :title, :level, :order, :children, :name, :filename, :doc
+    attr_reader :path, :title, :level, :order, :children, :name, :filename, :doc, :section, :icon
     attr_accessor :headers, :sidebar_container, :number, :parent
 
     def initialize(jekyll_page)
@@ -26,10 +26,11 @@ module SwedbankPay
       @path = sidebar_path.to_s
       @parent = sidebar_path.parent
       @level = sidebar_path.level
-      @name = sidebar_path.name
       @hide_from_sidebar = jekyll_page['hide_from_sidebar'].nil? ? false : jekyll_page['hide_from_sidebar']
       @title = SidebarPageTitle.parse(jekyll_page, self)
       @order = menu_order(jekyll_page)
+      @section = jekyll_page['section']
+      @icon = jekyll_page['sidebar_icon']
       @children = SidebarPageCollection.new(self)
       @card_overview = jekyll_page['card_overview'].nil? ? false : jekyll_page['card_overview']
       @anchor_headings = jekyll_page['anchor_headings'].nil? ? true : jekyll_page['anchor_headings']

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.16.0
+  version: 1.17.0
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-02-16 00:00:00.000000000 Z
+date: 2022-06-28 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday