swedbank-pay-design-guide-jekyll-theme 1.14.0 → 1.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 649cb60bc3f38d084fda664cd1d82cdd38625305486e6b03dbc021f43c3ab274
-  data.tar.gz: 26ff172795b16213c44b25fe45afab72bc33f21cf2db2e34a796576fc552c65b
+  metadata.gz: e7cb0c7f262f986b0b6e0465c09eb4838227d6ecc64e1d9103462f496292b8a1
+  data.tar.gz: d43e5f38baadce7c34bf574c99cc934ccc02259ebd90633fdc382b086f2c8abf
 SHA512:
-  metadata.gz: 7dee2674322a40944ae277be8fa492c67ea642b6ba7a54b1a7b8509e68f1adaa82779f38667094e660fd3416f1829a6985f256f6a019a9cd6503fcddf9f47b56
-  data.tar.gz: 10ba3114b47ba95afbfe34e612af4d70296bcf41a3e6c5afb42c0eba664920314dea85f6b29f8f54afbed3d1ee92f64d9765ddc15003b11ed5f10adf96f458e6
+  metadata.gz: 8d2e62e06dea189130d560cf2ef7b7bbdc3aea9b2b3ff5c1e9f3c493b7e7372f9ff0e6ffc7a165cc44580e14ad673c252c04426ba718dd7fe896eab66bfe0eda
+  data.tar.gz: d1711c10253f51471baec2fceeacf9c256d0aa9ff7cef78ca17057e28129cb99c3322063bb4ca38eaf45c456d9326a92b9d188bbbf3381d2766deb9e4c3cf744

data/_includes/alert.html

@@ -18,7 +18,7 @@
     </header>
     {% else %}
     {% if icon != blank and icon != empty and icon != nil %}
-    <i class="material-icons alert-icon">{{ icon }}</i>
+    <i class="material-icons alert-icon mr-3">{{ icon }}</i>
     {% endif %}
     {% endif %}
 

data/_includes/card-extended.html

@@ -11,7 +11,7 @@ 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_type = include.title_type | default: 'h4', %}
+{% assign title_type = include.title_type | default: 'h2', %}
 {% assign icon_content = include.icon_content %}
 {% assign icon_outlined = include.icon_outlined | default: false %}
 {% assign icon_svg = include.icon_svg | default: false %}
@@ -19,6 +19,8 @@ type: sdk | module - Empty type result in default card styling
 {% assign text = include.text %}
 {% assign to = include.to %}
 {% assign disabled = include.disabled %}
+{% assign margin_right = include.margin_right | default false %}
+
 
 {% unless icon_svg %}
     {% if icon_content contains '/' or icon_content contains '.svg' %}
@@ -45,7 +47,11 @@ type: sdk | module - Empty type result in default card styling
     {% endif %}
         <span class="cards-content">
             <span class="{{ title_type }}">{{ include.title }}</span>
-            <span>{{ text | markdownify }}</span>
+                {% if margin_right %}
+                <span class="text-box">{{ text | markdownify }}</span>
+                {% else %}
+                <span>{{ text | markdownify }}</span>
+                {% endif %}
             <table class="table table-plain">
                 <thead>
                     <tr>

data/_includes/tabs.html

@@ -11,10 +11,20 @@
 
 <section>
     <div id="tab1">
-        {{ include.full_checkout | markdownify}}
+        <div class="tab-intro">
+            {{ include.tab1_intro | markdownify}}
+        </div>
+        <div class="tab1-content">
+            {{ include.tab1_content | markdownify}}
+        </div>
     </div>
     <div id="tab2" class="d-none">
-        {{ include.payments_only | markdownify}}
+        <div class="tab-intro">
+            {{ include.tab2_intro | markdownify}}
+        </div>
+        <div>
+            {{ include.tab2_content | markdownify}}
+        </div>
     </div>
 </section>
 

data/_layouts/front-page.html

@@ -7,18 +7,23 @@ layout: default
 {% assign front_page_hero1 = page.front_page.hero1 | default: "Welcome to the" %}
 {% assign front_page_hero2 = page.front_page.hero2 | default: "Swedbank Pay" %}
 {% assign front_page_ingress = page.front_page.ingress | default: "Our developer portal gives you the full tool box for integrating our payment instruments and getting started with easy, flexible and safe payments on your e-commerce website." %}
-{% assign front_page_start_heading = page.front_page.start_heading | default: "Start your integration" %}
+{% assign front_page_start_heading = page.front_page.start_heading | default: "Let's get you started with easy, flexible and safe payments on you e-commerce website!" %}
 
 <div class="front-page">
     <div class="front-page-top">
         <div class="front-page-hero">
-            <h3>{{ front_page_hero1 }}</h3>
-            <h3>{{ front_page_hero2 }}<span class="front-page-hero-name"> {</span><span class="front-page-hero">{{ front_page_title }}</span><span class="front-page-hero-name">}</span>
+            <h3>{{ front_page_hero1 }}
+                <span class="d-block">
+                    <span class="front-page-hero-jumbo">{{ front_page_hero2 }}</span>
+                    <span class="front-page-hero-name"> {</span>
+                    <span class="front-page-hero-lean">{{ front_page_title }}</span>
+                    <span class="front-page-hero-name">}</span>
+                </span>
             </h3>
             <p>{{ front_page_ingress }}</p>
         </div>
         <div class="front-page-intro-cards">
-            <h2 id="front-page-start" class="heading-line">{{ front_page_start_heading }}</h2>
+            <h2 id="front-page-start" class="heading-line heading-line-indent">{{ front_page_start_heading }}</h2>
             {% contentblock start %}
         </div>
 

data/_sass/card.scss

@@ -1,7 +1,19 @@
 @import 'colors.scss';
 
 .cards {
+    .text-box {
+        margin-right: 4.875rem;
+    }
+
+    &.cards-wide {
+        margin-top: 4rem;
+
+        .btn {
+            margin-bottom: 2rem;
+        }
+    }
     .table {
+
         &.table-plain {
             thead {
                 tr {
@@ -11,6 +23,17 @@
 
                     th:not(:first-child) {
                         text-align: center;
+
+                        .badge {
+                            &.badge-default {
+                                background-color: #fbdd91;
+                            }
+
+                            &.badge-inactive {
+                                background-color: #d4c4bc;
+                                color: $brown;
+                            }
+                        }
                     }
                 }
             }
@@ -245,3 +268,4 @@
         display: flex;
     }
 }
+

data/_sass/front-page.scss

@@ -3,7 +3,7 @@
 @import 'breakpoints.scss';
 
 $front-page-padding: 0 4rem;
-$front-page-max-width: 1312px;
+$front-page-max-width: $breakpoint-lg;
 
 @mixin row-cards {
     >[class*='col-'] {
@@ -58,24 +58,26 @@ $front-page-max-width: 1312px;
     
     .front-page-top {
         position: relative;
-        padding: 4rem 4rem 2rem;
-        width: 100%;
-        max-width: 1432px;
+        margin: 0 4rem;
+        max-width: $front-page-max-width;
         background-color: none;
         z-index: 0;
         border-radius: 1rem;
 
         .front-page-hero {
             position: relative;
-            max-width: 41rem;
-            margin-bottom: 3rem;
+            margin-bottom: 1.5rem;
             z-index: 1;
+            padding: 1.5rem;
 
             h3 {
-                color: $black;
+                color: $brown;
                 font-family: $headline;
                 margin-bottom: 2rem;
                 font-size: 2.5rem;
+                line-height: 3.5rem;
+                
+
             }
 
             p {
@@ -90,7 +92,7 @@ $front-page-max-width: 1312px;
             .front-page-hero-name {
                 font-family: $mono;
                 font-weight: bold;
-                font-size: 2rem;
+                font-size: 2.5rem;
                 color: $yellow;
                 margin-bottom: 1rem;
 
@@ -100,11 +102,24 @@ $front-page-max-width: 1312px;
                 }
             }
 
+            .front-page-hero-jumbo {
+                    color: $brown;
+                    font-family: $headline;
+                    margin-bottom: 2rem;
+                    font-size: 3.5rem;
+                }
+            
+            .front-page-hero-lean {
+                font-family: $mono;
+            }
+            
+
         }
 
         .front-page-intro-cards {
             h2 {
                 color: $black;
+                padding: 1.5rem;
 
                 .header-anchor {
                     display: none;
@@ -117,13 +132,12 @@ $front-page-max-width: 1312px;
         }
 
         @media screen and (min-width: $breakpoint-xxl) {
-            margin-bottom: 10rem;
+            margin-bottom: 8rem;
             
             .front-page-intro-cards {
                 position: absolute;
                 left: 0;
                 width: 100%;
-                padding: 0 4rem;
             }
         }
     }

data/_sass/heading.scss

@@ -43,6 +43,12 @@
             width: 7rem;
         }
     }
+
+    &.heading-line-indent {
+        &:after {
+            left: 1.5rem;
+        }
+    }
 }
 
 

data/_sass/swedbank-pay-design-guide-theme.scss

@@ -11,6 +11,7 @@
 @import 'paragraph-highlight.scss';
 @import 'sidebar.scss';
 @import 'title-header.scss';
+@import 'tabs.scss';
 
 $bg: #f5f2f0;
 $darkened-bg: darken($bg, 10%);
@@ -93,7 +94,7 @@ body {
 }
 
 .iterator {
-    margin: 1rem 0;
+    margin: 2rem 0;
 }
 
 .iterator a.btn {
@@ -133,6 +134,10 @@ body {
 
     .doc-container {
         max-width: 100%;
+
+        h2 {
+            font-size: 1.75rem
+        }
     }
     code[data-processed='true'].language-mermaid {
         background: none;
@@ -192,7 +197,7 @@ body {
     }
 
     .normal-padding {
-        padding: 3rem 1rem 5rem;
+        padding: 1rem 1rem 5rem;
     }
 
     .max-width {

data/_sass/tabs.scss

@@ -0,0 +1,11 @@
+.tabs {
+    margin: 2rem 0 3.75rem;
+
+    li {
+        cursor: pointer;
+    }
+}
+
+.tab-intro {
+    padding-bottom: 3rem;
+}

data/_sass/title-header.scss

@@ -52,15 +52,25 @@
     .title-header-container {
         width: 100%;
         padding: 3rem 1rem;
+        padding-bottom: 0;
 
         h1,
         h4,
         p {
-            color: $black;
+            color: $brown;
+
+            strong {
+                font-size: 1.25rem;
+            }
         }
 
         h1 {
             margin-top: 0;
+            color: $brown;
+        }
+
+        h4 {
+            margin-bottom: 1rem;
         }
 
         p {

data/lib/gem_version.rb

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

metadata

@@ -1,35 +1,35 @@
 --- !ruby/object:Gem::Specification
 name: swedbank-pay-design-guide-jekyll-theme
 version: !ruby/object:Gem::Version
-  version: 1.14.0
+  version: 1.15.0
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2021-12-14 00:00:00.000000000 Z
+date: 2022-01-12 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 1.0.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '1'
     - - ">="
       - !ruby/object:Gem::Version
         version: 1.0.1
+    - - "<"
+      - !ruby/object:Gem::Version
+        version: '3'
 - !ruby/object:Gem::Dependency
   name: html-proofer
   requirement: !ruby/object:Gem::Requirement
@@ -290,6 +290,7 @@ files:
 - _sass/paragraph-highlight.scss
 - _sass/sidebar.scss
 - _sass/swedbank-pay-design-guide-theme.scss
+- _sass/tabs.scss
 - _sass/title-header.scss
 - _sass/variables.scss
 - assets/css/pygments-autumn.css