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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 460f32897594d35506f24e3aed0eb34028982b3ca384d4353ce29ea43742b8fe
-  data.tar.gz: 49bd8515c22ade73b3a3c06e67a5e2bc1bd0209b78e5fd157d10042c11385150
+  metadata.gz: daec6e16bfca9b810fbd8c87388d41a35c8f03a4c6d07a5f04ead988799446f8
+  data.tar.gz: 00036ea6565dedcea30f47b678683008def0d2cb0bfd6419871fa07c761edccf
 SHA512:
-  metadata.gz: 0af16984cba923880cd3996691af11d37975fa2fc85ac5494e7fa6c8bd229706d87b86eac1b3fe99ba4d9ac28264ab7699a4ae8d8a2027f357f7866c1cf8837f
-  data.tar.gz: 4fcc8434970d37db0973cc2b693ba5b180570a1a5b0cab2e1427aaf1ca8cd3307c8578b0591723877ed44379146a3b180bb97117d709ee6afa0f55c55ac76b19
+  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,7 +9,6 @@ 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 }}
@@ -63,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

@@ -71,12 +71,20 @@ $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;
@@ -84,7 +92,12 @@ $front-page-max-width: $breakpoint-lg;
                 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 {
@@ -101,6 +114,10 @@ $front-page-max-width: $breakpoint-lg;
                 font-family: $font_headline;
                 margin-bottom: 2rem;
                 font-size: 3.5rem;
+
+                @media screen and (max-width: $breakpoint-md) {
+                    font-size: 2.25rem;
+                }
             }
 
             .front-page-hero-lean {
@@ -108,21 +125,17 @@ $front-page-max-width: $breakpoint-lg;
                 white-space: nowrap;
 
                 &::before {
-                    content: ' { ';
+                    content: ' {';
                     font-family: $font_mono;
                     font-weight: bold;
-                    font-size: 2.5rem;
                     color: $yellow;
-                    margin-bottom: 1rem;
                 }
 
                 &::after {
-                    content: ' } ';
+                    content: '} ';
                     font-family: $font_mono;
                     font-weight: bold;
-                    font-size: 2.5rem;
                     color: $yellow;
-                    margin-bottom: 1rem;
                 }
             }
 

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

@@ -482,6 +482,14 @@ body {
     }
 }
 
+.playground-cta {
+    margin-top: 2.5rem;
+
+    @media screen and (max-width: $breakpoint-lg) {
+        margin-top: 0;
+    }
+}
+
 .video-container {
     width: 100%;
     max-width: 330px;

data/lib/gem_version.rb

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