swedbank-pay-design-guide-jekyll-theme 1.9.12 → 1.10.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 136a6ad6d38647a7706751b72b4cae4570abdbbab3414da7f6afaa7cf10cfc3b
-  data.tar.gz: b657467169c8755ad2d3ff75f8cf2fdea07315f3affb3fa86f7ededb5b8c72f2
+  metadata.gz: 107fe32dcdd6919798c50bc86a8933442abadabf1120a24b6dfbbcf634e427b3
+  data.tar.gz: 0f1c6521f1eded78dfef148a0f17537c2cacdcadb2eb7a344060fac494257a51
 SHA512:
-  metadata.gz: 23c0f8cf529856c1098afdbc57c9574eb1b8f4fa25339631c733e1f0210f06afaa4a732efa49585823f6191a7028cf3ad55b49ea83b204d56f9792a4c4ba0f81
-  data.tar.gz: cda338e81636f5c3c5d91e61c3bfaff497bc08f358dd9398c4122007af7cf0788beece70cbc98cf8f18272113473fb37f6d632c97db61e1139b913b79976a56e
+  metadata.gz: 6aaac38681e036d6e1a3db0e0919a02cf89f47d3db876a85d67142219a44fd129698a4f69ff9ee63d6b13798248ea185ba4df8e0bb67429f2f50a1a345aa6522
+  data.tar.gz: 3dc72e03582095cb5ea5721bf1b63d63a1827f51282623035124eb875cfd4ca23a0d89a889a7186a6000b5317b1bd8e7a80cf777ef5c69b54a4ad183e4926dea

data/_includes/card-list.html

@@ -7,22 +7,35 @@ type: sdk | module - Empty type result in default card styling
 col_class(required): Describes what grid column class(es) each card should be wrapped in
 {%- endcomment -%}
 
-{% assign card_list = include.card_list %}
-{% assign type = include.type %}
-{% assign col_class = include.col_class %}
+{% assign cards = include.card_list | default: page.children %}
+{% assign col_class = include.col_class | default: 'col-lg-4' %}
 
 <div class="row card-list">
-    {% for card in card_list %}
+    {% for card in cards %}
         {% assign title = card.title | split: '–' | last %}
+        {% assign link_to = card.absolute_path | default: card.url %}
+
+        {% assign card_type = card.card.type | default: card.card_type | default: include.type %}
+        {% assign icon_content = card.card.icon.content | default: card.icon.content %}
+        {% assign icon_outlined = card.card.icon.outlined | default: card.icon.outlined %}
+        {% assign icon_svg = card.card.icon.svg | default: card.icon.svg %}
+        {% assign no_icon = card.card.icon.no_icon | default: card.icon.no_icon %}
+        {% assign horizontal = card.card.horizontal | default: false %}
+        {% assign disabled = card.card.disabled | default: card.disabled %}
+
         <div class="{{ col_class }}">
-            {% include card.html title=title
+            {% include card.html
+                title=title
                 text=card.description
-                icon_content=card.icon.content
-                icon_outlined=card.icon.outlined
-                icon_svg=card.icon.svg
-                to=card.url
-                type=type
+                icon_content=icon_content
+                icon_outlined=icon_outlined
+                icon_svg=icon_svg
+                no_icon=no_icon
+                to=link_to
+                type=card_type
+                horizontal=horizontal
+                disabled=disabled
             %}
         </div>
     {% endfor %}
-</div>
+</div>

data/_includes/card-overview.html

@@ -0,0 +1,14 @@
+{% for child in page.children %}
+    {% if child.children && child.children.size > 0 %}
+        {% assign title = child.title | default: child.section %}
+        {% capture header %}
+{:.heading-line}
+## {{ title }}
+        {% endcapture %}
+        {% assign header =  header | markdownify %}
+        {% include anchor_headings.html html=header anchorClass='header-anchor' %}
+        {% assign col_class = child.card.col_class | default: 'col-lg-4' %}
+        {% assign card_type = child.card.type %}
+        {% include card-list.html card_list=child.children col_class=col_class type=card_type %}
+    {% endif %}
+{% endfor %}

data/_includes/card.html

@@ -12,7 +12,6 @@ to(required): Url to the page to be directed to on click
 type: sdk | module - Empty type result in default card styling
 {%- endcomment -%}
 
-{% assign title = include.title %}
 {% assign title_type = include.title_type | default: 'h4', %}
 {% assign icon_content = include.icon_content %}
 {% assign icon_outlined = include.icon_outlined | default: false %}
@@ -21,53 +20,49 @@ type: sdk | module - Empty type result in default card styling
 {% assign text = include.text %}
 {% assign horizontal = include.horizontal | default: false %}
 {% assign to = include.to %}
+{% assign disabled = include.disabled %}
+
 {% if include.type %}
-{% assign type = include.type %}
-{% assign type_class = 'dx-card-' | append: type %}
+    {% assign type = include.type %}
+    {% assign type_class = 'dx-card-' | append: type %}
 {% else %}
-{% assign type_class = '' %}
+    {% assign type_class = '' %}
 {% endif %}
 
-{% comment %} 
-card.html is structured this way due to issues with rendering
-when Liquid is mixed in between and the cards are not wrapped in a div
-{% endcomment %}
+{% unless icon_svg %}
+    {% if icon_content contains '/' or icon_content contains '.svg' %}
+        {% assign icon_svg = true %}
+    {% endif %}
+{% endunless %}
 
+{% assign card_class = 'dx-card ' | append: type_class | strip %}
 {% if horizontal %}
-<a href="{{ to }}" class="dx-card dx-card-horizontal {{type_class}}">
-    <span class="dx-card-icon{% if no_icon %} d-none{% endif %}">
-        {{ icon_content }}
-    </span>
-    <span class="dx-card-content">
-        <span class="{{ title_type }}">{{ title }}</span>
-        <span>{{ text }}</span>
-    </span>
-    <i class="material-icons">arrow_forward</i>
-</a>
-{% else %}
-{% if icon_svg %}
-<a href="{{ to }}" class="dx-card {{type_class}}">
-    <span class="dx-card-icon">
-        {% include {{ icon_content }} %}
-    </span>
-    <span class="dx-card-content">
-        <span class="{{ title_type }}">{{ title }}</span>
-        <span>{{ text }}</span>
-    </span>
-    <i class="material-icons">arrow_forward</i>
-</a>
+    {% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
+{% endif %}
+
+{% if disabled %}
+    {% assign card_class = card_class | append: ' dx-card-disabled' | strip %}
+    {% assign card_tag = 'span' %}
 {% else %}
-<a href="{{ to }}" class="dx-card {{type_class}}">
+    {% assign card_tag = 'a' %}
+    {% capture card_attributes %}href="{{ to }}"{% endcapture %}
+{% endif %}
+
+<{{ card_tag }} {{ card_attributes }} class="{{ card_class }}">
     <span class="dx-card-icon{% if no_icon %} d-none{% endif %}">
-        <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
-            {{ icon_content }}
-        </i>
+        {% if icon_svg %}
+            {% include {{ icon_content }} %}
+        {% else %}
+            <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
+                {{ icon_content }}
+            </i>
+        {% endif %}
     </span>
     <span class="dx-card-content">
-        <span class="{{ title_type }}">{{ title }}</span>
-        <span>{{ text }}</span>
+        <span class="{{ title_type }}">{{ include.title }}</span>
+        <span>{{ text | markdownify }}</span>
     </span>
-    <i class="material-icons">arrow_forward</i>
-</a>
-{% endif %}
-{% endif %}
+    {% unless disabled %}
+        <i class="material-icons">arrow_forward</i>
+    {% endunless %}
+</{{ card_tag }}>

data/_includes/doc-container.html

@@ -0,0 +1,19 @@
+{% capture max_width_class %}
+    {% if page.layout == 'front-page' %}
+        no-padding
+    {% elsif page.card_overview %}
+        normal-padding max-width-card-overview
+    {% else %}
+        normal-padding max-width
+    {% endif %}
+{% endcapture %}
+
+<div class="doc-container {{ max_width_class | strip }}">
+    <article>
+        {% if page.card_overview %}
+            {% include card-overview.html %}
+        {% else %}
+            {% include anchor_headings.html html=content anchorClass='header-anchor' %}
+        {% endif %}
+    </article>
+</div>

data/_includes/google_analytics.html

@@ -1,9 +1,8 @@
-<!-- Global site tag (gtag.js) - Google Analytics -->
-<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.tracking_id }}"></script>
-<script>
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', '{{ site.google_analytics.tracking_id }}');
-</script>
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics.tracking_id }}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){ dataLayer.push(arguments); }
+  gtag('js', new Date());
+  gtag('config', '{{ site.google_analytics.tracking_id }}', { 'anonymize_ip': true });
+</script>

data/_layouts/default.html

@@ -95,14 +95,7 @@
                         {% if page.layout != 'front-page' %}
                             {% include title-header.html %}
                         {% endif %}
-                        <div class="doc-container{% if page.layout == 'front-page' %} no-padding
-                            {% elsif page.card_overview %} normal-padding max-width-card-overview
-                            {% else %} normal-padding max-width
-                            {% endif %}">
-                            <article>
-                                {% include anchor_headings.html html=content anchorClass='header-anchor' %}
-                            </article>
-                        </div>
+                        {% include doc-container.html %}
                     </main>
                 </div>
             </div>
@@ -110,7 +103,7 @@
         <script src="{{ design_guide_url }}/scripts/dg.js"></script>
         <script src="{{ '/assets/js/swedbank-pay-design-guide-theme.js' | relative_url }}"></script>
         {%- if site.google_analytics.tracking_id %}
-        {% include google_analytics.html %}
+            {% include google_analytics.html %}
         {%- endif %}
     </body>
 

data/_sass/card.scss

@@ -95,10 +95,8 @@
     }
 
     &.dx-card-sdk {
-
         &:hover,
         &:focus {
-
             &:after {
                 border-bottom: 4px solid $turquoise;
             }
@@ -116,13 +114,21 @@
                 fill: $white;
             }
         }
+
+        &.dx-card-disabled {
+            &, .h1, .h2, .h3, .h4, h5, .h6 {
+                color: $soft-turquoise;
+            }
+
+            .dx-card-icon {
+                background-color: $soft-turquoise;
+            }
+        }
     }
 
     &.dx-card-module {
-
         &:hover,
         &:focus {
-
             &:after {
                 border-bottom: 4px solid $card-pink;
             }
@@ -140,8 +146,36 @@
                 fill: $white;
             }
         }
+
+        &.dx-card-disabled {
+            &, .h1, .h2, .h3, .h4, h5, .h6 {
+                color: $soft-card-pink;
+            }
+
+            .dx-card-icon {
+                background-color: $soft-card-pink;
+            }
+        }
     }
 
+    &.dx-card-disabled {
+        &, .h1, .h2, .h3, .h4, h5, .h6 {
+            color: $soft-brown;
+        }
+
+        &:hover,
+        &:focus {
+            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
+
+            &:after {
+                border-bottom: none;
+            }
+        }
+
+        .dx-card-icon {
+            background-color: $soft-yellow;
+        }
+    }
 }
 
 

data/_sass/colors.scss

@@ -1,4 +1,5 @@
 $yellow: #fdc129;
+$soft-yellow: #fff3d5;
 $light-turquoise: #ebf8f2;
 $apricot: #fbf2ea;
 $pink: #efb7b6;
@@ -7,12 +8,15 @@ $brand-info-light: #e8eff9;
 $brand-success: #51971b;
 $brand-success-light: #f2f7eb;
 $turquoise: #31a3ae;
+$soft-turquoise: #98d0d6;
 $turquoise-link: #257886;
 $brown: #512b2b;
 $dark-brown: #493c3b;
 $medium-brown: #72605e;
+$soft-brown: #a38b80;
 $white: #fff;
 $card-pink: #c5569a;
+$soft-card-pink: #d698c8;
 $background-gray: #ebE7E2;
 $background-front-page: #fefcfa;
 $code-green: #9c6;

data/lib/gem_version.rb

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

data/lib/sidebar_html_builder.rb

@@ -100,9 +100,9 @@ module SwedbankPay
       return leaf_markup(page.path, main_title, page.level) 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?
+      return page.headers.map { |h| header_markup(page, h) }.join unless page.children?
 
-      headers_markup = page.headers.map { |h| header_markup(page, h) }.join('')
+      headers_markup = page.headers.map { |h| header_markup(page, h) }.join
       headers_markup = "<ul class=\"nav-ul\">#{headers_markup}</ul>"
 
       item_markup(page, current_page, headers_markup, true)

data/lib/sidebar_page.rb

@@ -30,6 +30,7 @@ module SwedbankPay
       @title = SidebarPageTitle.parse(jekyll_page, self)
       @order = menu_order(jekyll_page)
       @children = SidebarPageCollection.new(self)
+      @card_overview = jekyll_page['card_overview'].nil? ? false : jekyll_page['card_overview']
     end
 
     def active?(current, is_leaf: false)
@@ -113,6 +114,8 @@ module SwedbankPay
 
       @jekyll_page.data['lead_title'] = @title.lead
       @jekyll_page.data['main_title'] = @title.main
+      @jekyll_page.data['children'] = @children
+      @jekyll_page.data['absolute_path'] = @path
     end
 
     def save
@@ -144,6 +147,14 @@ module SwedbankPay
       @doc
     end
 
+    def to_liquid
+      @jekyll_page.to_liquid
+    end
+
+    def card_overview?
+      @card_overview
+    end
+
     private
 
     def menu_order(jekyll_page)

data/lib/sidebar_page_collection.rb

@@ -32,5 +32,9 @@ module SwedbankPay
 
       count
     end
+
+    def to_liquid
+      @pages
+    end
   end
 end

data/lib/sidebar_parser.rb

@@ -59,16 +59,19 @@ module SwedbankPay
     def find_headers(page)
       headers = []
 
+      # Don't include headers in the sidebar if we're on a card overview page.
+      return headers if page.card_overview?
+
       page.doc.xpath('//h2').each do |header|
-        next unless header['id']
+        id = header['id']
+
+        next unless id
 
         child_markup = header.last_element_child
-        header = {
-          id: header['id'],
-          title: header.content.strip,
-          hash: (child_markup['href']).to_s
-        }
-        headers.push(header)
+        hash = child_markup['href'].to_s if child_markup.respond_to? :[]
+        title = header.content.strip
+
+        headers.push({ id: id, title: title, hash: hash })
       end
 
       headers

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.9.12
+  version: 1.10.3
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-02-27 00:00:00.000000000 Z
+date: 2021-04-22 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
@@ -203,7 +203,9 @@ files:
 - _includes/apple-touch-startup-images.md
 - _includes/card-horizontal-list.html
 - _includes/card-list.html
+- _includes/card-overview.html
 - _includes/card.html
+- _includes/doc-container.html
 - _includes/github.html
 - _includes/google_analytics.html
 - _includes/img/merchants/logo-coop.svg
@@ -287,14 +289,14 @@ required_ruby_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
-      version: 2.4.0
+      version: 2.5.0
 required_rubygems_version: !ruby/object:Gem::Requirement
   requirements:
   - - ">="
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.1.4
+rubygems_version: 3.1.6
 signing_key: 
 specification_version: 4
 summary: Swedbank Pay Design Guide theme for Jekyll