@salesforcedevs/docs-components 1.3.104-alpha02 → 1.3.104-alpha04
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/package.json +1 -1
- package/src/modules/doc/contentCallout/contentCallout.css +6 -1
- package/src/modules/doc/contentLayout/contentLayout.css +5 -5
- package/src/modules/doc/contentLayout/contentLayout.html +1 -2
- package/src/modules/doc/header/header.html +84 -83
- package/src/modules/doc/header/header.ts +11 -0
- package/src/modules/doc/phase/phase.css +2 -0
- package/src/modules/docHelpers/status/status.css +2 -0
package/package.json
CHANGED
|
@@ -9,26 +9,32 @@
|
|
|
9
9
|
.dx-callout-base,
|
|
10
10
|
.dx-callout-plain {
|
|
11
11
|
background-color: var(--dx-g-gray-95);
|
|
12
|
+
border-color: var(--dx-g-gray-50);
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
.dx-callout-plain {
|
|
16
|
+
border: none;
|
|
15
17
|
margin-bottom: var(--dx-g-text-2xl);
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
.dx-callout-note {
|
|
19
21
|
background-color: var(--dx-g-blue-vibrant-95);
|
|
22
|
+
border-color: var(--dx-g-blue-vibrant-50);
|
|
20
23
|
}
|
|
21
24
|
|
|
22
25
|
.dx-callout-tip {
|
|
23
26
|
background-color: var(--dx-g-green-natural-95);
|
|
27
|
+
border-color: var(--dx-g-green-vibrant-60);
|
|
24
28
|
}
|
|
25
29
|
|
|
26
30
|
.dx-callout-caution {
|
|
27
31
|
background-color: var(--dx-g-red-natural-95);
|
|
32
|
+
border-color: var(--dx-g-red-vibrant-50);
|
|
28
33
|
}
|
|
29
34
|
|
|
30
35
|
.dx-callout-warning {
|
|
31
36
|
background-color: var(--dx-g-red-natural-95);
|
|
37
|
+
border-color: var(--dx-g-red-vibrant-50);
|
|
32
38
|
}
|
|
33
39
|
|
|
34
40
|
.dx-callout-base_section {
|
|
@@ -45,5 +51,4 @@
|
|
|
45
51
|
.dx-callout-base_column {
|
|
46
52
|
display: flex;
|
|
47
53
|
flex-direction: row;
|
|
48
|
-
justify-content: center;
|
|
49
54
|
}
|
|
@@ -44,15 +44,15 @@ dx-toc {
|
|
|
44
44
|
display: flex;
|
|
45
45
|
flex-direction: row;
|
|
46
46
|
justify-content: center;
|
|
47
|
-
|
|
47
|
+
max-width: var(--dx-g-doc-content-max-width);
|
|
48
|
+
margin: auto;
|
|
49
|
+
padding: 0 var(--dx-g-header-padding-horizontal);
|
|
48
50
|
}
|
|
49
51
|
|
|
50
52
|
.content-body {
|
|
51
|
-
margin: var(--dx-g-spacing-sm) var(--dx-
|
|
52
|
-
var(--dx-g-spacing-xl);
|
|
53
|
+
margin: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-xl);
|
|
53
54
|
flex: 1;
|
|
54
55
|
width: 0;
|
|
55
|
-
max-width: var(--dx-g-doc-content-max-width);
|
|
56
56
|
}
|
|
57
57
|
|
|
58
58
|
.is-sticky {
|
|
@@ -62,7 +62,7 @@ dx-toc {
|
|
|
62
62
|
}
|
|
63
63
|
|
|
64
64
|
.right-nav-bar {
|
|
65
|
-
|
|
65
|
+
margin-left: var(--dx-c-content-vertical-spacing);
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
@media screen and (max-width: 1024px) {
|
|
@@ -37,9 +37,8 @@
|
|
|
37
37
|
if:true={shouldDisplayFeedback}
|
|
38
38
|
></doc-sprig-survey>
|
|
39
39
|
</div>
|
|
40
|
-
<div class="right-nav-bar is-sticky">
|
|
40
|
+
<div if:true={showToc} class="right-nav-bar is-sticky">
|
|
41
41
|
<dx-toc
|
|
42
|
-
if:true={showToc}
|
|
43
42
|
title={tocTitle}
|
|
44
43
|
options={tocOptions}
|
|
45
44
|
value={tocValue}
|
|
@@ -1,93 +1,94 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
<
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
<div
|
|
41
|
-
if:true={hasScopedNavItems}
|
|
42
|
-
class="header_l2_group header_l2_group-nav"
|
|
43
|
-
>
|
|
2
|
+
<template if:true={shouldRender}>
|
|
3
|
+
<dx-brand-theme-provider brand={brand}>
|
|
4
|
+
<header class={className}>
|
|
5
|
+
<dx-banner
|
|
6
|
+
if:true={showBanner}
|
|
7
|
+
banner-markup={bannerMarkup}
|
|
8
|
+
></dx-banner>
|
|
9
|
+
<div class="header_l2">
|
|
10
|
+
<div class="header_l2_group header_l2_group-title">
|
|
11
|
+
<a href={headerHref} class="home-link">
|
|
12
|
+
<dx-icon
|
|
13
|
+
class="brand-icon"
|
|
14
|
+
if:true={isValidBrand}
|
|
15
|
+
sprite="salesforcebrand"
|
|
16
|
+
symbol={brand}
|
|
17
|
+
size="xlarge"
|
|
18
|
+
></dx-icon>
|
|
19
|
+
<span class="subtitle dx-text-display-6">
|
|
20
|
+
{subtitle}
|
|
21
|
+
</span>
|
|
22
|
+
</a>
|
|
23
|
+
<dx-dropdown
|
|
24
|
+
if:true={showMobileLanguages}
|
|
25
|
+
class="header_lang-dropdown"
|
|
26
|
+
options={languages}
|
|
27
|
+
small
|
|
28
|
+
value={language}
|
|
29
|
+
value-path={langValuePath}
|
|
30
|
+
onchange={onLangChange}
|
|
31
|
+
>
|
|
32
|
+
<dx-button
|
|
33
|
+
aria-label="Select Language"
|
|
34
|
+
variant="inline"
|
|
35
|
+
icon-size="large"
|
|
36
|
+
icon-symbol="world"
|
|
37
|
+
></dx-button>
|
|
38
|
+
</dx-dropdown>
|
|
39
|
+
</div>
|
|
44
40
|
<div
|
|
45
|
-
|
|
46
|
-
|
|
41
|
+
if:true={hasScopedNavItems}
|
|
42
|
+
class="header_l2_group header_l2_group-nav"
|
|
47
43
|
>
|
|
48
|
-
<
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
44
|
+
<div
|
|
45
|
+
class="header_l2_group-nav_overflow"
|
|
46
|
+
onscroll={onNavScroll}
|
|
47
|
+
>
|
|
48
|
+
<dx-header-nav
|
|
49
|
+
aria-label="Scoped Navigation Bar"
|
|
50
|
+
nav-items={scopedNavItems}
|
|
51
|
+
pathname={pathname}
|
|
52
|
+
></dx-header-nav>
|
|
53
|
+
</div>
|
|
53
54
|
</div>
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
class="header_l2_group header_l2_group-right-ctas"
|
|
58
|
-
>
|
|
59
|
-
<dx-dropdown
|
|
60
|
-
if:true={hasLanguages}
|
|
61
|
-
class="header_lang-dropdown"
|
|
62
|
-
options={languages}
|
|
63
|
-
small
|
|
64
|
-
value-path={langValuePath}
|
|
65
|
-
value={language}
|
|
66
|
-
onchange={onLangChange}
|
|
55
|
+
<div
|
|
56
|
+
if:false={smallMobile}
|
|
57
|
+
class="header_l2_group header_l2_group-right-ctas"
|
|
67
58
|
>
|
|
59
|
+
<dx-dropdown
|
|
60
|
+
if:true={hasLanguages}
|
|
61
|
+
class="header_lang-dropdown"
|
|
62
|
+
options={languages}
|
|
63
|
+
small
|
|
64
|
+
value-path={langValuePath}
|
|
65
|
+
value={language}
|
|
66
|
+
onchange={onLangChange}
|
|
67
|
+
>
|
|
68
|
+
<dx-button
|
|
69
|
+
aria-label="Select Language"
|
|
70
|
+
variant="inline"
|
|
71
|
+
icon-size="small"
|
|
72
|
+
icon-symbol="world"
|
|
73
|
+
>
|
|
74
|
+
{languageLabel}
|
|
75
|
+
</dx-button>
|
|
76
|
+
</dx-dropdown>
|
|
68
77
|
<dx-button
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
78
|
+
if:true={hasBailLink}
|
|
79
|
+
aria-label={bailLabel}
|
|
80
|
+
class="header_bail-link"
|
|
81
|
+
href={bailHref}
|
|
82
|
+
onclick={handleBailClick}
|
|
83
|
+
variant="tertiary"
|
|
84
|
+
icon-symbol="new_window"
|
|
85
|
+
target="_blank"
|
|
73
86
|
>
|
|
74
|
-
{
|
|
87
|
+
{bailLabel}
|
|
75
88
|
</dx-button>
|
|
76
|
-
</
|
|
77
|
-
<dx-button
|
|
78
|
-
if:true={hasBailLink}
|
|
79
|
-
aria-label={bailLabel}
|
|
80
|
-
class="header_bail-link"
|
|
81
|
-
href={bailHref}
|
|
82
|
-
onclick={handleBailClick}
|
|
83
|
-
variant="tertiary"
|
|
84
|
-
icon-symbol="new_window"
|
|
85
|
-
target="_blank"
|
|
86
|
-
>
|
|
87
|
-
{bailLabel}
|
|
88
|
-
</dx-button>
|
|
89
|
+
</div>
|
|
89
90
|
</div>
|
|
90
|
-
</
|
|
91
|
-
</
|
|
92
|
-
</
|
|
91
|
+
</header>
|
|
92
|
+
</dx-brand-theme-provider>
|
|
93
|
+
</template>
|
|
93
94
|
</template>
|
|
@@ -50,6 +50,7 @@ export default class Header extends HeaderBase {
|
|
|
50
50
|
private smallMobileMatchMedia!: MediaQueryList;
|
|
51
51
|
private tablet = false;
|
|
52
52
|
private tabletMatchMedia!: MediaQueryList;
|
|
53
|
+
private shouldRender = true;
|
|
53
54
|
|
|
54
55
|
protected mobileBreakpoint(): string {
|
|
55
56
|
return MOBILE_MATCH;
|
|
@@ -95,6 +96,16 @@ export default class Header extends HeaderBase {
|
|
|
95
96
|
);
|
|
96
97
|
}
|
|
97
98
|
|
|
99
|
+
renderedCallback(): void {
|
|
100
|
+
// remove doc-header from non specific doc pages
|
|
101
|
+
if (
|
|
102
|
+
!window.location.pathname.includes("/docs/") ||
|
|
103
|
+
window.location.pathname === "/docs/apis"
|
|
104
|
+
) {
|
|
105
|
+
this.shouldRender = false;
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
|
|
98
109
|
disconnectedCallback(): void {
|
|
99
110
|
super.disconnectedCallback();
|
|
100
111
|
this.tabletMatchMedia.removeEventListener(
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
padding-left: var(--dx-g-header-padding-horizontal);
|
|
10
10
|
padding-right: var(--dx-g-header-padding-horizontal);
|
|
11
11
|
width: 100%;
|
|
12
|
+
border: none;
|
|
12
13
|
}
|
|
13
14
|
|
|
14
15
|
.max-width-container {
|
|
@@ -36,6 +37,7 @@ dx-button {
|
|
|
36
37
|
*/
|
|
37
38
|
|
|
38
39
|
.doc-phase-body {
|
|
40
|
+
display: block;
|
|
39
41
|
max-height: 1000px;
|
|
40
42
|
overflow: hidden;
|
|
41
43
|
padding-top: var(--dx-g-spacing-smd);
|
|
@@ -4,11 +4,13 @@
|
|
|
4
4
|
}
|
|
5
5
|
|
|
6
6
|
.doc-status-base {
|
|
7
|
+
border-left: 4px solid;
|
|
7
8
|
padding: var(--doc-status-vertical-padding);
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
.doc-status-container {
|
|
11
12
|
background-color: rgb(254, 243, 217);
|
|
13
|
+
border-color: var(--dx-g-yellow-vibrant-80);
|
|
12
14
|
}
|
|
13
15
|
|
|
14
16
|
.doc-status-title {
|