@salesforcedevs/dw-components 1.3.87 → 1.3.88

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 +2 -2
  2. package/src/modules/dw/browseTrials/browseTrials.css +4 -27
  3. package/src/modules/dw/browseTrials/browseTrials.html +53 -56
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@salesforcedevs/dw-components",
3
- "version": "1.3.87",
3
+ "version": "1.3.88",
4
4
  "description": "Lightning web components for https://developer.salesforce.com",
5
5
  "license": "MIT",
6
6
  "engines": {
@@ -24,5 +24,5 @@
24
24
  "@types/setimmediate": "^1.0.2",
25
25
  "setimmediate": "^1.0.5"
26
26
  },
27
- "gitHead": "ba1b6c0b4fd5401487e817635bf3843089ed5558"
27
+ "gitHead": "0fd9edba15fb1e8120046a70384598e805388237"
28
28
  }
package/src/modules/dw/browseTrials/browseTrials.css CHANGED
@@ -6,14 +6,10 @@
6
6
  --dw-browse-trials-padding-bottom: 0;
7
7
  }
8
8
 
9
- .title {
10
- color: var(--dx-g-blue-vibrant-20);
11
- font-family: var(--dx-g-font-display);
12
- font-weight: var(--dx-g-font-weight-demi);
13
- font-size: 32px;
14
- letter-spacing: -0.4px;
15
- line-height: 40px;
16
- margin-bottom: var(--dx-g-spacing-md);
9
+ .category-section {
10
+ --dx-c-section-padding-horizontal: 0;
11
+ --dx-c-section-padding-bottom: 0;
12
+ --dx-c-section-padding-top: var(--dx-g-spacing-4xl);
17
13
  }
18
14
 
19
15
  .panel-list-container {
@@ -27,32 +23,13 @@ dx-tab-panel-list {
27
23
  --dx-c-tab-panel-list-horizontal-padding: 0;
28
24
  }
29
25
 
30
- dx-card-trial {
31
- width: 400px;
32
- max-width: 100%;
33
- min-width: 240px;
34
- }
35
-
36
26
  .category-text-container {
37
27
  width: 100%;
38
28
  }
39
29
 
40
- .category-subtitle {
41
- color: var(--dx-g-font-sans);
42
- margin-top: var(--dx-g-spacing-smd);
43
- max-width: 560px;
44
- }
45
-
46
30
  .button-toggle-container {
47
31
  display: flex;
48
32
  flex-wrap: wrap;
49
33
  gap: var(--dx-g-spacing-md);
50
34
  margin-top: var(--dx-g-spacing-3xl);
51
35
  }
52
-
53
- .category-container {
54
- display: flex;
55
- flex-wrap: wrap;
56
- gap: 40px;
57
- margin-top: var(--dx-g-spacing-4xl);
58
- }
package/src/modules/dw/browseTrials/browseTrials.html CHANGED
@@ -1,6 +1,5 @@
1
1
  <template>
2
- <div class="panel-list-container">
3
- <h2 class="title">{title}</h2>
2
+ <dx-section title={title}>
4
3
  <dx-tab-panel-list
5
4
  tabs={tabLabels}
6
5
  onchange={handleTabChange}
@@ -26,64 +25,62 @@
26
25
  </template>
27
26
  </div>
28
27
  <template for:each={filteredCategories} for:item="category">
29
- <div key={category.title} class="category-container">
30
- <div
31
- if:true={category.title}
32
- class="category-text-container"
33
- >
34
- <h2 class="dx-text-display-6 category-title">
35
- {category.title}
36
- </h2>
37
- <p
38
- if:true={category.subtitle}
39
- class="category-subtitle"
28
+ <dx-section
29
+ title={category.title}
30
+ subtitle={category.subtitle}
31
+ heading-level="4"
32
+ subtitle-level="2"
33
+ key={category.title}
34
+ class="category-section"
35
+ >
36
+ <dx-grid columns="three">
37
+ <template
38
+ for:each={category.cards}
39
+ for:item="card"
40
40
  >
41
- {category.subtitle}
42
- </p>
43
- </div>
44
- <template for:each={category.cards} for:item="card">
45
- <template if:true={card.hasModal}>
46
- <dx-card-trial
47
- key={card.title}
48
- badge-background-color={card.badgeBackgroundColor}
49
- badge-symbol={card.badgeSymbol}
50
- body={card.body}
51
- details={card.details}
52
- modal-title={card.modalTitle}
53
- modal-details={card.modalDetails}
54
- href={card.href}
55
- label={card.label}
56
- terms={card.terms}
57
- title={card.title}
58
- button-one-cta={card.buttonOneCta}
59
- button-one-href={card.buttonOneHref}
60
- button-one-icon={card.buttonOneIcon}
61
- button-two-cta={card.buttonTwoCta}
62
- modal-type-badge-value={card.modalTypeBadgeValue}
63
- modal-type-badge-dark={card.modalTypeBadgeDark}
64
- hide-card-details="true"
65
- ></dx-card-trial>
66
- </template>
67
- <template if:false={card.hasModal}>
68
- <dx-card-trial
69
- key={card.title}
70
- badge-background-color={card.badgeBackgroundColor}
71
- badge-symbol={card.badgeSymbol}
72
- body={card.body}
73
- href={card.href}
74
- label={card.label}
75
- terms={card.terms}
76
- title={card.title}
77
- button-one-cta={card.buttonOneCta}
78
- button-one-href={card.buttonOneHref}
79
- button-one-icon={card.buttonOneIcon}
80
- ></dx-card-trial>
41
+ <template if:true={card.hasModal}>
42
+ <dx-card-trial
43
+ key={card.title}
44
+ badge-background-color={card.badgeBackgroundColor}
45
+ badge-symbol={card.badgeSymbol}
46
+ body={card.body}
47
+ details={card.details}
48
+ modal-title={card.modalTitle}
49
+ modal-details={card.modalDetails}
50
+ href={card.href}
51
+ label={card.label}
52
+ terms={card.terms}
53
+ title={card.title}
54
+ button-one-cta={card.buttonOneCta}
55
+ button-one-href={card.buttonOneHref}
56
+ button-one-icon={card.buttonOneIcon}
57
+ button-two-cta={card.buttonTwoCta}
58
+ modal-type-badge-value={card.modalTypeBadgeValue}
59
+ modal-type-badge-dark={card.modalTypeBadgeDark}
60
+ hide-card-details="true"
61
+ ></dx-card-trial>
62
+ </template>
63
+ <template if:false={card.hasModal}>
64
+ <dx-card-trial
65
+ key={card.title}
66
+ badge-background-color={card.badgeBackgroundColor}
67
+ badge-symbol={card.badgeSymbol}
68
+ body={card.body}
69
+ href={card.href}
70
+ label={card.label}
71
+ terms={card.terms}
72
+ title={card.title}
73
+ button-one-cta={card.buttonOneCta}
74
+ button-one-href={card.buttonOneHref}
75
+ button-one-icon={card.buttonOneIcon}
76
+ ></dx-card-trial>
77
+ </template>
81
78
  </template>
82
- </template>
83
- </div>
79
+ </dx-grid>
80
+ </dx-section>
84
81
  </template>
85
82
  </dx-tab-panel>
86
83
  </template>
87
84
  </dx-tab-panel-list>
88
- </div>
85
+ </dx-section>
89
86
  </template>