swedbank-pay-design-guide-jekyll-theme 2.1.12.pre.beta.2 → 2.1.13

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f1c49ca2882215cc207fbab5b8901ce5b963d4429204faf5f972dbbdcb8f397b
4
- data.tar.gz: b8fb9787ebc2fd49d00181fa0d92735e14be6afdff7536053629e6979c763770
3
+ metadata.gz: e00256044e2bcfb1e8557ee85d12c91b34509582663d04b3d7b7ee2df6ffa4af
4
+ data.tar.gz: 248fa8d33d8557814c5ecc2a8eb2153657113f7046721ad5299bc5a06bcc0fe5
5
5
  SHA512:
6
- metadata.gz: f53bd9dfede5ecd4cf928e27f3148cda03d8d3cdec058a9b712e0ad003be91a5275c8e9a42de51590bb431fdd79a5ae32bf0d8fe82bb6b829fac9fbf938ee824
7
- data.tar.gz: a50b9968d8d03cf05d26368e8d311b5176bf8437e9aeff9e6ab8849d4db7bcc98e2a764ea342793251e72f739b4718a37a94fcbc793c160215f9bc68de56cfdc
6
+ metadata.gz: 41fdd35711d08ef1f2297239172ef6749d18a7dc47ef8e4854e2601768891b497d9a96a360eeef2ba0de50e76047152114f809deba6fdf38ce29cdc9c8c5f581
7
+ data.tar.gz: ef20a84c1e13111e323712a4025bd40c325e9ae514044f453d075780b50a0c90c583d61bb78f0ea17c75937f90461e242eff361e1913ca3b96035e0da75156df
data/README.md CHANGED
@@ -20,12 +20,22 @@ like to host it locally on your computer, you have two options, manual install
20
20
  or [Docker][docker].
21
21
  The Docker installation is the one we recommend to use for its simplicity.
22
22
 
23
- ### Docker
23
+ After either a Docker or manual installation Jekyll should be fired up with this theme. You can now add pages, documents,
24
+ data, etc. like normal to test your theme's contents. As you make modifications to your theme and to your content, the site will regenerate and you should see
25
+ the changes in the browser after a refresh, just like normal.
26
+
27
+ When the theme is released, only the files in `_layouts`, `_includes`, `_sass` and `assets` tracked with Git will be bundled. To add a custom directory to your
28
+ theme-gem, please edit the regexp in `swedbankpay.gemspec` accordingly.
29
+
30
+
31
+ ### Docker (recommended)
24
32
 
25
- 1. Install [Docker][docker], using Linux containers.
26
- Make sure virtualization is enabled on your machine.
27
- 2. Open a console window at the root of the repository and run
28
- `docker-compose up`
33
+ 1. [Clone this repository][clone].
34
+ 2. [Install Docker Personal][docker]. Select default settings when prompted.
35
+ 3. Open a console window at the root of the repository and run `docker-compose up`.
36
+ This will create a docker container and spin it up with everything that's specified in the repository gemfile.
37
+ 4. Open `http://localhost:4000` in a browser.
38
+
29
39
 
30
40
  ### Manual install
31
41
 
@@ -35,35 +45,20 @@ The Docker installation is the one we recommend to use for its simplicity.
35
45
  3. To install the [Ruby Gems][gems] this web site requires, you first need to
36
46
  install [Bundler][bundler].
37
47
  4. Install [Graphviz][graphviz], this will require Java.
38
- 5. Once Ruby ,Bundler, and Graphviz, is in place, type `bundle install` inside the root
48
+ 5. Run Visual Studio Code (VSC) and open the repository.
49
+ 6. Verify that Git is installed by running `git status` in VSC terminal.
50
+ If Git is not properly installed, you will see an error message like the one below. Just [download Git][git] and install.
51
+ ![Alt text](image.png)
52
+ 7. Once Ruby ,Bundler, and Graphviz, is in place, type `bundle install` inside the root
39
53
  folder of this repository.
40
- 6. Run `bundle exec jekyll serve` to start the website.
41
- 7. Open `http://localhost:4000` in a browser.
42
-
43
- ### Required Visual Studio Code plugins
44
-
45
- * `shd101wyy.markdown-preview-enhanced`, to render Markdown to HTML in a
46
- preview window.
47
- * `bpruitt-goddard.mermaid-markdown-syntax-highlighting`, to give syntax
48
- highlighting to Mermaid diagrams in Markdown files.
49
- * `yzhang.markdown-all-in-one`, to enable a plethora of Markdown features,
50
- most importantly formatting of Markdown tables with VS Code's built-in
51
- format functionality.
52
- * `stkb.rewrap`, to make line-breaking text at 80 characters easier.
53
- * `supperchong.pretty-json` to format selected JSON snippets in code
54
- examples.
55
- * `sissel.shopify-liquid` for syntax highlighting of [Liquid][liquid].
56
- * [Set up a ruler at 80 characters][vsc-ruler] by
57
- adding `"editor.rulers": [80]` to its configuration.
58
-
59
- Jekyll should now be fired up with this theme. You can now add pages, documents,
60
- data, etc. like normal to test your theme's contents. As you make modifications
61
- to your theme and to your content, the site will regenerate and you should see
62
- the changes in the browser after a refresh, just like normal.
54
+ 8. Run `bundle exec jekyll serve` to start the website.
55
+ 9. Open in a browser.
56
+
57
+
58
+ ### Visual Studio Code plugins
59
+
60
+ You might want to install plugins for Markdown, Mermaid, JSON and Liquid as this will enhance your coding experience.
63
61
 
64
- When the theme is released, only the files in `_layouts`, `_includes`, `_sass`
65
- and `assets` tracked with Git will be bundled. To add a custom directory to your
66
- theme-gem, please edit the regexp in `swedbankpay.gemspec` accordingly.
67
62
 
68
63
  ## Contributing
69
64
 
@@ -91,6 +86,7 @@ agreement][cla].
91
86
  [developer-portal]: <https://developer.swedbankpay.com/>
92
87
  [docker]: <https://www.docker.com/>
93
88
  [gems]: <https://rubygems.org/>
89
+ [git]: <https://git-scm.com/downloads>
94
90
  [github]: <https://github.com/SwedbankPay/swedbank-pay-design-guide-jekyll-theme>
95
91
  [graphviz]: <https://graphviz.org/download/>
96
92
  [license-badge]: https://img.shields.io/github/license/SwedbankPay/swedbank-pay-design-guide-jekyll-theme
@@ -1,11 +1,11 @@
1
1
  {% assign content = include.content | markdownify%}
2
2
 
3
- <div class="accordion accordion-table mb-4">
4
- <button type="button" class="accordion-header pt-0" aria-expanded="false" aria-controls="exp-1">
3
+ <div class="accordion">
4
+ <button type="button" class="accordion-header" aria-expanded="false" aria-controls="exp-1">
5
5
  <span class="mr-3 show">Show fields</span>
6
6
  <span class="mr-3 hide">Hide fields</span>
7
7
  </button>
8
- <div class="accordion-body p-0" id="exp-1">
8
+ <div class="accordion-body" id="exp-1">
9
9
  {{ content }}
10
10
  </div>
11
- </div>
11
+ </div>
data/_includes/card.html CHANGED
@@ -23,46 +23,51 @@ type: sdk | module - Empty type result in default card styling
23
23
  {% assign disabled = include.disabled %}
24
24
 
25
25
  {% if include.type %}
26
- {% assign type = include.type %}
27
- {% assign type_class = 'dx-card-' | append: type %}
26
+ {% assign type = include.type %}
27
+ {% assign type_class = 'dx-card-' | append: type %}
28
28
  {% else %}
29
- {% assign type_class = '' %}
29
+ {% assign type_class = '' %}
30
30
  {% endif %}
31
31
 
32
32
  {% unless icon_svg %}
33
- {% if icon_content contains '/' or icon_content contains '.svg' %}
34
- {% assign icon_svg = true %}
35
- {% endif %}
33
+ {% if icon_content contains '/' or icon_content contains '.svg' %}
34
+ {% assign icon_svg = true %}
35
+ {% endif %}
36
36
  {% endunless %}
37
37
 
38
- {% assign card_class = 'dx-card ' | append: type_class | strip %}
38
+ {% assign card_class = 'cards cards-primary ' | append: type_class | strip %}
39
39
  {% if horizontal %}
40
- {% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
40
+ {% assign card_class = card_class | append: ' dx-card-horizontal' | strip %}
41
41
  {% endif %}
42
42
 
43
43
  {% if disabled %}
44
- {% assign card_class = card_class | append: ' dx-card-disabled' | strip %}
45
- {% assign card_tag = 'span' %}
44
+ {% assign card_class = card_class | append: ' dx-card-disabled' | strip %}
45
+ {% assign card_tag = 'span' %}
46
46
  {% else %}
47
- {% assign card_tag = 'a' %}
48
- {% capture card_attributes %}href="{{ to }}"{% endcapture %}
47
+ {% assign card_tag = 'a' %}
48
+ {% capture card_attributes %}href="{{ to }}"{% endcapture %}
49
49
  {% endif %}
50
50
 
51
51
  <{{ card_tag }} {{ card_attributes }} class="{{ card_class }}">
52
- <span class="dx-card-icon{% if no_icon %} d-none{% endif %}">
53
- {% if icon_svg %}
54
- {% include {{ icon_content }} %}
55
- {% else %}
56
- <i class="material-icons{% if icon_outlined %}-outlined{% endif %}">
57
- {{ icon_content }}
58
- </i>
59
- {% endif %}
60
- </span>
61
- <span class="dx-card-content">
62
- <span class="{{ title_type }}">{{ include.title }}</span>
52
+ {% if icon_svg %}
53
+ <div class="cards-icon">
54
+ {% include {{ icon_content }} %}
55
+ </div>
56
+ {% endif %}
57
+
58
+ {% unless icon_svg %}
59
+ {% if icon_content %}
60
+ <div class="cards-icon">
61
+ <i class="material-icons material-icons-outlined" aria-hidden="true">{{ icon_content }}</i>
62
+ </div>
63
+ {% endif %}
64
+ {% endunless %}
65
+
66
+ <div class="cards-content">
67
+ <span class="h4">{{ include.title }}</span>
63
68
  <span>{{ text | markdownify }}</span>
64
- </span>
69
+ </div>
65
70
  {% unless disabled %}
66
- <i class="material-icons">arrow_forward</i>
71
+ <i class="material-icons">arrow_forward</i>
67
72
  {% endunless %}
68
73
  </{{ card_tag }}>
@@ -22,16 +22,8 @@
22
22
 
23
23
  <h1>{{ main_title }}</h1>
24
24
 
25
- {% assign estimated_read = page.content | read_time | plus: 0 %}
26
- {% if estimated_read > 0 %}
27
- <div class="title-header-estimated-read">
28
- <i class="material-icons">schedule</i>
29
- {{ estimated_read }} min read
30
- </div>
31
- {% endif %}
32
-
33
25
  {% if description %}
34
- <p>{{ description | markdownify }}</p>
26
+ <p>{{ description }}</p>
35
27
  {% endif %}
36
28
  </div>
37
29
 
@@ -54,7 +54,6 @@
54
54
  <script src="{{ "/assets/tipuesearch/tipuesearch_set.js" | relative_url }}"></script>
55
55
  <script src="{{ "/assets/tipuesearch/tipuesearch.min.js" | relative_url }}"></script>
56
56
  {%- endif %}
57
- <script src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js" type="text/javascript" charset="UTF-8" data-domain-script="77c777e5-115a-4e3d-81ec-cc857a4ac846"></script>
58
57
  </head>
59
58
 
60
59
  <body>
@@ -1,92 +1,21 @@
1
1
  @import 'colors.scss';
2
2
 
3
- .accordion {
4
- align-items: center;
5
-
6
- &.accordion-table {
7
- border: none;
8
-
3
+ .accordion-header{
9
4
  .show {
10
5
  display: block;
11
- width: 52rem;
12
6
  }
13
7
 
14
8
  .hide {
15
9
  display: none;
16
10
  }
17
11
 
18
- &.accordion-open {
19
- border: none;
20
-
12
+ &[aria-expanded="true"] {
21
13
  .show {
22
14
  display: none;
23
15
  }
24
16
 
25
17
  .hide {
26
18
  display: block;
27
- width: 70vw;
28
- max-width: 100%;
29
- padding-left: 1rem;
30
- }
31
- }
32
-
33
- .accordion-header {
34
- align-items: center;
35
- background-color: $apricot;
36
- border: 1px solid rgba(153, 153, 153, 0.5);
37
- border-radius: 2px;
38
- max-width: 80rem;
39
- line-height: 2rem;
40
- padding: unset;
41
-
42
- &:before {
43
- position: absolute;
44
- top: 50%;
45
- margin-right: 0.5rem;
46
- bottom: 50%;
47
- transition: .3s;
48
- color: $brown;
49
- }
50
-
51
- span {
52
- font-weight: normal;
53
- }
54
- &:hover {
55
- span {
56
- font-weight: bold;
57
- }
58
- }
59
- }
60
-
61
- .accordion-body {
62
- @media (min-width: 1250px) {
63
- width: 70vw;
64
- max-width: 80rem;
65
- }
66
- }
67
-
68
- table {
69
- border: 1px solid rgba(153, 153, 153, 0.5);
70
- border-radius: 0.25rem;
71
-
72
- th {
73
- font-size: 0.875rem;
74
- }
75
-
76
- tbody {
77
- font-size: 0.875rem;
78
-
79
- tr:nth-child(odd) {
80
- background-color: #F9F8F6;
81
- }
82
-
83
- tr {
84
- &:hover {
85
- background-color: $apricot;
86
- transition: .5s;
87
- }
88
- }
89
19
  }
90
20
  }
91
- }
92
21
  }
data/_sass/card.scss CHANGED
@@ -1,276 +1,6 @@
1
- @import 'colors.scss';
2
-
3
- .cards {
4
- cursor: default;
5
-
6
- &.cards-wide {
7
- margin-top: 4rem;
8
-
9
- .btn {
10
- margin-bottom: 2rem;
11
- margin-top: 5rem;
12
- }
13
-
14
- .text-box-extended {
15
- margin-right: 4.875rem;
16
- }
17
- }
18
-
19
- .table {
20
-
21
- &.table-plain {
22
- thead {
23
- tr {
24
- th:first-child {
25
- padding-left: 0;
26
- }
27
-
28
- th:not(:first-child) {
29
- text-align: center;
30
- padding: 0 0.5rem;
31
-
32
- .badge {
33
- &.badge-default {
34
- background-color: #fbdd91;
35
- }
36
-
37
- &.badge-inactive {
38
- background-color: #d4c4bc;
39
- color: $brown;
40
- }
41
- }
42
- }
43
- }
44
- }
45
- tbody {
46
- tr {
47
- background-color: transparent;
48
- td {
49
- text-align: center;
50
- border: none;
51
- }
52
-
53
- th {
54
- padding-left: 0;
55
- display: flex;
56
- align-items: end;
57
- border: none;
58
-
59
- i {
60
- margin-right: 0.5rem;
61
- }
62
- }
63
- }
64
- }
65
- }
66
- }
67
-
68
- .container-right {
69
- float: right;
70
- }
71
- }
72
-
73
- .dx-card {
74
- display: flex;
75
- flex-grow: 1;
76
- flex-direction: column;
77
- position: relative;
78
- padding: 2.25rem 1.5rem 1.5rem;
79
- margin: 2rem 0 1rem;
80
- border-radius: 4px;
81
- box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
82
- color: $brown;
83
- text-decoration: none;
84
- background-color: $white;
85
-
86
- &:hover,
87
- &:focus {
88
- box-shadow: 1px 2px 20px rgba(0, 0, 0, 0.15);
89
- color: $brown;
90
-
91
- &:after {
92
- position: absolute;
93
- bottom: 0;
94
- left: 0;
95
- content: "";
96
- width: 100%;
97
- border-bottom-left-radius: 4px;
98
- border-bottom-right-radius: 4px;
99
- border-bottom: 4px solid $yellow;
100
- }
101
- }
102
-
103
- >i {
104
- color: $brown;
105
- margin-top: auto;
106
- }
107
-
108
-
109
- .dx-card-icon {
110
- display: flex;
111
- position: absolute;
112
- top: -1.25rem;
113
- left: 2rem;
114
- width: 2.5rem;
115
- height: 2.5rem;
116
- border-radius: 4px;
117
- align-items: center;
118
- justify-content: center;
119
- color: $brown;
120
- background-color: $yellow;
121
-
122
- svg {
123
- fill: $brown;
124
- max-width: 24px;
125
- }
126
- }
127
-
128
- .dx-card-content {
129
- display: flex;
130
- flex-direction: column;
131
- margin-bottom: 1.25rem;
132
- font-size: 1rem;
133
-
134
- .h4 {
135
- margin-top: 0;
136
- }
137
- }
138
-
139
- &.dx-card-horizontal {
140
- flex-direction: row;
141
- justify-content: space-between;
142
- align-items: center;
143
- padding-top: 1.5rem;
144
- margin-top: 2.25rem;
145
-
146
- >i {
147
- margin-top: initial;
148
- }
149
-
150
- .dx-card-icon {
151
- font-family: "Akkurat Mono", monospace;
152
- height: 2rem;
153
- top: -1rem;
154
- }
155
-
156
- .dx-card-content {
157
- margin-bottom: 0;
158
- margin-top: 0.75rem;
159
-
160
- .h3 {
161
- margin-top: 0;
162
- margin-bottom: 0.25rem;
163
- }
164
- }
165
- }
166
-
167
- &.dx-card-sdk {
168
- &:hover,
169
- &:focus {
170
- &:after {
171
- border-bottom: 4px solid $turquoise;
172
- }
173
- }
174
-
175
- >i {
176
- color: $turquoise;
177
- }
178
-
179
- .dx-card-icon {
180
- color: $white;
181
- background-color: $turquoise;
182
-
183
- svg {
184
- fill: $white;
185
- }
186
- }
187
-
188
- &.dx-card-disabled {
189
- &, .h1, .h2, .h3, .h4, h5, .h6 {
190
- color: $soft-turquoise;
191
- }
192
-
193
- .dx-card-icon {
194
- background-color: $soft-turquoise;
195
- }
196
- }
197
- }
198
-
199
- &.dx-card-module {
200
- &:hover,
201
- &:focus {
202
- &:after {
203
- border-bottom: 4px solid $card-pink;
204
- }
205
- }
206
-
207
- >i {
208
- color: $card-pink;
209
- }
210
-
211
- .dx-card-icon {
212
- color: $white;
213
- background-color: $card-pink;
214
-
215
- svg {
216
- fill: $white;
217
- }
218
- }
219
-
220
- &.dx-card-disabled {
221
- &, .h1, .h2, .h3, .h4, h5, .h6 {
222
- color: $soft-card-pink;
223
- }
224
-
225
- .dx-card-icon {
226
- background-color: $soft-card-pink;
227
- }
228
- }
229
- }
230
-
231
- &.dx-card-disabled {
232
- &, .h1, .h2, .h3, .h4, h5, .h6 {
233
- color: $soft-brown;
234
- }
235
-
236
- &:hover,
237
- &:focus {
238
- box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
239
-
240
- &:after {
241
- border-bottom: none;
242
- }
243
- }
244
-
245
- .dx-card-icon {
246
- background-color: $soft-yellow;
247
- }
248
- }
249
- }
250
-
251
-
252
- .card-horizontal-list {
253
- margin-top: 3.25rem;
254
-
255
- .dx-card {
256
- &:not(:last-child) {
257
- &:before {
258
- content: "";
259
- position: absolute;
260
- height: 16px;
261
- bottom: -18px;
262
- left: 3.125rem;
263
- border-left: 2px dotted $brown;
264
- }
265
- }
266
- }
267
- }
268
-
269
- .card-list {
270
- margin-top: 1.5rem;
271
-
272
- >[class*='col-'] {
273
- display: flex;
1
+ .cards-icon {
2
+ svg {
3
+ fill: $brown;
4
+ max-width: 24px;
274
5
  }
275
6
  }
276
-
data/_sass/colors.scss CHANGED
@@ -10,7 +10,7 @@ $brand-success-light: #f2f7eb;
10
10
  $turquoise: #31a3ae;
11
11
  $soft-turquoise: #98d0d6;
12
12
  $turquoise-link: #257886;
13
- $brown: #512b2b;
13
+ $brown: #2f2424;
14
14
  $dark-brown: #493c3b;
15
15
  $medium-brown: #72605e;
16
16
  $soft-brown: #a38b80;
@@ -1,7 +1,7 @@
1
1
  .highlight .hll { background-color: #ffffcc }
2
2
  .highlight { background: #ffffff; }
3
3
  .highlight .c { color: #aaaaaa; font-style: italic } /* Comment */
4
- .highlight .err { color: #FF0000; background-color: #FFAAAA } /* Error */
4
+ .highlight .err { color: #E7F8D2; } /* Error */
5
5
  .highlight .k { color: #0000aa } /* Keyword */
6
6
  .highlight .ch { color: #aaaaaa; font-style: italic } /* Comment.Hashbang */
7
7
  .highlight .cm { color: #aaaaaa; font-style: italic } /* Comment.Multiline */
@@ -30,8 +30,23 @@ function inactivateClarityCookies() {
30
30
  deleteCookie("_clsk");
31
31
  }
32
32
 
33
+ window.addEventListener("DOMContentLoaded", (event) => {
34
+ if (location.host === "developer.swedbankpay.com") {
35
+ var script = document.createElement('script');
36
+ script.src = 'https://cdn.cookielaw.org/scripttemplates/otSDKStub.js';
37
+ script.type = "text/javascript";
38
+ script.charset = "UTF-8";
39
+ script.setAttribute("data-domain-script", "77c777e5-115a-4e3d-81ec-cc857a4ac846");
40
+ document.body.appendChild(script);
41
+ }
42
+ else {
43
+ document.cookie = "_clck=;domain=.swedbankpay.com;expires=Thu, 01 Jan 1970 00:00:01 GMT";
44
+ document.cookie = "_clsk=;domain=.swedbankpay.com;expires=Thu, 01 Jan 1970 00:00:01 GMT";
45
+ }
46
+ });
47
+
33
48
  window.addEventListener("OneTrustGroupsUpdated", (event) => {
34
- if (event.detail.indexOf("C0002") !== -1) {
49
+ if (event.detail && event.detail.indexOf("C0002") !== -1) {
35
50
  activateClarity();
36
51
  }
37
52
  else {
data/lib/gem_version.rb CHANGED
@@ -4,7 +4,7 @@ module Gem
4
4
  # Gem Specification
5
5
  class Specification
6
6
  def self.gem_version
7
- '2.1.12-beta.2'
7
+ '2.1.13'
8
8
  end
9
9
  end
10
10
  end
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: swedbank-pay-design-guide-jekyll-theme
3
3
  version: !ruby/object:Gem::Version
4
- version: 2.1.12.pre.beta.2
4
+ version: 2.1.13
5
5
  platform: ruby
6
6
  authors:
7
7
  - Swedbank Pay
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-01-22 00:00:00.000000000 Z
11
+ date: 2024-01-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: faraday
@@ -501,9 +501,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
501
501
  version: 2.5.0
502
502
  required_rubygems_version: !ruby/object:Gem::Requirement
503
503
  requirements:
504
- - - ">"
504
+ - - ">="
505
505
  - !ruby/object:Gem::Version
506
- version: 1.3.1
506
+ version: '0'
507
507
  requirements: []
508
508
  rubygems_version: 3.1.6
509
509
  signing_key: