@salesforcedevs/docs-components 0.74.3-alpha.0 → 0.74.3-alpha.3

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 (3) hide show
  1. package/package.json +1 -1
  2. package/src/modules/doc/breadcrumbs/breadcrumbs.html +49 -47
  3. package/src/modules/doc/breadcrumbs/breadcrumbs.ts +13 -13
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/docs-components",
3
- "version": "0.74.3-alpha.0",
3
+ "version": "0.74.3-alpha.3",
4
4
  "description": "Docs Lightning web components for DSC",
5
5
  "license": "MIT",
6
6
  "main": "index.js",
package/src/modules/doc/breadcrumbs/breadcrumbs.html CHANGED
@@ -1,58 +1,60 @@
1
1
  <template>
2
2
  <nav role="navigation" aria-label={ariaLabel}>
3
- <template if:false={renderSmallVariant}>
4
- <template if:true={renderFirstCrumb}>
5
- <doc-breadcrumb-item
6
- analytics-event={analyticsEventName}
7
- analytics-base-payload={analyticsBasePayload}
8
- href={firstCrumb.href}
9
- label={firstCrumb.label}
10
- ></doc-breadcrumb-item>
11
- <span class="breadcrumb-item_slash">/</span>
3
+ <template if:true={hasBreadcrumbs}>
4
+ <template if:false={renderSmallVariant}>
5
+ <template if:true={renderFirstCrumb}>
6
+ <doc-breadcrumb-item
7
+ analytics-event={analyticsEventName}
8
+ analytics-base-payload={analyticsBasePayload}
9
+ href={firstCrumb.href}
10
+ label={firstCrumb.label}
11
+ ></doc-breadcrumb-item>
12
+ <span class="breadcrumb-item_slash">/</span>
13
+ </template>
14
+ <template if:true={renderDropdown}>
15
+ <dx-dropdown
16
+ if:true={renderDropdown}
17
+ analytics-event={analyticsEventName}
18
+ analytics-base-payload={analyticsBasePayload}
19
+ options={dropdownOptions}
20
+ open-on-hover
21
+ placement="bottom"
22
+ suppress-gtm-nav-headings
23
+ variant="indented"
24
+ width="fit-content"
25
+ >
26
+ <dx-button
27
+ aria-label="Open Breadcrumbs Dropdown"
28
+ icon-size="large"
29
+ icon-symbol="threedots"
30
+ variant="tertiary"
31
+ ></dx-button>
32
+ </dx-dropdown>
33
+ <span class="breadcrumb-item_slash">/</span>
34
+ </template>
35
+ <template for:each={breadcrumbItems} for:item="breadcrumb">
36
+ <doc-breadcrumb-item
37
+ analytics-event={analyticsEventName}
38
+ analytics-base-payload={analyticsBasePayload}
39
+ href={breadcrumb.href}
40
+ key={breadcrumb.id}
41
+ label={breadcrumb.label}
42
+ ></doc-breadcrumb-item>
43
+ <span class="breadcrumb-item_slash" key={breadcrumb.label}>
44
+ /
45
+ </span>
46
+ </template>
47
+ <doc-breadcrumb-item label={lastCrumb.label}></doc-breadcrumb-item>
12
48
  </template>
13
- <template if:true={renderDropdown}>
14
- <dx-dropdown
15
- if:true={renderDropdown}
16
- analytics-event={analyticsEventName}
17
- analytics-base-payload={analyticsBasePayload}
18
- options={dropdownOptions}
19
- open-on-hover
20
- placement="bottom"
21
- suppress-gtm-nav-headings
22
- variant="indented"
23
- width="fit-content"
24
- >
25
- <dx-button
26
- aria-label="Open Breadcrumbs Dropdown"
27
- icon-size="large"
28
- icon-symbol="threedots"
29
- variant="tertiary"
30
- ></dx-button>
31
- </dx-dropdown>
32
- <span class="breadcrumb-item_slash">/</span>
33
- </template>
34
- <template for:each={breadcrumbItems} for:item="breadcrumb">
49
+ <template if:true={renderSmallVariant}>
35
50
  <doc-breadcrumb-item
36
51
  analytics-event={analyticsEventName}
37
52
  analytics-base-payload={analyticsBasePayload}
38
- href={breadcrumb.href}
39
- key={breadcrumb.id}
40
- label={breadcrumb.label}
53
+ href={lastLinkCrump.href}
54
+ label={lastLinkCrump.label}
55
+ variant="back-arrow"
41
56
  ></doc-breadcrumb-item>
42
- <span class="breadcrumb-item_slash" key={breadcrumb.label}>
43
- /
44
- </span>
45
57
  </template>
46
- <doc-breadcrumb-item label={lastCrumb.label}></doc-breadcrumb-item>
47
- </template>
48
- <template if:true={renderSmallVariant}>
49
- <doc-breadcrumb-item
50
- analytics-event={analyticsEventName}
51
- analytics-base-payload={analyticsBasePayload}
52
- href={lastLinkCrump.href}
53
- label={lastLinkCrump.label}
54
- variant="back-arrow"
55
- ></doc-breadcrumb-item>
56
58
  </template>
57
59
  </nav>
58
60
  </template>
package/src/modules/doc/breadcrumbs/breadcrumbs.ts CHANGED
@@ -68,6 +68,10 @@ export default class Breadcrumbs extends LightningElement {
68
68
  return this.breadcrumbs[this.breadcrumbs.length - 2];
69
69
  }
70
70
 
71
+ private get hasBreadcrumbs(): boolean {
72
+ return this.breadcrumbs.length > 0;
73
+ }
74
+
71
75
  private get hasInternalBreadcrumbs(): boolean {
72
76
  return this.breadcrumbs.length > 2;
73
77
  }
@@ -152,6 +156,10 @@ export default class Breadcrumbs extends LightningElement {
152
156
  }
153
157
 
154
158
  private calculateBreadcrumbsConfigs(): void {
159
+ if (!this.hasBreadcrumbs) {
160
+ return;
161
+ }
162
+
155
163
  this.breadcrumbConfigs = [
156
164
  ...Array(this._breadcrumbs.length - 1).keys()
157
165
  ].map((optionsAmount) => {
@@ -173,23 +181,15 @@ export default class Breadcrumbs extends LightningElement {
173
181
  breadcrumbs: Breadcrumb[],
174
182
  offset: number = 0
175
183
  ): number {
176
- return breadcrumbs.reduce((previousValue, element) => {
177
- if (!element.label) {
178
- console.error(
179
- "Breadcrumb label not found for element: ",
180
- element
181
- );
182
- return previousValue;
183
- }
184
-
185
- return (
184
+ return breadcrumbs.reduce(
185
+ (previousValue, element) =>
186
186
  previousValue +
187
187
  Math.min(
188
188
  element.label.length *
189
189
  (this.pixelPerCharacter || CONSTANTS.pixelPerCharacter),
190
190
  CONSTANTS.minWidthPerCrumb
191
- )
192
- );
193
- }, (breadcrumbs.length - 1) * CONSTANTS.pixelPerCrumbSpace + offset);
191
+ ),
192
+ (breadcrumbs.length - 1) * CONSTANTS.pixelPerCrumbSpace + offset
193
+ );
194
194
  }
195
195
  }