@salesforcedevs/docs-components 1.27.22-banner-2 → 1.27.22-banner-8

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.
Files changed (14) hide show
  1. package/lwc.config.json +1 -1
  2. package/package.json +2 -2
  3. package/src/modules/doc/contentLayout/contentLayout.html +65 -77
  4. package/src/modules/doc/contentLayout/contentLayout.ts +0 -12
  5. package/src/modules/doc/localeBanner/localeBanner.css +233 -0
  6. package/src/modules/doc/{banner/banner.html → localeBanner/localeBanner.html} +19 -5
  7. package/src/modules/doc/{banner/banner.ts → localeBanner/localeBanner.ts} +30 -13
  8. package/src/modules/doc/lwcContentLayout/lwcContentLayout.html +4 -1
  9. package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts +11 -0
  10. package/src/modules/doc/redocReference/redocReference.ts +11 -1
  11. package/src/modules/doc/xmlContent/xmlContent.html +0 -13
  12. package/src/modules/doc/xmlContent/xmlContent.ts +25 -34
  13. package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css +0 -15
  14. package/src/modules/doc/banner/banner.css +0 -211
package/lwc.config.json CHANGED
@@ -6,7 +6,7 @@
6
6
  ],
7
7
  "expose": [
8
8
  "doc/amfReference",
9
- "doc/banner",
9
+ "doc/localeBanner",
10
10
  "doc/breadcrumbs",
11
11
  "doc/componentPlayground",
12
12
  "doc/content",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/docs-components",
3
- "version": "1.27.22-banner-2",
3
+ "version": "1.27.22-banner-8",
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": "c959551dac6b9344903bfe83fc5d38d17bf5989f"
28
+ "gitHead": "7236921a17b79ea334659f323728ef656feac71e"
29
29
  }
package/src/modules/doc/contentLayout/contentLayout.html CHANGED
@@ -1,88 +1,76 @@
1
1
  <template>
2
- <div class={contentClass}>
3
- <template lwc:if={showLocaleBannerAbove}>
4
- <div class="locale-notification-wrapper">
5
- <slot name="locale-banner"></slot>
2
+ <div class="content">
3
+ <dx-sidebar-old
4
+ class="is-sticky left-nav-bar"
5
+ trees={sidebarContent}
6
+ value={sidebarValue}
7
+ header={sidebarHeader}
8
+ ontogglesidebar={onToggleSidebar}
9
+ languages={languages}
10
+ language={language}
11
+ bail-href={bailHref}
12
+ bail-label={bailLabel}
13
+ dev-center={devCenter}
14
+ brand={brand}
15
+ empty-state-message={emptyStateMessage}
16
+ >
17
+ <slot name="sidebar-header" slot="version-picker"></slot>
18
+ </dx-sidebar-old>
19
+ <div class="content-body-doc-phase-container">
20
+ <div class="doc-phase-wrapper">
21
+ <slot name="doc-phase"></slot>
6
22
  </div>
7
- </template>
8
- <div class="content-columns">
9
- <dx-sidebar-old
10
- class="is-sticky left-nav-bar"
11
- trees={sidebarContent}
12
- value={sidebarValue}
13
- header={sidebarHeader}
14
- ontogglesidebar={onToggleSidebar}
15
- languages={languages}
16
- language={language}
17
- bail-href={bailHref}
18
- bail-label={bailLabel}
19
- dev-center={devCenter}
20
- brand={brand}
21
- empty-state-message={emptyStateMessage}
22
- >
23
- <slot name="sidebar-header" slot="version-picker"></slot>
24
- </dx-sidebar-old>
25
- <div class="content-body-doc-phase-container">
26
- <template lwc:if={showLocaleBannerInColumn}>
27
- <div class="locale-notification-wrapper">
28
- <slot name="locale-banner"></slot>
23
+ <div class="version-wrapper">
24
+ <slot name="version-banner"></slot>
25
+ </div>
26
+ <div class="content-body-container">
27
+ <div class="content-body">
28
+ <div class="breadcrumb-row" lwc:if={showBreadcrumbs}>
29
+ <doc-breadcrumbs
30
+ breadcrumbs={breadcrumbs}
31
+ ></doc-breadcrumbs>
29
32
  </div>
30
- </template>
31
- <div class="doc-phase-wrapper">
32
- <slot name="doc-phase"></slot>
33
- </div>
34
- <div class="version-wrapper">
35
- <slot name="version-banner"></slot>
36
- </div>
37
- <div class="content-body-container">
38
- <div class="content-body">
39
- <div class="breadcrumb-row" lwc:if={showBreadcrumbs}>
40
- <doc-breadcrumbs
41
- breadcrumbs={breadcrumbs}
42
- ></doc-breadcrumbs>
43
- </div>
44
- <div class="read" lwc:if={showReadingTime}>
45
- <svg
46
- xmlns="http://www.w3.org/2000/svg"
47
- width="18"
48
- height="18"
49
- viewBox="0 0 52 52"
50
- >
51
- <g fill="#3e3e3c">
52
- <path
53
- d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
54
- ></path>
55
- </g>
56
- </svg>
57
- {readingTime} minute read
58
- </div>
59
- <div class="share-below-read" lwc:if={showSocialShare}>
60
- <doc-social-share
61
- title={shareTitle}
62
- url={shareUrl}
63
- twitter-via={shareTwitterVia}
64
- ></doc-social-share>
65
- </div>
66
- <slot onslotchange={onSlotChange}></slot>
67
- <doc-sprig-survey
68
- lwc:if={shouldDisplayFeedback}
69
- ></doc-sprig-survey>
33
+ <div class="read" lwc:if={showReadingTime}>
34
+ <svg
35
+ xmlns="http://www.w3.org/2000/svg"
36
+ width="18"
37
+ height="18"
38
+ viewBox="0 0 52 52"
39
+ >
40
+ <g fill="#3e3e3c">
41
+ <path
42
+ d="m26 2c-13.2 0-24 10.8-24 24s10.8 24 24 24 24-10.8 24-24-10.8-24-24-24z m0 42c-9.9 0-18-8.1-18-18s8.1-18 18-18 18 8.1 18 18-8.1 18-18 18z m3.4-17.8c-0.3-0.3-0.4-0.7-0.4-1.1v-9.6c0-0.8-0.7-1.5-1.5-1.5h-3c-0.8 0-1.5 0.7-1.5 1.5v12.1c0 0.4 0.2 0.8 0.4 1.1l7.4 7.4c0.6 0.6 1.5 0.6 2.1 0l2.1-2.1c0.6-0.6 0.6-1.5 0-2.1l-5.6-5.7z"
43
+ ></path>
44
+ </g>
45
+ </svg>
46
+ {readingTime} minute read
70
47
  </div>
71
- <div lwc:if={showToc} class="right-nav-bar is-sticky">
72
- <dx-toc
73
- header={tocTitle}
74
- options={tocOptions}
75
- value={tocValue}
76
- ></dx-toc>
48
+ <div class="share-below-read" lwc:if={showSocialShare}>
49
+ <doc-social-share
50
+ title={shareTitle}
51
+ url={shareUrl}
52
+ twitter-via={shareTwitterVia}
53
+ ></doc-social-share>
77
54
  </div>
55
+ <slot onslotchange={onSlotChange}></slot>
56
+ <doc-sprig-survey
57
+ lwc:if={shouldDisplayFeedback}
58
+ ></doc-sprig-survey>
78
59
  </div>
79
- <div lwc:if={showFooter} class="footer-container">
80
- <dx-footer
81
- variant="no-signup"
82
- mfe-config-origin={effectiveFooterOrigin}
83
- ></dx-footer>
60
+ <div lwc:if={showToc} class="right-nav-bar is-sticky">
61
+ <dx-toc
62
+ header={tocTitle}
63
+ options={tocOptions}
64
+ value={tocValue}
65
+ ></dx-toc>
84
66
  </div>
85
67
  </div>
68
+ <div lwc:if={showFooter} class="footer-container">
69
+ <dx-footer
70
+ variant="no-signup"
71
+ mfe-config-origin={effectiveFooterOrigin}
72
+ ></dx-footer>
73
+ </div>
86
74
  </div>
87
75
  </div>
88
76
  </template>
package/src/modules/doc/contentLayout/contentLayout.ts CHANGED
@@ -42,8 +42,6 @@ export default class ContentLayout extends LightningElement {
42
42
  @api brand: any;
43
43
  @api emptyStateMessage?: string;
44
44
 
45
- @api showLocaleBannerAbove = false;
46
-
47
45
  // This is needed for now to prevent failing snapshot tests due to links in the footer
48
46
  @api
49
47
  get showFooter() {
@@ -126,16 +124,6 @@ export default class ContentLayout extends LightningElement {
126
124
  protected contentLoaded: boolean = false;
127
125
  protected sidebarOpen: boolean = false;
128
126
 
129
- get contentClass() {
130
- return this.showLocaleBannerAbove
131
- ? "content content-banner-above"
132
- : "content";
133
- }
134
-
135
- get showLocaleBannerInColumn() {
136
- return !this.showLocaleBannerAbove;
137
- }
138
-
139
127
  get shouldDisplayFeedback() {
140
128
  return this.contentLoaded && typeof Sprig !== "undefined";
141
129
  }
package/src/modules/doc/localeBanner/localeBanner.css ADDED
@@ -0,0 +1,233 @@
1
+ @import "dxHelpers/reset";
2
+ @import "dxHelpers/text";
3
+
4
+ :host {
5
+ display: block;
6
+
7
+ --doc-banner-padding-x-left: var(--dx-g-spacing-2xl);
8
+ --doc-banner-padding-x-right: var(--dx-g-spacing-lg);
9
+ --doc-banner-info-icon-outer-size: var(--dx-g-icon-size-lg-b);
10
+ --doc-banner-info-icon-size: var(--dx-g-icon-size-lg);
11
+ --doc-banner-bar-min-height: calc(
12
+ var(--dx-g-spacing-3xl) - var(--dx-g-spacing-xs)
13
+ );
14
+ --doc-banner-close-wrap-width: calc(
15
+ var(--doc-banner-bar-min-height) + var(--dx-g-spacing-xs)
16
+ );
17
+ --doc-banner-icon-frame-width: calc(
18
+ var(--doc-banner-padding-x-left) +
19
+ var(--doc-banner-info-icon-outer-size) + var(--dx-g-spacing-sm)
20
+ );
21
+ --doc-banner-close-color: var(--dx-g-gray-50);
22
+ --doc-banner-text-vertical-padding: calc(
23
+ (var(--dx-g-spacing-xs) + var(--dx-g-spacing-sm)) / 2
24
+ );
25
+ }
26
+
27
+ :host > div {
28
+ display: flex;
29
+ align-items: flex-start;
30
+ justify-content: space-between;
31
+ width: 100%;
32
+ margin: 0;
33
+ min-height: var(--doc-banner-bar-min-height);
34
+ padding: 0 var(--doc-banner-padding-x-right) 0
35
+ var(--doc-banner-padding-x-left);
36
+ background: var(--dx-g-gray-90);
37
+ box-sizing: border-box;
38
+ }
39
+
40
+ .icon-wrap,
41
+ .main,
42
+ .content,
43
+ .actions,
44
+ .close-wrap {
45
+ display: flex;
46
+ align-items: center;
47
+ }
48
+
49
+ .icon-wrap,
50
+ .close-wrap {
51
+ flex-shrink: 0;
52
+ }
53
+
54
+ .main {
55
+ flex: 1 1 0;
56
+ min-width: 0;
57
+ align-self: flex-start;
58
+ padding: var(--doc-banner-text-vertical-padding) 0;
59
+ gap: var(--dx-g-spacing-md);
60
+ flex-wrap: wrap;
61
+ }
62
+
63
+ .icon-wrap {
64
+ width: calc(
65
+ var(--doc-banner-info-icon-outer-size) + var(--dx-g-spacing-sm)
66
+ );
67
+ min-height: var(--dx-g-spacing-xl);
68
+ align-self: flex-start;
69
+ justify-content: flex-start;
70
+ align-items: flex-start;
71
+ }
72
+
73
+ .icon-wrap dx-icon {
74
+ --dx-c-icon-size: var(--doc-banner-info-icon-size);
75
+
76
+ width: var(--doc-banner-info-icon-size);
77
+ height: var(--doc-banner-info-icon-size);
78
+ margin: calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-xs))
79
+ var(--dx-g-spacing-sm) 0 0;
80
+ }
81
+
82
+ .content {
83
+ flex: 0 1 auto;
84
+ min-width: 0;
85
+ max-width: 100%;
86
+ min-height: var(--dx-g-spacing-xl);
87
+ align-items: flex-start;
88
+ gap: var(--dx-g-spacing-sm);
89
+ }
90
+
91
+ .message {
92
+ margin: 0;
93
+ padding: var(--doc-banner-text-vertical-padding) 0;
94
+ font-size: var(--dx-g-text-sm);
95
+ font-weight: var(--dx-g-font-normal);
96
+ line-height: var(--doc-banner-info-icon-size);
97
+ color: var(--dx-g-gray-30);
98
+ }
99
+
100
+ .message a {
101
+ color: var(--dx-g-cloud-blue-vibrant-50);
102
+ text-decoration: underline;
103
+ }
104
+
105
+ .message a:hover {
106
+ opacity: 0.9;
107
+ }
108
+
109
+ .actions {
110
+ flex-shrink: 0;
111
+ min-height: var(--dx-g-spacing-xl);
112
+ gap: var(--dx-g-spacing-smd);
113
+ flex-wrap: wrap;
114
+ }
115
+
116
+ .primary-btn {
117
+ --dx-c-button-primary-color: var(--dx-g-cloud-blue-vibrant-50);
118
+ --dx-c-button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-40);
119
+ --dx-c-button-vertical-spacing: 0;
120
+ --dx-c-button-horizontal-spacing: var(--dx-g-spacing-md);
121
+
122
+ min-width: min(
123
+ calc(var(--dx-g-spacing-5xl) + var(--dx-g-spacing-3xl)),
124
+ 100%
125
+ );
126
+ height: var(--dx-g-spacing-xl);
127
+ border-radius: var(--dx-g-spacing-xs);
128
+ }
129
+
130
+ .primary-btn::part(container) {
131
+ min-width: min(
132
+ calc(var(--dx-g-spacing-5xl) + var(--dx-g-spacing-3xl)),
133
+ 100%
134
+ );
135
+ width: 100%;
136
+ height: var(--dx-g-spacing-xl);
137
+ padding: 0 var(--dx-g-spacing-md);
138
+ border-radius: var(--dx-g-spacing-xs);
139
+ }
140
+
141
+ .close-wrap {
142
+ align-self: flex-start;
143
+ justify-content: center;
144
+ align-items: center;
145
+ width: var(--doc-banner-close-wrap-width);
146
+ height: var(--doc-banner-bar-min-height);
147
+ padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-sm)
148
+ var(--dx-g-spacing-md);
149
+ margin-left: auto;
150
+ box-sizing: border-box;
151
+ cursor: pointer;
152
+ }
153
+
154
+ .close-wrap .close-btn {
155
+ width: 100%;
156
+ height: 100%;
157
+ display: flex;
158
+ align-items: center;
159
+ justify-content: center;
160
+ pointer-events: none;
161
+ box-sizing: border-box;
162
+ padding: 2.9038px 0 0 2.9038px;
163
+
164
+ --dx-c-icon-size: var(--dx-g-icon-size-sm);
165
+ --dx-c-button-custom-color: var(--doc-banner-close-color);
166
+ --dx-c-button-custom-color-hover: var(--doc-banner-close-color);
167
+ --dx-c-button-custom-background: transparent;
168
+ --dx-c-button-custom-background-hover: rgb(0 0 0 / 5%);
169
+ --dx-c-button-custom-border: 1px solid transparent;
170
+ --dx-c-button-custom-border-hover: 1px solid transparent;
171
+ }
172
+
173
+ @media (max-width: 1279px) {
174
+ :host {
175
+ --doc-banner-padding-x-left: var(--dx-g-spacing-xl);
176
+ --doc-banner-padding-x-right: var(--dx-g-spacing-md);
177
+ }
178
+
179
+ :host > div {
180
+ position: relative;
181
+ max-width: 100%;
182
+ min-height: calc(
183
+ var(--doc-banner-bar-min-height) + var(--dx-g-spacing-xl)
184
+ );
185
+ flex-wrap: wrap;
186
+ align-content: space-between;
187
+ padding: 0 var(--doc-banner-padding-x-right) 0 0;
188
+ }
189
+
190
+ .icon-wrap {
191
+ position: absolute;
192
+ left: 0;
193
+ top: 0;
194
+ bottom: 0;
195
+ width: var(--doc-banner-icon-frame-width);
196
+ min-height: 0;
197
+ padding: 0 0 0 var(--doc-banner-padding-x-left);
198
+ order: 0;
199
+ }
200
+
201
+ .main {
202
+ order: 1;
203
+ flex-wrap: wrap;
204
+ margin-left: var(--doc-banner-icon-frame-width);
205
+ gap: var(--dx-g-spacing-2xs);
206
+ }
207
+
208
+ .content {
209
+ order: 0;
210
+ }
211
+
212
+ .close-wrap {
213
+ order: 2;
214
+ min-height: var(--doc-banner-bar-min-height);
215
+ }
216
+
217
+ .actions {
218
+ order: 1;
219
+ flex: 0 0 100%;
220
+ width: 100%;
221
+ }
222
+ }
223
+
224
+ @media (max-width: 768px) {
225
+ :host {
226
+ --doc-banner-padding-x-left: var(--dx-g-spacing-lg);
227
+ --doc-banner-padding-x-right: var(--dx-g-spacing-sm);
228
+ }
229
+
230
+ :host > div {
231
+ min-height: var(--doc-banner-bar-min-height);
232
+ }
233
+ }
package/src/modules/doc/{banner/banner.html → localeBanner/localeBanner.html} RENAMED
@@ -2,7 +2,12 @@
2
2
  <template lwc:if={showBanner}>
3
3
  <div class="doc-notification-bar" part="container">
4
4
  <div class="icon-wrap" part="icon-wrap">
5
- <dx-icon symbol="info" part="icon" color="#747474"></dx-icon>
5
+ <dx-icon
6
+ symbol="info"
7
+ size="override"
8
+ part="icon"
9
+ color={iconColor}
10
+ ></dx-icon>
6
11
  </div>
7
12
  <div class="main" part="main">
8
13
  <div class="content" part="content">
@@ -45,14 +50,23 @@
45
50
  </div>
46
51
  </div>
47
52
  <template lwc:if={showCloseButton}>
48
- <div class="close-wrap" part="close-wrap">
53
+ <div
54
+ class="close-wrap"
55
+ part="close-wrap"
56
+ role="button"
57
+ tabindex="0"
58
+ aria-label="Close"
59
+ onclick={handleCloseClick}
60
+ onkeydown={handleCloseKeydown}
61
+ >
49
62
  <dx-button
50
63
  class="close-btn"
51
64
  variant="icon-only"
52
65
  icon-symbol="close"
53
- icon-color="#747474"
54
- aria-label="Close"
55
- onclick={handleCloseClick}
66
+ icon-size="override"
67
+ icon-color={iconColor}
68
+ aria-hidden="true"
69
+ tabindex="-1"
56
70
  part="close"
57
71
  ></dx-button>
58
72
  </div>
package/src/modules/doc/{banner/banner.ts → localeBanner/localeBanner.ts} RENAMED
@@ -3,14 +3,17 @@ import { normalizeBoolean } from "dxUtils/normalizers";
3
3
 
4
4
  const LOCALE_BANNER_STORAGE_PREFIX = "dsc-doc-locale-banner-dismissed-";
5
5
 
6
- export default class Banner extends LightningElement {
7
- @api messageText = "";
6
+ const DEFAULT_MESSAGE_TEXT = "This page was machine-translated ";
7
+ const DEFAULT_BUTTON_LABEL = "Switch to English";
8
+
9
+ export default class LocaleBanner extends LightningElement {
10
+ @api messageText = DEFAULT_MESSAGE_TEXT;
8
11
 
9
12
  @api messageLinkUrl = "";
10
13
 
11
14
  @api messageLinkText = "here";
12
15
 
13
- @api buttonLabel = "";
16
+ @api buttonLabel = DEFAULT_BUTTON_LABEL;
14
17
 
15
18
  @api buttonHref = "";
16
19
 
@@ -18,7 +21,7 @@ export default class Banner extends LightningElement {
18
21
 
19
22
  @api dismissStorageKey = "";
20
23
 
21
- _showCloseButton = false;
24
+ _showCloseButton = true;
22
25
 
23
26
  @api
24
27
  get showCloseButton(): boolean {
@@ -34,19 +37,16 @@ export default class Banner extends LightningElement {
34
37
  if (
35
38
  this.dismissStorageKey &&
36
39
  typeof window !== "undefined" &&
37
- window.localStorage
40
+ window.sessionStorage
38
41
  ) {
39
42
  this._dismissed =
40
- window.localStorage.getItem(
43
+ window.sessionStorage.getItem(
41
44
  `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`
42
45
  ) === "true";
43
46
  }
44
47
  }
45
48
 
46
49
  get showBanner(): boolean {
47
- if (!this.dismissStorageKey) {
48
- return true;
49
- }
50
50
  return !this._dismissed;
51
51
  }
52
52
 
@@ -62,13 +62,17 @@ export default class Banner extends LightningElement {
62
62
  return !!this.secondaryLabel;
63
63
  }
64
64
 
65
+ get iconColor(): string {
66
+ return "gray-50";
67
+ }
68
+
65
69
  persistDismissAndHide() {
66
70
  if (
67
71
  this.dismissStorageKey &&
68
72
  typeof window !== "undefined" &&
69
- window.localStorage
73
+ window.sessionStorage
70
74
  ) {
71
- window.localStorage.setItem(
75
+ window.sessionStorage.setItem(
72
76
  `${LOCALE_BANNER_STORAGE_PREFIX}${this.dismissStorageKey}`,
73
77
  "true"
74
78
  );
@@ -79,14 +83,27 @@ export default class Banner extends LightningElement {
79
83
  handleSecondaryClick() {
80
84
  this.persistDismissAndHide();
81
85
  this.dispatchEvent(
82
- new CustomEvent("dismiss", { bubbles: true, composed: true })
86
+ new CustomEvent("dismissLocaleBanner", {
87
+ bubbles: true,
88
+ composed: true
89
+ })
83
90
  );
84
91
  }
85
92
 
86
93
  handleCloseClick() {
87
94
  this.persistDismissAndHide();
88
95
  this.dispatchEvent(
89
- new CustomEvent("dismiss", { bubbles: true, composed: true })
96
+ new CustomEvent("dismissLocaleBanner", {
97
+ bubbles: true,
98
+ composed: true
99
+ })
90
100
  );
91
101
  }
102
+
103
+ handleCloseKeydown(event: KeyboardEvent) {
104
+ if (event.key === "Enter" || event.key === " ") {
105
+ event.preventDefault();
106
+ this.handleCloseClick();
107
+ }
108
+ }
92
109
  }
package/src/modules/doc/lwcContentLayout/lwcContentLayout.html CHANGED
@@ -57,7 +57,10 @@
57
57
  </div>
58
58
  </div>
59
59
  <div lwc:if={showFooter} class="footer-container">
60
- <dx-footer variant="no-signup"></dx-footer>
60
+ <dx-footer
61
+ variant="no-signup"
62
+ mfe-config-origin={effectiveFooterOrigin}
63
+ ></dx-footer>
61
64
  </div>
62
65
  </div>
63
66
  </div>
package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts CHANGED
@@ -1,3 +1,4 @@
1
+ import { api } from "lwc";
1
2
  import ContentLayout from "doc/contentLayout";
2
3
  import cx from "classnames";
3
4
 
@@ -15,6 +16,16 @@ export default class LwcContentLayout extends ContentLayout {
15
16
  private allTabsCache: any[] | null = null;
16
17
  private mainSlotCache: any = null;
17
18
 
19
+ /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
20
+ @api origin: string | null = null;
21
+
22
+ /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
23
+ get effectiveFooterOrigin(): string {
24
+ return (
25
+ this.origin ?? `${window.location.origin}/developer/en-us/wp-json`
26
+ );
27
+ }
28
+
18
29
  private setRNBByTab() {
19
30
  const tabPanelListItem = this.getTabPanelList();
20
31
  this.rnbByTab = tabPanelListItem?.id === RNB_BY_TAB;
package/src/modules/doc/redocReference/redocReference.ts CHANGED
@@ -68,6 +68,16 @@ export default class RedocReference extends LightningElement {
68
68
  this._parentDocPhaseInfo = value;
69
69
  }
70
70
 
71
+ /** Optional origin URL for the footer MFE (e.g. wp-json endpoint). Passed through to dx-footer. */
72
+ @api origin: string | null = null;
73
+
74
+ /** When origin is provided, pass it to the footer; otherwise use dx-footer's default. */
75
+ get effectiveFooterOrigin(): string {
76
+ return (
77
+ this.origin ?? `${window.location.origin}/developer/en-us/wp-json`
78
+ );
79
+ }
80
+
71
81
  connectedCallback(): void {
72
82
  window.addEventListener("scroll", this.handleScrollAndResize);
73
83
  window.addEventListener("resize", this.handleScrollAndResize);
@@ -338,7 +348,7 @@ export default class RedocReference extends LightningElement {
338
348
  // Appends footer component to container
339
349
  private insertFooter(container: HTMLElement): void {
340
350
  const footerElement = createElement("dx-footer", { is: DxFooter });
341
- Object.assign(footerElement, { variant: "no-signup" });
351
+ Object.assign(footerElement, { variant: "no-signup", mfeConfigOrigin: this.effectiveFooterOrigin });
342
352
  container.appendChild(footerElement);
343
353
  }
344
354
 
package/src/modules/doc/xmlContent/xmlContent.html CHANGED
@@ -14,20 +14,7 @@
14
14
  show-footer={enableFooter}
15
15
  reading-time={computedReadingTime}
16
16
  origin={origin}
17
- show-locale-banner-above={showLocaleBannerInSlot}
18
17
  >
19
- <doc-banner
20
- slot="locale-banner"
21
- lwc:if={showLocaleBannerInSlot}
22
- message-text="This text was translated using Salesforce's machine translation system. More details can be found "
23
- message-link-url="https://help.salesforce.com/s/articleView?id=sf.machine_translation.htm"
24
- message-link-text="here"
25
- button-label="Switch to English"
26
- button-href={localeBannerEnUsHref}
27
- secondary-label="Not Now"
28
- show-close-button="true"
29
- dismiss-storage-key={deliverable}
30
- ></doc-banner>
31
18
  <doc-phase
32
19
  slot="version-banner"
33
20
  lwc:if={showVersionBanner}
package/src/modules/doc/xmlContent/xmlContent.ts CHANGED
@@ -254,39 +254,6 @@ export default class DocXmlContent extends LightningElementWithState<{
254
254
  return this.pageReference.deliverable;
255
255
  }
256
256
 
257
- private get showLocaleBannerInSlot(): boolean {
258
- return this.shouldShowLocaleBanner;
259
- }
260
-
261
- private get shouldShowLocaleBanner(): boolean {
262
- if (!this.pageReference?.deliverable) {
263
- return false;
264
- }
265
- if (!this.language || this.language.id === "en-us") {
266
- return false;
267
- }
268
- const hasEnUs = this.availableLanguages?.some(
269
- (lang: DocLanguage) => lang.id === "en-us"
270
- );
271
- return !!hasEnUs;
272
- }
273
-
274
- private get localeBannerEnUsHref(): string {
275
- if (!this.pageReference) {
276
- return "";
277
- }
278
- const enUsLanguage = this.availableLanguages?.find(
279
- (lang: DocLanguage) => lang.id === "en-us"
280
- );
281
- if (!enUsLanguage) {
282
- return "";
283
- }
284
- return this.pageReferenceToString({
285
- ...this.pageReference,
286
- docId: enUsLanguage.url
287
- });
288
- }
289
-
290
257
  private get useOldSidebar(): boolean {
291
258
  // Coveo is enabled and the version is greater than 51 (within the latest 3 versions)
292
259
  // TODO: we need a better fix for version number check
@@ -355,8 +322,10 @@ export default class DocXmlContent extends LightningElementWithState<{
355
322
  };
356
323
  }
357
324
 
358
- private handlePopState = (event: PopStateEvent): void =>
325
+ private handlePopState = (event: PopStateEvent): void => {
359
326
  this.updatePageReference(this.getReferenceFromUrl(), event);
327
+ this.dispatchLocaleChange();
328
+ };
360
329
 
361
330
  handleDismissVersionBanner() {
362
331
  this.showVersionBanner = false;
@@ -631,6 +600,28 @@ export default class DocXmlContent extends LightningElementWithState<{
631
600
  "docs",
632
601
  this.pageReferenceToString(this.pageReference)
633
602
  );
603
+ this.dispatchLocaleChange();
604
+ }
605
+
606
+ private dispatchLocaleChange(): void {
607
+ if (typeof window === "undefined") {
608
+ return;
609
+ }
610
+ const enUs = this.availableLanguages?.find((l) => l.id === "en-us");
611
+ window.dispatchEvent(
612
+ new CustomEvent("doc-locale-changed", {
613
+ detail: {
614
+ locale: this.language?.id,
615
+ enUsPath: enUs
616
+ ? this.pageReferenceToString({
617
+ ...this.pageReference,
618
+ docId: enUs.url
619
+ })
620
+ : "",
621
+ deliverable: this.pageReference?.deliverable || "atlas"
622
+ }
623
+ })
624
+ );
634
625
  }
635
626
 
636
627
  private updateHighlighting(searchParam: string): void {
package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css CHANGED
@@ -86,21 +86,6 @@ dx-toc {
86
86
  position: relative;
87
87
  }
88
88
 
89
- .content-banner-above {
90
- flex-direction: column;
91
- }
92
-
93
- .locale-notification-wrapper {
94
- flex-shrink: 0;
95
- width: 100%;
96
- }
97
-
98
- .content-columns {
99
- display: flex;
100
- flex: 1;
101
- min-width: 0;
102
- }
103
-
104
89
  .content-body-doc-phase-container {
105
90
  flex: 1;
106
91
  border-left: 1px solid var(--dx-g-gray-90);
package/src/modules/doc/banner/banner.css DELETED
@@ -1,211 +0,0 @@
1
- @import "dxHelpers/reset";
2
- @import "dxHelpers/text";
3
-
4
- :host {
5
- display: block;
6
-
7
- --doc-banner-bg: var(--neutral-90, #e5e5e5);
8
- --doc-banner-height: 44px;
9
- --doc-banner-padding-x-left: 40px;
10
- --doc-banner-padding-x-right: var(--dx-g-spacing-lg);
11
- --doc-banner-icon-size: 18.4615px;
12
- --doc-banner-icon-frame-width: calc(
13
- var(--doc-banner-padding-x-left) + var(--doc-banner-icon-size) +
14
- var(--dx-g-spacing-sm)
15
- );
16
- --doc-banner-close-color: #747474;
17
- --doc-banner-primary-bg: #0176d3;
18
- --doc-banner-primary-bg-hover: #0160b3;
19
- }
20
-
21
- .doc-notification-bar {
22
- display: flex;
23
- align-items: flex-start;
24
- justify-content: space-between;
25
- width: 100%;
26
- margin: 0;
27
- min-height: var(--doc-banner-height);
28
- padding: 0 var(--doc-banner-padding-x-right) 0
29
- var(--doc-banner-padding-x-left);
30
- background: var(--doc-banner-bg);
31
- box-sizing: border-box;
32
- }
33
-
34
- .doc-notification-bar .icon-wrap,
35
- .doc-notification-bar .main,
36
- .doc-notification-bar .content,
37
- .doc-notification-bar .actions,
38
- .doc-notification-bar .close-wrap {
39
- display: flex;
40
- align-items: center;
41
- }
42
-
43
- .doc-notification-bar .icon-wrap,
44
- .doc-notification-bar .close-wrap {
45
- flex-shrink: 0;
46
- }
47
-
48
- .doc-notification-bar .main {
49
- flex: 1 1 0;
50
- min-width: 0;
51
- align-self: flex-start;
52
- padding: 6px 0;
53
- gap: var(--dx-g-spacing-md);
54
- }
55
-
56
- .doc-notification-bar .icon-wrap {
57
- width: calc(var(--doc-banner-icon-size) + var(--dx-g-spacing-sm));
58
- min-height: 32px;
59
- align-self: flex-start;
60
- justify-content: flex-start;
61
- align-items: flex-start;
62
- }
63
-
64
- .doc-notification-bar .icon-wrap dx-icon {
65
- --dx-c-icon-size: var(--doc-banner-icon-size);
66
-
67
- width: var(--doc-banner-icon-size);
68
- height: var(--doc-banner-icon-size);
69
- padding: 12px 8px 0 0;
70
- box-sizing: content-box;
71
- }
72
-
73
- .doc-notification-bar .content {
74
- flex: 0 1 auto;
75
- min-width: 0;
76
- max-width: 100%;
77
- min-height: 32px;
78
- align-items: flex-start;
79
- gap: var(--dx-g-spacing-sm);
80
- }
81
-
82
- .doc-notification-bar .message {
83
- margin: 0;
84
- padding: 6px 0;
85
- font-size: 14px;
86
- font-weight: 400;
87
- line-height: 20px;
88
- color: var(--dx-g-neutral-30, #444);
89
- }
90
-
91
- .doc-notification-bar .message a {
92
- color: var(--dx-g-cloud-blue-vibrant-50);
93
- text-decoration: underline;
94
- }
95
-
96
- .doc-notification-bar .message a:hover {
97
- opacity: 0.9;
98
- }
99
-
100
- .doc-notification-bar .actions {
101
- flex-shrink: 0;
102
- min-height: 32px;
103
- gap: var(--dx-g-spacing-smd);
104
- flex-wrap: wrap;
105
- }
106
-
107
- .doc-notification-bar .primary-btn {
108
- --dx-c-button-primary-color: var(--doc-banner-primary-bg);
109
- --dx-c-button-primary-color-hover: var(--doc-banner-primary-bg-hover);
110
- --dx-c-button-vertical-spacing: 0;
111
- --dx-c-button-horizontal-spacing: var(--dx-g-spacing-md);
112
-
113
- min-width: min(144px, 100%);
114
- height: 32px;
115
- border-radius: var(--dx-g-spacing-xs);
116
- }
117
-
118
- .doc-notification-bar .primary-btn::part(container) {
119
- min-width: min(144px, 100%);
120
- width: 100%;
121
- height: 32px;
122
- padding: 0 var(--dx-g-spacing-md);
123
- border-radius: var(--dx-g-spacing-xs);
124
- }
125
-
126
- .doc-notification-bar .secondary-btn {
127
- font-weight: var(--dx-g-font-normal);
128
- }
129
-
130
- .doc-notification-bar .close-wrap {
131
- align-self: flex-start;
132
- justify-content: center;
133
- align-items: center;
134
- width: 52px;
135
- height: 44px;
136
- padding: 12px 8px 18px;
137
- margin-left: auto;
138
- box-sizing: border-box;
139
- }
140
-
141
- .doc-notification-bar .close-wrap .close-btn {
142
- width: 100%;
143
- height: 100%;
144
-
145
- --dx-c-button-custom-color: var(--doc-banner-close-color);
146
- --dx-c-button-custom-color-hover: var(--doc-banner-close-color);
147
- --dx-c-button-custom-background: transparent;
148
- --dx-c-button-custom-background-hover: rgb(0 0 0 / 5%);
149
- --dx-c-button-custom-border: none;
150
- --dx-c-button-custom-border-hover: none;
151
- }
152
-
153
- @media (max-width: 1279px) {
154
- :host {
155
- --doc-banner-padding-x-left: 32px;
156
- --doc-banner-padding-x-right: var(--dx-g-spacing-md);
157
- }
158
-
159
- .doc-notification-bar {
160
- position: relative;
161
- max-width: 100%;
162
- min-height: 78px;
163
- flex-wrap: wrap;
164
- align-content: space-between;
165
- padding: 0 var(--doc-banner-padding-x-right) 0 0;
166
- }
167
-
168
- .doc-notification-bar .icon-wrap {
169
- position: absolute;
170
- left: 0;
171
- top: 0;
172
- bottom: 0;
173
- width: var(--doc-banner-icon-frame-width);
174
- min-height: 0;
175
- padding: 0 0 0 var(--doc-banner-padding-x-left);
176
- order: 0;
177
- }
178
-
179
- .doc-notification-bar .main {
180
- order: 1;
181
- flex-wrap: wrap;
182
- margin-left: var(--doc-banner-icon-frame-width);
183
- gap: var(--dx-g-spacing-2xs);
184
- }
185
-
186
- .doc-notification-bar .content {
187
- order: 0;
188
- }
189
-
190
- .doc-notification-bar .close-wrap {
191
- order: 2;
192
- min-height: 44px;
193
- }
194
-
195
- .doc-notification-bar .actions {
196
- order: 1;
197
- flex: 0 0 100%;
198
- width: 100%;
199
- }
200
- }
201
-
202
- @media (max-width: 768px) {
203
- :host {
204
- --doc-banner-padding-x-left: 24px;
205
- --doc-banner-padding-x-right: var(--dx-g-spacing-sm);
206
- }
207
-
208
- .doc-notification-bar {
209
- min-height: 44px;
210
- }
211
- }