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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2a4f0bb8e3d1eec9a4e8134df0e017db96000703f7cf2bfeb3e97c14ad2d68c6
-  data.tar.gz: 682ebce58ca4d9630682f57dd6ba463bc2264094bb7114a960a28c341a8005ec
+  metadata.gz: 460f32897594d35506f24e3aed0eb34028982b3ca384d4353ce29ea43742b8fe
+  data.tar.gz: 49bd8515c22ade73b3a3c06e67a5e2bc1bd0209b78e5fd157d10042c11385150
 SHA512:
-  metadata.gz: a6602d548e1f34ea9ed37c5b40a1b83e04032c0d2d2af10398f6a2b1606c25f3657e369eef20cdf8000b98fe11cca92dd11f432c00a625d5a6e3fa9511f24975
-  data.tar.gz: 587508e22d17761cd4a674b371bbecea644ee9ae8648e26242c5ba89c57b79816699f15736adf008c48c8998fa2c5647f08f992d2656ab647216175e6b3251eb
+  metadata.gz: 0af16984cba923880cd3996691af11d37975fa2fc85ac5494e7fa6c8bd229706d87b86eac1b3fe99ba4d9ac28264ab7699a4ae8d8a2027f357f7866c1cf8837f
+  data.tar.gz: 4fcc8434970d37db0973cc2b693ba5b180570a1a5b0cab2e1427aaf1ca8cd3307c8578b0591723877ed44379146a3b180bb97117d709ee6afa0f55c55ac76b19

data/_includes/accordion-table.html

@@ -1,11 +1,13 @@
 {%- comment -%}
 **Parameters
 content(required): What will be displayed inside the accordion when expanded.
+accordion_id: Id of the accordion. If not supplied 'accordion-1' will be used.
+header_text: Text to display both on the expand and collapse header. If supplied will overwrite header_collapse_text and header_expand_text.
+header_css: CSS class to apply both on the expand and collapse header. If supplied will overwrite header_collapse_css and header_expand_css.
 header_collapse_text: Text to display on the collapse header. If not supplied the text 'Hide fields' will be used.
 header_collapse_css: CSS class to apply to the text on the collapse header. If not supplied default style will be used.
 header_expand_text: Text to display on the expand header. If not supplied the text 'Show fields' will be used.
 header_expand_css: CSS class to apply to the text on the expand header. If not supplied default style will be used.
-accordion_id: Id of the accordion. If not supplied 'accordion-1' will be used.
 {%- endcomment -%}
 
 {% assign content = include.content | markdownify%}
@@ -15,6 +17,15 @@ accordion_id: Id of the accordion. If not supplied 'accordion-1' will be used.
 {% assign header_expand_text = include.header_expand_text | default: 'Show fields'%}
 {% assign header_expand_css = include.header_expand_css%}
 
+{% if include.header_text %}
+    {% assign header_expand_text = include.header_text %}
+    {% assign header_collapse_text = include.header_text %}
+{% endif %}
+{% if include.header_css %}
+    {% assign header_expand_css = include.header_css %}
+    {% assign header_collapse_css = include.header_css %}
+{% endif %}
+
 <div class="accordion">
     <button type="button" class="accordion-header" aria-expanded="false" aria-controls="{{accordion_id}}">
         <span class="mr-3 show {{header_expand_css}}">{{header_expand_text}}</span>

data/_includes/alert.html

@@ -1,12 +1,20 @@
 {% assign type = include.type | default: 'default' %}
 {% assign type_class = 'alert-' | append: type %}
-{% assign icon = include.icon | strip %}
 {% assign header = include.header | markdownify | remove: '<p>' | remove: '</p>' | strip %}
 {% assign body = include.body | markdownify | remove: '<p>' | remove: '</p>' | strip %}
 
 <div class="alert {{ type_class }}">
-    {% if icon != blank and icon != empty and icon != nil %}
-    <i class="material-icons alert-icon mr-3">{{ icon }}</i>
+    {% if type == 'success' %}
+    <i class="swepay-icon-check-circle-filled" aria-hidden="true"></i>
+    {% endif %}
+    {% if type == 'informative' %}
+    <i class="swepay-icon-info-circle-filled" aria-hidden="true"></i>
+    {% endif %}
+    {% if type == 'warning' %}
+    <i class="swepay-icon-warning-triangle-filled" aria-hidden="true"></i>
+    {% endif %}
+    {% if type == 'danger' %}
+    <i class="swepay-icon-error-triangle-filled" aria-hidden="true"></i>
     {% endif %}
 
     {% if body != blank and body != empty and body != nil %}

data/_includes/card-list.html

@@ -17,24 +17,17 @@ col_class(required): Describes what grid column class(es) each card should be wr
 
         {% 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 %}
+        {% assign use_wide = card.card.use_wide | default: false %}
 
         <div class="{{ col_class }}">
             {% include card.html
                 title=title
                 text=card.description
+                cta_text=card.cta_text
                 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
+                use_wide=use_wide
             %}
         </div>
     {% endfor %}

data/_includes/card-overview.html

@@ -2,7 +2,7 @@
     {% if child.children && child.children.size > 0 %}
         {% assign title = child.title | default: child.section %}
         {% capture header %}
-{:.heading-line}
+
 ## {{ title }}
         {% endcapture %}
         {% assign header =  header | markdownify %}

data/_includes/card-table.html

@@ -5,108 +5,59 @@ This card offers the table component from Design Guide
 
 **Parameters
 title(required): Title of the card
-title_type: Determines size of the title
 icon_content: Used to generate content of cards-icon
-icon_outlined: Make icon_content outlined if icon_content is material-icon
-icon_svg: Handles value of icon_content as a reference to a svg-file
-no_icon: Hides cards-icon
+header: Array of objects with table headers
+table_content: Array of objects with table content
 text: Text content of the card
 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: 'h2', %}
-{% assign icon_content = include.icon_content %}
-{% assign icon_outlined = include.icon_outlined | default: false %}
-{% assign icon_svg = include.icon_svg | default: false %}
-{% assign no_icon = include.no_icon | default: false %}
-{% 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' %}
-        {% assign icon_svg = true %}
-    {% endif %}
-{% endunless %}
-
-{% assign card_class = 'cards cards-wide' | strip %}
-
-<div class="{{ card_class }}">
-    {% unless no_icon %} 
-        <span class="cards-icon">
-            {% if icon_svg %}
-                {% include {{ icon_content }} %}
-            {% else %}
-                <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
-                    {{ icon_content }}
-                </i>
-            {% endif %}
-        </span>
-    {% endunless %}
-    {% if include.container_content %}
-    <div>
-    {% endif %}
-    <span class="cards-content">
-        <span class="{{ title_type }}">{{ include.title }}</span>
-        {% if margin_right %}
-            <span class="text-box">{{ text | markdownify }}</span>
-        {% else %}
-            <span>{{ text | markdownify }}</span>
-        {% endif %}
-        <div class="d-flex">
-            <table class="table table-plain">
-                <thead>
-                    <tr>
-                        {% for header in include.header %}
-                        <th> {% if header.badge_type %} 
-                            <span class="badge badge-{{header.badge_type}}">{{header.table_header}}</span>
-                            {% else %}
-                            {{ header.table_header }}
-                            {% endif %}
-                        </th>
-                        {% endfor %}
-                    </tr>
-                </thead>
-                <tbody>
-                    {% for table_content in include.table_content %}
-                    <tr>
-                        
-                        <th scope="row">
-                            <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
-                                {{table_content.icon}}
-                            </i> {{table_content.label}}
-                            <td>
-                                {% if table_content.swedbankPay %}
-                                <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
-                                    check_circle_outline
-                                </i>
-                                {% endif %}
-                            </td>
-                            <td>
-                                {% if table_content.merchantSide %}
-                                <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
-                                    check_circle_outline
-                                </i>
-                                {% endif %}
-                            </td>
-                        </th>
-                    </tr>
-                    {% endfor %}
-                </tbody>
-            </table>
-            {% unless disabled %}
-            <a class="btn btn-{{include.button_type}} {{include.button_alignment}}" href="{{to}}" type="button">{{ include.button_content }}<i class="material-icons ml-2"> arrow_forward</i></a>
-            {% endunless %}
-        </div>
-    </span>
-    {% if include.container_content %}
-    </div>
-        <div class="container-right">
-        {{ include.container_content | markdownify }}
-        </div>
-    {% endif %}
-</div>
-
+{% capture card_content %}
+<span>{{ include.text }}</span>
+<table class="table table-plain">
+    <thead>
+        <tr>
+            {% for header in include.header %}
+            <th> {% if header.badge_type %}
+                <span class="badge badge-{{header.badge_type}}">{{header.table_header}}</span>
+                {% else %}
+                {{ header.table_header }}
+                {% endif %}
+            </th>
+            {% endfor %}
+        </tr>
+    </thead>
+    <tbody>
+        {% for table_content in include.table_content %}
+        <tr>
+            <th scope="row">
+                {{table_content.label}}
+            <td>
+                {% if table_content.swedbankPay %}
+                <i class="swepay-icon-check-circle-filled" aria-hidden="true"></i>
+                {% endif %}
+            </td>
+            <td>
+                {% if table_content.merchantSide %}
+                <i class="swepay-icon-check-circle-filled" aria-hidden="true"></i>
+                {% endif %}
+            </td>
+            </th>
+        </tr>
+        {% endfor %}
+    </tbody>
+</table>
+{% endcapture %}
+
+<div>
+    {% include card.html
+    cta_text=include.cta_text
+    title=include.title
+    text=card_content
+    use_wide=true
+    icon_content=include.icon_content
+    to=include.to
+    type=include.type
+    %}
+</div>

data/_includes/card.html

@@ -1,26 +1,26 @@
 {%- comment -%}
 **Parameters
 title(required): Title of the card
-title_type: Determines size of the title
+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
-icon_outlined: Make icon_content outlined if icon_content is material-icon
-icon_svg: Handles value of icon_content as a reference to a svg-file
-no_icon: Hides dx-card-icon
 text: Text content of the card
-horizontal: Used when dx-card-horizontal is needed
+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
 type: sdk | module - Empty type result in default card styling
 {%- endcomment -%}
 
-{% assign title_type = include.title_type | default: 'h4', %}
+{% assign image_src = include.image_src %}
+{% assign image_alt_text = include.image_alt_text %}
+{% assign image_ratio = 'ratio-16-9'%}
 {% assign icon_content = include.icon_content %}
-{% assign icon_outlined = include.icon_outlined | default: false %}
-{% assign icon_svg = include.icon_svg | default: false %}
-{% assign no_icon = include.no_icon | default: false %}
 {% assign text = include.text %}
-{% assign horizontal = include.horizontal | default: false %}
+{% 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 disabled = include.disabled %}
 
 {% if include.type %}
 {% assign type = include.type %}
@@ -29,45 +29,39 @@ type: sdk | module - Empty type result in default card styling
 {% assign type_class = '' %}
 {% endif %}
 
-{% unless icon_svg %}
-{% if icon_content contains '/' or icon_content contains '.svg' %}
-{% assign icon_svg = true %}
-{% endif %}
-{% endunless %}
-
 {% assign card_class = 'cards cards-primary ' | append: type_class | strip %}
-{% if horizontal %}
-{% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
+{% if use_wide %}
+{% assign card_class = card_class | append: ' cards-wide' | strip %}
+{% assign image_ratio = '1' %}
+{% endif %}
+{% if image_src %}
+{% assign icon_content = undefined %}
+{% endif %}
+{% assign target = '_self' %}
+{% if open_in_new_tab %}
+{% assign target = '_blank' %}
 {% endif %}
 
-{% if disabled %}
-{% assign card_class = card_class | append: ' dx-card-disabled' | strip %}
-{% assign card_tag = 'span' %}
-{% else %}
-{% assign card_tag = 'a' %}
 {% capture card_attributes %}href="{{ to }}"{% endcapture %}
-{% endif %}
 
-<{{ card_tag }} {{ card_attributes }} class="{{ card_class }}">
-    {% if icon_svg %}
-    <div class="cards-icon">
-        {% include {{ icon_content }} %}
-    </div>
+<a {{ card_attributes }} class="{{ card_class }}" target="{{target}}" >
+    {% if image_src %}
+    <img src="{{image_src}}" alt="{{image_alt_text}}" class="{{image_ratio}}" />
     {% endif %}
 
-    {% unless icon_svg %}
     {% if icon_content %}
-    <div class="cards-icon">
-        <i class="material-icons material-icons-outlined" aria-hidden="true">{{ icon_content }}</i>
-    </div>
+    <i class="cards-icon {{ icon_content }}" aria-hidden="true"></i>
     {% endif %}
-    {% endunless %}
 
+    <span class="h4">{{ include.title }}</span>
     <div class="cards-content">
-        <span class="h4">{{ include.title }}</span>
-        <span>{{ text | markdownify }}</span>
+        {{ text | markdownify }}
+    </div>
+    <div class="cards-cta">
+        {% if cta_text %}
+        <span>{{cta_text}}</span>
+        {% endif %}
+
+        <span class="arrow"></span>
     </div>
-    {% unless disabled %}
-    <i class="material-icons">arrow_forward</i>
-    {% endunless %}
-</{{ card_tag }}>
+</a>

data/_includes/example-1.md

@@ -0,0 +1,4 @@
+
+### Example 1
+
+The src content for **Example 1**

data/_includes/example-2.md

@@ -0,0 +1,4 @@
+
+### Example 2
+
+The src content for **Example 2**

data/_includes/example-3.md

@@ -0,0 +1,4 @@
+
+### Example 3
+
+The src content for **Example 3**

data/_includes/tabs.html

@@ -1,45 +1,106 @@
-<div class="tabs" id="tabs-showcase-example">
+{%- comment -%}
+**Parameters
+tab_list(required): An array with items having the attributes title(required), content_text (required),
+content_src(optional), mark_with_star (optional)
+default_tab_index(optional): Index of the tab to be active by default, starting from 1
+{%- endcomment -%}
+
+{% assign tabs = include.tab_list %}
+{% assign max_index = include.tab_list | size | minus:1 %}
+{% assign default_tab_index = include.default_tab_index | minus:1 | at_least:0 | at_most:max_index %}
+
+<div id="tabs-container" class="tabs">
     <ul>
-        <li class="full-checkout">
-            <a href="#full-checkout" id="full-checkout">Full Checkout</a>
-        </li>
-        <li class="payments-only">
-            <a href="#payments-only" id="payments-only">Payments Only</a>
+        {% for tab in tabs %}
+        <li id="{{ tab.title | replace: ' ', '_' | replace: '.', '' }}"
+            class="{% if forloop.index0 == default_tab_index %}active{% endif %}">
+            <a id="{{ forloop.index0 }}">{{ tab.title }}{% if tab.mark_with_star %}*{% endif %}</a>
         </li>
+        {% endfor %}
     </ul>
 </div>
+<p id="tab-content-text">
+</p>
+<div id="tab-content-src">
+</div>
+{% for tab in tabs %}
+{% if tab.content_src %}
+<div class="tab-src">
+    {% capture sourced_content %}
+    {% include {{tab.content_src}} %}
+    {% endcapture %}
+    {{ sourced_content | markdownify }}
+</div>
+{% endif %}
+{% endfor %}
 
-<section>
-    <div id="tab1">
-        <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">
-        <div class="tab-intro">
-            {{ include.tab2_intro | markdownify}}
-        </div>
-        <div>
-            {{ include.tab2_content | markdownify}}
-        </div>
-    </div>
-</section>
+<script>
+    var defaultIndex = {{ default_tab_index | jsonify }};
+    const allTabs = {{ tabs | jsonify }};
+    const compiledTabTextContents = allTabs?.map(tab => tab.content_text);
+    const compiledTabSrcContents = $(".tab-src");
+</script>
 
 <script>
-$( "#full-checkout" ).click(function() {
-$( "#tab2" ).addClass( "d-none" )
-$( "#tab1" ).removeClass( "d-none" )
-$( ".full-checkout" ).addClass( "active" )
-$( ".payments-only" ).removeClass( "active" )
-
-  });
-$( "#payments-only" ).click(function() {
-$( "#tab2" ).removeClass( "d-none" )
-$( "#tab1" ).addClass( "d-none" )
-$( ".full-checkout" ).removeClass( "active" )
-$( ".payments-only" ).addClass( "active" )
-  });  
-  </script>
+    $(document).ready(function () {
+        let tabSrcContents = [];
+        for (let index = 0; index < compiledTabSrcContents.length; index++) {
+            tabSrcContents[index] = compiledTabSrcContents[index].innerHTML;
+        }
+        $(".tab-src").remove();
+
+        $("#tabs-container ul li a").click(function () {
+            const tabTitles = $("#tabs-container ul li");
+            for (let index = 0; index < tabTitles.length; index++) {
+                tabTitles[index].classList.remove("active");
+            }
+
+            $(this).parent().addClass("active");
+            populateTabContent(this.id);
+        });
+
+        function populateTabContent(index) {
+            if (compiledTabTextContents && compiledTabTextContents[index]) {
+                $("#tab-content-text").html(compiledTabTextContents[index]);
+            } else {
+                $("#tab-content-text").html("");
+            }
+
+            if (compiledTabSrcContents && compiledTabSrcContents[index]) {
+                $("#tab-content-src").html(compiledTabSrcContents[index]);
+            }
+            else {
+                $("#tab-content-src").html("");
+            }
+        }
+
+        function setActiveTabOnLoad() {
+            const hash = window.location.hash;
+
+            if (hash) {
+                const hashParts = hash.split("-").reverse();
+                const tabTitles = $("#tabs-container ul li");
+                for (let index = 0; index < tabTitles.length; index++) {
+                    const tabTitleParts = tabTitles[index].id.split("_").reverse();
+                    
+                    if (hashParts[0] === tabTitleParts[0]) {
+                        defaultIndex = index;
+                    }
+                }
+            }
+
+            const tabTitles = $("#tabs-container ul li");
+            for (let index = 0; index < tabTitles.length; index++) {
+
+                if (index === defaultIndex) {
+                    tabTitles[index].classList.add("active");
+                } else {
+                    tabTitles[index].classList.remove("active");
+                }
+            }
+        }
+
+        setActiveTabOnLoad();
+        populateTabContent(defaultIndex);
+    });
+</script>

data/_layouts/front-page.html

@@ -15,16 +15,14 @@ layout: default
             <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>
         {% if front_page_start_heading %}
         <div class="front-page-intro-cards">
-            <h2 id="front-page-start" class="heading-line heading-line-indent">{{ front_page_start_heading }}</h2>
+            <h2 id="front-page-start">{{ front_page_start_heading }}</h2>
             {% contentblock start %}
         </div>
         {% endif %}
@@ -85,7 +83,7 @@ layout: default
             <div class="front-page-contact-content">
                 <div class="row">
                     <div class="col-xl-7">
-                        <h2 id="front-page-contact" class="heading-line heading-line-long">Can't find what you are
+                        <h2 id="front-page-contact">Can't find what you are
                             looking for?</h2>
                         <p>
                             We are always trying to make the developer portal as

data/_sass/accordion-table.scss

@@ -19,37 +19,5 @@
                 display: block;
             }
         }
-
-        &:hover {
-            background-color: $apricot;
-        }
-    }
-
-    .accordion-body {
-        padding: 0;
-    }
-
-    table {
-        border: 1px solid rgba(153, 153, 153, 0.5);
-        border-radius: 0.25rem;
-
-        th {
-            font-size: 0.875rem;
-        }
-
-        tbody {
-            font-size: 0.875rem;
-
-            tr:nth-child(odd) {
-                background-color: #F9F8F6;
-            }
-
-            tr {
-                &:hover {
-                    background-color: $apricot;
-                    transition: .5s;
-                }
-            }
-        }
     }
 }

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;
@@ -82,7 +83,7 @@ $front-page-max-width: $breakpoint-lg;
                 margin-bottom: 2rem;
                 font-size: 2.5rem;
                 line-height: 3.5rem;
-                
+
 
             }
 
@@ -90,35 +91,41 @@ $front-page-max-width: $breakpoint-lg;
                 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;
-
-
-                span {
-                    color: $white;
-                }
+            .front-page-hero-jumbo {
+                color: $brown;
+                font-family: $font_headline;
+                margin-bottom: 2rem;
+                font-size: 3.5rem;
             }
 
-            .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;
+                    font-size: 2.5rem;
+                    color: $yellow;
+                    margin-bottom: 1rem;
+                }
+
+                &::after {
+                    content: ' } ';
+                    font-family: $font_mono;
+                    font-weight: bold;
+                    font-size: 2.5rem;
+                    color: $yellow;
+                    margin-bottom: 1rem;
+                }
             }
-            
+
 
         }
 
@@ -139,14 +146,14 @@ $front-page-max-width: $breakpoint-lg;
         }
 
         @media screen and (min-width: $breakpoint-xxl) {
-            margin-bottom: 8rem;
-            
+
             .front-page-intro-cards {
                 left: 0;
                 width: 100%;
             }
         }
     }
+
     .front-page-container {
         max-width: $front-page-max-width;
         margin: $front-page-padding;
@@ -244,130 +251,4 @@ $front-page-max-width: $breakpoint-lg;
 
         }
     }
-
-    .front-page-demoshop {
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        padding: $front-page-padding;
-        padding-top: 4rem;
-        margin-bottom: 4rem;
-        width: 100%;
-        height: 22.5rem;
-        background-color: $dark-brown;
-        text-decoration: none;
-        border-radius: 1rem;
-
-        &:after {
-            display: none;
-            content: none;
-        }
-
-        .front-page-demoshop-text {
-            display: flex;
-            flex-direction: column;
-            margin-bottom: 2rem;
-            max-width: $front-page-max-width;
-            width: 100%;
-
-            .h2 {
-                color: $white;
-            }
-
-            .demoshop-text-description {
-                color: $white;
-                width: 40%;
-                min-height: 4.5rem;
-                font-size: 1rem;
-
-            }
-            
-        }
-
-        @media screen and (max-width: $breakpoint-md) {
-            padding-top: 3rem;
-            height: 18rem;
-
-            .front-page-demoshop-text {
-                .demoshop-text-description {
-                    width: 100%;
-                    min-height: 2.25rem;
-                }
-            }
-
-        }
-
-        .front-page-demoshop-link {
-            display: flex;
-            position: relative;
-            color: $white;
-            text-decoration: none;
-            background-color: $medium-brown;
-            align-items: center;
-            height: 4.625rem;
-            border-radius: 2px;
-            box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
-            max-width: $front-page-max-width;
-            width: 100%;
-            cursor: pointer;
-
-            a::after{
-                content: '';
-            }
-            
-            &:hover,
-            &:focus {
-                background-color: $white;
-                color: $brown;
-            
-                .h3 {
-                    color: $brown;
-                }
-            }
-
-            .demoshop-link-img {
-                display: flex;
-                align-items: center;
-                position: absolute;
-                bottom: -1rem;
-                right: 3%;
-                pointer-events: none;
-
-                .demoshop-link-img-web {
-                    width: 26.5rem;
-                    height: 15.125rem;
-                    border-radius: 2px;
-                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
-                }
-
-                .demoshop-link-img-mobile {
-                    height: 15.125rem;
-                    border-radius: 2px;
-                    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.15);
-                    margin-right: 1rem;
-                }
-            }
-
-            .h3 {
-                color: $white;
-                padding-right: 1rem;
-                padding-left: 1.5rem;
-                margin: 0;
-            }
-        }
-
-        @media screen and (min-width: $breakpoint-xxl) {
-            .front-page-demoshop-text {
-                margin-bottom: 1rem;
-            }
-
-            .front-page-demoshop-link {
-                .demoshop-link-img {
-                    bottom: -2rem;
-                }
-            }
-        }
-    }
-
-
-}
+}

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

@@ -3,15 +3,12 @@
 @import 'variables.scss';
 @import 'breakpoints.scss';
 
-@import 'card.scss';
+@import 'accordion-table.scss';
 @import 'code-view.scss';
 @import 'front-page.scss';
-@import 'heading.scss';
-@import 'accordion-table.scss';
 @import 'paragraph-highlight.scss';
 @import 'sidebar.scss';
 @import 'title-header.scss';
-@import 'tabs.scss';
 
 $bg: #f5f2f0;
 $darkened-bg: darken($bg, 10%);
@@ -20,11 +17,22 @@ img {
     max-width: 100%;
 }
 
+.cards-icon.flag-icon {
+    margin-left: var(--padding-outer);
+    line-height: var(--padding-outer);
+    background-position: right 80%;
+}
+
+.cards-wide:has(.cards-cta) :is(.flag-icon + .h4) {
+    padding-left: 0;
+}
+
 body {
     font-size: 1.125rem;
 }
 
 .table {
+
     th,
     td {
         >.material-icons {
@@ -33,6 +41,12 @@ body {
     }
 }
 
+.table.table-plain tbody>tr:nth-child(2n+1),
+.table.table-plain tbody td,
+.table.table-plain tbody th {
+    background-color: inherit !important;
+}
+
 .jumbotron {
     /* TODO: Make .jumbotron @extend .slab. */
     font-family: Roboto, sans-serif;
@@ -131,6 +145,20 @@ body {
             }
         }
     }
+
+    .toc-list {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    .toc-list li {
+        padding: 4px 0;
+    }
+
+    .toc-list ul {
+        padding-inline-start: 2ch;
+    }
 }
 
 .documentation {
@@ -138,7 +166,7 @@ body {
         overflow-y: auto;
     }
 
-    > div {
+    >div {
         &.row {
             margin-right: 0;
         }
@@ -221,7 +249,7 @@ body {
         max-width: 880px;
     }
 
-    .row.card-list > div {
+    .row.card-list>div {
         display: flex;
         align-self: stretch;
     }
@@ -391,16 +419,22 @@ body {
 
 #overlay {
     @media screen and (max-width: $breakpoint-lg) {
-        position: fixed; /* Sit on top of the page content */
-        display: none; /* Hidden by default */
-        width: 100%; /* Full width (cover the whole page) */
-        height: 100%; /* Full height (cover the whole page) */
+        position: fixed;
+        /* Sit on top of the page content */
+        display: none;
+        /* Hidden by default */
+        width: 100%;
+        /* Full width (cover the whole page) */
+        height: 100%;
+        /* Full height (cover the whole page) */
         top: 0;
         left: 0;
         right: 0;
         bottom: 0;
-        background-color: rgba(0,0,0,0.5); /* Black background with opacity */
-        z-index: 3; /* Specify a stack order in case you're using a different order for other elements */
+        background-color: rgba(0, 0, 0, 0.5);
+        /* Black background with opacity */
+        z-index: 3;
+        /* Specify a stack order in case you're using a different order for other elements */
     }
 }
 
@@ -447,3 +481,21 @@ body {
         position: absolute;
     }
 }
+
+.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/assets/img/flag-dk.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-dk" viewBox="0 0 512 512">
+  <path fill="#c8102e" d="M0 0h512.1v512H0z"/>
+  <path fill="#fff" d="M144 0h73.1v512H144z"/>
+  <path fill="#fff" d="M0 219.4h512.1v73.2H0z"/>
+</svg>

data/assets/img/flag-no.svg

@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-no" viewBox="0 0 512 512">
+  <path fill="#ed2939" d="M0 0h512v512H0z"/>
+  <path fill="#fff" d="M128 0h128v512H128z"/>
+  <path fill="#fff" d="M0 192h512v128H0z"/>
+  <path fill="#002664" d="M160 0h64v512h-64z"/>
+  <path fill="#002664" d="M0 224h512v64H0z"/>
+</svg>

data/assets/img/flag-se.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="flag-icon-css-se" viewBox="0 0 640 480">
+  <defs>
+    <clipPath id="a">
+      <path fill-opacity=".7" d="M-53.4 0h682.6v512H-53.4z"/>
+    </clipPath>
+  </defs>
+  <g clip-path="url(#a)" transform="translate(50) scale(.9375)">
+    <g fill-rule="evenodd" stroke-width="1pt">
+      <path fill="#006aa7" d="M-121.1.3h256v204.8h-256zm0 306.9h256V512h-256z"/>
+      <path fill="#fecc00" d="M-121.1 205h256v102.4h-256z"/>
+      <path fill="#fecc00" d="M133.8 0h102.4v512H133.8z"/>
+      <path fill="#fecc00" d="M233 205h460.8v102.4H233z"/>
+      <path fill="#006aa7" d="M236.2 307.2H697V512H236.2zm0-306.9H697v204.8H236.2z"/>
+    </g>
+  </g>
+</svg>

data/lib/gem_version.rb

@@ -4,7 +4,7 @@ module Gem
   # Gem Specification
   class Specification
     def self.gem_version
-      '2.3.4.1'
+      '2.4.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: 2.3.4.1
+  version: 2.4.1
 platform: ruby
 authors:
 - Swedbank Pay
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-02-18 00:00:00.000000000 Z
+date: 2025-03-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: faraday
@@ -397,14 +397,15 @@ files:
 - _includes/apple-touch-icons.md
 - _includes/apple-touch-startup-image.html
 - _includes/apple-touch-startup-images.md
-- _includes/card-extended.html
-- _includes/card-horizontal-list.html
 - _includes/card-list.html
 - _includes/card-overview.html
 - _includes/card-table.html
 - _includes/card.html
 - _includes/code-example.html
 - _includes/doc-container.html
+- _includes/example-1.md
+- _includes/example-2.md
+- _includes/example-3.md
 - _includes/github.html
 - _includes/google_analytics.html
 - _includes/img/merchants/logo-coop.svg
@@ -437,20 +438,19 @@ files:
 - _plugins/swedbank-pay-design-guide-jekyll-theme.rb
 - _sass/accordion-table.scss
 - _sass/breakpoints.scss
-- _sass/card.scss
 - _sass/code-view.scss
 - _sass/colors.scss
 - _sass/fonts.scss
 - _sass/front-page.scss
-- _sass/heading.scss
 - _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
 - assets/css/style.scss
+- assets/img/betala-med-pax-a920pro.jpg
+- assets/img/betala-online.jpg
 - assets/img/demoshop-image.svg
 - assets/img/demoshop-mobile.svg
 - assets/img/demoshop-mobile2.svg
@@ -458,6 +458,9 @@ files:
 - assets/img/demoshop.svg
 - assets/img/external-url-dark-bg.svg
 - assets/img/external-url.svg
+- assets/img/flag-dk.svg
+- assets/img/flag-no.svg
+- assets/img/flag-se.svg
 - assets/js/cookie-consent.js
 - assets/js/mermaid.min.js
 - assets/js/swedbank-pay-design-guide-theme.js

data/_includes/card-extended.html

@@ -1,66 +0,0 @@
-{%- comment -%}
-**Parameters
-title(required): Title of the card
-title_type: Determines size of the title
-icon_content: Used to generate content of cards-icon
-icon_outlined: Make icon_content outlined if icon_content is material-icon
-icon_svg: Handles value of icon_content as a reference to a svg-file
-no_icon: Hides cards-icon
-text: Text content of the card
-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: 'h2', %}
-{% assign icon_content = include.icon_content %}
-{% assign icon_outlined = include.icon_outlined | default: false %}
-{% assign icon_svg = include.icon_svg | default: false %}
-{% assign no_icon = include.no_icon | default: false %}
-{% 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' %}
-        {% assign icon_svg = true %}
-    {% endif %}
-{% endunless %}
-
-{% assign card_class = 'cards cards-wide' | strip %}
-
-<div class="{{ card_class }}">
-    {% unless no_icon %} 
-        <span class="cards-icon">
-            {% if icon_svg %}
-                {% include {{ icon_content }} %}
-            {% else %}
-                <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
-                    {{ icon_content }}
-                </i>
-            {% endif %}
-        </span>
-    {% endunless %}
-    {% if include.container_content %}
-    <div>
-    {% endif %}
-    <span class="cards-content">
-        <span class="{{ title_type }}">{{ include.title }}</span>
-        {% if margin_right %}
-            <span class="text-box-extended">{{ text | markdownify }}</span>
-        {% else %}
-            <span>{{ text | markdownify }}</span>
-        {% endif %}
-        </span>
-        {% unless disabled %}
-        <a class="btn btn-{{include.button_type}} {{include.button_alignment}}" href="{{to}}" type="button">{{ include.button_content }}<i class="material-icons ml-2"> arrow_forward</i></a>
-        {% endunless %}
-    {% if include.container_content %}
-    </div>
-        <div class="container-right">
-        {{ include.container_content | markdownify }}
-        </div>
-    {% endif %}
-</div>
-

data/_includes/card-horizontal-list.html

@@ -1,33 +0,0 @@
-{%- comment -%}
-**Parameters
-card_list(required): An array with items having the attributes card_title, 
-    title(required), estimated_read, url(required). Works with site.pages
-type: sdk | module - Empty type result in default card styling
-{%- endcomment -%}
-
-{% assign card_list = include.card_list %}
-{% assign type = include.type %}
-
-<div class="card-horizontal-list">
-    {% for card in card_list %}
-        {% if card.estimated_read %}
-            {% assign text = card.estimated_read | append: ' min read' %}    
-        {% else %}
-            {% assign text =  %}        
-        {% endif %}
-        {% if card.card_title %}
-            {% assign title = card.card_title %}
-        {% else %}
-            {% assign title = card.title | split: '–' | last %}
-        {% endif %}
-        {% assign icon_content = '0' | append: forloop.index %}
-        {% include card.html title=title
-            title_type='h3'
-            text=text
-            icon_content=icon_content
-            horizontal=true
-            to=card.url   
-            type=type 
-        %}
-    {% endfor %}
-</div>

data/_sass/card.scss

@@ -1,6 +0,0 @@
-.cards-icon {
-    svg {
-        fill: $brown;
-        max-width: 24px;
-    }
-}

data/_sass/heading.scss

@@ -1,85 +0,0 @@
-@import 'colors.scss';
-
-.heading-line {
-    position: relative;
-
-    &:after {
-        content: "";
-        position: absolute;
-        bottom: -0.75rem;
-        left: 0;
-        width: 4rem;
-        height: 4px;
-        background-color: $yellow;
-        border-radius: 0.625rem;
-    }
-
-    &.heading-line-white {
-        &:after {
-            background-color: $white;
-        }
-    }
-
-    &.heading-line-green {
-        &:after {
-            background-color: $brand-success;
-        }
-    }
-
-    &.heading-line-sdk {
-        &:after {
-            background-color: $turquoise;
-        }
-    }
-
-    &.heading-line-module {
-        &:after {
-            background-color: $card-pink;
-        }
-    }
-
-    &.heading-line-long {
-        &:after {
-            width: 7rem;
-        }
-    }
-
-    &.heading-line-indent {
-        &:after {
-            left: 1.5rem;
-        }
-    }
-}
-
-
-h1>a.header-anchor,
-h2>a.header-anchor,
-h3>a.header-anchor,
-h4>a.header-anchor,
-h5>a.header-anchor,
-h6>a.header-anchor {
-    color: #ebf8f2;
-    text-decoration: none;
-}
-
-h1:hover>a.header-anchor,
-h2:hover>a.header-anchor,
-h3:hover>a.header-anchor,
-h4:hover>a.header-anchor,
-h5:hover>a.header-anchor,
-h6:hover>a.header-anchor {
-    color: #8acdc3;
-}
-
-h1>a.header-anchor:hover,
-h2>a.header-anchor:hover,
-h3>a.header-anchor:hover,
-h4>a.header-anchor:hover,
-h5>a.header-anchor:hover,
-h6>a.header-anchor:hover {
-    color: #257886;
-}
-
-a.header-anchor::before {
-    content: '#';
-}

data/_sass/tabs.scss

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