@salesforcedevs/docs-components 1.27.21 → 1.27.22-banner
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/lwc.config.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/docs-components",
|
|
3
|
-
"version": "1.27.
|
|
3
|
+
"version": "1.27.22-banner",
|
|
4
4
|
"description": "Docs Lightning web components for DSC",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "index.js",
|
|
@@ -25,5 +25,5 @@
|
|
|
25
25
|
"@types/lodash.orderby": "4.6.9",
|
|
26
26
|
"@types/lodash.uniqby": "4.7.9"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "c75e59bd77c2c61b628eb54068cd366f486bd6da"
|
|
29
29
|
}
|
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
@import "dxHelpers/reset";
|
|
2
|
+
@import "dxHelpers/text";
|
|
3
|
+
|
|
4
|
+
:host {
|
|
5
|
+
--doc-banner-bg: var(--neutral-90, #e5e5e5);
|
|
6
|
+
--doc-banner-height: 44px;
|
|
7
|
+
--doc-banner-padding-x-left: 40px;
|
|
8
|
+
--doc-banner-padding-x-right: 24px;
|
|
9
|
+
--doc-banner-icon-size: 20px;
|
|
10
|
+
--doc-banner-close-icon-size: 14px;
|
|
11
|
+
--doc-banner-close-color: #747474;
|
|
12
|
+
--doc-banner-primary-bg: #0176d3;
|
|
13
|
+
--doc-banner-primary-bg-hover: #0160b3;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.doc-notification-bar {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: space-between;
|
|
20
|
+
width: 100%;
|
|
21
|
+
max-width: 1280px;
|
|
22
|
+
height: var(--doc-banner-height);
|
|
23
|
+
padding-left: var(--doc-banner-padding-x-left);
|
|
24
|
+
padding-right: var(--doc-banner-padding-x-right);
|
|
25
|
+
background: var(--doc-banner-bg);
|
|
26
|
+
box-sizing: border-box;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.doc-notification-bar .icon-wrap,
|
|
30
|
+
.doc-notification-bar .actions,
|
|
31
|
+
.doc-notification-bar .close-wrap {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
flex-shrink: 0;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.doc-notification-bar .icon-wrap {
|
|
38
|
+
width: 28px;
|
|
39
|
+
height: var(--doc-banner-height);
|
|
40
|
+
padding-right: var(--dx-g-spacing-sm);
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.doc-notification-bar .icon-wrap dx-icon {
|
|
44
|
+
--dx-c-icon-size: var(--doc-banner-icon-size);
|
|
45
|
+
|
|
46
|
+
width: var(--doc-banner-icon-size);
|
|
47
|
+
height: var(--doc-banner-icon-size);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.doc-notification-bar .content {
|
|
51
|
+
flex: 1;
|
|
52
|
+
min-width: 0;
|
|
53
|
+
max-width: 1136px;
|
|
54
|
+
height: var(--doc-banner-height);
|
|
55
|
+
padding: 6px 0;
|
|
56
|
+
display: flex;
|
|
57
|
+
align-items: center;
|
|
58
|
+
box-sizing: border-box;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.doc-notification-bar .message {
|
|
62
|
+
margin: 0;
|
|
63
|
+
color: var(--dx-g-neutral-30, #444);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.doc-notification-bar .message a {
|
|
67
|
+
color: var(--dx-g-cloud-blue-vibrant-50);
|
|
68
|
+
text-decoration: underline;
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.doc-notification-bar .message a:hover {
|
|
72
|
+
opacity: 0.9;
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
.doc-notification-bar .actions {
|
|
76
|
+
width: 215px;
|
|
77
|
+
height: 32px;
|
|
78
|
+
gap: var(--dx-g-spacing-sm);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.doc-notification-bar .primary-btn {
|
|
82
|
+
--dx-c-button-primary-color: var(--doc-banner-primary-bg);
|
|
83
|
+
--dx-c-button-primary-color-hover: var(--doc-banner-primary-bg-hover);
|
|
84
|
+
--dx-c-button-vertical-spacing: 0;
|
|
85
|
+
--dx-c-button-horizontal-spacing: var(--dx-g-spacing-md);
|
|
86
|
+
|
|
87
|
+
min-width: 144px;
|
|
88
|
+
height: 32px;
|
|
89
|
+
border-radius: 4px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.doc-notification-bar .primary-btn::part(container) {
|
|
93
|
+
min-width: 144px;
|
|
94
|
+
width: 100%;
|
|
95
|
+
height: 32px;
|
|
96
|
+
padding: 0 var(--dx-g-spacing-md);
|
|
97
|
+
border-radius: 4px;
|
|
98
|
+
box-sizing: border-box;
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.doc-notification-bar .close-wrap {
|
|
102
|
+
justify-content: center;
|
|
103
|
+
width: 52px;
|
|
104
|
+
height: var(--doc-banner-height);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
.doc-notification-bar .close {
|
|
108
|
+
display: flex;
|
|
109
|
+
align-items: center;
|
|
110
|
+
justify-content: center;
|
|
111
|
+
width: 100%;
|
|
112
|
+
height: 100%;
|
|
113
|
+
padding: 2.9px;
|
|
114
|
+
margin: 0;
|
|
115
|
+
color: var(--doc-banner-close-color);
|
|
116
|
+
background: none;
|
|
117
|
+
border: none;
|
|
118
|
+
cursor: pointer;
|
|
119
|
+
border-radius: 0;
|
|
120
|
+
box-sizing: border-box;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
.doc-notification-bar .close:hover {
|
|
124
|
+
background: rgb(0 0 0 / 5%);
|
|
125
|
+
}
|
|
126
|
+
|
|
127
|
+
.doc-notification-bar .close svg {
|
|
128
|
+
width: var(--doc-banner-close-icon-size);
|
|
129
|
+
height: var(--doc-banner-close-icon-size);
|
|
130
|
+
flex-shrink: 0;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.doc-notification-bar .close svg path {
|
|
134
|
+
stroke: currentcolor;
|
|
135
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="doc-notification-bar" part="container">
|
|
3
|
+
<div class="icon-wrap" part="icon-wrap">
|
|
4
|
+
<dx-icon symbol="info" part="icon" color="#9E9E9E"></dx-icon>
|
|
5
|
+
</div>
|
|
6
|
+
<div class="content" part="content">
|
|
7
|
+
<p class="message dx-text-body-4" part="message">
|
|
8
|
+
<template lwc:if={messageText}>{messageText}</template>
|
|
9
|
+
<template lwc:if={hasMessageLink}>
|
|
10
|
+
<a
|
|
11
|
+
href={messageLinkUrl}
|
|
12
|
+
target="_blank"
|
|
13
|
+
rel="noopener noreferrer"
|
|
14
|
+
part="message-link"
|
|
15
|
+
>
|
|
16
|
+
{messageLinkText}
|
|
17
|
+
</a>
|
|
18
|
+
</template>
|
|
19
|
+
</p>
|
|
20
|
+
</div>
|
|
21
|
+
<div class="actions" part="actions">
|
|
22
|
+
<template lwc:if={hasPrimaryButton}>
|
|
23
|
+
<dx-button
|
|
24
|
+
class="primary-btn"
|
|
25
|
+
href={buttonHref}
|
|
26
|
+
variant="primary"
|
|
27
|
+
size="small"
|
|
28
|
+
part="button"
|
|
29
|
+
>
|
|
30
|
+
{buttonLabel}
|
|
31
|
+
</dx-button>
|
|
32
|
+
</template>
|
|
33
|
+
<template lwc:if={hasSecondaryAction}>
|
|
34
|
+
<dx-button
|
|
35
|
+
variant="inline"
|
|
36
|
+
onclick={handleSecondaryClick}
|
|
37
|
+
part="secondary"
|
|
38
|
+
>
|
|
39
|
+
{secondaryLabel}
|
|
40
|
+
</dx-button>
|
|
41
|
+
</template>
|
|
42
|
+
</div>
|
|
43
|
+
<template lwc:if={showCloseButton}>
|
|
44
|
+
<div class="close-wrap" part="close-wrap">
|
|
45
|
+
<button
|
|
46
|
+
type="button"
|
|
47
|
+
class="close"
|
|
48
|
+
part="close"
|
|
49
|
+
aria-label="Close"
|
|
50
|
+
onclick={handleCloseClick}
|
|
51
|
+
>
|
|
52
|
+
<svg
|
|
53
|
+
width="14"
|
|
54
|
+
height="14"
|
|
55
|
+
viewBox="0 0 14 14"
|
|
56
|
+
fill="none"
|
|
57
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
58
|
+
aria-hidden="true"
|
|
59
|
+
>
|
|
60
|
+
<path
|
|
61
|
+
d="M1 1L13 13M13 1L1 13"
|
|
62
|
+
stroke-width="2"
|
|
63
|
+
stroke-linecap="round"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
</button>
|
|
67
|
+
</div>
|
|
68
|
+
</template>
|
|
69
|
+
</div>
|
|
70
|
+
</template>
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { LightningElement, api } from "lwc";
|
|
2
|
+
import { normalizeBoolean } from "dxUtils/normalizers";
|
|
3
|
+
|
|
4
|
+
export default class Banner extends LightningElement {
|
|
5
|
+
@api messageText = "";
|
|
6
|
+
|
|
7
|
+
@api messageLinkUrl = "";
|
|
8
|
+
|
|
9
|
+
@api messageLinkText = "here";
|
|
10
|
+
|
|
11
|
+
@api buttonLabel = "";
|
|
12
|
+
|
|
13
|
+
@api buttonHref = "";
|
|
14
|
+
|
|
15
|
+
@api secondaryLabel = "";
|
|
16
|
+
|
|
17
|
+
_showCloseButton = false;
|
|
18
|
+
|
|
19
|
+
@api
|
|
20
|
+
get showCloseButton(): boolean {
|
|
21
|
+
return this._showCloseButton;
|
|
22
|
+
}
|
|
23
|
+
set showCloseButton(value: string | boolean) {
|
|
24
|
+
this._showCloseButton = normalizeBoolean(value);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
get hasMessageLink(): boolean {
|
|
28
|
+
return !!this.messageLinkUrl;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
get hasPrimaryButton(): boolean {
|
|
32
|
+
return !!(this.buttonLabel && this.buttonHref);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
get hasSecondaryAction(): boolean {
|
|
36
|
+
return !!this.secondaryLabel;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
handleSecondaryClick() {
|
|
40
|
+
this.dispatchEvent(
|
|
41
|
+
new CustomEvent("dismiss", { bubbles: true, composed: true })
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
handleCloseClick() {
|
|
46
|
+
this.dispatchEvent(
|
|
47
|
+
new CustomEvent("dismiss", { bubbles: true, composed: true })
|
|
48
|
+
);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
@@ -291,11 +291,7 @@ export default class RedocReference extends LightningElement {
|
|
|
291
291
|
this.insertDocPhase(apiContentDiv, docPhaseInfo);
|
|
292
292
|
}
|
|
293
293
|
|
|
294
|
-
|
|
295
|
-
this.insertSprigSurvey(apiContentDiv);
|
|
296
|
-
}
|
|
297
|
-
|
|
298
|
-
this.insertFooter(apiContentDiv);
|
|
294
|
+
this.appendFooterItems(apiContentDiv);
|
|
299
295
|
|
|
300
296
|
// Wait for footer to be rendered before updating styles
|
|
301
297
|
requestAnimationFrame(() => {
|
|
@@ -358,6 +354,16 @@ export default class RedocReference extends LightningElement {
|
|
|
358
354
|
wrapper.appendChild(feedbackElement);
|
|
359
355
|
}
|
|
360
356
|
|
|
357
|
+
private appendFooterItems(parent: HTMLElement): void {
|
|
358
|
+
const container = document.createElement("div");
|
|
359
|
+
container.className = "appended-footer-container";
|
|
360
|
+
if (typeof Sprig !== "undefined") {
|
|
361
|
+
this.insertSprigSurvey(container);
|
|
362
|
+
}
|
|
363
|
+
this.insertFooter(container);
|
|
364
|
+
parent.appendChild(container);
|
|
365
|
+
}
|
|
366
|
+
|
|
361
367
|
// Adjusts third column bottom position to prevent footer overlap
|
|
362
368
|
private updateRedocThirdColumnStyle(redocContainer: HTMLElement): void {
|
|
363
369
|
const footer = redocContainer.querySelector(
|