@salesforcedevs/dx-components 0.55.2 → 0.55.3-alpha-1
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/lwc.config.json +3 -0
- package/package.json +5 -2
- package/src/assets/svg/login-widget-bg.png +0 -0
- package/src/modules/dx/avatarButton/avatarButton.css +128 -0
- package/src/modules/dx/avatarButton/avatarButton.html +145 -0
- package/src/modules/dx/avatarButton/avatarButton.ts +78 -0
- package/src/modules/dx/cardGridDocs/cardGridDocs.css +74 -0
- package/src/modules/dx/cardGridDocs/cardGridDocs.html +67 -0
- package/src/modules/dx/cardGridDocs/cardGridDocs.ts +86 -0
- package/src/modules/dx/featureGrid/featureGrid.html +3 -0
- package/src/modules/dx/featureGrid/featureGrid.ts +15 -0
- package/src/modules/dx/filterMenu/filterMenu.css +9 -3
- package/src/modules/dx/filterMenu/filterMenu.html +31 -28
- package/src/modules/dx/filterMenu/filterMenu.ts +14 -4
- package/src/modules/dx/grid/grid.ts +3 -1
- package/src/modules/dx/header/header.html +1 -0
- package/src/modules/dx/logo/logo.ts +1 -1
- package/src/modules/dxHelpers/scrollbar/scrollbar.css +31 -0
package/lwc.config.json
CHANGED
|
@@ -12,6 +12,7 @@
|
|
|
12
12
|
"dx/cardDocs",
|
|
13
13
|
"dx/cardEvent",
|
|
14
14
|
"dx/cardExpanded",
|
|
15
|
+
"dx/cardGridDocs",
|
|
15
16
|
"dx/cardMinimal",
|
|
16
17
|
"dx/cardNews",
|
|
17
18
|
"dx/cardPodcastEpisode",
|
|
@@ -26,6 +27,7 @@
|
|
|
26
27
|
"dx/dropdown",
|
|
27
28
|
"dx/emptyState",
|
|
28
29
|
"dx/feature",
|
|
30
|
+
"dx/featureGrid",
|
|
29
31
|
"dx/featuredContentHeader",
|
|
30
32
|
"dx/featuresList",
|
|
31
33
|
"dx/filterMenu",
|
|
@@ -75,6 +77,7 @@
|
|
|
75
77
|
"dxHelpers/code",
|
|
76
78
|
"dxHelpers/commonHeader",
|
|
77
79
|
"dxHelpers/reset",
|
|
80
|
+
"dxHelpers/scrollbar",
|
|
78
81
|
"dxHelpers/table",
|
|
79
82
|
"dxHelpers/text",
|
|
80
83
|
"dxUtils/analytics",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dx-components",
|
|
3
|
-
"version": "0.55.
|
|
3
|
+
"version": "0.55.3-alpha-1",
|
|
4
4
|
"description": "DX Lightning web components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -16,12 +16,15 @@
|
|
|
16
16
|
"@vimeo/player": "^2.16.4",
|
|
17
17
|
"classnames": "^2.2.6",
|
|
18
18
|
"debounce": "^1.2.0",
|
|
19
|
+
"js-cookie": "^3.0.1",
|
|
19
20
|
"lodash.get": "^4.4.2",
|
|
20
|
-
"microtip": "0.2.2"
|
|
21
|
+
"microtip": "0.2.2",
|
|
22
|
+
"salesforce-oauth2": "^0.2.0"
|
|
21
23
|
},
|
|
22
24
|
"devDependencies": {
|
|
23
25
|
"@types/classnames": "^2.2.10",
|
|
24
26
|
"@types/debounce": "^1.2.0",
|
|
27
|
+
"@types/js-cookie": "^3.0.2",
|
|
25
28
|
"@types/lodash.get": "^4.4.6",
|
|
26
29
|
"@types/vimeo__player": "^2.16.2"
|
|
27
30
|
}
|
|
Binary file
|
|
@@ -0,0 +1,128 @@
|
|
|
1
|
+
:host {
|
|
2
|
+
--dx-c-button-custom-color: var(--dx-g-blue-vibrant-50);
|
|
3
|
+
--dx-c-button-custom-background: transparent;
|
|
4
|
+
--dx-c-button-custom-border: 1px solid transparent;
|
|
5
|
+
--dx-c-button-custom-color-hover: var(--dx-g-blue-vibrant-50);
|
|
6
|
+
--dx-c-button-custom-background-hover: var(--dx-g-cloud-blue-vibrant-90);
|
|
7
|
+
--dx-c-button-custom-border-hover: var(--dx-g-cloud-blue-vibrant-90);
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
.avatar {
|
|
11
|
+
border-radius: 100%;
|
|
12
|
+
border: 2px solid #0d9dda;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.avatar.avatar-small {
|
|
16
|
+
width: var(--dx-g-spacing-lg);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.avatar.avatar-medium {
|
|
20
|
+
margin-bottom: 14px;
|
|
21
|
+
width: var(--dx-g-spacing-2xl);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.login-control {
|
|
25
|
+
background: var(--dx-g-cloud-blue-vibrant-90);
|
|
26
|
+
border-color: var(--dx-g-cloud-blue-vibrant-90);
|
|
27
|
+
border-radius: 50%;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.login-container {
|
|
31
|
+
padding: 16px;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.login-container.logged-in {
|
|
35
|
+
padding-top: 68px;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.header-img {
|
|
39
|
+
left: 0;
|
|
40
|
+
position: absolute;
|
|
41
|
+
top: 0;
|
|
42
|
+
width: 100%;
|
|
43
|
+
z-index: -1;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.heading {
|
|
47
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
48
|
+
display: block;
|
|
49
|
+
font-family: var(--dx-g-font-display);
|
|
50
|
+
font-size: var(--dx-g-text-lg);
|
|
51
|
+
line-height: 28px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.sub-heading {
|
|
55
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
56
|
+
display: block;
|
|
57
|
+
font-family: var(--dx-g-font-sans);
|
|
58
|
+
font-size: 12px;
|
|
59
|
+
line-height: 18px;
|
|
60
|
+
padding: 8px 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
ul {
|
|
64
|
+
list-style: none;
|
|
65
|
+
margin: 0;
|
|
66
|
+
padding: 0;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.login-list-item {
|
|
70
|
+
padding-bottom: 10px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.login-section ~ .login-section {
|
|
74
|
+
border-top: 1px solid var(--dx-g-gray-90);
|
|
75
|
+
margin-top: 12px;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
.login-section-title {
|
|
79
|
+
color: var(--dx-g-gray-30);
|
|
80
|
+
display: inline-block;
|
|
81
|
+
font-family: var(--dx-g-font-sans);
|
|
82
|
+
font-size: 14px;
|
|
83
|
+
line-height: 20px;
|
|
84
|
+
padding: 20px 0 12px;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
.login-link {
|
|
88
|
+
color: var(--dx-g-blue-vibrant-20);
|
|
89
|
+
display: block;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.login-link-label {
|
|
93
|
+
display: inline-block;
|
|
94
|
+
font-family: var(--dx-g-font-display);
|
|
95
|
+
font-size: 16px;
|
|
96
|
+
line-height: 24px;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.login-link-img {
|
|
100
|
+
display: inline-block;
|
|
101
|
+
height: 16px;
|
|
102
|
+
margin-left: 6px;
|
|
103
|
+
vertical-align: middle;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.login-link-icon {
|
|
107
|
+
display: inline-block;
|
|
108
|
+
margin-left: 6px;
|
|
109
|
+
vertical-align: baseline;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.login-link-blurb {
|
|
113
|
+
font-family: var(--dx-g-font-sans);
|
|
114
|
+
font-size: 14px;
|
|
115
|
+
line-height: 20px;
|
|
116
|
+
padding-top: 4px;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
.heading-links {
|
|
120
|
+
color: var(--dx-g-gray-90);
|
|
121
|
+
font-family: var(--dx-g-font-sans);
|
|
122
|
+
font-size: 14px;
|
|
123
|
+
line-height: 20px;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
a.inline-link {
|
|
127
|
+
color: var(--dx-g-blue-vibrant-50);
|
|
128
|
+
}
|
|
@@ -0,0 +1,145 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div if:false={isLoggedIn}>
|
|
3
|
+
<dx-popover offset="small" width="320px" open-on-hover>
|
|
4
|
+
<img
|
|
5
|
+
slot="control"
|
|
6
|
+
src="https://placekitten.com/300/300"
|
|
7
|
+
class="avatar avatar-small"
|
|
8
|
+
/>
|
|
9
|
+
<div slot="content">
|
|
10
|
+
<div class="login-container logged-in">
|
|
11
|
+
<img src={userInfo.avatarImgSrc} class="header-img" />
|
|
12
|
+
<img
|
|
13
|
+
src="https://placekitten.com/300/300"
|
|
14
|
+
class="avatar avatar-medium"
|
|
15
|
+
/>
|
|
16
|
+
<span class="heading">Jasmine Young</span>
|
|
17
|
+
<span class="sub-heading">jyoung58</span>
|
|
18
|
+
<div class="heading-links">
|
|
19
|
+
<a href="#" class="inline-link">Switch account</a>
|
|
20
|
+
|
|
|
21
|
+
<a href="#" class="inline-link">Logout</a>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="login-section">
|
|
24
|
+
<span class="login-section-title">Trailblazer.me</span>
|
|
25
|
+
<ul>
|
|
26
|
+
<li class="login-list-item">
|
|
27
|
+
<a href="#" class="login-link">
|
|
28
|
+
<span class="login-link-label">
|
|
29
|
+
Settings
|
|
30
|
+
</span>
|
|
31
|
+
<dx-icon
|
|
32
|
+
class="login-link-icon"
|
|
33
|
+
symbol="new_window"
|
|
34
|
+
size="xsmall"
|
|
35
|
+
></dx-icon>
|
|
36
|
+
</a>
|
|
37
|
+
</li>
|
|
38
|
+
<li class="login-list-item">
|
|
39
|
+
<a href="#" class="login-link">
|
|
40
|
+
<span class="login-link-label">
|
|
41
|
+
Profile
|
|
42
|
+
</span>
|
|
43
|
+
<dx-icon
|
|
44
|
+
class="login-link-icon"
|
|
45
|
+
symbol="new_window"
|
|
46
|
+
size="xsmall"
|
|
47
|
+
></dx-icon>
|
|
48
|
+
</a>
|
|
49
|
+
</li>
|
|
50
|
+
<li class="login-list-item">
|
|
51
|
+
<a href="#" class="login-link">
|
|
52
|
+
<span class="login-link-label">
|
|
53
|
+
Developer Forums
|
|
54
|
+
</span>
|
|
55
|
+
<dx-icon
|
|
56
|
+
class="login-link-icon"
|
|
57
|
+
symbol="new_window"
|
|
58
|
+
size="xsmall"
|
|
59
|
+
></dx-icon>
|
|
60
|
+
</a>
|
|
61
|
+
<div class="login-link-blurb">
|
|
62
|
+
Our Developer Forums have a new home!
|
|
63
|
+
<a href="#" class="inline-link">
|
|
64
|
+
Learn more
|
|
65
|
+
</a>
|
|
66
|
+
</div>
|
|
67
|
+
</li>
|
|
68
|
+
</ul>
|
|
69
|
+
</div>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</dx-popover>
|
|
73
|
+
</div>
|
|
74
|
+
<div if:true={isLoggedIn}>
|
|
75
|
+
<dx-popover offset="small" width="320px" open-on-hover>
|
|
76
|
+
<dx-button
|
|
77
|
+
class="login-control"
|
|
78
|
+
slot="control"
|
|
79
|
+
icon-symbol="user"
|
|
80
|
+
icon-position="left"
|
|
81
|
+
variant="custom"
|
|
82
|
+
>
|
|
83
|
+
Login
|
|
84
|
+
</dx-button>
|
|
85
|
+
<div slot="content">
|
|
86
|
+
<div class="login-container">
|
|
87
|
+
<span class="heading">Login</span>
|
|
88
|
+
<div class="login-section">
|
|
89
|
+
<span class="login-section-title">Products</span>
|
|
90
|
+
<ul>
|
|
91
|
+
<li class="login-list-item">
|
|
92
|
+
<a href="#" class="login-link">
|
|
93
|
+
<span class="login-link-label">
|
|
94
|
+
Salesforce
|
|
95
|
+
</span>
|
|
96
|
+
<img
|
|
97
|
+
class="login-link-img"
|
|
98
|
+
src="/assets/svg/salesforce-cloud.svg"
|
|
99
|
+
alt="Salesforce logo"
|
|
100
|
+
/>
|
|
101
|
+
<dx-icon
|
|
102
|
+
class="login-link-icon"
|
|
103
|
+
symbol="new_window"
|
|
104
|
+
size="xsmall"
|
|
105
|
+
></dx-icon>
|
|
106
|
+
</a>
|
|
107
|
+
</li>
|
|
108
|
+
<li class="login-list-item">
|
|
109
|
+
<a href="#" class="login-link">
|
|
110
|
+
<span class="login-link-label">
|
|
111
|
+
Marketing Cloud
|
|
112
|
+
</span>
|
|
113
|
+
<dx-icon
|
|
114
|
+
class="login-link-icon"
|
|
115
|
+
symbol="new_window"
|
|
116
|
+
size="xsmall"
|
|
117
|
+
></dx-icon>
|
|
118
|
+
</a>
|
|
119
|
+
</li>
|
|
120
|
+
</ul>
|
|
121
|
+
</div>
|
|
122
|
+
<div class="login-section">
|
|
123
|
+
<span class="login-section-title">
|
|
124
|
+
Community & Resources
|
|
125
|
+
</span>
|
|
126
|
+
<ul>
|
|
127
|
+
<li class="login-list-item">
|
|
128
|
+
<a href="#" class="login-link">
|
|
129
|
+
<span class="login-link-label">
|
|
130
|
+
Trailblazer.me
|
|
131
|
+
</span>
|
|
132
|
+
</a>
|
|
133
|
+
<div class="login-link-blurb">
|
|
134
|
+
Login into access a rich community of
|
|
135
|
+
Salesforce Developers, get ideas, and find
|
|
136
|
+
solutions.
|
|
137
|
+
</div>
|
|
138
|
+
</li>
|
|
139
|
+
</ul>
|
|
140
|
+
</div>
|
|
141
|
+
</div>
|
|
142
|
+
</div>
|
|
143
|
+
</dx-popover>
|
|
144
|
+
</div>
|
|
145
|
+
</template>
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import { api, LightningElement, track } from "lwc";
|
|
2
|
+
import Cookie from "js-cookie";
|
|
3
|
+
// import oauth2 from "salesforce-oauth2";
|
|
4
|
+
|
|
5
|
+
// TODO: move to env vars
|
|
6
|
+
// const TBID_CLIENT_ID = '3MVG982oBBDdwyHh3OFdQJTLxbk1dWC8NhBSiKvAsu3gn9m6WhiDKT8iLn34y4w6xsLeIHTbMbhuPPnGfYoW.';
|
|
7
|
+
// const TBID_CLIENT_SECRET = 'FC1B4F3E83746CD6ED3A6356B2FCF671A0470C6ADB88BE1A9F288B2D58400BEA';
|
|
8
|
+
// const TBID_COMMUNITY_URL = 'https://dev1-trailblazer-identity.cs192.force.com';
|
|
9
|
+
const TBID_AUTH_URL = "https://tbid-auth-app-dev.herokuapp.com/tbid/dologin";
|
|
10
|
+
const TBID_USERINFO_URL =
|
|
11
|
+
"https://dev1-trailblazer-identity.cs192.force.com/services/oauth2/userinfo";
|
|
12
|
+
|
|
13
|
+
export interface UserInfo {
|
|
14
|
+
avatarImgSrc?: string;
|
|
15
|
+
firstName?: string;
|
|
16
|
+
lastName?: string;
|
|
17
|
+
username?: string;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export default class AvatarButton extends LightningElement {
|
|
21
|
+
@api size: "small" | "medium" | "large" = "medium";
|
|
22
|
+
|
|
23
|
+
@track
|
|
24
|
+
private userInfo: UserInfo = {};
|
|
25
|
+
private _isLoading = false;
|
|
26
|
+
private _tbidAccessToken: string | undefined;
|
|
27
|
+
|
|
28
|
+
private get isLoggedIn() {
|
|
29
|
+
return Boolean(this._tbidAccessToken);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
connectedCallback() {
|
|
33
|
+
this._tbidAccessToken = Cookie.get("TBID");
|
|
34
|
+
|
|
35
|
+
if (this._tbidAccessToken) {
|
|
36
|
+
this.requestUserInfo(this._tbidAccessToken);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
onLoginClick() {
|
|
41
|
+
if (!this.isLoggedIn) {
|
|
42
|
+
window.location.assign(TBID_AUTH_URL);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
private updateAvatarWithUserInfo(userInfo: any) {
|
|
47
|
+
this.userInfo.avatarImgSrc = userInfo?.photos?.thumbnail;
|
|
48
|
+
// TODO: Consider displaying initials if no photo. Is there always a photo?
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
private async requestUserInfo(accessToken: string) {
|
|
52
|
+
this._isLoading = true;
|
|
53
|
+
|
|
54
|
+
try {
|
|
55
|
+
// FIXME: The TBID userinfo currently only accepts the access token in the URL
|
|
56
|
+
// as a query parameter. This is bad, but they're aware of it, and when it is
|
|
57
|
+
// fixed, we should use a header or something instead.
|
|
58
|
+
const userInfoRes = await fetch(
|
|
59
|
+
TBID_USERINFO_URL + "?access_token=" + accessToken
|
|
60
|
+
);
|
|
61
|
+
|
|
62
|
+
if (userInfoRes.ok) {
|
|
63
|
+
const userInfo = await userInfoRes.json();
|
|
64
|
+
this.updateAvatarWithUserInfo(userInfo);
|
|
65
|
+
} else {
|
|
66
|
+
if (userInfoRes.status === 403) {
|
|
67
|
+
// Bad access token; try to refresh the token
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
} catch (ex) {
|
|
71
|
+
// TODO: Something not directly related to auth went wrong. Unsure what to do here.
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
this._isLoading = false;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
private handleAuthFailure() {}
|
|
78
|
+
}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
.docs-action-bar {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: space-between;
|
|
4
|
+
align-items: flex-end;
|
|
5
|
+
padding: var(--dx-g-spacing-md) 0 var(--dx-g-spacing-lg);
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.docs-action-bar > .records-container {
|
|
9
|
+
margin-right: auto;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.docs-action-bar .filters-container {
|
|
13
|
+
display: flex;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.docs-action-bar .filters-container > *:not(:first-child),
|
|
17
|
+
dx-input {
|
|
18
|
+
margin-left: var(--dx-g-spacing-sm);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
dx-input {
|
|
22
|
+
--dx-c-input-width: 285px;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.pagination-container {
|
|
26
|
+
max-width: fit-content;
|
|
27
|
+
max-width: -moz-fit-content;
|
|
28
|
+
margin: var(--dx-g-spacing-lg) auto;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
@media screen and (max-width: 1024px) {
|
|
32
|
+
dx-card-docs {
|
|
33
|
+
--dx-c-body-max-lines: 3;
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
@media screen and (max-width: 768px) {
|
|
38
|
+
.docs-action-bar {
|
|
39
|
+
flex-direction: column-reverse;
|
|
40
|
+
width: 100%;
|
|
41
|
+
padding: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.records-container {
|
|
45
|
+
margin-bottom: var(--dx-g-spacing-md);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
dx-input {
|
|
49
|
+
--dx-c-input-width: 100%;
|
|
50
|
+
|
|
51
|
+
width: 100%;
|
|
52
|
+
margin-bottom: var(--dx-g-spacing-md);
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@media screen and (max-width: 600px) {
|
|
57
|
+
.pagination-container {
|
|
58
|
+
width: 100%;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.pagination-container > * {
|
|
63
|
+
position: absolute;
|
|
64
|
+
left: 50%;
|
|
65
|
+
transform: translateX(-50%);
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
@media screen and (max-width: 460px) {
|
|
70
|
+
.docs-action-bar .records-container {
|
|
71
|
+
transform: initial;
|
|
72
|
+
padding: var(--dx-g-spacing-md) 0;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="card-grid">
|
|
3
|
+
<div class="docs-action-bar">
|
|
4
|
+
<div class="records-container">
|
|
5
|
+
<span if:true={endingRecord}>
|
|
6
|
+
Showing { startingRecord } to { endingRecord } of {
|
|
7
|
+
cards.length }
|
|
8
|
+
</span>
|
|
9
|
+
</div>
|
|
10
|
+
<div class="filters-container">
|
|
11
|
+
<slot name="filters"></slot>
|
|
12
|
+
</div>
|
|
13
|
+
<dx-input
|
|
14
|
+
size="small"
|
|
15
|
+
placeholder="Search..."
|
|
16
|
+
icon-symbol="search"
|
|
17
|
+
shortcut-key="j"
|
|
18
|
+
class="docs-search-input"
|
|
19
|
+
onchange={onSearchChange}
|
|
20
|
+
value={value}
|
|
21
|
+
></dx-input>
|
|
22
|
+
</div>
|
|
23
|
+
<dx-grid columns="four">
|
|
24
|
+
<template for:each={currentPageCards} for:item="card">
|
|
25
|
+
<dx-card-docs
|
|
26
|
+
key={card.title}
|
|
27
|
+
body={card.body}
|
|
28
|
+
href={card.href}
|
|
29
|
+
img-alt={card.imgAlt}
|
|
30
|
+
img-src={card.imgSrc}
|
|
31
|
+
label={card.label}
|
|
32
|
+
title={card.title}
|
|
33
|
+
target={card.target}
|
|
34
|
+
show-mobile-img={card.showMobileImg}
|
|
35
|
+
>
|
|
36
|
+
<template
|
|
37
|
+
if:true={card.links}
|
|
38
|
+
for:each={card.links}
|
|
39
|
+
for:item="link"
|
|
40
|
+
>
|
|
41
|
+
<dx-button
|
|
42
|
+
key={link.title}
|
|
43
|
+
href={link.href}
|
|
44
|
+
variant="inline"
|
|
45
|
+
>
|
|
46
|
+
{ link.title }
|
|
47
|
+
</dx-button>
|
|
48
|
+
</template>
|
|
49
|
+
</dx-card-docs>
|
|
50
|
+
</template>
|
|
51
|
+
</dx-grid>
|
|
52
|
+
<div class="pagination-container" if:false={showEmptyState}>
|
|
53
|
+
<dx-pagination
|
|
54
|
+
current-page={page}
|
|
55
|
+
total-pages={totalPages}
|
|
56
|
+
pages-to-show="5"
|
|
57
|
+
onpagechange={goToPage}
|
|
58
|
+
if:false={hidePagination}
|
|
59
|
+
></dx-pagination>
|
|
60
|
+
</div>
|
|
61
|
+
</div>
|
|
62
|
+
<dx-empty-state
|
|
63
|
+
title="Beep boop. That did not compute."
|
|
64
|
+
subtitle={emptyStateSubtitle}
|
|
65
|
+
if:true={showEmptyState}
|
|
66
|
+
></dx-empty-state>
|
|
67
|
+
</template>
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { LightningElement, api, track } from "lwc";
|
|
2
|
+
import { toJson } from "dxUtils/normalizers";
|
|
3
|
+
import { DocsCard } from "typings/custom";
|
|
4
|
+
|
|
5
|
+
const stringsMatch = (val1?: string, val2?: string): boolean => {
|
|
6
|
+
return (
|
|
7
|
+
typeof val1 === "string" &&
|
|
8
|
+
typeof val2 === "string" &&
|
|
9
|
+
val1.toLowerCase().includes(val2.toLowerCase())
|
|
10
|
+
);
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default class CardGridDocs extends LightningElement {
|
|
14
|
+
@api pageSize = 24;
|
|
15
|
+
@api
|
|
16
|
+
get cards(): DocsCard[] {
|
|
17
|
+
return this._cards;
|
|
18
|
+
}
|
|
19
|
+
set cards(value) {
|
|
20
|
+
this._cards = toJson(value);
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
private page: number = 1;
|
|
24
|
+
private _cards: DocsCard[] = [];
|
|
25
|
+
@track
|
|
26
|
+
private value?: string;
|
|
27
|
+
|
|
28
|
+
private get filteredCards(): DocsCard[] {
|
|
29
|
+
return this.value
|
|
30
|
+
? this.cards.filter(({ title, body, label }) =>
|
|
31
|
+
[title, body, label].some((val) =>
|
|
32
|
+
stringsMatch(val, this.value)
|
|
33
|
+
)
|
|
34
|
+
)
|
|
35
|
+
: this.cards;
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
private get currentPageCards() {
|
|
39
|
+
return this.filteredCards.slice(
|
|
40
|
+
this.startingRecord - 1,
|
|
41
|
+
this.endingRecord
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
private get startingRecord() {
|
|
46
|
+
return this.page === 1
|
|
47
|
+
? this.page
|
|
48
|
+
: (this.page - 1) * this.pageSize + 1;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
private get endingRecord() {
|
|
52
|
+
const defaultEndingRecord = this.pageSize * this.page;
|
|
53
|
+
return defaultEndingRecord > this.filteredCards.length
|
|
54
|
+
? this.filteredCards.length
|
|
55
|
+
: defaultEndingRecord;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
private get totalPages() {
|
|
59
|
+
return Math.ceil(this.filteredCards.length / this.pageSize);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
private get hidePagination() {
|
|
63
|
+
return this.totalPages < 2;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
private get emptyStateSubtitle() {
|
|
67
|
+
return "No results" + (this.value !== "" ? ` for "${this.value}"` : "");
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
private get showEmptyState() {
|
|
71
|
+
return !this.filteredCards.length;
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
private onSearchChange(e: InputEvent): void {
|
|
75
|
+
const detail = `${e.detail}`;
|
|
76
|
+
this.value = detail === "" ? undefined : detail;
|
|
77
|
+
|
|
78
|
+
if (this.startingRecord > this.cards.length) {
|
|
79
|
+
this.page = 1;
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
|
|
83
|
+
private goToPage(e: CustomEvent) {
|
|
84
|
+
this.page = e.detail;
|
|
85
|
+
}
|
|
86
|
+
}
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { LightningElement } from "lwc";
|
|
2
|
+
import { LightningSlotElement } from "typings/custom";
|
|
3
|
+
|
|
4
|
+
export default class FeatureGrid extends LightningElement {
|
|
5
|
+
private onSlotChange(e: LightningSlotElement) {
|
|
6
|
+
// @ts-ignore
|
|
7
|
+
const slot = e.target;
|
|
8
|
+
slot.assignedElements().forEach(
|
|
9
|
+
(featureElement: any, index: number) => {
|
|
10
|
+
featureElement.descriptionPosition =
|
|
11
|
+
index % 2 === 0 ? "left" : "right";
|
|
12
|
+
}
|
|
13
|
+
);
|
|
14
|
+
}
|
|
15
|
+
}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
@import "dxHelpers/reset";
|
|
2
|
+
@import "dxHelpers/scrollbar";
|
|
2
3
|
|
|
3
4
|
:host {
|
|
4
5
|
--dx-c-filter-menu-margin: 0;
|
|
@@ -37,8 +38,14 @@
|
|
|
37
38
|
}
|
|
38
39
|
|
|
39
40
|
.title-group {
|
|
41
|
+
display: flex;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.title-group-main {
|
|
40
45
|
position: relative;
|
|
46
|
+
justify-content: space-between;
|
|
41
47
|
margin: 0 var(--horizontal-padding);
|
|
48
|
+
width: calc(100% - 2 * var(--horizontal-padding));
|
|
42
49
|
}
|
|
43
50
|
|
|
44
51
|
.filter-menu-title {
|
|
@@ -77,9 +84,6 @@ label {
|
|
|
77
84
|
}
|
|
78
85
|
|
|
79
86
|
svg {
|
|
80
|
-
position: absolute;
|
|
81
|
-
right: 0;
|
|
82
|
-
top: 0;
|
|
83
87
|
background: transparent;
|
|
84
88
|
stroke: var(--dx-g-blue-vibrant-50);
|
|
85
89
|
}
|
|
@@ -105,6 +109,8 @@ svg,
|
|
|
105
109
|
|
|
106
110
|
.checkbox-year {
|
|
107
111
|
--dx-c-filter-menu-font-weight: bold;
|
|
112
|
+
|
|
113
|
+
width: 130px;
|
|
108
114
|
}
|
|
109
115
|
|
|
110
116
|
.view-more-btn {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<form class="container">
|
|
3
|
-
<span class="title-group" onclick={dropdownToggle}>
|
|
3
|
+
<span class="title-group-main title-group" onclick={dropdownToggle}>
|
|
4
4
|
<p class="filter-menu-title">{title}</p>
|
|
5
5
|
<svg
|
|
6
6
|
xmlns="http://www.w3.org/2000/svg"
|
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
<polyline points="6 9 12 15 18 9"></polyline>
|
|
17
17
|
</svg>
|
|
18
18
|
</span>
|
|
19
|
-
<ul class="nested first-layer">
|
|
19
|
+
<ul class="nested first-layer always-visible-scrollbar">
|
|
20
20
|
<li>
|
|
21
21
|
<template if:true={isBaseVariant}>
|
|
22
22
|
<template for:each={filterMenuOptions} for:item="option">
|
|
@@ -37,33 +37,36 @@
|
|
|
37
37
|
for:item="option"
|
|
38
38
|
>
|
|
39
39
|
<li key={option.id}>
|
|
40
|
-
<
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
{option.name} ({option.totalNumberOfPosts})
|
|
46
|
-
</dx-checkbox-native>
|
|
47
|
-
<span onclick={dropdownToggle}>
|
|
48
|
-
<svg
|
|
49
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
50
|
-
width="24"
|
|
51
|
-
height="24"
|
|
52
|
-
viewBox="0 0 24 24"
|
|
53
|
-
fill="none"
|
|
54
|
-
stroke-width="2"
|
|
55
|
-
stroke-linecap="round"
|
|
56
|
-
stroke-linejoin="round"
|
|
57
|
-
class="
|
|
58
|
-
feather feather-chevron-down
|
|
59
|
-
year-svg
|
|
60
|
-
"
|
|
40
|
+
<div class="title-group">
|
|
41
|
+
<dx-checkbox-native
|
|
42
|
+
class="checkbox-year"
|
|
43
|
+
value={option}
|
|
44
|
+
onchange={onChange}
|
|
61
45
|
>
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
46
|
+
{option.name}
|
|
47
|
+
({option.totalNumberOfPosts})
|
|
48
|
+
</dx-checkbox-native>
|
|
49
|
+
<span onclick={dropdownToggle}>
|
|
50
|
+
<svg
|
|
51
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
52
|
+
width="24"
|
|
53
|
+
height="24"
|
|
54
|
+
viewBox="0 0 24 24"
|
|
55
|
+
fill="none"
|
|
56
|
+
stroke-width="2"
|
|
57
|
+
stroke-linecap="round"
|
|
58
|
+
stroke-linejoin="round"
|
|
59
|
+
class="
|
|
60
|
+
feather feather-chevron-down
|
|
61
|
+
year-svg
|
|
62
|
+
"
|
|
63
|
+
>
|
|
64
|
+
<polyline
|
|
65
|
+
points="6 9 12 15 18 9"
|
|
66
|
+
></polyline>
|
|
67
|
+
</svg>
|
|
68
|
+
</span>
|
|
69
|
+
</div>
|
|
67
70
|
<ul class="nested second-layer">
|
|
68
71
|
<template
|
|
69
72
|
for:each={option.months}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { LightningElement, api } from "lwc";
|
|
2
|
+
import { toJson } from "dxUtils/normalizers";
|
|
2
3
|
|
|
3
4
|
interface Option {
|
|
4
5
|
id: number;
|
|
@@ -8,9 +9,17 @@ interface Option {
|
|
|
8
9
|
export default class FilterMenu extends LightningElement {
|
|
9
10
|
@api name: string = "";
|
|
10
11
|
@api title: string = "Filter Menu";
|
|
11
|
-
@api options: Option[] = [];
|
|
12
12
|
@api variant: string = "base";
|
|
13
13
|
|
|
14
|
+
@api
|
|
15
|
+
get options(): Option[] {
|
|
16
|
+
return this._options;
|
|
17
|
+
}
|
|
18
|
+
set options(value: any) {
|
|
19
|
+
this._options = toJson(value);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
private _options: Option[] = [];
|
|
14
23
|
private showMore: boolean = false;
|
|
15
24
|
|
|
16
25
|
get isBaseVariant() {
|
|
@@ -99,9 +108,10 @@ export default class FilterMenu extends LightningElement {
|
|
|
99
108
|
}
|
|
100
109
|
|
|
101
110
|
private dropdownToggle(e: any) {
|
|
102
|
-
|
|
103
|
-
.querySelector(".nested")
|
|
104
|
-
.
|
|
111
|
+
(
|
|
112
|
+
e.currentTarget.parentElement.querySelector(".nested") ||
|
|
113
|
+
e.currentTarget.parentElement.parentElement.querySelector(".nested")
|
|
114
|
+
).classList.toggle("active");
|
|
105
115
|
|
|
106
116
|
e.currentTarget.querySelector("svg").classList.toggle("caret-down");
|
|
107
117
|
}
|
|
@@ -67,6 +67,8 @@ export default class Grid extends LightningElement {
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
onSlotChange(e: Event) {
|
|
70
|
-
this._itemCount = (
|
|
70
|
+
this._itemCount = (
|
|
71
|
+
e.target as LightningSlotElement
|
|
72
|
+
).assignedElements().length;
|
|
71
73
|
}
|
|
72
74
|
}
|
|
@@ -3,6 +3,6 @@ import { LightningElement, api } from "lwc";
|
|
|
3
3
|
export default class Logo extends LightningElement {
|
|
4
4
|
@api href: string = "/";
|
|
5
5
|
@api imgSrc: string = "/assets/svg/salesforce-cloud.svg";
|
|
6
|
-
@api imgAlt: string = "Salesforce
|
|
6
|
+
@api imgAlt: string = "Salesforce logo";
|
|
7
7
|
@api label!: string;
|
|
8
8
|
}
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/* a truly always visible scrollbar is only possible on webkit --
|
|
2
|
+
on firefox we are only able to sync the styling
|
|
3
|
+
but cannot force the scrollbar to appear for users */
|
|
4
|
+
|
|
5
|
+
/* mozilla styles */
|
|
6
|
+
.always-visible-scrollbar {
|
|
7
|
+
scrollbar-color: #757575 transparent;
|
|
8
|
+
scrollbar-width: thin;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
/* webkit styles */
|
|
12
|
+
.always-visible-scrollbar::-webkit-scrollbar {
|
|
13
|
+
width: 14px;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.always-visible-scrollbar::-webkit-scrollbar-thumb {
|
|
17
|
+
background-clip: content-box;
|
|
18
|
+
border: 5px solid transparent;
|
|
19
|
+
border-radius: 10px;
|
|
20
|
+
box-shadow: #757575 inset 0 0 0 10px;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
.always-visible-scrollbar::-webkit-scrollbar-corner {
|
|
24
|
+
background-color: transparent;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.always-visible-scrollbar::-webkit-scrollbar-button {
|
|
28
|
+
width: 0;
|
|
29
|
+
height: 0;
|
|
30
|
+
display: none;
|
|
31
|
+
}
|