@salesforcedevs/dx-components 0.75.0 → 0.78.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.
Files changed (8) hide show
  1. package/package.json +2 -3
  2. package/src/assets/icons/salesforcebrand-sprite/svg/symbols.svg +445 -111
  3. package/src/modules/dx/codeBlock/codeBlock.ts +5 -1
  4. package/src/modules/dx/sidebar/sidebar.css +1 -105
  5. package/src/modules/dx/sidebarOld/sidebarOld.css +1 -109
  6. package/src/modules/dxHelpers/leftNavBar/leftNavBar.css +113 -0
  7. package/src/modules/dxUtils/prismjs/prismjs.ts +347 -9
  8. package/LICENSE +0 -12
package/src/modules/dx/codeBlock/codeBlock.ts CHANGED
@@ -45,7 +45,11 @@ export default class CodeBlock extends LightningElement {
45
45
  { label: "PHP", id: "php" },
46
46
  { label: "JSON", id: "json" },
47
47
  { label: "Swift", id: "swift" },
48
- { label: "Kotlin", id: "kotlin" }
48
+ { label: "Kotlin", id: "kotlin" },
49
+ { label: "Python", id: "python" },
50
+ { label: "Bash", id: "bash" },
51
+ { label: "SQL", id: "sql" },
52
+ { label: "YAML", id: "yaml" }
49
53
  ];
50
54
 
51
55
  connectedCallback() {
package/src/modules/dx/sidebar/sidebar.css CHANGED
@@ -1,17 +1,4 @@
1
- @import "dxHelpers/reset";
2
- @import "dxHelpers/text";
3
-
4
- :host {
5
- --dx-c-sidebar-width: 275px;
6
- --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
7
- --dx-c-sidebar-button-background: white;
8
- --dx-c-sidebar-button-border: white;
9
- --dx-c-sidebar-button-color-hover: white;
10
- --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
11
- --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
12
- --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
13
- --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
14
- }
1
+ @import "dxHelpers/leftNavBar";
15
2
 
16
3
  dx-empty-state {
17
4
  --dx-c-empty-state-background: var(--sds-g-gray-2);
@@ -20,102 +7,11 @@ dx-empty-state {
20
7
  display: none;
21
8
  }
22
9
 
23
- dx-tree:not(:last-child) {
24
- margin-bottom: var(--dx-g-spacing-sm);
25
- }
26
-
27
- .header {
28
- box-sizing: content-box;
29
- display: flex;
30
- line-height: var(--dx-g-spacing-xl);
31
- margin-bottom: 12px;
32
- }
33
-
34
- .padding-horizontal {
35
- padding-left: var(--dx-g-spacing-md);
36
- padding-right: var(--dx-g-spacing-md);
37
- }
38
-
39
- .header-title {
40
- line-height: inherit;
41
- }
42
-
43
- .header-toggle-button {
44
- position: absolute;
45
- right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
46
-
47
- --dx-c-button-opacity: 0;
48
- --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
49
- --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
50
- --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
51
- --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
52
- --dx-c-button-custom-background-hover: var(
53
- --dx-c-sidebar-button-background-hover
54
- );
55
- --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
56
- }
57
-
58
- .header-toggle-icon {
59
- margin: auto 0 auto auto;
60
- color: var(--dx-g-blue-vibrant-30);
61
- }
62
-
63
- .header-toggle-icon dx-icon {
64
- transition: var(--dx-g-transition-transform-2x);
65
- }
66
-
67
- .container {
68
- background-color: var(--dx-g-gray-95);
69
- display: flex;
70
- flex-direction: column;
71
- height: var(--dx-c-sidebar-height);
72
- width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
73
- }
74
-
75
- .container:not(.container-mobile) {
76
- --border-color: transparent;
77
- --left-spacing: calc(
78
- var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
79
- );
80
-
81
- box-shadow: 2px 0 0 0 var(--border-color);
82
- min-height: var(--dx-c-sidebar-min-height);
83
- padding: var(--dx-c-sidebar-vertical-padding) 0
84
- var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
85
- position: relative;
86
- }
87
-
88
- .collapsed.container:not(.container-mobile) {
89
- background-color: transparent;
90
- }
91
-
92
- .collapsed.container:not(.container-border-active) {
93
- --border-color: transparent;
94
- }
95
-
96
- .container.container-border-active {
97
- --border-color: var(--dx-c-sidebar-button-color);
98
- }
99
-
100
10
  .sidebar-content {
101
11
  overflow-y: auto;
102
12
  padding-bottom: var(--dx-g-spacing-md);
103
13
  }
104
14
 
105
- .search {
106
- padding-bottom: var(--dx-g-spacing-md);
107
- }
108
-
109
- .search-box {
110
- --dx-c-input-width: 100%;
111
- }
112
-
113
- .truncate {
114
- overflow: hidden;
115
- text-overflow: ellipsis;
116
- white-space: nowrap;
117
- }
118
-
119
15
  .loading-skeleton {
120
16
  margin-top: var(--dx-g-spacing-md);
121
17
  }
package/src/modules/dx/sidebarOld/sidebarOld.css CHANGED
@@ -1,107 +1,13 @@
1
- @import "dxHelpers/reset";
2
- @import "dxHelpers/text";
3
-
4
- :host {
5
- --dx-c-sidebar-width: 275px;
6
- --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
7
- --dx-c-sidebar-button-background: white;
8
- --dx-c-sidebar-button-border: white;
9
- --dx-c-sidebar-button-color-hover: white;
10
- --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
11
- --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
12
- --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
13
- --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
14
- }
15
-
16
- dx-tree:not(:last-child) {
17
- margin-bottom: var(--dx-g-spacing-sm);
18
- }
19
-
20
- .header {
21
- box-sizing: content-box;
22
- display: flex;
23
- line-height: var(--dx-g-spacing-xl);
24
- margin-bottom: 12px;
25
- }
26
-
27
- .padding-horizontal {
28
- padding-left: var(--dx-g-spacing-md);
29
- padding-right: var(--dx-g-spacing-md);
30
- }
31
-
32
- .header-title {
33
- line-height: inherit;
34
- }
35
-
36
- .header-toggle-button {
37
- position: absolute;
38
- right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
39
-
40
- --dx-c-button-opacity: 0;
41
- --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
42
- --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
43
- --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
44
- --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
45
- --dx-c-button-custom-background-hover: var(
46
- --dx-c-sidebar-button-background-hover
47
- );
48
- --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
49
- }
50
-
51
- .header-toggle-icon {
52
- margin: auto 0 auto auto;
53
- color: var(--dx-g-blue-vibrant-30);
54
- }
55
-
56
- .header-toggle-icon dx-icon {
57
- transition: var(--dx-g-transition-transform-2x);
58
- }
59
-
60
- .container.collapsed {
61
- width: var(--dx-g-spacing-xl);
62
- }
1
+ @import "dxHelpers/leftNavBar";
63
2
 
64
3
  .collapsed .header-toggle-button {
65
4
  transform: rotate(180deg);
66
5
  }
67
6
 
68
- .container {
69
- background-color: var(--dx-g-gray-95);
70
- display: flex;
71
- flex-direction: column;
72
- height: var(--dx-c-sidebar-height);
73
- width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
74
- }
75
-
76
- .container:not(.container-mobile) {
77
- --border-color: var(--dx-g-gray-95);
78
- --left-spacing: calc(
79
- var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
80
- );
81
-
82
- border-right: 2px solid var(--border-color);
83
- min-height: var(--dx-c-sidebar-min-height);
84
- padding: var(--dx-c-sidebar-vertical-padding) 0
85
- var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
86
- position: relative;
87
- }
88
-
89
- .collapsed.container:not(.container-mobile) {
90
- background-color: transparent;
91
- }
92
-
93
- .collapsed.container:not(.container-border-active) {
94
- --border-color: transparent;
95
- }
96
-
97
7
  .container:hover .header-toggle-button {
98
8
  --dx-c-button-opacity: 1;
99
9
  }
100
10
 
101
- .container.container-border-active {
102
- --border-color: var(--dx-c-sidebar-button-color);
103
- }
104
-
105
11
  .container.container-mobile {
106
12
  width: 100%;
107
13
  }
@@ -138,20 +44,6 @@ dx-tree:not(:last-child) {
138
44
  overflow-y: auto;
139
45
  }
140
46
 
141
- .search {
142
- padding-bottom: var(--dx-g-spacing-md);
143
- }
144
-
145
- .search-box {
146
- --dx-c-input-width: 100%;
147
- }
148
-
149
- .truncate {
150
- overflow: hidden;
151
- text-overflow: ellipsis;
152
- white-space: nowrap;
153
- }
154
-
155
47
  dx-empty-state {
156
48
  --dx-c-empty-state-background: var(--sds-g-gray-2);
157
49
  --dx-c-empty-state-image-width: 400px;
package/src/modules/dxHelpers/leftNavBar/leftNavBar.css ADDED
@@ -0,0 +1,113 @@
1
+ @import "dxHelpers/reset";
2
+ @import "dxHelpers/text";
3
+
4
+ :host {
5
+ --dx-c-sidebar-width: 275px;
6
+ --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
7
+ --dx-c-sidebar-button-background: white;
8
+ --dx-c-sidebar-button-border: white;
9
+ --dx-c-sidebar-button-color-hover: white;
10
+ --dx-c-sidebar-button-background-hover: var(--dx-g-blue-vibrant-50);
11
+ --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
12
+ --dx-c-sidebar-left-padding: var(--dx-g-page-padding-horizontal);
13
+ --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
14
+ }
15
+
16
+ dx-tree:not(:last-child) {
17
+ margin-bottom: var(--dx-g-spacing-sm);
18
+ }
19
+
20
+ .header {
21
+ box-sizing: content-box;
22
+ display: flex;
23
+ line-height: var(--dx-g-spacing-xl);
24
+ margin-bottom: 12px;
25
+ }
26
+
27
+ .padding-horizontal {
28
+ padding-left: var(--dx-g-spacing-md);
29
+ padding-right: var(--dx-g-spacing-md);
30
+ }
31
+
32
+ .header-title {
33
+ line-height: inherit;
34
+ }
35
+
36
+ .header-toggle-button {
37
+ position: absolute;
38
+ right: calc((-1 * (var(--dx-g-spacing-xl) / 2)) - 1px);
39
+
40
+ --dx-c-button-opacity: 0;
41
+ --dx-c-button-custom-color: var(--dx-c-sidebar-button-color);
42
+ --dx-c-button-custom-background: var(--dx-c-sidebar-button-background);
43
+ --dx-c-button-custom-border: var(--dx-c-sidebar-button-border);
44
+ --dx-c-button-custom-color-hover: var(--dx-c-sidebar-button-color-hover);
45
+ --dx-c-button-custom-background-hover: var(
46
+ --dx-c-sidebar-button-background-hover
47
+ );
48
+ --dx-c-button-custom-border-hover: var(--dx-c-sidebar-button-border-hover);
49
+ }
50
+
51
+ .header-toggle-icon {
52
+ margin: auto 0 auto auto;
53
+ color: var(--dx-g-blue-vibrant-30);
54
+ }
55
+
56
+ .header-toggle-icon dx-icon {
57
+ transition: var(--dx-g-transition-transform-2x);
58
+ }
59
+
60
+ .container.collapsed {
61
+ width: var(--dx-g-spacing-xl);
62
+ }
63
+
64
+ .container {
65
+ background-color: var(--dx-g-gray-95);
66
+ display: flex;
67
+ flex-direction: column;
68
+ height: var(--dx-c-sidebar-height);
69
+ width: calc(var(--dx-c-sidebar-width) + var(--left-spacing));
70
+ }
71
+
72
+ .container:not(.container-mobile) {
73
+ --border-color: transparent;
74
+ --left-spacing: calc(
75
+ var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
76
+ );
77
+
78
+ box-shadow: 2px 0 0 0 var(--border-color);
79
+ min-height: var(--dx-c-sidebar-min-height);
80
+ padding: var(--dx-c-sidebar-vertical-padding) 0
81
+ var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
82
+ position: relative;
83
+ }
84
+
85
+ .collapsed.container:not(.container-mobile) {
86
+ background-color: transparent;
87
+ }
88
+
89
+ .collapsed.container:not(.container-border-active) {
90
+ --border-color: transparent;
91
+ }
92
+
93
+ .container:hover .header-toggle-button {
94
+ --dx-c-button-opacity: 1;
95
+ }
96
+
97
+ .container.container-border-active {
98
+ --border-color: var(--dx-c-sidebar-button-color);
99
+ }
100
+
101
+ .search {
102
+ padding-bottom: var(--dx-g-spacing-md);
103
+ }
104
+
105
+ .search-box {
106
+ --dx-c-input-width: 100%;
107
+ }
108
+
109
+ .truncate {
110
+ overflow: hidden;
111
+ text-overflow: ellipsis;
112
+ white-space: nowrap;
113
+ }