swedbank-pay-design-guide-jekyll-theme 2.4.0 → 2.4.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 89e9b9b712aa95d08f4d47ab4c497ee11c059a42e2780f88395e30e7a959997c
-  data.tar.gz: 1ece3dd25126a74b9b01b19ba43a59d67511b62d02a47d3a3359aec0b5355122
+  metadata.gz: daec6e16bfca9b810fbd8c87388d41a35c8f03a4c6d07a5f04ead988799446f8
+  data.tar.gz: 00036ea6565dedcea30f47b678683008def0d2cb0bfd6419871fa07c761edccf
 SHA512:
-  metadata.gz: 743087aa82594b7a93cafba62321ecdd4e25ee0b85d85f85a77c04847640176396a8a0bece0d98c85046d9bac497920b5d13dbd49b5c384920cbbb2846c2a624
-  data.tar.gz: e061ab03d0ca578357bd246d3f716587882c6e56db77d065ce277befe7f6fafd8a853df62334cad0a1e2f595d7b1b37100caa633af4905a5e2b4920064ac61a3
+  metadata.gz: dcac90d5efb9ba85a26210bbb4ebf7fb5dc2a9d6c6451a8f8ae99dd22f1227a09427da0c06566acc575dff6bdb007da9a2cff5b9c51ecff36ba199892b68ab63
+  data.tar.gz: bb1ab6ad245a02d00f134da18a37fa025d3c10ddf77af8ae0de70933549fd5bb71203838f0518916e4833caaaa833395bde75492e0a830b7a5fcccf08f63f6c7

data/_includes/card-list.html

@@ -1,9 +1,17 @@
 {%- comment -%}
 **Parameters
-card_list(required): An array with items having the attributes title(required),
-    url(required), description, icon.content(required), icon.outlined, icon.svg.
-    Works with site.pages
-type: sdk | module - Empty type result in default card styling
+card_list(required): An array with items having the attributes 
+    title(required): Title of the card
+    image_src: Image source for the card
+    image_alt_text: Alt text for the image
+    icon_content: Used to generate content of dx-card-icon
+    description: Text content of the card
+    cta_text: Text for the call to action.
+    use_wide: Used when dx-card-horizontal is needed
+    open_in_new_tab: Used to open the link in a new tab
+    url(required): Url to the page to be directed to on click
+    type: sdk | module - Empty type result in default card styling
+    Works with site.pages.
 col_class(required): Describes what grid column class(es) each card should be wrapped in
 {%- endcomment -%}
 
@@ -22,10 +30,10 @@ col_class(required): Describes what grid column class(es) each card should be wr
         <div class="{{ col_class }}">
             {% include card.html
                 title=title
-                text=card.description
+                description=card.description
                 cta_text=card.cta_text
                 icon_content=icon_content
-                to=link_to
+                url=link_to
                 type=card_type
                 use_wide=use_wide
             %}

data/_includes/card-table.html

@@ -54,10 +54,10 @@ type: sdk | module - Empty type result in default card styling
     {% include card.html
     cta_text=include.cta_text
     title=include.title
-    text=card_content
+    description=card_content
     use_wide=true
     icon_content=include.icon_content
-    to=include.to
+    url=include.to
     type=include.type
     %}
 </div>

data/_includes/card.html

@@ -4,11 +4,11 @@ title(required): Title of the card
 image_src: Image source for the card
 image_alt_text: Alt text for the image
 icon_content: Used to generate content of dx-card-icon
-text: Text content of the card
+description: Text content of the card
 cta_text: Text for the call to action.
 use_wide: Used when dx-card-horizontal is needed
 open_in_new_tab: Used to open the link in a new tab
-to(required): Url to the page to be directed to on click
+url(required): Url to the page to be directed to on click
 type: sdk | module - Empty type result in default card styling
 {%- endcomment -%}
 
@@ -16,11 +16,11 @@ type: sdk | module - Empty type result in default card styling
 {% assign image_alt_text = include.image_alt_text %}
 {% assign image_ratio = 'ratio-16-9'%}
 {% assign icon_content = include.icon_content %}
-{% assign text = include.text %}
+{% assign description = include.description %}
 {% assign cta_text = include.cta_text %}
 {% assign use_wide = include.use_wide | default: false %}
 {% assign open_in_new_tab = include.open_in_new_tab | default: false %}
-{% assign to = include.to %}
+{% assign url = include.url %}
 
 {% if include.type %}
 {% assign type = include.type %}
@@ -42,7 +42,7 @@ type: sdk | module - Empty type result in default card styling
 {% assign target = '_blank' %}
 {% endif %}
 
-{% capture card_attributes %}href="{{ to }}"{% endcapture %}
+{% capture card_attributes %}href="{{ url }}"{% endcapture %}
 
 <a {{ card_attributes }} class="{{ card_class }}" target="{{target}}" >
     {% if image_src %}
@@ -55,7 +55,7 @@ type: sdk | module - Empty type result in default card styling
 
     <span class="h4">{{ include.title }}</span>
     <div class="cards-content">
-        {{ text | markdownify }}
+        {{ description | markdownify }}
     </div>
     <div class="cards-cta">
         {% if cta_text %}

data/_includes/doc-container.html

@@ -1,6 +1,6 @@
 {% capture max_width_class %}
 {% if page.layout == 'front-page' %}
-no-padding
+normal-padding
 {% elsif page.card_overview %}
 normal-padding max-width-card-overview
 {% elsif page.release_notes %}

data/_layouts/front-page.html

@@ -9,15 +9,12 @@ layout: default
 {% assign front_page_ingress = page.front_page.ingress | default: "The complete toolbox for integrating our easy and safe omnichannel payment solutions" %}
 
 <div class="front-page">
-    {% include github.html %}
     <div class="front-page-top">
         <div class="front-page-hero">
             <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>
@@ -65,6 +62,10 @@ layout: default
     <div class="front-page-container">
         {% contentblock intro_cards%}
 
+        <div class="front-page-playground">
+            {% contentblock playground %}
+        </div>
+
         <div class="front-page-cards-sdk">
             {% contentblock sdks %}
         </div>

data/_sass/front-page.scss

@@ -57,11 +57,12 @@ $front-page-max-width: $breakpoint-lg;
 
     #github {
         top: 2.5rem;
+
         path {
             fill: $black;
         }
     }
-    
+
     .front-page-top {
         position: relative;
         margin: 0 4rem;
@@ -70,55 +71,74 @@ $front-page-max-width: $breakpoint-lg;
         z-index: 0;
         border-radius: 1rem;
 
+        @media screen and (max-width: $breakpoint-md) {
+            margin: 0;
+        }
+
         .front-page-hero {
             position: relative;
             margin-bottom: 1.5rem;
             z-index: 1;
             padding: 1.5rem;
 
+            @media screen and (max-width: $breakpoint-md) {
+                padding: 0;
+            }
+
             h3 {
                 color: $brown;
                 font-family: $font_headline;
                 margin-bottom: 2rem;
                 font-size: 2.5rem;
                 line-height: 3.5rem;
-                
 
+                @media screen and (max-width: $breakpoint-md) {
+                    font-size: 1.25rem;
+                    line-height: 2.25rem;                    
+                    margin-bottom: 1rem;
+                }
+                    
             }
 
             p {
                 color: $brown;
                 font-size: 1.125rem;
             }
-            
+
             a {
                 color: #43d0dd;
             }
 
-            .front-page-hero-name {
-                font-family: $font_mono;
-                font-weight: bold;
-                font-size: 2.5rem;
-                color: $yellow;
-                margin-bottom: 1rem;
-
+            .front-page-hero-jumbo {
+                color: $brown;
+                font-family: $font_headline;
+                margin-bottom: 2rem;
+                font-size: 3.5rem;
 
-                span {
-                    color: $white;
+                @media screen and (max-width: $breakpoint-md) {
+                    font-size: 2.25rem;
                 }
             }
 
-            .front-page-hero-jumbo {
-                    color: $brown;
-                    font-family: $font_headline;
-                    margin-bottom: 2rem;
-                    font-size: 3.5rem;
-                }
-            
             .front-page-hero-lean {
                 font-family: $font_mono;
+                white-space: nowrap;
+
+                &::before {
+                    content: ' {';
+                    font-family: $font_mono;
+                    font-weight: bold;
+                    color: $yellow;
+                }
+
+                &::after {
+                    content: '} ';
+                    font-family: $font_mono;
+                    font-weight: bold;
+                    color: $yellow;
+                }
             }
-            
+
 
         }
 
@@ -139,13 +159,14 @@ $front-page-max-width: $breakpoint-lg;
         }
 
         @media screen and (min-width: $breakpoint-xxl) {
-            
+
             .front-page-intro-cards {
                 left: 0;
                 width: 100%;
             }
         }
     }
+
     .front-page-container {
         max-width: $front-page-max-width;
         margin: $front-page-padding;
@@ -243,4 +264,4 @@ $front-page-max-width: $breakpoint-lg;
 
         }
     }
-}
+}

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

@@ -480,4 +480,30 @@ body {
         display: block;
         position: absolute;
     }
+}
+
+.playground-cta {
+    margin-top: 2.5rem;
+
+    @media screen and (max-width: $breakpoint-lg) {
+        margin-top: 0;
+    }
+}
+
+.video-container {
+    width: 100%;
+    max-width: 330px;
+    padding: 0.5rem;
+
+    @media screen and (max-width: $breakpoint-lg) {
+        display: none !important;
+    }
+}
+
+.video-container video {
+    margin: 0;
+    height: 100%;
+    width: 100%;
+    aspect-ratio: 872 / 1080;
+    object-fit: cover;
 }

data/lib/gem_version.rb

@@ -4,7 +4,7 @@ module Gem
   # Gem Specification
   class Specification
     def self.gem_version
-      '2.4.0'
+      '2.4.2'
     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: 2.4.0
+  version: 2.4.2
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-03-04 00:00:00.000000000 Z
+date: 2025-03-06 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday