@salesforcedevs/docs-components 1.3.123-alpha.1 → 1.3.123-alpha.2

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 (5) hide show
  1. package/package.json +1 -1
  2. package/src/modules/doc/contentLayout/contentLayout.ts +9 -0
  3. package/src/modules/doc/overview/overview.html +1 -0
  4. package/src/modules/doc/phase/phase.css +7 -2
  5. package/src/modules/doc/phase/phase.ts +7 -4
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/docs-components",
3
- "version": "1.3.123-alpha.1",
3
+ "version": "1.3.123-alpha.2",
4
4
  "description": "Docs Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
package/src/modules/doc/contentLayout/contentLayout.ts CHANGED
@@ -251,6 +251,15 @@ export default class ContentLayout extends LightningElement {
251
251
  docHeaderHeight +
252
252
  docPhaseEl.offsetHeight
253
253
  }px`;
254
+
255
+ docPhaseEl.style.setProperty(
256
+ "--doc-c-phase-padding-right",
257
+ `${
258
+ window.innerWidth >= 1024
259
+ ? "300px"
260
+ : "var(--dx-g-global-header-padding-horizontal)"
261
+ }`
262
+ );
254
263
  }
255
264
  }
256
265
  });
package/src/modules/doc/overview/overview.html CHANGED
@@ -2,6 +2,7 @@
2
2
  <div class="container">
3
3
  <doc-phase
4
4
  if:true={docPhaseInfo}
5
+ max-width-size="large"
5
6
  doc-phase-info={docPhaseInfo}
6
7
  ></doc-phase>
7
8
 
package/src/modules/doc/phase/phase.css CHANGED
@@ -4,6 +4,7 @@
4
4
 
5
5
  :host {
6
6
  --doc-c-phase-top: 0;
7
+ --doc-c-phase-padding-right: var(--dx-g-global-header-padding-horizontal);
7
8
 
8
9
  position: sticky;
9
10
  top: var(--doc-c-phase-top);
@@ -17,12 +18,16 @@
17
18
  flex-direction: column;
18
19
  align-items: center;
19
20
  padding-left: var(--dx-g-global-header-padding-horizontal);
20
- padding-right: var(--dx-g-global-header-padding-horizontal);
21
+ padding-right: var(--doc-c-phase-padding-right);
21
22
  width: 100%;
22
23
  border: none;
23
24
  }
24
25
 
25
26
  .max-width-container {
27
+ max-width: var(--dx-g-doc-content-body-max-width);
28
+ }
29
+
30
+ .doc-phase-max-width-large .max-width-container {
26
31
  max-width: var(--dx-g-doc-content-max-width);
27
32
  }
28
33
 
@@ -36,7 +41,7 @@ dx-button {
36
41
  margin-left: auto;
37
42
  }
38
43
 
39
- /*
44
+ /*
40
45
  NOTE: Here we are assuming that indicator height won't go beyond 1000px.
41
46
 
42
47
  It's one of the suggested way to achieve the expand/collapse animation
package/src/modules/doc/phase/phase.ts CHANGED
@@ -9,6 +9,9 @@ export default class Phase extends LightningElement {
9
9
 
10
10
  isBodyHidden = false;
11
11
 
12
+ @api
13
+ maxWidthSize: "small" | "large" = "small";
14
+
12
15
  get docPhaseTitle() {
13
16
  return this.docPhaseInfo?.title;
14
17
  }
@@ -30,7 +33,8 @@ export default class Phase extends LightningElement {
30
33
  return cx(
31
34
  "doc-status-base",
32
35
  "doc-status-container",
33
- "doc-phase-container"
36
+ "doc-phase-container",
37
+ `doc-phase-max-width-${this.maxWidthSize}`
34
38
  );
35
39
  }
36
40
 
@@ -43,9 +47,8 @@ export default class Phase extends LightningElement {
43
47
  }
44
48
 
45
49
  renderedCallback() {
46
- const phaseBodyContainer = this.template.querySelector(
47
- ".doc-phase-body"
48
- );
50
+ const phaseBodyContainer =
51
+ this.template.querySelector(".doc-phase-body");
49
52
  if (phaseBodyContainer && this.docPhaseInfo) {
50
53
  // eslint-disable-next-line @lwc/lwc/no-inner-html
51
54
  phaseBodyContainer.innerHTML = this.docPhaseInfo.body;