swedbank-pay-design-guide-jekyll-theme 1.17.0 → 2.1.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (20) hide show
  1. checksums.yaml +4 -4
  2. data/_includes/accordion-table.html +2 -2
  3. data/_includes/tabs.html +2 -2
  4. data/_includes/title-header.html +2 -2
  5. data/_layouts/default.html +35 -22
  6. data/_sass/accordion-table.scss +17 -23
  7. data/_sass/fonts.scss +3 -2
  8. data/_sass/front-page.scss +4 -4
  9. data/_sass/sidebar.scss +41 -1
  10. data/_sass/swedbank-pay-design-guide-theme.scss +88 -0
  11. data/assets/js/swedbank-pay-design-guide-theme.js +248 -136
  12. data/lib/field_tag.rb +50 -0
  13. data/lib/gem_version.rb +1 -1
  14. data/lib/read_time_filter.rb +40 -0
  15. data/lib/regex_capture_filter.rb +3 -3
  16. data/lib/sidebar_html_builder.rb +17 -7
  17. data/lib/sidebar_path.rb +1 -1
  18. data/lib/sidebar_renderer.rb +1 -1
  19. data/lib/swedbank-pay-design-guide-jekyll-theme.rb +2 -0
  20. metadata +168 -37
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 216bd16da1e18a58dfe126c5db52cb37c7e244d12a9dd4b70580a3137fa992d1
4
- data.tar.gz: 7cd79606950e7907a8414d50d245036a1b2f52ae37325bd6db146a3958825c70
3
+ metadata.gz: 49afa63b5e28957d99544e06ae8971292367bc61c3bdfc8975f7cfd9ea2a782b
4
+ data.tar.gz: bcd0f3313dbc65f1ba33662a9f763cf339813c9af5694815f38c5105d4b5c77c
5
5
  SHA512:
6
- metadata.gz: efb0eab9682e771974c7cc04e4c8a85811939f88760e8b0773696567e752bb9daa069144df787423af5cec97e47db9687946a8941bb95557a3207404f53efbfc
7
- data.tar.gz: 76bc0e7ca8006e0a4db4bb7c019a2804706f33cb7b7e73e232960a19b70a6f9d1fa13e7259df93c7611fdd6af4f89fdd7895e9ba7a97a060bb2e25abd500af58
6
+ metadata.gz: 30dd0b4d0dff517e6352fa4382827c89080e2f68b0b185c2002a054df7361f37a6ea48253a89b5552f3f2eb8124b0224c22d71f2fff51bd6bb82206d2618d096
7
+ data.tar.gz: f10505d806af0e539d41e31f0f82851a7224491b6c6b9599ad33da762f44d66a5dff97987eeca4eefdd0362f2ba8bd1c32886619bb6aa2ed29ae4e7f8016e26f
data/_includes/accordion-table.html CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  <div class="accordion accordion-table mb-4">
4
4
  <button type="button" class="accordion-header pt-0" aria-expanded="false" aria-controls="exp-1">
5
- <span class="mr-3 show">Show properties</span>
6
- <span class="mr-3 hide">Hide properties</span>
5
+ <span class="mr-3 show">Show fields</span>
6
+ <span class="mr-3 hide">Hide fields</span>
7
7
  </button>
8
8
  <div class="accordion-body p-0" id="exp-1">
9
9
  {{ content }}
data/_includes/tabs.html CHANGED
@@ -1,10 +1,10 @@
1
1
  <div class="tabs" id="tabs-showcase-example">
2
2
  <ul>
3
3
  <li class="full-checkout">
4
- <a id="full-checkout">Full Checkout</a>
4
+ <a href="#full-checkout" id="full-checkout">Full Checkout</a>
5
5
  </li>
6
6
  <li class="payments-only">
7
- <a id="payments-only">Payments Only</a>
7
+ <a href="#payments-only" id="payments-only">Payments Only</a>
8
8
  </li>
9
9
  </ul>
10
10
  </div>
data/_includes/title-header.html CHANGED
@@ -1,7 +1,6 @@
1
1
  {% assign lead_title = page.lead_title %}
2
2
  {% assign main_title = page.main_title | default: page.title %}
3
3
  {% assign description = page.description %}
4
- {% assign estimated_read = page.estimated_read %}
5
4
  {% assign checkout_v3 = page.checkout_v3 %}
6
5
  {% capture max_width_class %}
7
6
  {% if page.card_overview %}
@@ -23,7 +22,8 @@
23
22
 
24
23
  <h1>{{ main_title }}</h1>
25
24
 
26
- {% if estimated_read %}
25
+ {% assign estimated_read = page.content | read_time | plus: 0 %}
26
+ {% if estimated_read > 0 %}
27
27
  <div class="title-header-estimated-read">
28
28
  <i class="material-icons">schedule</i>
29
29
  {{ estimated_read }} min read
data/_layouts/default.html CHANGED
@@ -57,9 +57,37 @@
57
57
  </head>
58
58
 
59
59
  <body>
60
+ <div id="overlay"></div>
60
61
  <div id="designguide">
62
+ <header id="dg-topbar" class="topbar topbar-max-md-sticky d-md-flex d-lg-none">
63
+ <button type="button" class="topbar-btn" aria-label="Open menu" aria-haspopup="menu" aria-expanded="false" aria-controls="topbar-nav">
64
+ <i class="material-icons topbar-btn-icon">menu</i>
65
+ </button><button type="button" class="topbar-close" aria-label="Close menu">
66
+ <i class="material-icons topbar-btn-icon">close</i>
67
+ </button>
68
+ <a class="topbar-logo" href="/" aria-label="To homepage">
69
+ <img src="{{ design_guide_url }}/designguide/assets/swedbankpay-logo-v.svg" alt="swedbankpay logo" class="logotype-vertical logotype-sm" />
70
+ </a>
71
+ </header>
61
72
  <div class="documentation">
62
- <div class="row">
73
+ <div class="search-box search-expander">
74
+ {% if site.search.enabled == true %}
75
+ <form class="search d-flex"
76
+ method="get" action="{{ site.search.url | relative_url }}">
77
+ <input name="q" type="text" id="tipue_search_input"
78
+ class="search-input"
79
+ placeholder="Search in documentation"
80
+ onfocus="this.placeholder=''"
81
+ onblur="this.placeholder='Search in documentation'"
82
+ pattern=".{3,}"
83
+ title="At least 3 characters">
84
+ <button id="search-btn"class="btn btn-primary btn-icon-lg" type="submit" aria-label="Search button">
85
+ <i class="material-icons-outlined" aria-hidden="true">search</i>
86
+ </button>
87
+ </form>
88
+ {% endif %}
89
+ </div>
90
+ <div class="d-md-flex">
63
91
  <div id="dg-sidebar" class="sidebar dg-sidebar has-secondary-nav">
64
92
  <nav class="sidebar-main-nav">
65
93
  <div class="sidebar-logo">
@@ -68,31 +96,16 @@
68
96
  alt="Swedbank Pay vertical logo" class="logotype-vertical logotype-lg"/>
69
97
  </a>
70
98
  </div>
71
- <!-- {% if site.search.enabled == true %}
72
- <form class="search-container mx-2 my-4 px-3 py-2 d-flex"
73
- method="get" action="{{ site.search.url | relative_url }}">
74
- <input name="q" type="text" id="tipue_search_input"
75
- class="search-input w-100 "
76
- placeholder="Search in documentation"
77
- onfocus="this.placeholder=''"
78
- onblur="this.placeholder='Search in documentation'"
79
- pattern=".{3,}"
80
- title="At least 3 characters">
81
- <button class="mb-0">
82
- <i class="material-icons m-0" aria-hidden="true">search</i>
83
- </button>
84
- </form>
85
- {% endif %} -->
86
99
  <ul id="dx-sidebar-main-nav-ul" class="main-nav-ul">
87
100
  </ul>
88
101
  </nav>
89
102
  </div>
90
- <main class="doc-view">
91
- {% if page.layout != 'front-page' %}
92
- {% include title-header.html %}
93
- {% endif %}
94
- {% include doc-container.html %}
95
- </main>
103
+ <main class="doc-view">
104
+ {% if page.layout != 'front-page' %}
105
+ {% include title-header.html %}
106
+ {% endif %}
107
+ {% include doc-container.html %}
108
+ </main>
96
109
  </div>
97
110
  </div>
98
111
  </div>
data/_sass/accordion-table.scss CHANGED
@@ -8,6 +8,7 @@
8
8
 
9
9
  .show {
10
10
  display: block;
11
+ width: 52rem;
11
12
  }
12
13
 
13
14
  .hide {
@@ -23,13 +24,24 @@
23
24
 
24
25
  .hide {
25
26
  display: block;
27
+ width: 70vw;
26
28
  }
27
29
  }
28
30
 
29
31
  .accordion-header {
32
+ align-items: center;
33
+ background-color: $apricot;
34
+ border: 1px solid rgba(153, 153, 153, 0.5);
35
+ border-radius: 2px;
36
+ max-width: 80rem;
37
+ line-height: 2rem;
38
+ padding: unset;
39
+
30
40
  &:before {
31
- bottom: 1rem;
32
- margin: auto;
41
+ position: absolute;
42
+ top: 50%;
43
+ margin-right: 0.5rem;
44
+ bottom: 50%;
33
45
  transition: .3s;
34
46
  color: $brown;
35
47
  }
@@ -61,29 +73,11 @@
61
73
 
62
74
  tbody {
63
75
  font-size: 0.875rem;
64
-
76
+
65
77
  tr:nth-child(odd) {
66
78
  background-color: #F9F8F6;
67
79
  }
68
-
69
- tr {
70
- td:not(:last-child) {
71
- font-family: $mono;
72
-
73
- code {
74
- border: none;
75
- background-color: transparent;
76
- padding: 0;
77
- }
78
- }
79
-
80
- td:not(:last-child):not(:nth-last-child(2)) {
81
- code {
82
- font-weight: 700;
83
- }
84
- }
85
- }
86
-
80
+
87
81
  tr {
88
82
  &:hover {
89
83
  background-color: $apricot;
@@ -93,4 +87,4 @@
93
87
  }
94
88
  }
95
89
  }
96
- }
90
+ }
data/_sass/fonts.scss CHANGED
@@ -1,2 +1,3 @@
1
- $headline: "Swedbank Headline", "Arial", sans-serif;
2
- $mono: "Akkurat Mono", monospace;
1
+ $font_headline: "Swedbank Headline", "Arial", sans-serif;
2
+ $font_mono: "Akkurat Mono", monospace;
3
+ $font_body: "Arial", sans-serif;
data/_sass/front-page.scss CHANGED
@@ -79,7 +79,7 @@ $front-page-max-width: $breakpoint-lg;
79
79
 
80
80
  h3 {
81
81
  color: $brown;
82
- font-family: $headline;
82
+ font-family: $font_headline;
83
83
  margin-bottom: 2rem;
84
84
  font-size: 2.5rem;
85
85
  line-height: 3.5rem;
@@ -97,7 +97,7 @@ $front-page-max-width: $breakpoint-lg;
97
97
  }
98
98
 
99
99
  .front-page-hero-name {
100
- font-family: $mono;
100
+ font-family: $font_mono;
101
101
  font-weight: bold;
102
102
  font-size: 2.5rem;
103
103
  color: $yellow;
@@ -111,13 +111,13 @@ $front-page-max-width: $breakpoint-lg;
111
111
 
112
112
  .front-page-hero-jumbo {
113
113
  color: $brown;
114
- font-family: $headline;
114
+ font-family: $font_headline;
115
115
  margin-bottom: 2rem;
116
116
  font-size: 3.5rem;
117
117
  }
118
118
 
119
119
  .front-page-hero-lean {
120
- font-family: $mono;
120
+ font-family: $font_mono;
121
121
  }
122
122
 
123
123
 
data/_sass/sidebar.scss CHANGED
@@ -1,3 +1,43 @@
1
+ .sidebar {
2
+ &.dg-sidebar {
3
+ &.visible {
4
+ @media screen and (max-width: $breakpoint-lg) {
5
+ display: block;
6
+ position: absolute;
7
+ margin-top: 80px;
8
+ }
9
+ }
10
+ }
11
+
12
+ @media screen and (max-width: $breakpoint-lg) {
13
+ display: none;
14
+ }
15
+
16
+ &.topbar-open {
17
+ display: block;
18
+ }
19
+
20
+ .sidebar-main-nav {
21
+ @media screen and (max-width: $breakpoint-lg) {
22
+ border-top: #ffffff;
23
+
24
+ &:before {
25
+ background-color: #ffffff;
26
+ }
27
+ }
28
+
29
+ .sidebar-logo {
30
+ @media screen and (max-width: $breakpoint-lg) {
31
+ display: none;
32
+ }
33
+ }
34
+
35
+ .main-nav-ul {
36
+ margin-top: 0;
37
+ }
38
+ }
39
+ }
40
+
1
41
  #dg-sidebar {
2
42
  &.sidebar {
3
43
  .nav-ul {
@@ -21,7 +61,7 @@
21
61
 
22
62
  .leaf {
23
63
  &.active {
24
- > a {
64
+ >a {
25
65
  &:hover {
26
66
  &:after {
27
67
  content: none;
data/_sass/swedbank-pay-design-guide-theme.scss CHANGED
@@ -119,13 +119,24 @@ body {
119
119
  .dg-sidebar {
120
120
  border-right: 1px solid $background-gray;
121
121
 
122
+ @media screen and (max-width: $breakpoint-lg){
123
+ position: fixed;
124
+ }
125
+
122
126
  .main-nav-ul {
123
127
  border-bottom: 1px solid $background-gray;
128
+
129
+ .sidebar-secondary-nav {
130
+ overflow-y: auto;
131
+ }
124
132
  }
125
133
  }
126
134
  }
127
135
 
128
136
  .documentation {
137
+ @media screen and (max-width: $breakpoint-lg){
138
+ overflow-y: auto;
139
+ }
129
140
  > div {
130
141
  &.row {
131
142
  margin-right: 0;
@@ -310,12 +321,51 @@ body {
310
321
  text-align: center;
311
322
  }
312
323
 
324
+ .table {
325
+ .field-level {
326
+ &::before {
327
+ font-family: $font_mono;
328
+ color: $yellow;
329
+ content: '╰─╼';
330
+ }
331
+
332
+ code {
333
+ border: 2px solid $yellow;
334
+ }
335
+ }
336
+
337
+ .field-level-2 {
338
+ margin-left: 2rem;
339
+ }
340
+
341
+ .field-level-3 {
342
+ margin-left: 4rem;
343
+ }
344
+
345
+ .field-level-4 {
346
+ margin-left: 6rem;
347
+ }
348
+
349
+ .field-level-5 {
350
+ margin-left: 8rem;
351
+ }
352
+
353
+ .field-level-6 {
354
+ margin-left: 10rem;
355
+ }
356
+ }
357
+
313
358
  #github {
314
359
  opacity: .5;
315
360
  position: absolute;
316
361
  right: 4rem;
317
362
  top: 4rem;
318
363
  transition: opacity .3s;
364
+
365
+ @media screen and (max-width: $breakpoint-lg){
366
+ top: 6rem;
367
+ }
368
+
319
369
  }
320
370
 
321
371
  a#github:after {
@@ -326,3 +376,41 @@ body {
326
376
  opacity: 1;
327
377
  }
328
378
  }
379
+
380
+ #overlay {
381
+ @media screen and (max-width: $breakpoint-lg) {
382
+ position: fixed; /* Sit on top of the page content */
383
+ display: none; /* Hidden by default */
384
+ width: 100%; /* Full width (cover the whole page) */
385
+ height: 100%; /* Full height (cover the whole page) */
386
+ top: 0;
387
+ left: 0;
388
+ right: 0;
389
+ bottom: 0;
390
+ background-color: rgba(0,0,0,0.5); /* Black background with opacity */
391
+ z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
392
+ }
393
+ }
394
+
395
+ .search-box {
396
+ position: fixed;
397
+ right: 8rem;
398
+ top: 4rem;
399
+
400
+ @media screen and (max-width: $breakpoint-lg) {
401
+ right: 1rem;
402
+ top: 1.5rem;
403
+ z-index: 401;
404
+
405
+ #tipue_search_input {
406
+ display: none;
407
+ }
408
+ }
409
+ }
410
+
411
+ .topbar-logo {
412
+ @media screen and (max-width: $breakpoint-sm) {
413
+ display: block;
414
+ position: absolute;
415
+ }
416
+ }
data/assets/js/swedbank-pay-design-guide-theme.js CHANGED
@@ -1,136 +1,248 @@
1
- /*global mermaid*/
2
- // Initialize Mermaid.js
3
- (function () {
4
- var configObject = {
5
- startOnLoad: true,
6
- securityLevel: "loose",
7
- htmlLabels: true,
8
- sequence: {
9
- useMaxWidth: false,
10
- width: 300
11
- },
12
- flowchart: {
13
- useMaxWidth: false
14
- }
15
- };
16
- mermaid.initialize(configObject);
17
-
18
- mermaid.init(undefined, "code.language-mermaid");
19
- })();
20
-
21
- // Initialize sidebar navigation scroll activation
22
- (function () {
23
- var headings = document.querySelectorAll(".doc-container h2");
24
- const activeSubgroup = document.querySelector("nav.sidebar-nav .nav-subgroup.active");
25
- var tocLinks = [];
26
-
27
- if (activeSubgroup) {
28
- if (activeSubgroup.querySelector(".nav-subgroup.active")) {
29
- tocLinks = activeSubgroup.querySelector(".nav-subgroup.active").querySelectorAll(".nav-leaf");
30
- } else {
31
- tocLinks = activeSubgroup.querySelectorAll(".nav-leaf");
32
- }
33
-
34
- } else {
35
- tocLinks = document.querySelectorAll("nav.sidebar-nav .nav-group.active .nav-leaf");
36
- }
37
-
38
- var getPosition = function (parent, el) {
39
- if (el) {
40
- var parentRect = parent.getBoundingClientRect();
41
- var elemRect = el.getBoundingClientRect();
42
-
43
- return elemRect.top - parentRect.top;
44
- }
45
-
46
- return null;
47
- };
48
-
49
- const _handleLeafScrollListener = function () {
50
- if (tocLinks.length > 0) {
51
- const activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
52
- const buffer = document.body.clientHeight * 0.1;
53
- const currentPos = window.pageYOffset + buffer;
54
-
55
- // TODO: Probably a stupid way to compute "how far left can we scroll until
56
- // we reach the bottom of the page", but it seems to work.
57
- const scrollDistanceFromBottom = document.documentElement.scrollHeight
58
- - document.documentElement.scrollTop
59
- - document.body.clientHeight
60
- - buffer;
61
-
62
-
63
- activeLeaf && !activeLeaf.classList.contains("nav-subgroup-leaf") && activeLeaf.classList.remove("active");
64
-
65
-
66
- if (scrollDistanceFromBottom > 0) {
67
- const scrollNumber = [...headings].filter((heading) => getPosition(document.body, heading) <= currentPos).length - 1;
68
-
69
- scrollNumber >= 0 && tocLinks[parseInt(scrollNumber, 10)].classList.add("active");
70
- } else {
71
- tocLinks[tocLinks.length - 1].classList.add("active");
72
- }
73
-
74
- }
75
- };
76
-
77
- _handleLeafScrollListener();
78
-
79
- window.addEventListener("scroll", _handleLeafScrollListener);
80
-
81
- // Makes sidebar scroll so that the active element is in view
82
- const pathHash = window.location.pathname + window.location.hash;
83
- const sidebarNav = document.querySelector("nav.sidebar-nav");
84
- var activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
85
-
86
- if (!activeLeaf) {
87
- activeLeaf = [...document.querySelectorAll(`nav.sidebar-nav .nav-leaf`)]
88
- .filter((navLeaf) => navLeaf.querySelector(`a[href="${pathHash}"]`))[0];
89
- }
90
-
91
- if (activeLeaf) {
92
- sidebarNav.scrollTop = activeLeaf.offsetTop + activeLeaf.clientHeight - sidebarNav.clientHeight / 2;
93
- };
94
-
95
- })();
96
-
97
- // Simple sidebar functionality while dg.js is being loaded
98
-
99
- function _handleSimpleSidebar (e) {
100
- const target = e.target.parentElement.parentElement;
101
-
102
- if (target.tagName === "LI") {
103
- if (target.classList.contains("active")) {
104
- target.classList.remove("active");
105
- } else {
106
- const sidebar = document.querySelector(".sidebar");
107
- const closeElement = sidebar.querySelector(`.${target.classList[0]}.active`);
108
-
109
- closeElement && closeElement.classList.remove("active");
110
-
111
- target.classList.add("active");
112
- }
113
- }
114
- };
115
-
116
- (function () {
117
- const sidebar = document.querySelector(".sidebar");
118
-
119
- sidebar.addEventListener("click", _handleSimpleSidebar);
120
- })();
121
-
122
- // Remove simple sidebar functionality when proper sidebar functionality is loaded
123
- (function () {
124
- document.addEventListener("DOMContentLoaded", (e) => {
125
- const sidebar = document.querySelector(".sidebar");
126
-
127
- sidebar.removeEventListener("click", _handleSimpleSidebar);
128
- });
129
- })();
130
-
131
- // Initialize Tipue search
132
- (function() {
133
- $(document).ready(function () {
134
- $("#tipue_search_input").tipuesearch();
135
- });
136
- })();
1
+ /*global mermaid*/
2
+ // Initialize Mermaid.js
3
+ (function () {
4
+ var configObject = {
5
+ startOnLoad: true,
6
+ securityLevel: "loose",
7
+ htmlLabels: true,
8
+ sequence: {
9
+ useMaxWidth: false,
10
+ width: 300
11
+ },
12
+ flowchart: {
13
+ useMaxWidth: false
14
+ }
15
+ };
16
+ mermaid.initialize(configObject);
17
+
18
+ mermaid.init(undefined, "code.language-mermaid");
19
+ })();
20
+
21
+ // Initialize sidebar navigation scroll activation
22
+ (function () {
23
+ var headings = document.querySelectorAll(".doc-container h2");
24
+ const activeSubgroup = document.querySelector("nav.sidebar-nav .nav-subgroup.active");
25
+ var tocLinks = [];
26
+
27
+ if (activeSubgroup) {
28
+ if (activeSubgroup.querySelector(".nav-subgroup.active")) {
29
+ tocLinks = activeSubgroup.querySelector(".nav-subgroup.active").querySelectorAll(".nav-leaf");
30
+ } else {
31
+ tocLinks = activeSubgroup.querySelectorAll(".nav-leaf");
32
+ }
33
+
34
+ } else {
35
+ tocLinks = document.querySelectorAll("nav.sidebar-nav .nav-group.active .nav-leaf");
36
+ }
37
+
38
+ var getPosition = function (parent, el) {
39
+ if (el) {
40
+ var parentRect = parent.getBoundingClientRect();
41
+ var elemRect = el.getBoundingClientRect();
42
+
43
+ return elemRect.top - parentRect.top;
44
+ }
45
+
46
+ return null;
47
+ };
48
+
49
+ const _handleLeafScrollListener = function () {
50
+ if (tocLinks.length > 0) {
51
+ const activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
52
+ const buffer = document.body.clientHeight * 0.1;
53
+ const currentPos = window.pageYOffset + buffer;
54
+
55
+ // TODO: Probably a stupid way to compute "how far left can we scroll until
56
+ // we reach the bottom of the page", but it seems to work.
57
+ const scrollDistanceFromBottom = document.documentElement.scrollHeight
58
+ - document.documentElement.scrollTop
59
+ - document.body.clientHeight
60
+ - buffer;
61
+
62
+
63
+ activeLeaf && !activeLeaf.classList.contains("nav-subgroup-leaf") && activeLeaf.classList.remove("active");
64
+
65
+
66
+ if (scrollDistanceFromBottom > 0) {
67
+ const scrollNumber = [...headings].filter((heading) => getPosition(document.body, heading) <= currentPos).length - 1;
68
+
69
+ scrollNumber >= 0 && tocLinks[parseInt(scrollNumber, 10)].classList.add("active");
70
+ } else {
71
+ tocLinks[tocLinks.length - 1].classList.add("active");
72
+ }
73
+
74
+ }
75
+ };
76
+
77
+ _handleLeafScrollListener();
78
+
79
+ window.addEventListener("scroll", _handleLeafScrollListener);
80
+
81
+ // Makes sidebar scroll so that the active element is in view
82
+ const pathHash = window.location.pathname + window.location.hash;
83
+ const sidebarNav = document.querySelector("nav.sidebar-nav");
84
+ var activeLeaf = document.querySelector("nav.sidebar-nav .nav-leaf.active");
85
+
86
+ if (!activeLeaf) {
87
+ activeLeaf = [...document.querySelectorAll(`nav.sidebar-nav .nav-leaf`)]
88
+ .filter((navLeaf) => navLeaf.querySelector(`a[href="${pathHash}"]`))[0];
89
+ }
90
+
91
+ if (activeLeaf) {
92
+ sidebarNav.scrollTop = activeLeaf.offsetTop + activeLeaf.clientHeight - sidebarNav.clientHeight / 2;
93
+ };
94
+
95
+ })();
96
+
97
+ // Simple sidebar functionality while dg.js is being loaded
98
+
99
+ function _handleSimpleSidebar (e) {
100
+ const target = e.target.parentElement.parentElement;
101
+
102
+ if (target.tagName === "LI") {
103
+ if (target.classList.contains("active")) {
104
+ target.classList.remove("active");
105
+ } else {
106
+ const sidebar = document.querySelector(".sidebar");
107
+ const closeElement = sidebar.querySelector(`.${target.classList[0]}.active`);
108
+
109
+ closeElement && closeElement.classList.remove("active");
110
+
111
+ target.classList.add("active");
112
+ }
113
+ }
114
+ };
115
+
116
+ (function () {
117
+ const sidebar = document.querySelector(".sidebar");
118
+
119
+ sidebar.addEventListener("click", _handleSimpleSidebar);
120
+ })();
121
+
122
+ // Remove simple sidebar functionality when proper sidebar functionality is loaded
123
+ (function () {
124
+ document.addEventListener("DOMContentLoaded", function(e) {
125
+ const sidebar = document.querySelector(".sidebar");
126
+
127
+ sidebar.removeEventListener("click", _handleSimpleSidebar);
128
+ });
129
+ })();
130
+
131
+
132
+ // Override the topbar click to show and hide our own sidebar
133
+ (function () {
134
+ const isLeaf = function(currentUrl) {
135
+ const path = window.location.pathname;
136
+ const href = currentUrl || window.location.href;
137
+ const pathIndex = href.indexOf(path);
138
+ const relativeUrl = href.substring(pathIndex);
139
+ const currentSidebarLink = document.querySelector(`.sidebar a[href$="${relativeUrl}"]`);
140
+ return currentSidebarLink !== null && currentSidebarLink !== "undefined"
141
+ ? currentSidebarLink.parentElement.classList.contains("nav-leaf")
142
+ : false;
143
+ };
144
+
145
+ const isHome = function() {
146
+ return window.location.pathname === "/";
147
+ };
148
+
149
+ const controlVisibility = function(currentUrl) {
150
+ const sidebar = document.querySelector(".sidebar");
151
+ const overlay = document.querySelector("#overlay");
152
+ const topbarButton = document.querySelector(".topbar-btn");
153
+ const topbarClose = document.querySelector(".topbar-close");
154
+
155
+
156
+ if (isHome() || isLeaf(currentUrl)) {
157
+ sidebar.classList.remove("visible");
158
+ overlay.style.display = "none";
159
+ topbarButton.style.display = "flex";
160
+ topbarClose.style.display = "none";
161
+ } else {
162
+ sidebar.classList.add("visible");
163
+ }
164
+ };
165
+
166
+ document.addEventListener("DOMContentLoaded", function() {
167
+ const topbarButton = document.querySelector(".topbar-btn");
168
+ const newTopbarButton = topbarButton.cloneNode(true);
169
+ const sidebar = document.querySelector(".sidebar");
170
+ const topbarClose = document.querySelector(".topbar-close");
171
+ const overlay = document.querySelector("#overlay");
172
+ const searchButton = document.querySelector("#search-btn");
173
+
174
+ controlVisibility();
175
+
176
+ if (sidebar.classList.contains("visible")) {
177
+ newTopbarButton.style.display = "none";
178
+ topbarClose.style.display = "flex";
179
+ overlay.style.display = "block";
180
+ }
181
+
182
+ newTopbarButton.addEventListener("click", function(e) {
183
+ if (sidebar.classList.contains("visible")) {
184
+ sidebar.classList.remove("visible");
185
+ newTopbarButton.style.display = "flex";
186
+ topbarClose.style.display = "none";
187
+ overlay.style.display = "none";
188
+
189
+ } else {
190
+ sidebar.classList.add("visible");
191
+ newTopbarButton.style.display = "none";
192
+ topbarClose.style.display = "flex";
193
+ overlay.style.display = "block";
194
+ }
195
+ });
196
+
197
+ topbarClose.addEventListener("click", function(e) {
198
+ if (sidebar.classList.contains("visible")) {
199
+ sidebar.classList.remove("visible");
200
+ newTopbarButton.style.display = "flex";
201
+ topbarClose.style.display = "none";
202
+ overlay.style.display = "none";
203
+ } else {
204
+ sidebar.classList.add("visible");
205
+ newTopbarButton.style.display = "none";
206
+ topbarClose.style.display = "flex";
207
+ overlay.style.display = "block";
208
+ }
209
+ });
210
+
211
+ overlay.addEventListener("click", function(e) {
212
+ if (sidebar.classList.contains("visible")) {
213
+ sidebar.classList.remove("visible");
214
+ newTopbarButton.style.display = "flex";
215
+ topbarClose.style.display = "none";
216
+ overlay.style.display = "none";
217
+ }
218
+ });
219
+
220
+ document.querySelectorAll(".nav-leaf a").forEach(function(a) {
221
+ a.addEventListener("click", function(e) {
222
+ controlVisibility(e.target.href);
223
+ });
224
+ });
225
+
226
+ topbarButton.parentNode.replaceChild(newTopbarButton, topbarButton);
227
+
228
+ searchButton.addEventListener("click", function(e) {
229
+ const searchInput = document.querySelector(".search-input");
230
+
231
+ if (searchInput.style.display !== "block") {
232
+ searchInput.style.display = "block";
233
+ searchInput.focus();
234
+ e.preventDefault();
235
+ }
236
+
237
+ return false;
238
+ });
239
+ });
240
+ })();
241
+
242
+
243
+ // Initialize Tipue search
244
+ (function() {
245
+ $(document).ready(function () {
246
+ $("#tipue_search_input").tipuesearch();
247
+ });
248
+ })();
data/lib/field_tag.rb ADDED
@@ -0,0 +1,50 @@
1
+ # frozen_string_literal: true
2
+
3
+ # Module SwedbankPay
4
+ module SwedbankPay
5
+ # Implements the 'Level' Liquid tag.
6
+ class FieldTag < Liquid::Tag
7
+ def initialize(tag_name, input, _)
8
+ super
9
+
10
+ (@field_name, @level) = parse_input(input)
11
+ end
12
+
13
+ def render(_context)
14
+ return '' if @field_name.nil? || @field_name.empty?
15
+
16
+ level_class = "field-level field-level-#{@level}"
17
+
18
+ "<span class=\"#{level_class}\"><code class=\"language-json highlighter-rouge\">#{@field_name}</code></span>"
19
+ end
20
+
21
+ private
22
+
23
+ def parse_input(input)
24
+ return ['', 1] if input.nil? || input.empty? || input.strip.empty?
25
+ return [input.strip, 1] unless input.include?(',')
26
+
27
+ values = input.split(',')
28
+ field_name = field_name(values)
29
+ level = level(values)
30
+
31
+ [field_name, level]
32
+ end
33
+
34
+ def field_name(values)
35
+ values[0].strip
36
+ end
37
+
38
+ def level(values)
39
+ return 1 if values.size == 1
40
+
41
+ field_level = values[1].strip.to_i
42
+
43
+ field_level.positive? ? field_level : 1
44
+ rescue StandardError
45
+ 1
46
+ end
47
+ end
48
+ end
49
+
50
+ Liquid::Template.register_tag('f', SwedbankPay::FieldTag)
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
- '1.17.0'
7
+ '2.1.0'
8
8
  end
9
9
  end
10
10
  end
data/lib/read_time_filter.rb ADDED
@@ -0,0 +1,40 @@
1
+ # frozen_string_literal: true
2
+
3
+ # Module SwedbankPay
4
+ module SwedbankPay
5
+ # Calculates reading time based on the formula used by Medium
6
+ # https://medium.com/the-story/read-time-and-you-bc2048ab620c
7
+
8
+ # Installation: drop this into your _plugins folder
9
+ # Usage: {{ page.content | read_time }}
10
+ # Note: this requires img tags to be in the form of <img ... />. If you're
11
+ # using this on a post listing page, make sure to markdownify the post content
12
+ # first.
13
+ module ReadTimeFilter
14
+ def read_time(input)
15
+ words_per_minute = 275
16
+ # number of seconds per image to start at, default is 12s
17
+ img_time_max = 12
18
+ # time per image will decrease by 1 for every image, to a minimum
19
+ # of this time, default is 3s
20
+ img_time_min = 3
21
+
22
+ strings = input.split(%r{<img.* />})
23
+
24
+ seconds = (strings.join(' ').split.size.to_f / (words_per_minute / 60))
25
+
26
+ # number of images minus one for correct number of iterations
27
+ (strings.size - 2).times do |i|
28
+ t = (img_time_max - i)
29
+ image_time = [t, img_time_min].max
30
+ seconds += image_time
31
+ end
32
+
33
+ minutes = (seconds / 60).ceil
34
+
35
+ "#{minutes} min read"
36
+ end
37
+ end
38
+ end
39
+
40
+ Liquid::Template.register_filter(SwedbankPay::ReadTimeFilter)
data/lib/regex_capture_filter.rb CHANGED
@@ -2,8 +2,8 @@
2
2
 
3
3
  require 'liquid'
4
4
 
5
- # Jekyll
6
- module Jekyll
5
+ # Module SwedbankPay
6
+ module SwedbankPay
7
7
  # Adds a 'regex_capture' filter to Liquid. Performs a regular expression match
8
8
  # on the provided string and returns the capture as an array. Example usage:
9
9
  # {{ html | regex_capture: 'id="([^"]+)"' | first }}
@@ -15,4 +15,4 @@ module Jekyll
15
15
  end
16
16
  end
17
17
 
18
- Liquid::Template.register_filter(Jekyll::RegexCaptureFilter)
18
+ Liquid::Template.register_filter(SwedbankPay::RegexCaptureFilter)
data/lib/sidebar_html_builder.rb CHANGED
@@ -47,17 +47,27 @@ module SwedbankPay
47
47
  level = is_leaf ? -1 : page.level
48
48
  title_markup = title_markup(page, level, is_leaf)
49
49
  item_class = item_class(page, current_page, level, is_leaf)
50
+ root_class = root_class(page, current_page)
50
51
  level.zero? &&
51
- page.doc.xpath('//*[@id="dg-sidebar"]').first.set_attribute('class', 'sidebar dg-sidebar')
52
+ page.doc.xpath('//*[@id="dg-sidebar"]').first.set_attribute('class', root_class)
52
53
  "<li class=\"#{item_class}\">
53
54
  #{title_markup}
54
- #{item_class === 'main-nav-li' || item_class === 'main-nav-li active' ? "<nav class=\"sidebar-secondary-nav\">
55
+ #{if item_class === 'main-nav-li' || item_class === 'main-nav-li active'
56
+ "<nav class=\"sidebar-secondary-nav\">
55
57
  <header class=\"secondary-nav-header\">#{page.title.section || page.title}</header>
56
58
  #{sub_items_markup}
57
- </nav>" : sub_items_markup}
59
+ </nav>"
60
+ else
61
+ sub_items_markup
62
+ end}
58
63
  </li>"
59
64
  end
60
65
 
66
+ def root_class(page, current_page)
67
+ active = page.active?(current_page)
68
+ active && current_page.path != '/' ? 'sidebar dg-sidebar has-secondary-nav' : 'sidebar dg-sidebar'
69
+ end
70
+
61
71
  def item_class(page, current_page, level, is_leaf)
62
72
  active = page.active?(current_page, is_leaf: is_leaf)
63
73
  item_class = group_class(level)
@@ -86,10 +96,10 @@ module SwedbankPay
86
96
 
87
97
  def title_markup(page, level, is_leaf)
88
98
  lead_title = lead_title(page)
89
- return "<a>
90
- <i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>
91
- #{lead_title}
92
- </a>" if level.zero? && lead_title != 'Home'
99
+ if level.zero? && lead_title != 'Home'
100
+ return "<a href=\"#{page.path}\"><i class=\"material-icons-outlined\" aria-hidden=\"true\">#{page.icon}</i>#{lead_title}</a>"
101
+ end
102
+ return "<a href=\"#{page.path}\">#{page.section || page.title}</a>" if lead_title != 'Home'
93
103
 
94
104
  main_title = main_title(page, is_leaf)
95
105
  home = main_title == 'Home' ? 'disabled' : ''
data/lib/sidebar_path.rb CHANGED
@@ -27,7 +27,7 @@ module SwedbankPay
27
27
 
28
28
  def segment(path)
29
29
  segments = path.sanitized.split('/').reject(&:empty?)
30
- @level = segments.length.zero? ? 0 : segments.length - 1
30
+ @level = segments.empty? ? 0 : segments.length - 1
31
31
  segments
32
32
  end
33
33
 
data/lib/sidebar_renderer.rb CHANGED
@@ -55,7 +55,7 @@ module SwedbankPay
55
55
  begin
56
56
  sidebar_html = @html_builder.build(page)
57
57
 
58
- File.open('_site/sidebar.html', 'w') { |f| f.write(sidebar_html) }
58
+ File.write('_site/sidebar.html', sidebar_html)
59
59
  rescue StandardError => e
60
60
  name = page.filename || page.name || page.to_s
61
61
  SidebarLogger.error("Unable to render sidebar for '#{name}'.")
data/lib/swedbank-pay-design-guide-jekyll-theme.rb CHANGED
@@ -1,4 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  require_relative 'sidebar'
4
+ require_relative 'field_tag'
5
+ require_relative 'read_time_filter'
4
6
  require_relative 'regex_capture_filter'
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: 1.17.0
4
+ version: 2.1.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Swedbank Pay
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2022-06-28 00:00:00.000000000 Z
11
+ date: 2023-02-24 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: faraday
@@ -30,26 +30,6 @@ dependencies:
30
30
  - - "<"
31
31
  - !ruby/object:Gem::Version
32
32
  version: '3'
33
- - !ruby/object:Gem::Dependency
34
- name: html-proofer
35
- requirement: !ruby/object:Gem::Requirement
36
- requirements:
37
- - - "~>"
38
- - !ruby/object:Gem::Version
39
- version: '3'
40
- - - ">="
41
- - !ruby/object:Gem::Version
42
- version: '3.19'
43
- type: :runtime
44
- prerelease: false
45
- version_requirements: !ruby/object:Gem::Requirement
46
- requirements:
47
- - - "~>"
48
- - !ruby/object:Gem::Version
49
- version: '3'
50
- - - ">="
51
- - !ruby/object:Gem::Version
52
- version: '3.19'
53
33
  - !ruby/object:Gem::Dependency
54
34
  name: jekyll
55
35
  requirement: !ruby/object:Gem::Requirement
@@ -172,20 +152,6 @@ dependencies:
172
152
  - - "~>"
173
153
  - !ruby/object:Gem::Version
174
154
  version: '1.11'
175
- - !ruby/object:Gem::Dependency
176
- name: rake
177
- requirement: !ruby/object:Gem::Requirement
178
- requirements:
179
- - - "~>"
180
- - !ruby/object:Gem::Version
181
- version: '13.0'
182
- type: :runtime
183
- prerelease: false
184
- version_requirements: !ruby/object:Gem::Requirement
185
- requirements:
186
- - - "~>"
187
- - !ruby/object:Gem::Version
188
- version: '13.0'
189
155
  - !ruby/object:Gem::Dependency
190
156
  name: sass
191
157
  requirement: !ruby/object:Gem::Requirement
@@ -226,6 +192,166 @@ dependencies:
226
192
  - - ">="
227
193
  - !ruby/object:Gem::Version
228
194
  version: '2.2'
195
+ - !ruby/object:Gem::Dependency
196
+ name: codecov
197
+ requirement: !ruby/object:Gem::Requirement
198
+ requirements:
199
+ - - ">="
200
+ - !ruby/object:Gem::Version
201
+ version: '0'
202
+ type: :development
203
+ prerelease: false
204
+ version_requirements: !ruby/object:Gem::Requirement
205
+ requirements:
206
+ - - ">="
207
+ - !ruby/object:Gem::Version
208
+ version: '0'
209
+ - !ruby/object:Gem::Dependency
210
+ name: html-proofer
211
+ requirement: !ruby/object:Gem::Requirement
212
+ requirements:
213
+ - - ">="
214
+ - !ruby/object:Gem::Version
215
+ version: '3.19'
216
+ - - "<"
217
+ - !ruby/object:Gem::Version
218
+ version: '5'
219
+ type: :development
220
+ prerelease: false
221
+ version_requirements: !ruby/object:Gem::Requirement
222
+ requirements:
223
+ - - ">="
224
+ - !ruby/object:Gem::Version
225
+ version: '3.19'
226
+ - - "<"
227
+ - !ruby/object:Gem::Version
228
+ version: '5'
229
+ - !ruby/object:Gem::Dependency
230
+ name: html-proofer-unrendered-markdown
231
+ requirement: !ruby/object:Gem::Requirement
232
+ requirements:
233
+ - - ">="
234
+ - !ruby/object:Gem::Version
235
+ version: '0.2'
236
+ type: :development
237
+ prerelease: false
238
+ version_requirements: !ruby/object:Gem::Requirement
239
+ requirements:
240
+ - - ">="
241
+ - !ruby/object:Gem::Version
242
+ version: '0.2'
243
+ - !ruby/object:Gem::Dependency
244
+ name: its
245
+ requirement: !ruby/object:Gem::Requirement
246
+ requirements:
247
+ - - ">="
248
+ - !ruby/object:Gem::Version
249
+ version: '0'
250
+ type: :development
251
+ prerelease: false
252
+ version_requirements: !ruby/object:Gem::Requirement
253
+ requirements:
254
+ - - ">="
255
+ - !ruby/object:Gem::Version
256
+ version: '0'
257
+ - !ruby/object:Gem::Dependency
258
+ name: rake
259
+ requirement: !ruby/object:Gem::Requirement
260
+ requirements:
261
+ - - "~>"
262
+ - !ruby/object:Gem::Version
263
+ version: '13.0'
264
+ type: :development
265
+ prerelease: false
266
+ version_requirements: !ruby/object:Gem::Requirement
267
+ requirements:
268
+ - - "~>"
269
+ - !ruby/object:Gem::Version
270
+ version: '13.0'
271
+ - !ruby/object:Gem::Dependency
272
+ name: rspec
273
+ requirement: !ruby/object:Gem::Requirement
274
+ requirements:
275
+ - - ">="
276
+ - !ruby/object:Gem::Version
277
+ version: '0'
278
+ type: :development
279
+ prerelease: false
280
+ version_requirements: !ruby/object:Gem::Requirement
281
+ requirements:
282
+ - - ">="
283
+ - !ruby/object:Gem::Version
284
+ version: '0'
285
+ - !ruby/object:Gem::Dependency
286
+ name: rspec-html-matchers
287
+ requirement: !ruby/object:Gem::Requirement
288
+ requirements:
289
+ - - ">="
290
+ - !ruby/object:Gem::Version
291
+ version: '0'
292
+ type: :development
293
+ prerelease: false
294
+ version_requirements: !ruby/object:Gem::Requirement
295
+ requirements:
296
+ - - ">="
297
+ - !ruby/object:Gem::Version
298
+ version: '0'
299
+ - !ruby/object:Gem::Dependency
300
+ name: rubocop
301
+ requirement: !ruby/object:Gem::Requirement
302
+ requirements:
303
+ - - ">="
304
+ - !ruby/object:Gem::Version
305
+ version: '0'
306
+ type: :development
307
+ prerelease: false
308
+ version_requirements: !ruby/object:Gem::Requirement
309
+ requirements:
310
+ - - ">="
311
+ - !ruby/object:Gem::Version
312
+ version: '0'
313
+ - !ruby/object:Gem::Dependency
314
+ name: rubocop-performance
315
+ requirement: !ruby/object:Gem::Requirement
316
+ requirements:
317
+ - - ">="
318
+ - !ruby/object:Gem::Version
319
+ version: '0'
320
+ type: :development
321
+ prerelease: false
322
+ version_requirements: !ruby/object:Gem::Requirement
323
+ requirements:
324
+ - - ">="
325
+ - !ruby/object:Gem::Version
326
+ version: '0'
327
+ - !ruby/object:Gem::Dependency
328
+ name: rubocop-rake
329
+ requirement: !ruby/object:Gem::Requirement
330
+ requirements:
331
+ - - ">="
332
+ - !ruby/object:Gem::Version
333
+ version: '0'
334
+ type: :development
335
+ prerelease: false
336
+ version_requirements: !ruby/object:Gem::Requirement
337
+ requirements:
338
+ - - ">="
339
+ - !ruby/object:Gem::Version
340
+ version: '0'
341
+ - !ruby/object:Gem::Dependency
342
+ name: rubocop-rspec
343
+ requirement: !ruby/object:Gem::Requirement
344
+ requirements:
345
+ - - ">="
346
+ - !ruby/object:Gem::Version
347
+ version: '0'
348
+ type: :development
349
+ prerelease: false
350
+ version_requirements: !ruby/object:Gem::Requirement
351
+ requirements:
352
+ - - ">="
353
+ - !ruby/object:Gem::Version
354
+ version: '0'
229
355
  description:
230
356
  email:
231
357
  - opensource@swedbankpay.com
@@ -310,7 +436,9 @@ files:
310
436
  - assets/tipuesearch/tipuesearch.min.js
311
437
  - assets/tipuesearch/tipuesearch_content.js
312
438
  - assets/tipuesearch/tipuesearch_set.js
439
+ - lib/field_tag.rb
313
440
  - lib/gem_version.rb
441
+ - lib/read_time_filter.rb
314
442
  - lib/regex_capture_filter.rb
315
443
  - lib/safe_merge.rb
316
444
  - lib/sanitized_filename.rb
@@ -329,7 +457,10 @@ files:
329
457
  homepage: https://github.com/SwedbankPay/swedbank-pay-design-guide-jekyll-theme
330
458
  licenses:
331
459
  - Apache-2.0
332
- metadata: {}
460
+ metadata:
461
+ homepage_uri: https://github.com/SwedbankPay/swedbank-pay-design-guide-jekyll-theme
462
+ source_code_uri: https://github.com/SwedbankPay/swedbank-pay-design-guide-jekyll-theme
463
+ rubygems_mfa_required: 'true'
333
464
  post_install_message:
334
465
  rdoc_options: []
335
466
  require_paths: