@qhealth-design-system/core 1.0.112 → 1.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +4 -0
- package/README.md +2 -2
- package/package.json +1 -1
- package/src/components/data_table/js/global.js +3 -1
- package/src/components/global_alert/css/component.scss +63 -6
- package/src/components/global_alert/html/component.hbs +74 -1
- package/src/components/global_alert/js/global.js +30 -19
package/CHANGELOG.md
CHANGED
package/README.md
CHANGED
|
@@ -41,8 +41,8 @@ When you first clone down the Design System, you automatically get the following
|
|
|
41
41
|
- Hot-reload HTML, CSS and JS
|
|
42
42
|
|
|
43
43
|
### Requirements
|
|
44
|
-
- Node:
|
|
45
|
-
- NPM:
|
|
44
|
+
- Node: v16.20.0
|
|
45
|
+
- NPM: 8.19.4
|
|
46
46
|
|
|
47
47
|
### Local Development
|
|
48
48
|
|
package/package.json
CHANGED
|
@@ -48,8 +48,10 @@
|
|
|
48
48
|
|
|
49
49
|
function getTableData(tableLines = [], tableColumnHeads) {
|
|
50
50
|
let returnArray = [];
|
|
51
|
+
|
|
52
|
+
let tableLength = tableLines.length - 1;
|
|
51
53
|
|
|
52
|
-
for (let i = 0; i <
|
|
54
|
+
for (let i = 0; i < tableLength; i++) {
|
|
53
55
|
let line = tableLines.shift().split(",");
|
|
54
56
|
let obj = {};
|
|
55
57
|
for (let j = 0; j < line.length; j++) {
|
|
@@ -10,21 +10,44 @@
|
|
|
10
10
|
|
|
11
11
|
.qld__global-alert {
|
|
12
12
|
padding:5px 0 5px 0;
|
|
13
|
+
|
|
14
|
+
.container-fluid {
|
|
15
|
+
padding-left: 2rem;
|
|
16
|
+
padding-right: 2rem;
|
|
17
|
+
}
|
|
13
18
|
|
|
14
19
|
&.qld__global-alert--critical {
|
|
15
20
|
background-color: $QLD-color-error;
|
|
16
21
|
color: $QLD-color-system-white;
|
|
17
22
|
font-size:pxToEm(13);
|
|
18
|
-
|
|
23
|
+
& + & {
|
|
24
|
+
border-top: 1px solid #8A1220;
|
|
25
|
+
}
|
|
19
26
|
a {
|
|
27
|
+
text-decoration-line: solid;
|
|
28
|
+
text-decoration-thickness: var(--QLD-underline__thickness-thin);
|
|
29
|
+
text-underline-offset: var(--QLD-underline__offset);
|
|
30
|
+
text-decoration-skip-ink: auto;
|
|
31
|
+
|
|
20
32
|
color: $QLD-color-system-white;
|
|
21
|
-
@include QLD-underline('light','underline','default','noVisited');
|
|
22
33
|
text-decoration-color: $QLD-color-system-white;
|
|
34
|
+
span {
|
|
35
|
+
color: $QLD-color-system-white;
|
|
36
|
+
text-decoration-color: $QLD-color-system-white;
|
|
37
|
+
&:hover,
|
|
38
|
+
&:visited {
|
|
39
|
+
color: $QLD-color-system-white;
|
|
40
|
+
text-decoration-color: $QLD-color-system-white;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
23
44
|
&:hover,
|
|
24
45
|
&:visited{
|
|
25
46
|
text-decoration-color: $QLD-color-system-white;
|
|
47
|
+
text-decoration-thickness: var(--QLD-underline__thickness-thick);
|
|
26
48
|
}
|
|
27
49
|
}
|
|
50
|
+
|
|
28
51
|
svg{
|
|
29
52
|
color: $QLD-color-system-white;
|
|
30
53
|
}
|
|
@@ -38,14 +61,30 @@
|
|
|
38
61
|
background-color: $QLD-color-warning;
|
|
39
62
|
color: $QLD-color-system-grey-text;
|
|
40
63
|
font-size:pxToEm(14);
|
|
41
|
-
|
|
64
|
+
& + & {
|
|
65
|
+
border-top: 1px solid #B38800;
|
|
66
|
+
}
|
|
42
67
|
a {
|
|
68
|
+
text-decoration-line: solid;
|
|
69
|
+
text-decoration-thickness: var(--QLD-underline__thickness-thin);
|
|
70
|
+
text-underline-offset: var(--QLD-underline__offset);
|
|
71
|
+
text-decoration-skip-ink: auto;
|
|
72
|
+
|
|
43
73
|
color: $QLD-color-system-grey-text;
|
|
44
|
-
@include QLD-underline('light','underline','default', 'noVisited');
|
|
45
74
|
text-decoration-color: $QLD-color-system-grey-text;
|
|
75
|
+
span {
|
|
76
|
+
color: $QLD-color-system-grey-text;
|
|
77
|
+
text-decoration-color: $QLD-color-system-grey-text;
|
|
78
|
+
&:hover,
|
|
79
|
+
&:visited {
|
|
80
|
+
color: $QLD-color-system-grey-text;
|
|
81
|
+
text-decoration-color: $QLD-color-system-grey-text;
|
|
82
|
+
}
|
|
83
|
+
}
|
|
46
84
|
&:hover,
|
|
47
85
|
&:visited{
|
|
48
86
|
text-decoration-color: $QLD-color-system-grey-text;
|
|
87
|
+
text-decoration-thickness: var(--QLD-underline__thickness-thick);
|
|
49
88
|
}
|
|
50
89
|
}
|
|
51
90
|
svg{
|
|
@@ -61,14 +100,31 @@
|
|
|
61
100
|
background-color: $QLD-color-general;
|
|
62
101
|
color: $QLD-color-system-grey-text;
|
|
63
102
|
font-size:pxToEm(14);
|
|
64
|
-
|
|
103
|
+
& + & {
|
|
104
|
+
border-top: 1px solid #5c94c0;
|
|
105
|
+
}
|
|
65
106
|
a {
|
|
66
|
-
|
|
107
|
+
text-decoration-line: solid;
|
|
108
|
+
text-decoration-thickness: var(--QLD-underline__thickness-thin);
|
|
109
|
+
text-underline-offset: var(--QLD-underline__offset);
|
|
110
|
+
text-decoration-skip-ink: auto;
|
|
111
|
+
|
|
67
112
|
color: $QLD-color-system-grey-text;
|
|
68
113
|
text-decoration-color: $QLD-color-system-grey-text;
|
|
114
|
+
span {
|
|
115
|
+
color: $QLD-color-system-grey-text;
|
|
116
|
+
text-decoration-color: $QLD-color-system-grey-text;
|
|
117
|
+
&:hover,
|
|
118
|
+
&:visited {
|
|
119
|
+
color: $QLD-color-system-grey-text;
|
|
120
|
+
text-decoration-color: $QLD-color-system-grey-text;
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
69
124
|
&:hover,
|
|
70
125
|
&:visited{
|
|
71
126
|
text-decoration-color: $QLD-color-system-grey-text;
|
|
127
|
+
text-decoration-thickness: var(--QLD-underline__thickness-thick);
|
|
72
128
|
}
|
|
73
129
|
}
|
|
74
130
|
|
|
@@ -126,6 +182,7 @@
|
|
|
126
182
|
&:focus{
|
|
127
183
|
outline: 3px solid $QLD-color-dark-alt-background__shade;
|
|
128
184
|
outline-offset: 2px;
|
|
185
|
+
border-radius: 4px;
|
|
129
186
|
}
|
|
130
187
|
}
|
|
131
188
|
|
|
@@ -32,7 +32,80 @@
|
|
|
32
32
|
</button>
|
|
33
33
|
</div>
|
|
34
34
|
</div>
|
|
35
|
-
|
|
35
|
+
</div>
|
|
36
|
+
</section>
|
|
37
|
+
{{/ifCond}}
|
|
38
|
+
{{#ifCond site.metadata.secondAlertDisplay.value '==' 'true'}}
|
|
39
|
+
<section class="qld__global-alert qld__global-alert--{{site.metadata.secondAlertLevel.value}}">
|
|
40
|
+
<div class="container-fluid">
|
|
41
|
+
<div class="qld__global-alert__main">
|
|
42
|
+
<div class="qld__global-alert__icon">
|
|
43
|
+
{{#ifCond site.metadata.secondAlertLevel.value '==' 'default'}}
|
|
44
|
+
<svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
|
|
45
|
+
{{/ifCond}}
|
|
46
|
+
{{#ifCond site.metadata.secondAlertLevel.value '==' 'critical'}}
|
|
47
|
+
<svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
|
|
48
|
+
{{/ifCond}}
|
|
49
|
+
{{#ifCond site.metadata.secondAlertLevel.value '==' 'general'}}
|
|
50
|
+
<svg aria-label="General Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
|
|
51
|
+
{{/ifCond}}
|
|
52
|
+
</div>
|
|
53
|
+
<div class="qld__global-alert__content">
|
|
54
|
+
{{#if site.metadata.secondAlertMessage.value}}
|
|
55
|
+
<div class="qld__global-alert__message">
|
|
56
|
+
<strong>{{site.metadata.secondAlertTitle.value}}</strong> {{site.metadata.secondAlertMessage.value}}
|
|
57
|
+
</div>
|
|
58
|
+
{{/if}}
|
|
59
|
+
<div class="qld__global-alert__action">
|
|
60
|
+
<a href="{{site.metadata.secondAlertLinkURL.value}}">
|
|
61
|
+
<span>{{site.metadata.secondAlertLinkTitle.value}}</span>
|
|
62
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__arrow-right"></use></svg>
|
|
63
|
+
</a>
|
|
64
|
+
</div>
|
|
65
|
+
</div>
|
|
66
|
+
<div class="qld__global-alert__close">
|
|
67
|
+
<button aria-label="Close alert">
|
|
68
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__close"></use></svg>
|
|
69
|
+
</button>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</section>
|
|
74
|
+
{{/ifCond}}
|
|
75
|
+
{{#ifCond site.metadata.thirdAlertDisplay.value '==' 'true'}}
|
|
76
|
+
<section class="qld__global-alert qld__global-alert--{{site.metadata.thirdAlertLevel.value}}">
|
|
77
|
+
<div class="container-fluid">
|
|
78
|
+
<div class="qld__global-alert__main">
|
|
79
|
+
<div class="qld__global-alert__icon">
|
|
80
|
+
{{#ifCond site.metadata.thirdAlertLevel.value '==' 'default'}}
|
|
81
|
+
<svg aria-label="Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__warning"></use></svg>
|
|
82
|
+
{{/ifCond}}
|
|
83
|
+
{{#ifCond site.metadata.thirdAlertLevel.value '==' 'critical'}}
|
|
84
|
+
<svg aria-label="Critical alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__critical"></use></svg>
|
|
85
|
+
{{/ifCond}}
|
|
86
|
+
{{#ifCond site.metadata.thirdAlertLevel.value '==' 'general'}}
|
|
87
|
+
<svg aria-label="General Alert" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__info"></use></svg>
|
|
88
|
+
{{/ifCond}}
|
|
89
|
+
</div>
|
|
90
|
+
<div class="qld__global-alert__content">
|
|
91
|
+
{{#if site.metadata.thirdAlertMessage.value}}
|
|
92
|
+
<div class="qld__global-alert__message">
|
|
93
|
+
<strong>{{site.metadata.thirdAlertTitle.value}}</strong> {{site.metadata.thirdAlertMessage.value}}
|
|
94
|
+
</div>
|
|
95
|
+
{{/if}}
|
|
96
|
+
<div class="qld__global-alert__action">
|
|
97
|
+
<a href="{{site.metadata.thirdAlertLinkURL.value}}">
|
|
98
|
+
<span>{{site.metadata.thirdAlertLinkTitle.value}}</span>
|
|
99
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--sm"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__arrow-right"></use></svg>
|
|
100
|
+
</a>
|
|
101
|
+
</div>
|
|
102
|
+
</div>
|
|
103
|
+
<div class="qld__global-alert__close">
|
|
104
|
+
<button aria-label="Close alert">
|
|
105
|
+
<svg aria-hidden="true" focusable="false" xmlns="http://www.w3.org/2000/svg" class="qld__icon qld__icon--md"><use href="{{@root.site.metadata.siteDefaultIcons.value}}#qld__icon__close"></use></svg>
|
|
106
|
+
</button>
|
|
107
|
+
</div>
|
|
108
|
+
</div>
|
|
36
109
|
</div>
|
|
37
110
|
</section>
|
|
38
111
|
{{/ifCond}}
|
|
@@ -1,39 +1,50 @@
|
|
|
1
1
|
(function () {
|
|
2
|
-
|
|
2
|
+
"use strict";
|
|
3
3
|
/**
|
|
4
4
|
* @module globalAlert
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
/**
|
|
8
8
|
* Initialise global alert, and add close button event listener
|
|
9
|
-
*
|
|
9
|
+
*
|
|
10
10
|
* @memberof module:globalAlert
|
|
11
11
|
* @instance
|
|
12
12
|
* @private
|
|
13
13
|
*/
|
|
14
14
|
function initGlobalAlert() {
|
|
15
|
-
var alert = document.querySelector(".qld__global-alert");
|
|
16
|
-
|
|
17
|
-
if (alert !== null) {
|
|
18
|
-
var alertContainer = document.querySelector(".qld__global-alert__include");
|
|
19
|
-
var closeButton = document.querySelector(".qld__global-alert__close button");
|
|
20
15
|
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
var alerts = document.getElementsByClassName("qld__global-alert") || [];
|
|
17
|
+
var siteName = document.querySelector(".qld__global-alert__include")?.alertContainer?.getAttribute("data-name");
|
|
18
|
+
var index = 0;
|
|
19
|
+
|
|
20
|
+
for (const alert of alerts) {
|
|
21
|
+
|
|
22
|
+
if (siteName?.length > 0) {
|
|
23
|
+
var alertSeen = QLD.utils.getCookie(`${siteName}_alertSeen_${++index}`); //increment index so the next alert can be checked.
|
|
24
|
+
if (alertSeen) { //if this specific alert is seen and closed, hide it.
|
|
25
|
+
alert.style.maxHeight = "0";
|
|
26
|
+
alert.style.display ="none";
|
|
27
|
+
break; // no need to the rest of the loop, go check the next alert.
|
|
28
|
+
}
|
|
24
29
|
}
|
|
25
|
-
|
|
30
|
+
|
|
31
|
+
let closeButton = alert.querySelector(".qld__global-alert__close button");
|
|
32
|
+
|
|
26
33
|
if (closeButton !== null) {
|
|
27
|
-
closeButton.addEventListener(
|
|
28
|
-
|
|
34
|
+
closeButton.addEventListener(
|
|
35
|
+
"click",
|
|
36
|
+
function () {
|
|
37
|
+
alert.style.maxHeight = "0";
|
|
38
|
+
alert.style.display ="none";
|
|
29
39
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
40
|
+
if (siteName?.length > 0) {
|
|
41
|
+
QLD.utils.setCookie(`${siteName}_alertSeen_${++index}`,"true");
|
|
42
|
+
}
|
|
43
|
+
},
|
|
44
|
+
false
|
|
45
|
+
);
|
|
34
46
|
}
|
|
35
47
|
}
|
|
36
48
|
}
|
|
37
|
-
|
|
38
49
|
initGlobalAlert();
|
|
39
|
-
}()
|
|
50
|
+
})();
|