@salesforcedevs/dw-components 1.3.323-alpha.2 → 1.3.324-alpha
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 +1 -4
- package/src/modules/dw/blogsGrid/blogsGrid.html +1 -1
- package/src/modules/dw/browseTrials/browseTrials.html +4 -4
- package/src/modules/dw/browseTrials/browseTrials.ts +1 -1
- package/src/modules/dw/cardBlogPostProvider/cardBlogPostProvider.html +1 -1
- package/src/modules/dw/cardPodcastEpisodeProvider/cardPodcastEpisodeProvider.html +1 -1
- package/src/modules/dw/codeSamplesGrid/codeSamplesGrid.css +48 -22
- package/src/modules/dw/codeSamplesGrid/codeSamplesGrid.html +23 -8
- package/src/modules/dw/contentArchive/contentArchive.html +15 -15
- package/src/modules/dw/docsGrid/docsGrid.html +2 -2
- package/src/modules/dw/eventsList/eventsList.html +5 -5
- package/src/modules/dw/podcastsGrid/podcastsGrid.html +1 -1
- package/src/modules/dw/podcastsPromo/podcastsPromo.html +1 -1
- package/src/modules/dw/videoGrid/videoGrid.html +2 -2
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@salesforcedevs/dw-components",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.324-alpha",
|
|
4
4
|
"description": "Lightning web components for https://developer.salesforce.com",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"engines": {
|
|
@@ -25,8 +25,5 @@
|
|
|
25
25
|
"@types/lodash.uniqby": "^4.7.7",
|
|
26
26
|
"@types/setimmediate": "^1.0.2",
|
|
27
27
|
"setimmediate": "^1.0.5"
|
|
28
|
-
},
|
|
29
|
-
"volta": {
|
|
30
|
-
"node": "16.19.1"
|
|
31
28
|
}
|
|
32
29
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<dx-section
|
|
2
|
+
<dx-section header={header}>
|
|
3
3
|
<dx-tab-panel-list
|
|
4
4
|
tabs={tabLabels}
|
|
5
5
|
onchange={handleTabChange}
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
</div>
|
|
27
27
|
<template for:each={filteredCategories} for:item="category">
|
|
28
28
|
<dx-section
|
|
29
|
-
|
|
29
|
+
header={category.title}
|
|
30
30
|
subtitle={category.subtitle}
|
|
31
31
|
heading-level="4"
|
|
32
32
|
subtitle-level="2"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
href={card.href}
|
|
51
51
|
label={card.label}
|
|
52
52
|
terms={card.terms}
|
|
53
|
-
|
|
53
|
+
header={card.title}
|
|
54
54
|
button-one-cta={card.buttonOneCta}
|
|
55
55
|
button-one-href={card.buttonOneHref}
|
|
56
56
|
button-one-icon={card.buttonOneIcon}
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
href={card.href}
|
|
70
70
|
label={card.label}
|
|
71
71
|
terms={card.terms}
|
|
72
|
-
|
|
72
|
+
header={card.title}
|
|
73
73
|
button-one-cta={card.buttonOneCta}
|
|
74
74
|
button-one-href={card.buttonOneHref}
|
|
75
75
|
button-one-icon={card.buttonOneIcon}
|
|
@@ -10,38 +10,64 @@ dx-section {
|
|
|
10
10
|
--dx-c-section-position: revert;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.
|
|
14
|
-
display: flex;
|
|
15
|
-
flex-direction: row;
|
|
16
|
-
padding: 20px;
|
|
17
|
-
border-radius: 15px;
|
|
18
|
-
box-shadow: var(--dx-g-box-shadow-sm);
|
|
19
|
-
cursor: pointer;
|
|
20
|
-
|
|
21
|
-
--dx-c-card-title-color: var(--dx-g-blue-vibrant-20);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.feature-card:hover {
|
|
25
|
-
--dx-c-card-title-color: var(--dx-g-blue-vibrant-40);
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.feature-card-body {
|
|
13
|
+
.featured-app-container {
|
|
29
14
|
padding-right: 20px;
|
|
30
15
|
display: flex;
|
|
31
|
-
flex-
|
|
16
|
+
flex-flow: row wrap-reverse;
|
|
32
17
|
justify-content: space-between;
|
|
18
|
+
align-items: center;
|
|
33
19
|
}
|
|
34
20
|
|
|
35
|
-
.
|
|
36
|
-
color: var(--dx-
|
|
21
|
+
.featured-app-container h4 {
|
|
22
|
+
color: var(--dx-g-text-heading-color);
|
|
23
|
+
font-weight: 800;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.dx-text-display-5 {
|
|
27
|
+
color: var(--dx-g-text-heading-color);
|
|
37
28
|
transition: var(--dx-g-transition-hue-1x);
|
|
38
|
-
font-size: var(--dx-g-text-xl);
|
|
39
29
|
line-height: var(--dx-c-card-title-line-height);
|
|
40
30
|
letter-spacing: var(--dx-c-card-title-letter-spacing);
|
|
41
31
|
word-break: var(--dx-c-card-title-word-break, break-word);
|
|
42
32
|
hyphens: auto;
|
|
43
33
|
}
|
|
44
34
|
|
|
35
|
+
.featured-app-text {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
width: 50%;
|
|
39
|
+
align-self: flex-end;
|
|
40
|
+
padding-right: 20px;
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
.featured-app-container img {
|
|
44
|
+
width: 50%;
|
|
45
|
+
height: 80%;
|
|
46
|
+
border-radius: 20px;
|
|
47
|
+
box-shadow: var(--dx-g-box-shadow-lg);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@media screen and (max-width: 639px) {
|
|
51
|
+
.featured-app-container {
|
|
52
|
+
flex-direction: column-reverse;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.featured-app-container h4 {
|
|
56
|
+
margin-top: 1em;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.featured-app-container img {
|
|
60
|
+
width: 100%;
|
|
61
|
+
height: auto;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.featured-app-text {
|
|
65
|
+
display: flex;
|
|
66
|
+
flex-direction: column;
|
|
67
|
+
width: 100%;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
45
71
|
.badge-link-container {
|
|
46
72
|
padding-top: var(--dx-g-spacing-md);
|
|
47
73
|
width: 100%;
|
|
@@ -59,7 +85,6 @@ dx-section {
|
|
|
59
85
|
padding-top: var(--dx-g-spacing-md);
|
|
60
86
|
display: flex;
|
|
61
87
|
flex-flow: row wrap;
|
|
62
|
-
justify-content: space-between;
|
|
63
88
|
margin-top: 4em;
|
|
64
89
|
gap: 1em;
|
|
65
90
|
}
|
|
@@ -145,6 +170,8 @@ dx-section {
|
|
|
145
170
|
@media screen and (max-width: 767px) {
|
|
146
171
|
.badge-link-container {
|
|
147
172
|
display: flex;
|
|
173
|
+
flex-direction: column;
|
|
174
|
+
gap: 1.5em;
|
|
148
175
|
}
|
|
149
176
|
|
|
150
177
|
.docs-action-bar {
|
|
@@ -169,7 +196,6 @@ dx-section {
|
|
|
169
196
|
}
|
|
170
197
|
|
|
171
198
|
.external-link-container {
|
|
172
|
-
padding: 0 0 0 8px;
|
|
173
199
|
margin-top: -4px;
|
|
174
200
|
}
|
|
175
201
|
}
|
|
@@ -1,18 +1,31 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<dx-section
|
|
3
|
-
|
|
4
|
-
|
|
2
|
+
<dx-section
|
|
3
|
+
class="feature-gradient"
|
|
4
|
+
background-color="linear-gradient(var(--dx-g-indigo-vibrant-90), white)"
|
|
5
|
+
>
|
|
6
|
+
<div class="featured-app-container">
|
|
7
|
+
<div class="featured-app-text">
|
|
5
8
|
<h4>Featured App</h4>
|
|
6
|
-
<
|
|
9
|
+
<h2 class="dx-text-display-5">{featuredCodeSample.title}</h2>
|
|
7
10
|
<span class="feature-card-content dx-text-body-2">
|
|
8
11
|
{featuredCodeSample.body}
|
|
9
12
|
</span>
|
|
10
13
|
<div class="badge-link-container">
|
|
14
|
+
<div class="badge-container">
|
|
15
|
+
<dx-metadata-badge
|
|
16
|
+
for:each={featuredCodeSample.tags}
|
|
17
|
+
for:item="tag"
|
|
18
|
+
key={tag}
|
|
19
|
+
value={tag}
|
|
20
|
+
></dx-metadata-badge>
|
|
21
|
+
</div>
|
|
22
|
+
|
|
11
23
|
<div class="external-link-container">
|
|
12
24
|
<dx-button
|
|
13
25
|
target={target}
|
|
14
26
|
icon-symbol="new_window"
|
|
15
27
|
variant="primary"
|
|
28
|
+
size="large"
|
|
16
29
|
href={featuredCodeSample.githubLink}
|
|
17
30
|
onclick={handleReadItClick}
|
|
18
31
|
>
|
|
@@ -21,6 +34,7 @@
|
|
|
21
34
|
<dx-button
|
|
22
35
|
target={target}
|
|
23
36
|
variant="secondary"
|
|
37
|
+
size="large"
|
|
24
38
|
href={featuredCodeSample.trailheadLink}
|
|
25
39
|
onclick={handleReadItClick}
|
|
26
40
|
>
|
|
@@ -30,13 +44,12 @@
|
|
|
30
44
|
</div>
|
|
31
45
|
</div>
|
|
32
46
|
<img
|
|
33
|
-
class="image dx-card-base_image"
|
|
47
|
+
class="image dx-card-base_image featured-app-image"
|
|
34
48
|
src={featuredCodeSample.img}
|
|
35
49
|
alt={featuredCodeSample.title}
|
|
36
50
|
/>
|
|
37
51
|
</div>
|
|
38
52
|
</dx-section>
|
|
39
|
-
|
|
40
53
|
<dx-section title="Explore the Apps">
|
|
41
54
|
<dx-grid columns={tileColumns} if:false={showEmptyState}>
|
|
42
55
|
<dx-card-docs
|
|
@@ -45,10 +58,10 @@
|
|
|
45
58
|
for:index="i"
|
|
46
59
|
key={item.id}
|
|
47
60
|
body={item.body}
|
|
48
|
-
|
|
49
|
-
title={item.title}
|
|
61
|
+
header={item.title}
|
|
50
62
|
href={item.githubLink}
|
|
51
63
|
img-src={item.img}
|
|
64
|
+
show-mobile-img
|
|
52
65
|
>
|
|
53
66
|
<div class="badge-link-container">
|
|
54
67
|
<div class="badge-container">
|
|
@@ -64,6 +77,7 @@
|
|
|
64
77
|
target={target}
|
|
65
78
|
icon-symbol="new_window"
|
|
66
79
|
variant="primary"
|
|
80
|
+
size="large"
|
|
67
81
|
href={item.githubLink}
|
|
68
82
|
onclick={handleReadItClick}
|
|
69
83
|
>
|
|
@@ -72,6 +86,7 @@
|
|
|
72
86
|
<dx-button
|
|
73
87
|
target={target}
|
|
74
88
|
variant="secondary"
|
|
89
|
+
size="large"
|
|
75
90
|
href={item.trailheadLink}
|
|
76
91
|
onclick={handleReadItClick}
|
|
77
92
|
>
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<dx-featured-content-header
|
|
3
3
|
class="documentation_header"
|
|
4
|
-
|
|
4
|
+
header="Content Archive"
|
|
5
5
|
body="Learn more about the topics that interest you most by exploring the full collection of Salesforce Developers blog and podcast content."
|
|
6
6
|
dark="true"
|
|
7
7
|
no-swoop={isMobile}
|
|
@@ -27,13 +27,13 @@
|
|
|
27
27
|
</div>
|
|
28
28
|
<dx-filter-menu
|
|
29
29
|
name="content-type"
|
|
30
|
-
|
|
30
|
+
header={contentTypeTitle}
|
|
31
31
|
options={contentTypeList}
|
|
32
32
|
onchange={handleUpdateSiteFilter}
|
|
33
33
|
></dx-filter-menu>
|
|
34
34
|
<dx-filter-menu
|
|
35
35
|
name="dates"
|
|
36
|
-
|
|
36
|
+
header={dateTitle}
|
|
37
37
|
options={dateList}
|
|
38
38
|
variant="nested"
|
|
39
39
|
filters-dates-loading={filtersDatesLoading}
|
|
@@ -42,20 +42,20 @@
|
|
|
42
42
|
<template if:false={hideBlogFilters}>
|
|
43
43
|
<dx-filter-menu
|
|
44
44
|
name="authors"
|
|
45
|
-
|
|
45
|
+
header={authorTitle}
|
|
46
46
|
options={authorList}
|
|
47
47
|
onchange={handleFiltersEvent}
|
|
48
48
|
></dx-filter-menu>
|
|
49
49
|
</template>
|
|
50
50
|
<dx-filter-menu
|
|
51
51
|
name="categories"
|
|
52
|
-
|
|
52
|
+
header={categoryTitle}
|
|
53
53
|
options={categoryList}
|
|
54
54
|
onchange={handleFiltersEvent}
|
|
55
55
|
></dx-filter-menu>
|
|
56
56
|
<dx-filter-menu
|
|
57
57
|
name="language"
|
|
58
|
-
|
|
58
|
+
header={languageTitle}
|
|
59
59
|
options={languagesList}
|
|
60
60
|
onchange={handleFiltersEvent}
|
|
61
61
|
></dx-filter-menu>
|
|
@@ -81,13 +81,13 @@
|
|
|
81
81
|
</div>
|
|
82
82
|
<dx-filter-menu
|
|
83
83
|
name="contentType"
|
|
84
|
-
|
|
84
|
+
header={contentTypeTitle}
|
|
85
85
|
options={contentTypeList}
|
|
86
86
|
onchange={handleUpdateSiteFilter}
|
|
87
87
|
></dx-filter-menu>
|
|
88
88
|
<dx-filter-menu
|
|
89
89
|
name="dates"
|
|
90
|
-
|
|
90
|
+
header={dateTitle}
|
|
91
91
|
options={dateList}
|
|
92
92
|
filters-dates-loading={filtersDatesLoading}
|
|
93
93
|
variant="nested"
|
|
@@ -96,20 +96,20 @@
|
|
|
96
96
|
<template if:false={hideBlogFilters}>
|
|
97
97
|
<dx-filter-menu
|
|
98
98
|
name="authors"
|
|
99
|
-
|
|
99
|
+
header={authorTitle}
|
|
100
100
|
options={authorList}
|
|
101
101
|
onchange={handleFiltersEvent}
|
|
102
102
|
></dx-filter-menu>
|
|
103
103
|
</template>
|
|
104
104
|
<dx-filter-menu
|
|
105
105
|
name="categories"
|
|
106
|
-
|
|
106
|
+
header={categoryTitle}
|
|
107
107
|
options={categoryList}
|
|
108
108
|
onchange={handleFiltersEvent}
|
|
109
109
|
></dx-filter-menu>
|
|
110
110
|
<dx-filter-menu
|
|
111
111
|
name="language"
|
|
112
|
-
|
|
112
|
+
header={languageTitle}
|
|
113
113
|
options={languagesList}
|
|
114
114
|
onchange={handleFiltersEvent}
|
|
115
115
|
></dx-filter-menu>
|
|
@@ -312,7 +312,7 @@
|
|
|
312
312
|
<dx-card-minimal
|
|
313
313
|
key={post.id}
|
|
314
314
|
content-type={post.contentType}
|
|
315
|
-
|
|
315
|
+
header={post.title}
|
|
316
316
|
href={post.href}
|
|
317
317
|
></dx-card-minimal>
|
|
318
318
|
</template>
|
|
@@ -324,7 +324,7 @@
|
|
|
324
324
|
<template if:true={post.authors}>
|
|
325
325
|
<dx-card-expanded
|
|
326
326
|
key={post.id}
|
|
327
|
-
|
|
327
|
+
header={post.title}
|
|
328
328
|
content-type={post.contentType}
|
|
329
329
|
href={post.href}
|
|
330
330
|
date={post.date}
|
|
@@ -337,7 +337,7 @@
|
|
|
337
337
|
<template if:false={post.authors}>
|
|
338
338
|
<dx-card-expanded
|
|
339
339
|
key={post.id}
|
|
340
|
-
|
|
340
|
+
header={post.title}
|
|
341
341
|
content-type={post.contentType}
|
|
342
342
|
href={post.href}
|
|
343
343
|
date={post.date}
|
|
@@ -363,7 +363,7 @@
|
|
|
363
363
|
<template if:true={isEmptyState}>
|
|
364
364
|
<dx-empty-state
|
|
365
365
|
variant="alt"
|
|
366
|
-
|
|
366
|
+
header="Beep boop. That did not compute."
|
|
367
367
|
subtitle={emptyStateSubtitle}
|
|
368
368
|
body={emptyStateBody}
|
|
369
369
|
suggestions={emptyStateSuggestions}
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
for:item="item"
|
|
46
46
|
for:index="i"
|
|
47
47
|
key={item.id}
|
|
48
|
-
|
|
48
|
+
header={item.title}
|
|
49
49
|
body={item.description}
|
|
50
50
|
href={item.guidesHref}
|
|
51
51
|
class="docs-card"
|
|
@@ -84,7 +84,7 @@
|
|
|
84
84
|
</div>
|
|
85
85
|
<dx-empty-state
|
|
86
86
|
variant="alt"
|
|
87
|
-
|
|
87
|
+
header="Beep boop. That did not compute."
|
|
88
88
|
subtitle={emptyStateSubtitle}
|
|
89
89
|
body={emptyStateBody}
|
|
90
90
|
suggestions={emptyStateSuggestions}
|
|
@@ -49,7 +49,7 @@
|
|
|
49
49
|
</dx-section>
|
|
50
50
|
<dx-section
|
|
51
51
|
class="events-list upcoming-events"
|
|
52
|
-
|
|
52
|
+
header="Upcoming Events"
|
|
53
53
|
if:true={upcomingEvents.length}
|
|
54
54
|
>
|
|
55
55
|
<dx-card-event
|
|
@@ -57,7 +57,7 @@
|
|
|
57
57
|
for:item="item"
|
|
58
58
|
key={item.id}
|
|
59
59
|
href={item.urlStub}
|
|
60
|
-
|
|
60
|
+
header={item.name}
|
|
61
61
|
end-datetime={item.endDate}
|
|
62
62
|
start-datetime={item.startDate}
|
|
63
63
|
short-description={item.shortDescription}
|
|
@@ -71,7 +71,7 @@
|
|
|
71
71
|
|
|
72
72
|
<dx-section
|
|
73
73
|
class="events-list past-events"
|
|
74
|
-
|
|
74
|
+
header="Past Events"
|
|
75
75
|
if:true={pastEvents.length}
|
|
76
76
|
>
|
|
77
77
|
<dx-card-event
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
for:item="item"
|
|
80
80
|
key={item.id}
|
|
81
81
|
href={item.urlStub}
|
|
82
|
-
|
|
82
|
+
header={item.name}
|
|
83
83
|
end-datetime={item.endDate}
|
|
84
84
|
start-datetime={item.startDate}
|
|
85
85
|
short-description={item.shortDescription}
|
|
@@ -90,7 +90,7 @@
|
|
|
90
90
|
</dx-section>
|
|
91
91
|
<div class="events-empty" if:true={showEmptyState}>
|
|
92
92
|
<dx-empty-state
|
|
93
|
-
|
|
93
|
+
header="Beep boop. That did not compute."
|
|
94
94
|
subtitle={emptyStateSubtitle}
|
|
95
95
|
></dx-empty-state>
|
|
96
96
|
</div>
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
key={cardData.id}
|
|
7
7
|
type="twitter"
|
|
8
8
|
video-id={cardData.videoId}
|
|
9
|
-
|
|
9
|
+
header={cardData.title}
|
|
10
10
|
body={cardData.body}
|
|
11
11
|
has-social={cardData.hasSocial}
|
|
12
12
|
social-name={cardData.socialName}
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
key={cardData.id}
|
|
21
21
|
type="linkedin"
|
|
22
22
|
video-id={cardData.videoId}
|
|
23
|
-
|
|
23
|
+
header={cardData.title}
|
|
24
24
|
body={cardData.body}
|
|
25
25
|
has-social={cardData.hasSocial}
|
|
26
26
|
social-name={cardData.socialName}
|