swedbank-pay-design-guide-jekyll-theme 1.10.0 → 1.10.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9d75a81c46fdd8b54db9bdedbd6f2ab116f3c5b39da55fe1e394b1194a44ecff
-  data.tar.gz: a5f07b043e51424f139e61eb40aac49f227a26dfd9b3976e634882836d2bd2d2
+  metadata.gz: 19ee08d9790dff4e1cb23a6a83e6fd3dc4aacc4ce3e525512e48c44e308f410a
+  data.tar.gz: 7f4aba83c60b9e3479309b0dd4ded8a4d2252fdd1a353513ef945159b66ab49d
 SHA512:
-  metadata.gz: eb181bd3f5a33e421344f7dfa84991551dd3897a10f0cb3dbaaede72007ac4008d347d925e6b38290f8451e770bb59ffb1c8a2cf74210357118f2a9ce52755ee
-  data.tar.gz: d96ffc9da54916d3dbdc9cf8319e0091ccedcd37a6ab7488b4adecccfe2fc1423cde1b8a86a0d62fc95654b7afc1d03106eeacbd529319d7f55b7a74226f7207
+  metadata.gz: 794b358433885c1c8f814fa28ba0b740c0198ae79028e51efd7ea231b6f030361a8096636be0e7ce30e36e3b4fff2ceaa030af0bbe52ee67a46a75c6ed6cc8a2
+  data.tar.gz: 3c58bb6a40ba660b993356b9e182e7d67f833458bd9f78b00fe20f015210f5c69b8d78e15bf29affe548616a5b1604908d1f01dd12f03f6b1c78eb6363b33af2

data/_includes/card-list.html

@@ -11,10 +11,13 @@ col_class(required): Describes what grid column class(es) each card should be wr
     {% for card in include.card_list %}
         {% assign title = card.title | split: '–' | last %}
         {% assign link_to = card.extensionless_path | default: card.url %}
-        {% assign card_type = card.card_type | default: include.type %}
+        {% 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: false %}
 
         <div class="{{ include.col_class }}">
             {% include card.html
@@ -23,8 +26,11 @@ col_class(required): Describes what grid column class(es) each card should be wr
                 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 %}

data/_includes/card-overview.html

@@ -7,6 +7,7 @@
         {% assign header =  header | markdownify %}
         {% include anchor_headings.html html=header anchorClass='header-anchor' %}
         {% assign col_class = child.card.col_class | default: 'col-lg-4' %}
-        {% include card-list.html card_list=child.children col_class=col_class %}
+        {% 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 class="{{ title_type }}">{{ include.title }}</span>
         <span>{{ text }}</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/_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.10.0'
+      '1.10.1'
     end
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.10.0
+  version: 1.10.1
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-03-10 00:00:00.000000000 Z
+date: 2021-03-24 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday