swedbank-pay-design-guide-jekyll-theme 1.5.1.pre.article.pre.no.pre.main0001

data/_includes/apple-mobile-headers.html

@@ -0,0 +1,6 @@
+{% assign design_guide_url = include.design_guide_url %}
+<meta name="apple-mobile-web-app-capable" content="yes">
+<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
+<meta name="apple-mobile-web-app-title" content="{{ page.title }}">
+{% include apple-touch-icons.md design_guide_url=design_guide_url -%}
+{% include apple-touch-startup-images.md design_guide_url=design_guide_url -%}

data/_includes/apple-touch-icon.html

@@ -0,0 +1,4 @@
+{%- assign stripped_size = include.size | strip -%}
+{%- assign size_string = stripped_size | append: 'x' | append: stripped_size -%}
+{%- assign design_guide_url = include.design_guide_url -%}
+<link rel="apple-touch-icon" sizes="{{ size_string }}" href="{{ design_guide_url }}/icons/apple-touch-icon-{{ size_string }}.png">

data/_includes/apple-touch-icons.md

@@ -0,0 +1,9 @@
+{% comment -%}
+TODO: Figure out how to use front matter with proper arrays instead of split
+strings.
+{%- endcomment -%}
+{% assign design_guide_url = include.design_guide_url %}
+{%- assign sizes = "57, 60, 72, 76, 114, 120, 144, 152, 167, 180, 1024" | split: ',' -%}
+{%- for size in sizes -%}
+    {%- include apple-touch-icon.html size=size design_guide_url=design_guide_url -%}
+{%- endfor -%}

data/_includes/apple-touch-startup-image.html

@@ -0,0 +1,23 @@
+{%- assign device_width = include.width | strip | append: 'px' -%}
+{%- assign device_height = include.height | strip | append: 'px' -%}
+{%- assign image_size = include.size | strip -%}
+{%- assign device_orientation = include.orientation | default: nil | strip -%}
+{%- assign device_pixel_ratio = include.pixel_ratio | strip -%}
+{%- assign design_guide_url = include.design_guide_url -%}
+{%- capture device_width_string -%}
+(device-width: {{ device_width }})
+{%- endcapture -%}
+{%- capture device_height_string -%}
+(device-height: {{ device_height }})
+{%- endcapture -%}
+{%- if device_orientation != nil && device_orientation != empty -%}
+    {%- capture device_orientation_string -%}
+    (orientation: {{ device_orientation }}) and
+    {%- endcapture -%}
+{%- endif -%}
+{%- capture pixel_ratio_string -%}
+(-webkit-device-pixel-ratio: {{ device_pixel_ratio }})
+{%- endcapture -%}
+<link rel="apple-touch-startup-image"
+    media="{{ device_width_string }} and {{ device_height_string }} and {{ device_orientation_string }} {{ pixel_ratio_string }}"
+    href="{{ design_guide_url }}/icons/apple-touch-startup-image-{{- image_size -}}.png">

data/_includes/apple-touch-startup-images.md

@@ -0,0 +1,31 @@
+{%- assign design_guide_url = include.design_guide_url -%}
+{%- capture startup_image_configs -%}
+320,480,1,320x460
+320,480,2,640x920
+320,568,2,640x1096
+375,667,2,750x1294
+414,736,3,1182x2208,landscape
+414,736,3,1242x2148,portrait
+768,1024,1,748x1024,landscape
+768,1024,1,768x1004,portrait
+768,1024,2,1496x2048,landscape
+768,1024,2,1536x2008,portrait
+{%- endcapture -%}
+{%- assign startup_image_configs = startup_image_configs | newline_to_br | split: '<br />' -%}
+{%- for startup_image_config in startup_image_configs -%}
+    {%- assign values = startup_image_config | split: ',' -%}
+    {%- assign width = values[0] -%}
+    {%- assign height = values[1] -%}
+    {%- assign pixel_ratio = values[2] -%}
+    {%- assign size = values[3] -%}
+    {%- if values.size > 3 -%}
+        {% assign orientation = values[4] -%}
+    {%- endif -%}
+    {%- include apple-touch-startup-image.html
+        width=width
+        height=height
+        pixel_ratio=pixel_ratio
+        size=size
+        orientation=orientation
+        design_guide_url=design_guide_url -%}
+{%- endfor -%}

data/_includes/card-horizontal-list.html

@@ -0,0 +1,33 @@
+{%- 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/_includes/card-list.html

@@ -0,0 +1,28 @@
+{%- 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
+col_class(required): Describes what grid column class(es) each card should be wrapped in
+{%- endcomment -%}
+
+{% assign card_list = include.card_list %}
+{% assign type = include.type %}
+{% assign col_class = include.col_class %}
+
+<div class="row card-list">
+    {% for card in card_list %}
+        {% assign title = card.title | split: '–' | last %}
+        <div class="{{ col_class }}">
+            {% include card.html title=title
+                text=card.description
+                icon_content=card.icon.content
+                icon_outlined=card.icon.outlined
+                icon_svg=card.icon.svg
+                to=card.url
+                type=type
+            %}
+        </div>
+    {% endfor %}
+</div>

data/_includes/card.html

@@ -0,0 +1,73 @@
+{%- comment -%}
+**Parameters
+title(required): Title of the card
+title_type: Determines size of the title
+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
+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 %}
+{% 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 to = include.to %}
+{% if include.type %}
+{% assign type = include.type %}
+{% assign type_class = 'dx-card-' | append: type %}
+{% else %}
+{% 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 %}
+
+{% 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>
+{% else %}
+<a href="{{ to }}" class="dx-card {{type_class}}">
+    <span class="dx-card-icon{% if no_icon %} d-none{% endif %}">
+        <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
+            {{ icon_content }}
+        </i>
+    </span>
+    <span class="dx-card-content">
+        <span class="{{ title_type }}">{{ title }}</span>
+        <span>{{ text }}</span>
+    </span>
+    <i class="material-icons">arrow_forward</i>
+</a>
+{% endif %}
+{% endif %}

data/_includes/front-page.html

@@ -0,0 +1,255 @@
+
+{%- comment -%}
+**Parameters
+card_col_class: Grid column class the cards should be wrapped in
+num_dates: Amount of rows (based on dates in release_notes) should be displayed
+    in release-notes
+{%- endcomment -%}
+
+{% assign card_col_class = include.card_col_class | default: "col-xxl-3 col-xl-6 col-lg-6" %}
+{% assign num_dates = include.num_dates | default: 3 %}
+
+<div class="front-page">
+    <div class="front-page-container">
+        <div class="front-page-top">
+            <div class="front-page-hero">
+                <h3>Welcome to the Swedbank Pay</h3>
+                <div class="front-page-hero-name">
+                    {<span>developer portal</span>} 
+                </div>
+                <p>
+                    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.
+                </p>
+            </div>
+            <div class="front-page-intro-cards">
+                <h2 id="front-page-start" class="heading-line heading-line-white" >Start your integration</h2>
+                <div class="row mt-4">
+                    <div class="{{ card_col_class }}">
+                        {% include card.html title='Checkout'
+                            title_type="h2"
+                            text='With our Checkout you get the pre-built all-in-one
+                            payment solution, complete with a checkin interface and
+                            payment menu.'
+                            icon_content='shopping_cart'
+                            icon_outlined=true
+                            to='/checkout'
+                        %}
+                    </div>
+                    <div class="{{ card_col_class }}">
+                        {% include card.html title='Payments'
+                            title_type="h2"
+                            text='Payments gives you a one-by-one integration with more
+                            customization for each payment method to build your own
+                            payment menu.'
+                            icon_content='credit_card'
+                            to='/payments'
+                        %}
+                    </div>
+                    <div class="{{ card_col_class }}">
+                        {% include card.html title='Gift Cards'
+                            title_type="h2"
+                            text='Our Gift Cards API allows your customers to pay with
+                            prepaid gift cards issued by Swedbank Pay in your Checkout.'
+                            icon_content='card_giftcard'
+                            to='/gift-cards'
+                        %}
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <div class="front-page-merchants">
+            <h6>Trusted by</h6>
+            <div class="merchants-container justify-content-xxl-between">
+                <a class="merchant-link">
+                    {% include img/merchants/logo-schibsted.svg %}
+                </a>
+                <a class="merchant-link">
+                    {% include img/merchants/logo-ica.svg %}
+                </a>
+                <a class="merchant-link">
+                    {% include img/merchants/logo-elkjop.svg %}
+                </a>
+                <a class="merchant-link">
+                    {% include img/merchants/logo-synsam.svg %}
+                </a>
+                <a class="merchant-link">
+                    {% include img/merchants/logo-coop.svg %}
+                </a>
+                <a class="merchant-link">
+                    {% include img/merchants/logo-svenskaspel.svg %}
+                </a>
+                <a class="merchant-link">
+                    {% include img/merchants/logo-skanetrafiken.svg %}
+                </a>
+            </div>
+        </div>
+    </div>
+        
+        <a href="https://ecom.externalintegration.payex.com/pspdemoshop" class="front-page-demoshop">
+            <span class="front-page-demoshop-text">
+                <span class="h2">Try our Demoshop<span>.</span></span>
+                <span class="demoshop-text-description">
+                    Unsure about how it all works? See how our checkout and payment methods are used
+                    in practice!
+                </span>
+            </span>
+            <span class="front-page-demoshop-link">
+                <span class="h3">Go to the demoshop</span>
+                <i class="material-icons">arrow_forward</i>
+                <span class="demoshop-link-img">
+                    <img class="demoshop-link-img-mobile d-md-none d-lg-flex d-xl-none d-xxl-flex" 
+                        src="/assets/img/demoshop-mobile.svg"
+                        alt="demoshop-mobile"
+                    />
+                    <img class="demoshop-link-img-mobile d-none d-md-none d-lg-flex d-xl-none" 
+                        src="/assets/img/demoshop-mobile2.svg"
+                        alt="demoshop-mobile2"
+                    />
+                    <img class="demoshop-link-img-web d-none d-sm-none d-md-flex d-lg-none d-xl-flex" 
+                        src="/assets/img/demoshop-web.svg"
+                        alt="demoshop-web"
+                    />
+                </span>
+            </span>
+        </a>
+    
+    <div class="front-page-container">
+        <div class="front-page-cards-sdk">
+            <h2 id="front-page-sdk" class="heading-line heading-line-sdk">Looking for SDKs?</h2>
+            <div class="row mt-4">
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='Android SDK'
+                        text='Learn more about how to integrate our Android SDK'
+                        icon_content='img/sdks/logo-android.svg'
+                        icon_svg=true
+                        type='sdk'
+                        to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='Swift SDK'
+                        text='Learn more about how to integrate our Swift SDK'
+                        icon_content='img/sdks/logo-swift.svg'
+                        icon_svg=true
+                        type='sdk'
+                        to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='.NET SDK'
+                        text='Learn more about how to integrate our .NET SDK'
+                        icon_content='img/sdks/logo-net.svg'
+                        icon_svg=true
+                        type='sdk'
+                        to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='PHP SDK'
+                    text='Learn more about how to integrate our PHP SDK'
+                    icon_content='img/sdks/logo-php.svg'
+                    icon_svg=true
+                    type='sdk'
+                    to=''
+                    %}
+                </div>
+            </div>
+        </div>
+        
+        <div class="front-page-cards-module">
+            <h2 id="front-page-module" class="heading-line heading-line-module">Or perhaps modules?</h2>
+            <div class="row mt-4">
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='Episerver'
+                        text='See how you can integrate the Episerver module'
+                        icon_content='img/modules/logo-episerver.svg'
+                        icon_svg=true
+                        type='module'
+                        to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='Magento 2'
+                        text='See how you can integrate the Magento 2 module'
+                        icon_content='img/modules/logo-magento2.svg'
+                        icon_svg=true
+                        type='module'
+                        to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='WooCommerce'
+                        text='See how you can integrate the WooCommerce module'
+                        icon_content='img/modules/logo-woocommerce.svg'
+                        icon_svg=true
+                        type='module'
+                        to=''
+                    %}
+                </div>
+            </div>
+        </div>
+        
+        <div class="front-page-release-notes">
+            <h2 id="front-page-release-notes" class="heading-line heading-line-green">What's new in the documentation</h2>
+            {% include release_notes.html num_dates=num_dates %}
+            <a href="/resources/release-notes">See full release notes</a>
+        </div>
+        
+        <div class="front-page-cards-extra">
+            <h2 id="front-page-extra-resources" class="heading-line">Extra resources</h2>
+            <div class="row mt-4">
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='OS development guidelines'
+                        text='This is how we create an inclusive environment'
+                        icon_content='account_circle'
+                        icon_outlined=true
+                        to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='Test data'
+                        text='Get the required data for testing in our interfaces'
+                        icon_content='content_paste'
+                        to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='Terminology'
+                    text='Get a better understanding of the terms we use'
+                    icon_content='menu_book'
+                    to=''
+                    %}
+                </div>
+                <div class="{{ card_col_class }}">
+                    {% include card.html title='See all resources (7)'
+                        text='Data protection, public migration key etc'
+                        no_icon=true
+                        to=''
+                    %}
+                </div>
+            </div>
+        </div>
+    
+        <div class="front-page-contact">
+            <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 looking for?</h2>
+                        <p>
+                            We are always trying to make the developer portal as
+                            good as it can be please don’t hesitate to contact us.
+                        </p>
+                    </div>
+                    <div class="col-xl-5 d-flex align-items-center justify-content-center">
+                        <button class="btn">Contact us here</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+    </div>  
+</div>
+