Finish

- ESY-6204 Update design guide version

_config.yml

@@ -42,7 +42,7 @@ opengraph:
   image: /image1.png
 design_guide:
   base_url: https://design.swedbankpay.com
-  version: 10.7.3
+  version: 10.9.0
 search:
   enabled: true
   url: /search

_includes/accordion-table.html

@@ -1,11 +1,11 @@
 {% assign content = include.content | markdownify%}
 
-<div class="accordion accordion-table mb-4">
-    <button type="button" class="accordion-header pt-0" aria-expanded="false" aria-controls="exp-1">
+<div class="accordion">
+    <button type="button" class="accordion-header" aria-expanded="false" aria-controls="exp-1">
         <span class="mr-3 show">Show fields</span>
         <span class="mr-3 hide">Hide fields</span>
     </button>
-    <div class="accordion-body p-0" id="exp-1">
+    <div class="accordion-body" id="exp-1">
         {{ content }}
     </div>
-</div>
+</div>

_includes/card.html

@@ -23,46 +23,51 @@
 {% assign disabled = include.disabled %}
 
 {% if include.type %}
-    {% assign type = include.type %}
-    {% assign type_class = 'dx-card-' | append: type %}
+{% assign type = include.type %}
+{% assign type_class = 'dx-card-' | append: type %}
 {% else %}
-    {% assign type_class = '' %}
+{% assign type_class = '' %}
 {% endif %}
 
 {% unless icon_svg %}
-    {% if icon_content contains '/' or icon_content contains '.svg' %}
-        {% assign icon_svg = true %}
-    {% endif %}
+{% if icon_content contains '/' or icon_content contains '.svg' %}
+{% assign icon_svg = true %}
+{% endif %}
 {% endunless %}
 
-{% assign card_class = 'dx-card ' | append: type_class | strip %}
+{% assign card_class = 'cards cards-primary ' | append: type_class | strip %}
 {% if horizontal %}
-    {% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
+{% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
 {% endif %}
 
 {% if disabled %}
-    {% assign card_class = card_class | append: ' dx-card-disabled' | strip %}
-    {% assign card_tag = 'span' %}
+{% 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 %}
+{% assign card_tag = 'a' %}
+{% capture card_attributes %}href="{{ to }}"{% endcapture %}
 {% endif %}
 
 <{{ card_tag }} {{ card_attributes }} class="{{ card_class }}">
-    <span class="dx-card-icon{% if no_icon %} d-none{% endif %}">
-        {% if icon_svg %}
-            {% include {{ icon_content }} %}
-        {% else %}
-            <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
-                {{ icon_content }}
-            </i>
-        {% endif %}
-    </span>
-    <span class="dx-card-content">
-        <span class="{{ title_type }}">{{ include.title }}</span>
+    {% if icon_svg %}
+    <div class="cards-icon">
+        {% include {{ icon_content }} %}
+    </div>
+    {% 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>
+    {% endif %}
+    {% endunless %}
+
+    <div class="cards-content">
+        <span class="h4">{{ include.title }}</span>
         <span>{{ text | markdownify }}</span>
-    </span>
+    </div>
     {% unless disabled %}
-        <i class="material-icons">arrow_forward</i>
+    <i class="material-icons">arrow_forward</i>
     {% endunless %}
 </{{ card_tag }}>

_sass/accordion-table.scss

@@ -1,92 +1,21 @@
 @import 'colors.scss';
 
-.accordion {
-    align-items: center;
-
-    &.accordion-table {
-        border: none;
-
+.accordion-header{
         .show {
             display: block;
-            width: 52rem;
         }
 
         .hide {
             display: none;
         }
 
-        &.accordion-open {
-            border: none;
-
+        &[aria-expanded="true"] {
             .show {
                 display: none;
             }
 
             .hide {
                 display: block;
-                width: 70vw;
-                max-width: 100%;
-                padding-left: 1rem;
-            }
-        }
-
-        .accordion-header {
-            align-items: center;
-            background-color: $apricot;
-            border: 1px solid rgba(153, 153, 153, 0.5);
-            border-radius: 2px;
-            max-width: 80rem;
-            line-height: 2rem;
-            padding: unset;
-
-            &:before {
-                position: absolute;
-                top: 50%;
-                margin-right: 0.5rem;
-                bottom: 50%;
-                transition: .3s;
-                color: $brown;
-            }
-
-            span {
-                font-weight: normal;
-            }
-            &:hover {
-                span {
-                    font-weight: bold;
-                }
-            }
-        }
-
-        .accordion-body {
-            @media (min-width: 1250px) {
-                width: 70vw;
-                max-width: 80rem;
-            }
-        }
-
-        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;
-                    }
-                }
             }
         }
-    }
 }