swedbank-pay-design-guide-jekyll-theme 1.16.2 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 7d4b8957148c77b2aad1d8d9e3fc3118ae4de5bcfee5a79d78993d9d66eca82e
-  data.tar.gz: 92452487974ff9ec8ce12ca732cbc31905e47b39a6392234b71a85031b5f8382
+  metadata.gz: 7af1d6da34a402277a02f21b3b4add29bc52b53a513595c54aee678b93af2e56
+  data.tar.gz: 59b01ae02cb720bec35b79f269591fb3472fdbdac8e5db31e82471d285721eb4
 SHA512:
-  metadata.gz: 0ed3928b70b7646d08752754086582ade494b7a29455b29f87e95aa6bb4a3632ce4aa32aeb8a979b2e2f651eb47682373af8ea1629931460221696d0719e9bb9
-  data.tar.gz: f8a6e1438d03028ab1ac07673edb8db98794b410b309deebea0fcdee7bcccdf1deaefdcd401bcae9ea30cb0db624e10818dd4eb949287f911a79f3d0237f8fb5
+  metadata.gz: 45f229b194ddc7e8e1b5fa31fb3e6fabc6441b3bc4e7ec87c78e1ab9da6eabf6d6f0d8c93cdbbf8e12060827c7f95dbbd17aeeaf798ffbed2760e9c721952c3c
+  data.tar.gz: a4d079b0d677f4584f722b4cc2ada4dbc517007358e26a49e7ba7c9141b3f9cb807a9df8c7c6a2c257fd9bc522fdeb960e4348f95c15746116cc26717a698c7f

data/_includes/accordion-table.html

@@ -2,8 +2,8 @@
 
 <div class="accordion accordion-table mb-4">
     <button type="button" class="accordion-header pt-0" aria-expanded="false" aria-controls="exp-1">
-        <span class="mr-3 show">Show properties</span>
-        <span class="mr-3 hide">Hide properties</span>
+        <span class="mr-3 show">Show fields</span>
+        <span class="mr-3 hide">Hide fields</span>
     </button>
     <div class="accordion-body p-0" id="exp-1">
         {{ content }}

data/_includes/tabs.html

@@ -1,10 +1,10 @@
 <div class="tabs" id="tabs-showcase-example">
     <ul>
         <li class="full-checkout">
-            <a id="full-checkout">Full Checkout</a>
+            <a href="#full-checkout" id="full-checkout">Full Checkout</a>
         </li>
         <li class="payments-only">
-            <a id="payments-only">Payments Only</a>
+            <a href="#payments-only" id="payments-only">Payments Only</a>
         </li>
     </ul>
 </div>

data/_includes/title-header.html

@@ -1,7 +1,6 @@
 {% assign lead_title = page.lead_title %}
 {% assign main_title = page.main_title | default: page.title %}
 {% assign description = page.description %}
-{% assign estimated_read = page.estimated_read %}
 {% assign checkout_v3 = page.checkout_v3 %}
 {% capture max_width_class %}
     {% if page.card_overview %}
@@ -23,7 +22,8 @@
 
             <h1>{{ main_title }}</h1>
 
-            {% if estimated_read %}
+            {% assign estimated_read = page.content | read_time | plus: 0 %}
+            {% if estimated_read > 0 %}
                 <div class="title-header-estimated-read">
                     <i class="material-icons">schedule</i>
                     {{ estimated_read }} min read

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/accordion-table.scss

@@ -8,6 +8,7 @@
 
         .show {
             display: block;
+            width: 52rem;
         }
 
         .hide {
@@ -23,13 +24,24 @@
 
             .hide {
                 display: block;
+                width: 70vw;
             }
         }
 
         .accordion-header {
+            align-items: center;
+            background-color: $apricot;
+            border: 1px solid rgba(153, 153, 153, 0.5);
+            border-radius: 2px;
+            max-width: 80rem;
+            line-height: 2rem;
+            padding: unset;
+
             &:before {
-                bottom: 1rem;
-                margin: auto;
+                position: absolute;
+                top: 50%;
+                margin-right: 0.5rem;
+                bottom: 50%;
                 transition: .3s;
                 color: $brown;
             }

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.2'
+      '2.0.0'
     end
   end
 end

data/lib/read_time.rb

@@ -0,0 +1,35 @@
+# Calculates reading time based on the formula used by Medium
+# https://medium.com/the-story/read-time-and-you-bc2048ab620c
+
+# Installation: drop this into your _plugins folder
+# Usage: {{ page.content | read_time }}
+# Note: this requires img tags to be in the form of <img ... />. If you're
+# using this on a post listing page, make sure to markdownify the post content
+# first.
+module ReadTimeFilter
+    def read_time(input)
+        words_per_minute = 275
+        # number of seconds per image to start at, default is 12s
+        img_time_max = 12
+        # time per image will decrease by 1 for every image, to a minimum
+        # of this time, default is 3s
+        img_time_min = 3
+
+        strings = input.split(/<img.* \/>/)
+
+        seconds = (strings.join(" ").split.size.to_f / (words_per_minute / 60))
+
+        # number of images minus one for correct number of iterations
+        (strings.size - 2).times do |i|
+            t = (img_time_max - i)
+            image_time = t > img_time_min ? t : img_time_min
+            seconds = seconds + image_time
+        end
+
+        minutes = (seconds / 60).ceil
+
+        "#{minutes} min read"
+    end
+end
+
+Liquid::Template.register_filter(ReadTimeFilter)

data/lib/sidebar_html_builder.rb

@@ -47,26 +47,42 @@ 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)
-
+      root_class = root_class(page, current_page)
+      level.zero? &&
+        page.doc.xpath('//*[@id="dg-sidebar"]').first.set_attribute('class', root_class)
       "<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 root_class(page, current_page)
+      active = page.active?(current_page)
+      active && current_page.path != '/' ? 'sidebar dg-sidebar has-secondary-nav' : 'sidebar dg-sidebar'
     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 +92,35 @@ module SwedbankPay
 
     def title_markup(page, level, is_leaf)
       lead_title = lead_title(page)
-      return "<span>#{lead_title}</span>" if level.zero?
+      return "<a href=\"#{page.path}\"><i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>#{lead_title}</a>" if level.zero? && lead_title != 'Home'
+      return "<a href=\"#{page.path}\">#{page.section || page.title}</a>" if 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 +139,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']

data/lib/swedbank-pay-design-guide-jekyll-theme.rb

@@ -1,4 +1,5 @@
 # frozen_string_literal: true
 
 require_relative 'sidebar'
+require_relative 'read_time'
 require_relative 'regex_capture_filter'

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.16.2
+  version: 2.0.0
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-10-14 00:00:00.000000000 Z
+date: 2023-01-25 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
@@ -143,9 +143,6 @@ dependencies:
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1'
-    - - ">="
       - !ruby/object:Gem::Version
         version: '1.11'
   type: :runtime
@@ -153,9 +150,6 @@ dependencies:
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1'
-    - - ">="
       - !ruby/object:Gem::Version
         version: '1.11'
 - !ruby/object:Gem::Dependency
@@ -443,6 +437,7 @@ files:
 - assets/tipuesearch/tipuesearch_content.js
 - assets/tipuesearch/tipuesearch_set.js
 - lib/gem_version.rb
+- lib/read_time.rb
 - lib/regex_capture_filter.rb
 - lib/safe_merge.rb
 - lib/sanitized_filename.rb