@salesforcedevs/dx-components 1.3.63 → 1.3.66-alpha-030
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 +4 -5
- package/src/modules/dx/mainContentHeader/mainContentHeader.css +21 -1
- package/src/modules/dx/mainContentHeader/mainContentHeader.html +36 -9
- package/src/modules/dx/mainContentHeader/mainContentHeader.ts +35 -1
- package/src/modules/dx/searchResults/coveo.css +32 -31
- package/src/modules/dx/searchResults/searchResults.css +6 -0
- package/src/modules/dx/searchResults/searchResults.ts +13 -0
- package/src/modules/dx/typeBadge/typeBadge.css +1 -32
- package/src/modules/dx/typeBadge/typeBadge.ts +17 -75
- package/src/modules/dxConstants/contentTypes/contentTypes.ts +51 -0
- package/src/modules/dxHelpers/typeBadge/typeBadge.css +31 -0
- package/LICENSE +0 -12
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dx-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.66-alpha-030",
|
|
4
4
|
"description": "DX Lightning web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -10,13 +10,13 @@
|
|
|
10
10
|
"access": "public"
|
|
11
11
|
},
|
|
12
12
|
"dependencies": {
|
|
13
|
-
"@coveo/headless": "^
|
|
13
|
+
"@coveo/headless": "^2.7.1",
|
|
14
14
|
"@floating-ui/dom": "^1.0.4",
|
|
15
15
|
"@sfdocs-internal/wires": "^0.6.3",
|
|
16
16
|
"@types/throttle-debounce": "^5.0.0",
|
|
17
17
|
"@vimeo/player": "^2.16.4",
|
|
18
18
|
"classnames": "^2.2.6",
|
|
19
|
-
"coveo-search-ui": "^2.
|
|
19
|
+
"coveo-search-ui": "^2.10105.0",
|
|
20
20
|
"debounce": "^1.2.0",
|
|
21
21
|
"js-cookie": "^3.0.1",
|
|
22
22
|
"lodash.defaults": "^4.2.0",
|
|
@@ -39,6 +39,5 @@
|
|
|
39
39
|
"@types/vimeo__player": "^2.16.2",
|
|
40
40
|
"eventsourcemock": "^2.0.0",
|
|
41
41
|
"luxon": "^3.1.0"
|
|
42
|
-
}
|
|
43
|
-
"gitHead": "95bd94abb10d1fa353a4e2988a7584209a164545"
|
|
42
|
+
}
|
|
44
43
|
}
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
flex-direction: column;
|
|
18
18
|
justify-content: center;
|
|
19
19
|
align-items: flex-start;
|
|
20
|
-
padding: var(--dx-g-spacing-lg) 0;
|
|
20
|
+
padding: var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-4xl) 0;
|
|
21
21
|
min-height: 460px;
|
|
22
22
|
text-align: left;
|
|
23
23
|
background-position: center;
|
|
@@ -25,6 +25,19 @@
|
|
|
25
25
|
background-repeat: no-repeat;
|
|
26
26
|
}
|
|
27
27
|
|
|
28
|
+
.button-container {
|
|
29
|
+
display: flex;
|
|
30
|
+
gap: var(--dx-g-spacing-md);
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
.secondary-button {
|
|
34
|
+
--dx-c-button-background-color: white;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.light-text > *:not(:last-child) {
|
|
38
|
+
color: white;
|
|
39
|
+
}
|
|
40
|
+
|
|
28
41
|
.image-container {
|
|
29
42
|
display: flex;
|
|
30
43
|
flex-direction: row;
|
|
@@ -54,6 +67,12 @@ dx-button {
|
|
|
54
67
|
margin-top: var(--dx-g-spacing-smd);
|
|
55
68
|
}
|
|
56
69
|
|
|
70
|
+
svg {
|
|
71
|
+
width: 100%;
|
|
72
|
+
position: relative;
|
|
73
|
+
bottom: 60px;
|
|
74
|
+
}
|
|
75
|
+
|
|
57
76
|
@media screen and (max-width: 1024px) {
|
|
58
77
|
.container {
|
|
59
78
|
flex-direction: column;
|
|
@@ -85,6 +104,7 @@ dx-button {
|
|
|
85
104
|
|
|
86
105
|
img.mobile {
|
|
87
106
|
display: block;
|
|
107
|
+
margin-top: var(--dx-g-spacing-3xl);
|
|
88
108
|
}
|
|
89
109
|
}
|
|
90
110
|
|
|
@@ -1,23 +1,50 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="container" style={style}>
|
|
3
|
-
<div class=
|
|
3
|
+
<div class={textStyle}>
|
|
4
4
|
<h1 class="heading dx-text-heading-2">{title}</h1>
|
|
5
5
|
<span class="body dx-text-body-1">{body}</span>
|
|
6
6
|
<span if:true={subtitle} class="subtitle dx-text-heading-4b">
|
|
7
7
|
{subtitle}
|
|
8
8
|
</span>
|
|
9
|
-
<
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
9
|
+
<div class="button-container">
|
|
10
|
+
<dx-button
|
|
11
|
+
onclick={onCtaClick}
|
|
12
|
+
href={ctaHref}
|
|
13
|
+
target={ctaTarget}
|
|
14
|
+
size="large"
|
|
15
|
+
>
|
|
16
|
+
{ctaLabel}
|
|
17
|
+
</dx-button>
|
|
18
|
+
<dx-button
|
|
19
|
+
class="secondary-button"
|
|
20
|
+
if:true={ctaLabelSecondary}
|
|
21
|
+
onclick={onCtaClickSecondary}
|
|
22
|
+
href={ctaHrefSecondary}
|
|
23
|
+
target={ctaTargetSecondary}
|
|
24
|
+
size="large"
|
|
25
|
+
variant="secondary"
|
|
26
|
+
>
|
|
27
|
+
{ctaLabelSecondary}
|
|
28
|
+
</dx-button>
|
|
29
|
+
</div>
|
|
17
30
|
</div>
|
|
18
31
|
<div class="image-container">
|
|
19
32
|
<img class="desktop" src={imgSrc} />
|
|
20
33
|
<img class="mobile" src={imgSrcMobile} />
|
|
21
34
|
</div>
|
|
22
35
|
</div>
|
|
36
|
+
<template if:true={hasSwoop}>
|
|
37
|
+
<svg
|
|
38
|
+
width="500"
|
|
39
|
+
height="80"
|
|
40
|
+
viewBox="0 -40 500 40"
|
|
41
|
+
preserveAspectRatio="none"
|
|
42
|
+
>
|
|
43
|
+
<path
|
|
44
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
45
|
+
d="M 0 0 L 0 -40 C 120 0 400 0 500 -40 L 500 0 Z"
|
|
46
|
+
fill="#FFFFFF"
|
|
47
|
+
></path>
|
|
48
|
+
</svg>
|
|
49
|
+
</template>
|
|
23
50
|
</template>
|
|
@@ -7,16 +7,31 @@ export default class MainContentHeader extends LightningElement {
|
|
|
7
7
|
@api subtitle?: string;
|
|
8
8
|
@api body!: string;
|
|
9
9
|
@api ctaLabel!: string;
|
|
10
|
+
@api ctaLabelSecondary?: string;
|
|
10
11
|
@api ctaHref!: string;
|
|
12
|
+
@api ctaHrefSecondary?: string;
|
|
11
13
|
@api imgSrc!: string;
|
|
12
14
|
@api imgSrcMobile!: string;
|
|
13
15
|
@api ctaTarget?: string | null = null;
|
|
16
|
+
@api ctaTargetSecondary?: string | null = null;
|
|
14
17
|
@api backgroundGradientColor?: string;
|
|
18
|
+
@api backgroundGradientDark: boolean = false;
|
|
19
|
+
@api hasSwoop: boolean = false;
|
|
15
20
|
|
|
16
21
|
private get style() {
|
|
17
22
|
return cx(
|
|
18
23
|
this.backgroundGradientColor &&
|
|
19
|
-
|
|
24
|
+
!this.backgroundGradientDark &&
|
|
25
|
+
`background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #ffff 100%), var(--dx-g-${this.backgroundGradientColor});`,
|
|
26
|
+
this.backgroundGradientDark &&
|
|
27
|
+
`background: linear-gradient(90deg, var(--dx-g-indigo-vibrant-20) 0%, var(--dx-g-indigo-vibrant-30) 100%);`
|
|
28
|
+
);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
private get textStyle() {
|
|
32
|
+
return cx(
|
|
33
|
+
"text-container",
|
|
34
|
+
this.backgroundGradientDark && "light-text"
|
|
20
35
|
);
|
|
21
36
|
}
|
|
22
37
|
|
|
@@ -38,4 +53,23 @@ export default class MainContentHeader extends LightningElement {
|
|
|
38
53
|
});
|
|
39
54
|
}
|
|
40
55
|
}
|
|
56
|
+
|
|
57
|
+
private onCtaClickSecondary(e: Event) {
|
|
58
|
+
if (e.currentTarget) {
|
|
59
|
+
track(e.currentTarget, "custEv_ctaButtonClick", {
|
|
60
|
+
click_text: this.ctaLabelSecondary,
|
|
61
|
+
click_url: this.ctaHrefSecondary,
|
|
62
|
+
element_type: "button",
|
|
63
|
+
element_title: "dx-button",
|
|
64
|
+
content_category: "cta"
|
|
65
|
+
});
|
|
66
|
+
track(e.currentTarget!, "custEv_linkClick", {
|
|
67
|
+
click_text: this.ctaLabelSecondary,
|
|
68
|
+
element_title: "dx-button",
|
|
69
|
+
click_url: this.ctaHrefSecondary,
|
|
70
|
+
element_type: "link",
|
|
71
|
+
content_category: "cta"
|
|
72
|
+
});
|
|
73
|
+
}
|
|
74
|
+
}
|
|
41
75
|
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
/*
|
|
2
2
|
Code generated by scripts/postinstall.js DO NOT EDIT
|
|
3
|
-
|
|
3
|
+
*/
|
|
4
|
+
|
|
5
|
+
/*
|
|
4
6
|
* @param direction vertical or horizontal
|
|
5
7
|
* @param position type of positioning to apply (relative/absolute)
|
|
6
8
|
*/
|
|
@@ -1376,6 +1378,15 @@ Code generated by scripts/postinstall.js DO NOT EDIT
|
|
|
1376
1378
|
.coveo-filetype-salesforce-standard-work-order-item,
|
|
1377
1379
|
.coveo-filetype-salesforce-standard-work-order,
|
|
1378
1380
|
.coveo-filetype-salesforce-standard-work-type,
|
|
1381
|
+
.coveo-filetype-slack,
|
|
1382
|
+
.coveo-icon.filetype.Slackmessage,
|
|
1383
|
+
.coveo-icon.filetype.slackmessage,
|
|
1384
|
+
.coveo-icon.filetype.Slackchannel,
|
|
1385
|
+
.coveo-icon.filetype.slackchannel,
|
|
1386
|
+
.coveo-icon.filetype.Slackfile,
|
|
1387
|
+
.coveo-icon.filetype.slackfile,
|
|
1388
|
+
.coveo-icon.filetype.Slackuser,
|
|
1389
|
+
.coveo-icon.filetype.slackuser,
|
|
1379
1390
|
.coveo-filetype-user,
|
|
1380
1391
|
.coveo-icon.objecttype.People,
|
|
1381
1392
|
.coveo-icon.objecttype.people,
|
|
@@ -1584,21 +1595,6 @@ Code generated by scripts/postinstall.js DO NOT EDIT
|
|
|
1584
1595
|
background-size: 56px 64px;
|
|
1585
1596
|
}
|
|
1586
1597
|
|
|
1587
|
-
.coveo-filetype-slack,
|
|
1588
|
-
.coveo-icon.filetype.Slackmessage,
|
|
1589
|
-
.coveo-icon.filetype.slackmessage,
|
|
1590
|
-
.coveo-icon.filetype.Slackchannel,
|
|
1591
|
-
.coveo-icon.filetype.slackchannel,
|
|
1592
|
-
.coveo-icon.filetype.Slackfile,
|
|
1593
|
-
.coveo-icon.filetype.slackfile,
|
|
1594
|
-
.coveo-icon.filetype.Slackuser,
|
|
1595
|
-
.coveo-icon.filetype.slackuser {
|
|
1596
|
-
display: inline-block;
|
|
1597
|
-
width: 124px;
|
|
1598
|
-
height: 124px;
|
|
1599
|
-
background-size: 124px 124px;
|
|
1600
|
-
}
|
|
1601
|
-
|
|
1602
1598
|
.coveo-filetype-attachment-small,
|
|
1603
1599
|
.coveo-icon.objecttype.coveo-small.Attachment,
|
|
1604
1600
|
.coveo-icon.objecttype.coveo-small.attachment,
|
|
@@ -2124,6 +2120,15 @@ Code generated by scripts/postinstall.js DO NOT EDIT
|
|
|
2124
2120
|
.coveo-filetype-salesforce-standard-work-order-item-small,
|
|
2125
2121
|
.coveo-filetype-salesforce-standard-work-order-small,
|
|
2126
2122
|
.coveo-filetype-salesforce-standard-work-type-small,
|
|
2123
|
+
.coveo-filetype-slack-small,
|
|
2124
|
+
.coveo-icon.filetype.coveo-small.Slackmessage,
|
|
2125
|
+
.coveo-icon.filetype.coveo-small.slackmessage,
|
|
2126
|
+
.coveo-icon.filetype.coveo-small.Slackchannel,
|
|
2127
|
+
.coveo-icon.filetype.coveo-small.slackchannel,
|
|
2128
|
+
.coveo-icon.filetype.coveo-small.Slackfile,
|
|
2129
|
+
.coveo-icon.filetype.coveo-small.slackfile,
|
|
2130
|
+
.coveo-icon.filetype.coveo-small.Slackuser,
|
|
2131
|
+
.coveo-icon.filetype.coveo-small.slackuser,
|
|
2127
2132
|
.coveo-filetype-user-small,
|
|
2128
2133
|
.coveo-icon.objecttype.coveo-small.People,
|
|
2129
2134
|
.coveo-icon.objecttype.coveo-small.people,
|
|
@@ -2332,21 +2337,6 @@ Code generated by scripts/postinstall.js DO NOT EDIT
|
|
|
2332
2337
|
background-size: 28px 32px;
|
|
2333
2338
|
}
|
|
2334
2339
|
|
|
2335
|
-
.coveo-filetype-slack-small,
|
|
2336
|
-
.coveo-icon.filetype.coveo-small.Slackmessage,
|
|
2337
|
-
.coveo-icon.filetype.coveo-small.slackmessage,
|
|
2338
|
-
.coveo-icon.filetype.coveo-small.Slackchannel,
|
|
2339
|
-
.coveo-icon.filetype.coveo-small.slackchannel,
|
|
2340
|
-
.coveo-icon.filetype.coveo-small.Slackfile,
|
|
2341
|
-
.coveo-icon.filetype.coveo-small.slackfile,
|
|
2342
|
-
.coveo-icon.filetype.coveo-small.Slackuser,
|
|
2343
|
-
.coveo-icon.filetype.coveo-small.slackuser {
|
|
2344
|
-
display: inline-block;
|
|
2345
|
-
width: 62px;
|
|
2346
|
-
height: 62px;
|
|
2347
|
-
background-size: 62px 62px;
|
|
2348
|
-
}
|
|
2349
|
-
|
|
2350
2340
|
.coveo-filetype-attachment,
|
|
2351
2341
|
.coveo-icon.objecttype.Attachment,
|
|
2352
2342
|
.coveo-icon.objecttype.attachment,
|
|
@@ -8065,6 +8055,13 @@ select.coveo-dropdown::-ms-expand {
|
|
|
8065
8055
|
* @param $size size of the icon to use
|
|
8066
8056
|
*/
|
|
8067
8057
|
|
|
8058
|
+
@font-face {
|
|
8059
|
+
font-family: 'Lato';
|
|
8060
|
+
src: url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff2'), url('../fonts/lato.woff2'), url('https://static.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('https://staticdev.cloud.coveo.com/searchui/v2.10104/0/fonts/lato.woff'), url('../fonts/lato.woff');
|
|
8061
|
+
font-weight: normal;
|
|
8062
|
+
font-style: normal;
|
|
8063
|
+
}
|
|
8064
|
+
|
|
8068
8065
|
.CoveoSearchInterface {
|
|
8069
8066
|
min-height: 100%;
|
|
8070
8067
|
position: relative;
|
|
@@ -18738,6 +18735,10 @@ button.coveo-user-feedback-banner-explain-why-active {
|
|
|
18738
18735
|
* @param $size size of the icon to use
|
|
18739
18736
|
*/
|
|
18740
18737
|
|
|
18738
|
+
.coveo-user-explanation-modal .coveo-small-close {
|
|
18739
|
+
display: none;
|
|
18740
|
+
}
|
|
18741
|
+
|
|
18741
18742
|
.coveo-user-explanation-modal-explanation-section {
|
|
18742
18743
|
display: flex;
|
|
18743
18744
|
flex-wrap: wrap;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import "dxHelpers/reset";
|
|
2
|
+
@import "dxHelpers/typeBadge";
|
|
2
3
|
@import "./coveo.css";
|
|
3
4
|
|
|
4
5
|
/* stylelint-disable selector-class-pattern */
|
|
@@ -385,3 +386,8 @@ a.CoveoResultLink,
|
|
|
385
386
|
margin: 0 auto;
|
|
386
387
|
width: fit-content;
|
|
387
388
|
}
|
|
389
|
+
|
|
390
|
+
.dx-badge {
|
|
391
|
+
display: block;
|
|
392
|
+
margin-bottom: var(--dx-g-spacing-smd);
|
|
393
|
+
}
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { LightningElement, api, track } from "lwc";
|
|
2
2
|
import type * as CoveoSDK from "coveo-search-ui";
|
|
3
3
|
import { track as trackGTM } from "dxUtils/analytics";
|
|
4
|
+
import { CONTENT_TYPE_LABELS } from "dxConstants/contentTypes";
|
|
5
|
+
import { getContentTypeColorVariables } from "dxUtilsInternal/contentTypes";
|
|
4
6
|
|
|
5
7
|
interface CoveoSearch {
|
|
6
8
|
state: typeof CoveoSDK.state;
|
|
@@ -38,6 +40,7 @@ const resultsTemplatesInnerHtml = `
|
|
|
38
40
|
data-field-publicurl=""
|
|
39
41
|
>
|
|
40
42
|
<div class="dx-result">
|
|
43
|
+
<span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
|
|
41
44
|
<p class="dx-result-title">
|
|
42
45
|
<a
|
|
43
46
|
class="CoveoResultLink"
|
|
@@ -53,6 +56,7 @@ const resultsTemplatesInnerHtml = `
|
|
|
53
56
|
type="text/html"
|
|
54
57
|
>
|
|
55
58
|
<div class="dx-result">
|
|
59
|
+
<span class="CoveoFieldValue" data-field="@content_type" data-helper="badge" data-html-value="true"></span>
|
|
56
60
|
<p class="dx-result-title">
|
|
57
61
|
<a class="CoveoResultLink"></a>
|
|
58
62
|
</p>
|
|
@@ -171,6 +175,15 @@ export default class SearchResults extends LightningElement {
|
|
|
171
175
|
|
|
172
176
|
this.attachListeners(this.root);
|
|
173
177
|
|
|
178
|
+
Coveo.TemplateHelpers.registerTemplateHelper(
|
|
179
|
+
"badge",
|
|
180
|
+
(value: string) => {
|
|
181
|
+
const style = getContentTypeColorVariables(value);
|
|
182
|
+
const label = CONTENT_TYPE_LABELS[value];
|
|
183
|
+
return `<div style="${style}" class="dx-badge"><span>${label}</span></div>`;
|
|
184
|
+
}
|
|
185
|
+
);
|
|
186
|
+
|
|
174
187
|
Coveo.init(this.root);
|
|
175
188
|
}
|
|
176
189
|
|
|
@@ -1,33 +1,2 @@
|
|
|
1
1
|
@import "dxHelpers/reset";
|
|
2
|
-
|
|
3
|
-
.badge {
|
|
4
|
-
--background: var(--sds-g-gray-3);
|
|
5
|
-
--border-radius: var(--dx-g-spacing-smd);
|
|
6
|
-
--color: var(--sds-g-gray-10);
|
|
7
|
-
--height: var(--dx-g-spacing-lg);
|
|
8
|
-
--horizontal-spacing: var(--dx-g-spacing-smd);
|
|
9
|
-
--vertical-spacing: var(--dx-g-spacing-xs);
|
|
10
|
-
|
|
11
|
-
color: var(--dx-c-type-badge-color, var(--color));
|
|
12
|
-
background: var(--dx-c-type-badge-background, var(--background));
|
|
13
|
-
border-radius: var(--border-radius);
|
|
14
|
-
display: flex;
|
|
15
|
-
align-items: center;
|
|
16
|
-
justify-content: center;
|
|
17
|
-
height: var(--height);
|
|
18
|
-
width: min-content;
|
|
19
|
-
text-align: center;
|
|
20
|
-
white-space: nowrap;
|
|
21
|
-
font-family: var(--dx-g-font-sans);
|
|
22
|
-
font-size: 10px;
|
|
23
|
-
font-weight: var(--dx-g-font-bold);
|
|
24
|
-
padding: var(--vertical-spacing) var(--horizontal-spacing);
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.badge.size-small {
|
|
28
|
-
--height: var(--dx-g-spacing-mlg);
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
dx-icon {
|
|
32
|
-
margin-right: var(--dx-g-spacing-sm);
|
|
33
|
-
}
|
|
2
|
+
@import "dxHelpers/typeBadge";
|
|
@@ -5,65 +5,20 @@ import {
|
|
|
5
5
|
Color,
|
|
6
6
|
ContentType,
|
|
7
7
|
IconSprite,
|
|
8
|
+
IconData,
|
|
8
9
|
IconSymbol,
|
|
9
10
|
TypeBadgeSize
|
|
10
11
|
} from "typings/custom";
|
|
11
12
|
import { colorToDxColors, buildStyleColorVariables } from "dxUtils/css";
|
|
12
|
-
import {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
event: "Event",
|
|
22
|
-
website: "Website",
|
|
23
|
-
podcast: "Podcast"
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
type IconData = {
|
|
27
|
-
iconSymbol: IconSymbol;
|
|
28
|
-
iconSprite: IconSprite;
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const contentTypeIcons: {
|
|
32
|
-
[K in ContentType]: IconData;
|
|
33
|
-
} = {
|
|
34
|
-
documentation: {
|
|
35
|
-
iconSprite: "utility",
|
|
36
|
-
iconSymbol: "knowledge_base"
|
|
37
|
-
},
|
|
38
|
-
trailhead: {
|
|
39
|
-
iconSprite: "salesforcebrand",
|
|
40
|
-
iconSymbol: "learning"
|
|
41
|
-
},
|
|
42
|
-
blog: {
|
|
43
|
-
iconSprite: "utility",
|
|
44
|
-
iconSymbol: "comments"
|
|
45
|
-
},
|
|
46
|
-
forum: {
|
|
47
|
-
iconSprite: "general",
|
|
48
|
-
iconSymbol: "question-circle"
|
|
49
|
-
},
|
|
50
|
-
api: {
|
|
51
|
-
iconSprite: "utility",
|
|
52
|
-
iconSymbol: "settings"
|
|
53
|
-
},
|
|
54
|
-
event: {
|
|
55
|
-
iconSprite: "utility",
|
|
56
|
-
iconSymbol: "event"
|
|
57
|
-
},
|
|
58
|
-
website: {
|
|
59
|
-
iconSprite: "utility",
|
|
60
|
-
iconSymbol: "home"
|
|
61
|
-
},
|
|
62
|
-
podcast: {
|
|
63
|
-
iconSprite: "utility",
|
|
64
|
-
iconSymbol: "unmuted"
|
|
65
|
-
}
|
|
66
|
-
};
|
|
13
|
+
import {
|
|
14
|
+
isContentType,
|
|
15
|
+
getContentTypeColorScope,
|
|
16
|
+
getContentTypeColorVariables
|
|
17
|
+
} from "dxUtilsInternal/contentTypes";
|
|
18
|
+
import {
|
|
19
|
+
CONTENT_TYPE_LABELS,
|
|
20
|
+
CONTENT_TYPE_ICONS
|
|
21
|
+
} from "dxConstants/contentTypes";
|
|
67
22
|
|
|
68
23
|
export default class TypeBadge extends LightningElement {
|
|
69
24
|
@api size: TypeBadgeSize = "default";
|
|
@@ -111,39 +66,29 @@ export default class TypeBadge extends LightningElement {
|
|
|
111
66
|
private _iconSymbol?: IconSymbol;
|
|
112
67
|
|
|
113
68
|
private get variantIconData(): IconData | null {
|
|
114
|
-
if (this.variant && this.variant in
|
|
115
|
-
return
|
|
69
|
+
if (this.variant && this.variant in CONTENT_TYPE_ICONS) {
|
|
70
|
+
return CONTENT_TYPE_ICONS[this.variant as ContentType];
|
|
116
71
|
}
|
|
117
72
|
return null;
|
|
118
73
|
}
|
|
119
74
|
|
|
120
75
|
private get variantLabel(): string | null {
|
|
121
76
|
if (this.isContentType) {
|
|
122
|
-
return
|
|
77
|
+
return CONTENT_TYPE_LABELS[this.variant as ContentType];
|
|
123
78
|
}
|
|
124
79
|
return null;
|
|
125
80
|
}
|
|
126
81
|
|
|
127
82
|
private get variantColorScope(): string | null {
|
|
128
|
-
|
|
129
|
-
return "content-type";
|
|
130
|
-
}
|
|
131
|
-
if (this.isBrand) {
|
|
132
|
-
return "brand";
|
|
133
|
-
}
|
|
134
|
-
return null;
|
|
83
|
+
return getContentTypeColorScope(this.variant);
|
|
135
84
|
}
|
|
136
85
|
|
|
137
86
|
private get isContentType(): boolean {
|
|
138
|
-
return
|
|
139
|
-
}
|
|
140
|
-
|
|
141
|
-
private get isBrand(): boolean {
|
|
142
|
-
return BRANDS.includes(this.variant as ContentType);
|
|
87
|
+
return isContentType(this.variant);
|
|
143
88
|
}
|
|
144
89
|
|
|
145
90
|
private get className(): string {
|
|
146
|
-
return cx("badge", `size-${this.size}`);
|
|
91
|
+
return cx("dx-badge", `size-${this.size}`);
|
|
147
92
|
}
|
|
148
93
|
|
|
149
94
|
private get style(): string {
|
|
@@ -154,10 +99,7 @@ export default class TypeBadge extends LightningElement {
|
|
|
154
99
|
});
|
|
155
100
|
}
|
|
156
101
|
if (this.variantColorScope) {
|
|
157
|
-
return
|
|
158
|
-
background: `--dx-g-${this.variantColorScope}-${this.variant}-color-background`,
|
|
159
|
-
color: `--dx-g-${this.variantColorScope}-${this.variant}-color`
|
|
160
|
-
});
|
|
102
|
+
return getContentTypeColorVariables(this.variant);
|
|
161
103
|
}
|
|
162
104
|
if (this.color) {
|
|
163
105
|
const variables = colorToDxColors(this.color as Color);
|
|
@@ -1,3 +1,54 @@
|
|
|
1
|
+
import { ContentType, IconData } from "typings/custom";
|
|
2
|
+
|
|
3
|
+
export const CONTENT_TYPE_LABELS = {
|
|
4
|
+
documentation: "Documentation",
|
|
5
|
+
trailhead: "Trailhead",
|
|
6
|
+
blog: "Blog",
|
|
7
|
+
forum: "Forum",
|
|
8
|
+
api: "API",
|
|
9
|
+
event: "Event",
|
|
10
|
+
website: "Website",
|
|
11
|
+
podcast: "Podcast"
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export const CONTENT_TYPE_ICONS: {
|
|
15
|
+
[K in ContentType]: IconData;
|
|
16
|
+
} = {
|
|
17
|
+
documentation: {
|
|
18
|
+
iconSprite: "utility",
|
|
19
|
+
iconSymbol: "knowledge_base"
|
|
20
|
+
},
|
|
21
|
+
trailhead: {
|
|
22
|
+
iconSprite: "salesforcebrand",
|
|
23
|
+
iconSymbol: "learning"
|
|
24
|
+
},
|
|
25
|
+
blog: {
|
|
26
|
+
iconSprite: "utility",
|
|
27
|
+
iconSymbol: "comments"
|
|
28
|
+
},
|
|
29
|
+
forum: {
|
|
30
|
+
iconSprite: "general",
|
|
31
|
+
iconSymbol: "question-circle"
|
|
32
|
+
},
|
|
33
|
+
api: {
|
|
34
|
+
iconSprite: "utility",
|
|
35
|
+
iconSymbol: "settings"
|
|
36
|
+
},
|
|
37
|
+
event: {
|
|
38
|
+
iconSprite: "utility",
|
|
39
|
+
iconSymbol: "event"
|
|
40
|
+
},
|
|
41
|
+
website: {
|
|
42
|
+
iconSprite: "utility",
|
|
43
|
+
iconSymbol: "home"
|
|
44
|
+
},
|
|
45
|
+
podcast: {
|
|
46
|
+
iconSprite: "utility",
|
|
47
|
+
iconSymbol: "unmuted"
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
|
|
51
|
+
|
|
1
52
|
export const CONTENT_TYPES = [
|
|
2
53
|
"documentation",
|
|
3
54
|
"trailhead",
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
.dx-badge {
|
|
2
|
+
--background: var(--sds-g-gray-3);
|
|
3
|
+
--border-radius: var(--dx-g-spacing-smd);
|
|
4
|
+
--color: var(--sds-g-gray-10);
|
|
5
|
+
--height: var(--dx-g-spacing-lg);
|
|
6
|
+
--horizontal-spacing: var(--dx-g-spacing-smd);
|
|
7
|
+
--vertical-spacing: var(--dx-g-spacing-xs);
|
|
8
|
+
|
|
9
|
+
color: var(--dx-c-type-badge-color, var(--color));
|
|
10
|
+
background: var(--dx-c-type-badge-background, var(--background));
|
|
11
|
+
border-radius: var(--border-radius);
|
|
12
|
+
display: flex;
|
|
13
|
+
align-items: center;
|
|
14
|
+
justify-content: center;
|
|
15
|
+
height: var(--height);
|
|
16
|
+
width: min-content;
|
|
17
|
+
text-align: center;
|
|
18
|
+
white-space: nowrap;
|
|
19
|
+
font-family: var(--dx-g-font-sans);
|
|
20
|
+
font-size: 10px;
|
|
21
|
+
font-weight: var(--dx-g-font-bold);
|
|
22
|
+
padding: var(--vertical-spacing) var(--horizontal-spacing);
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.dx-badge.size-small {
|
|
26
|
+
--height: var(--dx-g-spacing-mlg);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
dx-icon {
|
|
30
|
+
margin-right: var(--dx-g-spacing-sm);
|
|
31
|
+
}
|
package/LICENSE
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
Copyright (c) 2020, Salesforce.com, Inc.
|
|
2
|
-
All rights reserved.
|
|
3
|
-
|
|
4
|
-
Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:
|
|
5
|
-
|
|
6
|
-
* Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.
|
|
7
|
-
|
|
8
|
-
* Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
|
|
9
|
-
|
|
10
|
-
* Neither the name of Salesforce.com nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission.
|
|
11
|
-
|
|
12
|
-
THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
|