@salesforcedevs/arch-components 1.20.17-alpha6 → 1.20.17-alpha8

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 (20) hide show
  1. package/package.json +1 -1
  2. package/src/sa/coverage/coverage.css +0 -35
  3. package/src/sa/coverage/coverage.html +0 -15
  4. package/src/sa/coverage/coverage.ts +0 -404
  5. package/src/sa/coverage/types.d.ts +0 -22
  6. package/src/sa/expandableSection/expandableSection.css +0 -24
  7. package/src/sa/expandableSection/expandableSection.html +0 -20
  8. package/src/sa/expandableSection/expandableSection.stories.ts +0 -37
  9. package/src/sa/expandableSection/expandableSection.ts +0 -24
  10. package/src/sa/explorer/explorer.css +0 -303
  11. package/src/sa/explorer/explorer.html +0 -403
  12. package/src/sa/explorer/explorer.ts +0 -664
  13. package/src/sa/explorer/types.d.ts +0 -60
  14. package/src/sa/gallery/gallery.css +0 -358
  15. package/src/sa/gallery/gallery.html +0 -65
  16. package/src/sa/gallery/gallery.ts +0 -300
  17. package/src/sa/gallery/types.d.ts +0 -35
  18. package/src/sa/socialShare/socialShare.css +0 -49
  19. package/src/sa/socialShare/socialShare.html +0 -56
  20. package/src/sa/socialShare/socialShare.ts +0 -29
package/src/sa/explorer/explorer.css DELETED
@@ -1,303 +0,0 @@
1
- @import 'tds/reset';
2
-
3
- :host {
4
- font-size: var(--tds-font-size-md);
5
- }
6
-
7
- .filter-header {
8
- display: flex;
9
- align-items: center;
10
- justify-content: space-between;
11
- }
12
-
13
- .filter-title {
14
- display: inline-block;
15
- margin-right: var(--tds-spacing-8);
16
- }
17
-
18
- .filter-header h2 {
19
- font-size: var(--tds-font-size-lg);
20
- }
21
-
22
- .filter-form {
23
- margin-bottom: var(--tds-spacing-2);
24
- display: flex;
25
- flex-wrap: wrap;
26
- justify-content: space-between;
27
- }
28
-
29
- .filter-form > * {
30
- margin-right: var(--tds-spacing-4);
31
- margin-left: var(--tds-spacing-4);
32
- }
33
-
34
- .filter-form tds-select {
35
- flex: 1;
36
- }
37
-
38
- .filter-form .search-input {
39
- flex-basis: 100%;
40
- }
41
-
42
- .search-input {
43
- width: 60%;
44
- box-sizing: border-box;
45
- }
46
-
47
- .search-input__wrapper {
48
- align-items: stretch;
49
- display: flex;
50
- position: relative;
51
- margin-bottom: var(--tds-spacing-4);
52
- }
53
-
54
- .search-input__label {
55
- overflow-wrap: break-word;
56
- word-wrap: break-word;
57
- hyphens: auto;
58
- display: block;
59
- padding-right: var(--tds-spacing-2);
60
- padding-top: var(--tds-spacing-2);
61
- color: var(--tds-color-meteorite);
62
- font-size: var(--tds-font-size-xs);
63
- margin-bottom: var(--tds-spacing-2);
64
- }
65
-
66
- .search-input__input {
67
- border-radius: var(--tds-radius-md);
68
- border: 1px solid var(--tds-color-fog);
69
- color: var(--tds-color-black);
70
- flex: 1;
71
- font-family: inherit;
72
- font-size: var(--tds-font-size-md);
73
- line-height: 1.875;
74
- overflow: hidden;
75
- padding: 0.4rem 0;
76
- padding-left: var(--tds-spacing-8);
77
- position: relative;
78
- text-overflow: ellipsis;
79
- transition: border 0.1s linear, background-color 0.1s linear;
80
- white-space: nowrap;
81
- }
82
-
83
- .search-input__icon {
84
- color: var(--tds-color-granite);
85
- left: 10px;
86
- position: absolute;
87
- top: 13px;
88
- z-index: 1;
89
- }
90
-
91
- .table-summary {
92
- display: flex;
93
- justify-content: space-between;
94
- align-items: center;
95
- }
96
-
97
- .table-summary .page-size-controls {
98
- flex-basis: 25%;
99
- }
100
-
101
- .table-summary .page-size-controls,
102
- .table-summary .export-buttons {
103
- display: flex;
104
- align-items: center;
105
- }
106
-
107
-
108
-
109
- .table-summary .export-buttons {
110
- display: flex;
111
- align-items: center;
112
- justify-content: space-between;
113
- }
114
-
115
- .table-summary .page-size-controls div,
116
- .table-summary .export-buttons div {
117
- margin-right: 0.5rem;
118
- color: var(--tds-color-meteorite);
119
- }
120
- .table-summary .export-buttons {
121
- text-align: right;
122
- }
123
- .table-summary .export-buttons > * {
124
- margin-right: 0.5rem;
125
- }
126
- .table-summary .filter-stats {
127
- text-align: center;
128
- color: var(--tds-color-meteorite);
129
- margin-bottom: var(--tds-spacing-4);
130
- }
131
-
132
- table {
133
- width: 100%;
134
- margin: 0 auto;
135
- border-collapse: separate;
136
- border-spacing: 0;
137
- border-right: 1px solid #dddbda;
138
- border-left: 1px solid #dddbda;
139
- border-bottom: 1px solid #111111;
140
- vertical-align: middle;
141
- margin-bottom: var(--tds-spacing-8);
142
- }
143
-
144
- thead {
145
- display: table-header-group;
146
- border-color: inherit;
147
- }
148
-
149
- th {
150
- background-color: #ebf5ff;
151
- border-top: 1px solid #dddbda;
152
- border-bottom: 1px solid #111111;
153
- padding: 1rem;
154
- vertical-align: middle;
155
- text-align: left;
156
- }
157
-
158
- tr {
159
- display: table-row;
160
- vertical-align: middle;
161
- }
162
-
163
- tr:nth-child(even) td {
164
- background: #fafaf9;
165
- }
166
-
167
- tr td:first-child {
168
- border-left: 3px solid transparent;
169
- }
170
-
171
- tr td:last-child {
172
- border-right: 3px solid transparent;
173
- }
174
-
175
- tr:hover td {
176
- box-shadow: #dddbda 0 -1px 0 inset, #dddbda 0 1px 0 inset;
177
- background: #fafaf9;
178
- }
179
-
180
- tr:hover td:first-child {
181
- border-left: 3px solid var(--tds-color-brand);
182
- }
183
-
184
- tr:hover td:last-child {
185
- border-right: 3px solid var(--tds-color-brand);
186
- }
187
-
188
- td {
189
- padding: 0.75rem 1rem;
190
- border-top: 1px solid #dddbda;
191
- border-bottom: 1px solid #dddbda;
192
- }
193
-
194
- .status {
195
- text-align: center;
196
- }
197
-
198
- td.empty-table {
199
- height: 20rem;
200
- text-align: center;
201
- pointer-events: none;
202
- }
203
-
204
- td.empty-table tds-spinner {
205
- display: inline-block;
206
- }
207
-
208
- button.link {
209
- background: none;
210
- border-width: 0;
211
- text-decoration: underline;
212
- cursor: pointer;
213
- }
214
-
215
- .pagination-controls {
216
- display: flex;
217
- justify-content: center;
218
- margin-bottom: var(--tds-spacing-4);
219
- }
220
-
221
- .pagination-controls tds-button {
222
- padding: 0 1rem;
223
- }
224
-
225
- .safe-harbor {
226
- border-radius: 10px;
227
- border: 1px solid gray;
228
- padding: 20px;
229
- margin-bottom: 20px;
230
- }
231
-
232
- .safe-harbor img {
233
- margin-right: 10px;
234
- float: left;
235
- }
236
-
237
- @media screen and (max-width: 48rem) {
238
- .filter-header {
239
- flex-direction: column-reverse;
240
- }
241
-
242
- .filter-header div {
243
- width: 100%;
244
- display: flex;
245
- justify-content: space-between;
246
- align-items: center;
247
- }
248
-
249
- .filter-header sa-social-share {
250
- margin-bottom: var(--tds-spacing-6);
251
- }
252
-
253
- .table-summary {
254
- flex-direction: column;
255
- }
256
-
257
- .table-wrapper {
258
- overflow-x: scroll;
259
- }
260
-
261
- .pagination-controls-top,
262
- .export-label {
263
- display:none;
264
- }
265
- }
266
-
267
- .row-title p {
268
- font-weight: normal;
269
- }
270
-
271
- .row-pattern {
272
- font-size: var(--tds-font-size-sm);
273
- margin-bottom: 1rem;
274
- color: #3e3e3c;
275
- padding-left: 1rem;
276
- width:50%;
277
- align-items: left;
278
- flex: 1;
279
- }
280
-
281
- .row-pattern p {
282
- font-weight: normal;
283
- }
284
-
285
- .row-pattern a {
286
- color: var(--tds-color-brand);
287
- text-decoration: none;
288
- }
289
-
290
- .row-pattern a:hover {
291
- text-decoration: underline;
292
- }
293
-
294
- .selected-pills {
295
- display: flex;
296
- flex-wrap: wrap;
297
- }
298
-
299
- .selected-pills > div {
300
- margin-right: 1rem;
301
- margin-bottom: 1rem;
302
- background-color: white;;
303
- }
package/src/sa/explorer/explorer.html DELETED
@@ -1,403 +0,0 @@
1
- <template>
2
- <div class="filter-header">
3
- <div>
4
- <h2 class="filter-title">Search for Patterns & Anti-Patterns</h2>
5
- <tds-button onclick={handleResetFiltersClick}
6
- >Clear filters</tds-button
7
- >
8
- </div>
9
- <div class="filter-header">
10
- <tds-button class="filter-title" onclick={handleFeedbackClick}
11
- >Submit feedback</tds-button
12
- >
13
- <sa-social-share
14
- title="Pattern &amp; Anti-Pattern Explorer"
15
- url={shareUrl}
16
- ></sa-social-share>
17
- </div>
18
- </div>
19
-
20
- <div class="filter-form">
21
- <tds-select
22
- id="Trusted"
23
- label="Trusted"
24
- value={_selectedTrusted}
25
- onchange={filterChange}
26
- >
27
- <option value="-1">Select a Dimension</option>
28
- <template for:each={trustedArr} for:item="behavior">
29
- <optgroup label={behavior.Name} key={behavior.Name}>
30
- <template
31
- for:each={behavior.Dimensions}
32
- for:item="dimension"
33
- >
34
- <template if:false={dimension.isDisabled}>
35
- <option key={dimension.Name} value={dimension.Name}>
36
- {dimension.Name}
37
- </option>
38
- </template>
39
- <template if:true={dimension.isDisabled}>
40
- <option
41
- key={dimension.Name}
42
- value={dimension.Name}
43
- disabled
44
- >
45
- {dimension.Name}
46
- </option>
47
- </template>
48
- </template>
49
- </optgroup>
50
- </template>
51
- </tds-select>
52
-
53
- <tds-select
54
- id="Easy"
55
- label="Easy"
56
- value={_selectedEasy}
57
- onchange={filterChange}
58
- >
59
- <option value="-1">Select a Dimension</option>
60
- <template for:each={easyArr} for:item="behavior">
61
- <optgroup label={behavior.Name} key={behavior.Name}>
62
- <template
63
- for:each={behavior.Dimensions}
64
- for:item="dimension"
65
- >
66
- <template if:false={dimension.isDisabled}>
67
- <option key={dimension.Name} value={dimension.Name}>
68
- {dimension.Name}
69
- </option>
70
- </template>
71
- <template if:true={dimension.isDisabled}>
72
- <option
73
- key={dimension.Name}
74
- value={dimension.Name}
75
- disabled
76
- >
77
- {dimension.Name}
78
- </option>
79
- </template>
80
- </template>
81
- </optgroup>
82
- </template>
83
- </tds-select>
84
-
85
- <tds-select
86
- id="Adaptable"
87
- label="Adaptable"
88
- value={_selectedAdaptable}
89
- onchange={filterChange}
90
- >
91
- <option value="-1">Select a Dimension</option>
92
- <template for:each={adaptableArr} for:item="behavior">
93
- <optgroup label={behavior.Name} key={behavior.Name}>
94
- <template
95
- for:each={behavior.Dimensions}
96
- for:item="dimension"
97
- >
98
- <template if:false={dimension.isDisabled}>
99
- <option key={dimension.Name} value={dimension.Name}>
100
- {dimension.Name}
101
- </option>
102
- </template>
103
- <template if:true={dimension.isDisabled}>
104
- <option
105
- key={dimension.Name}
106
- value={dimension.Name}
107
- disabled
108
- >
109
- {dimension.Name}
110
- </option>
111
- </template>
112
- </template>
113
- </optgroup>
114
- </template>
115
- </tds-select>
116
- <tds-select
117
- id="ProductArea"
118
- label="Product Area"
119
- value={_selectedProductArea}
120
- onchange={filterChange}
121
- >
122
- <option value="-1">Select a Product Area</option>
123
- <template for:each={productAreasArr} for:item="productArea">
124
- <template if:false={productArea.isDisabled}>
125
- <option key={productArea.Name} value={productArea.Name}>
126
- {productArea.Name}
127
- </option>
128
- </template>
129
- <template if:true={productArea.isDisabled}>
130
- <option
131
- key={productArea.Name}
132
- value={productArea.Name}
133
- disabled
134
- >
135
- {productArea.Name}
136
- </option>
137
- </template>
138
- </template>
139
- </tds-select>
140
- <tds-select
141
- id="Location"
142
- label="Location"
143
- value={_selectedLocation}
144
- onchange={filterChange}
145
- >
146
- <option value="-1">Select a Location</option>
147
- <template for:each={locationsArr} for:item="location">
148
- <template if:false={location.isDisabled}>
149
- <option key={location.Name} value={location.Name}>
150
- {location.Name}
151
- </option>
152
- </template>
153
- <template if:true={location.isDisabled}>
154
- <option key={location.Name} value={location.Name} disabled>
155
- {location.Name}
156
- </option>
157
- </template>
158
- </template>
159
- </tds-select>
160
-
161
- <div class="search-input">
162
- <label class="search-input__label" for="search">Search</label>
163
- <div class="search-input__wrapper">
164
- <tds-icon
165
- class="search-input__icon"
166
- size="small"
167
- symbol="search"
168
- ></tds-icon>
169
- <input
170
- id="search"
171
- name="search"
172
- class="search-input__input"
173
- placeholder="Search..."
174
- icon-symbol="search"
175
- aria-label="Search..."
176
- value={_keywordFilter}
177
- oninput={keywordFilterChange}
178
- />
179
- </div>
180
- </div>
181
-
182
- <div class="selected-pills">
183
- <template for:each={selectedFilters} for:item="selection">
184
- <div key={selection.Name} style="max-width: 200px">
185
- <tds-pill id={selection.Name} onremove={removeFilter}
186
- >{selection.Name}</tds-pill
187
- >
188
- </div>
189
- </template>
190
- </div>
191
- </div>
192
-
193
- <div class="table-summary">
194
- <div class="page-size-controls">
195
- <div>Items per page</div>
196
- <tds-select value={pageSize} onchange={handlePageSizeChange}>
197
- <option value="10">10</option>
198
- <option value="25">25</option>
199
- <option value="50">50</option>
200
- <option value="100">100</option>
201
- <option value="200">200</option>
202
- </tds-select>
203
- </div>
204
- <template if:false={isLoading}>
205
- <div>
206
- <div class="filter-stats">{filterStatsLabel}</div>
207
- <div class="pagination-controls pagination-controls-top">
208
- <tds-button
209
- onclick={handlePreviousPageClick}
210
- disabled={isFirstPage}
211
- >&lt; Previous</tds-button
212
- >
213
- <tds-button
214
- onclick={handleNextPageClick}
215
- disabled={isLastPage}
216
- >Next &gt;</tds-button
217
- >
218
- </div>
219
- </div>
220
- <div class="export-buttons">
221
- <div class="export-label">Export current view:</div>
222
- <tds-button onclick={handlePdfClick}>
223
- <tds-icon symbol="download"></tds-icon>
224
- &nbsp;&nbsp;PDF
225
- </tds-button>
226
- <tds-button onclick={handleCsvClick}>
227
- <tds-icon symbol="download"></tds-icon>
228
- &nbsp;&nbsp;CSV
229
- </tds-button>
230
- </div>
231
- </template>
232
- </div>
233
-
234
- <tds-tabset active-tab-value="pattern">
235
- <tds-tab label="Patterns" value="pattern" title="Patterns">
236
- <div class="table-wrapper" id="pattern-table">
237
- <table>
238
- <thead>
239
- <tr class="row-title">
240
- <th width="50%">
241
- What Good Looks Like
242
- <p>Pattern</p>
243
- </th>
244
- <th width="20%">
245
- Where to Look
246
- <p>Product Area | Location</p>
247
- </th>
248
- <th width="30%">
249
- Learn More
250
- <p>Dimension | Consideration</p>
251
- </th>
252
- </tr>
253
- </thead>
254
- <tbody>
255
- <!-- Table data is loaded -->
256
- <template if:false={isLoading}>
257
- <template
258
- for:each={currentPagePatterns}
259
- for:item="pattern"
260
- >
261
- <tr key={pattern.Id} class="row-pattern">
262
- <td>
263
- <p>{pattern.Name}</p>
264
- <p>{pattern.Description}</p>
265
- </td>
266
- <td>
267
- <p>
268
- {pattern.ProductArea} | In your
269
- {pattern.Location}
270
- </p>
271
- </td>
272
- <td>
273
- <p>
274
- <a
275
- href={pattern.DimensionURL}
276
- target="_blank"
277
- >{pattern.Dimension}</a
278
- >&nbsp;|&nbsp;
279
- <a
280
- href={pattern.ConsiderationURL}
281
- target="_blank"
282
- >{pattern.Consideration}</a
283
- >
284
- </p>
285
- </td>
286
- </tr>
287
- </template>
288
-
289
- <template if:false={hasPatterns}>
290
- <tr>
291
- <td colspan="3">
292
- There are no matching patterns for the
293
- selected dimensions...
294
- </td>
295
- </tr>
296
- </template>
297
- </template>
298
-
299
- <!-- Table data is still loading -->
300
- <template if:true={isLoading}>
301
- <tr>
302
- <td colspan="3">
303
- Select a dimension to get started...
304
- </td>
305
- </tr>
306
- </template>
307
- </tbody>
308
- </table>
309
- </div>
310
- </tds-tab>
311
- <tds-tab
312
- label="Anti-Patterns"
313
- value="anti-pattern"
314
- title="Anti-Patterns"
315
- >
316
- <div class="table-wrapper" id="anti-pattern-table">
317
- <table>
318
- <thead>
319
- <tr class="row-title">
320
- <th width="50%">
321
- What to Avoid
322
- <p>Anti-Pattern</p>
323
- </th>
324
- <th width="20%">
325
- Where to Look
326
- <p>Product Area | Location</p>
327
- </th>
328
- <th width="30%">
329
- Learn More
330
- <p>Dimension | Consideration</p>
331
- </th>
332
- </tr>
333
- </thead>
334
- <tbody>
335
- <!-- Table data is loaded -->
336
- <template if:false={isLoading}>
337
- <template
338
- for:each={currentPageAntiPatterns}
339
- for:item="pattern"
340
- >
341
- <tr key={pattern.Id} class="row-pattern">
342
- <td>
343
- <p>{pattern.Name}</p>
344
- <p>{pattern.Description}</p>
345
- </td>
346
- <td>
347
- <p>
348
- {pattern.ProductArea} | In your
349
- {pattern.Location}
350
- </p>
351
- </td>
352
- <td>
353
- <p>
354
- <a
355
- href={pattern.DimensionURL}
356
- target="_blank"
357
- >{pattern.Dimension}</a
358
- >&nbsp;|&nbsp;
359
- <a
360
- href={pattern.ConsiderationURL}
361
- target="_blank"
362
- >{pattern.Consideration}</a
363
- >
364
- </p>
365
- </td>
366
- </tr>
367
- </template>
368
-
369
- <template if:false={hasAntiPatterns}>
370
- <tr>
371
- <td colspan="3">
372
- There are no matching anti-patterns for
373
- the selected dimensions...
374
- </td>
375
- </tr>
376
- </template>
377
- </template>
378
-
379
- <!-- Table data is still loading -->
380
- <template if:true={isLoading}>
381
- <tr>
382
- <td colspan="3">
383
- Select a dimension to get started...
384
- </td>
385
- </tr>
386
- </template>
387
- </tbody>
388
- </table>
389
- </div>
390
- </tds-tab>
391
- </tds-tabset>
392
-
393
- <template if:false={isLoading}>
394
- <div class="pagination-controls">
395
- <tds-button onclick={handlePreviousPageClick} disabled={isFirstPage}
396
- >&lt; Previous</tds-button
397
- >
398
- <tds-button onclick={handleNextPageClick} disabled={isLastPage}
399
- >Next &gt;</tds-button
400
- >
401
- </div>
402
- </template>
403
- </template>