@pure-ds/storybook 0.3.19 → 0.4.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 (40) hide show
  1. package/.storybook/addons/pds-configurator/SearchTool.js +44 -44
  2. package/.storybook/preview.js +6 -2
  3. package/dist/pds-reference.json +65 -13
  4. package/package.json +50 -50
  5. package/stories/components/PdsCalendar.stories.js +266 -263
  6. package/stories/components/PdsDrawer.stories.js +2 -2
  7. package/stories/components/PdsIcon.stories.js +2 -2
  8. package/stories/components/PdsJsonform.stories.js +2 -2
  9. package/stories/components/PdsRichtext.stories.js +367 -367
  10. package/stories/components/PdsScrollrow.stories.js +140 -140
  11. package/stories/components/PdsSplitpanel.stories.js +502 -502
  12. package/stories/components/PdsTabstrip.stories.js +2 -2
  13. package/stories/components/PdsToaster.stories.js +186 -186
  14. package/stories/components/PdsUpload.stories.js +66 -66
  15. package/stories/enhancements/Dropdowns.stories.js +185 -185
  16. package/stories/enhancements/InteractiveStates.stories.js +625 -625
  17. package/stories/enhancements/MeshGradients.stories.js +321 -320
  18. package/stories/enhancements/OpenGroups.stories.js +227 -227
  19. package/stories/enhancements/RangeSliders.stories.js +232 -232
  20. package/stories/enhancements/RequiredFields.stories.js +189 -189
  21. package/stories/enhancements/Toggles.stories.js +167 -167
  22. package/stories/foundations/Colors.stories.js +2 -1
  23. package/stories/foundations/Icons.stories.js +4 -0
  24. package/stories/foundations/SmartSurfaces.stories.js +485 -367
  25. package/stories/foundations/Spacing.stories.js +5 -1
  26. package/stories/foundations/Typography.stories.js +4 -0
  27. package/stories/foundations/ZIndex.stories.js +329 -325
  28. package/stories/layout/LayoutOverview.stories.js +247 -0
  29. package/stories/layout/LayoutSystem.stories.js +852 -0
  30. package/stories/patterns/BorderEffects.stories.js +74 -72
  31. package/stories/primitives/Accordion.stories.js +5 -3
  32. package/stories/primitives/Alerts.stories.js +261 -46
  33. package/stories/primitives/Badges.stories.js +4 -0
  34. package/stories/primitives/Buttons.stories.js +2 -2
  35. package/stories/primitives/Cards.stories.js +98 -170
  36. package/stories/primitives/Media.stories.js +442 -203
  37. package/stories/primitives/Tables.stories.js +358 -232
  38. package/stories/utilities/Backdrop.stories.js +197 -0
  39. package/stories/patterns/Layout.stories.js +0 -99
  40. package/stories/utilities/GridSystem.stories.js +0 -208
package/stories/primitives/Tables.stories.js CHANGED
@@ -1,232 +1,358 @@
1
- import { html } from 'lit';
2
-
3
- const tablesStoryStyles = html`
4
- <style>
5
- .table-story-section {
6
- padding: var(--spacing-4);
7
- }
8
-
9
- .table-story-description {
10
- margin: 0 0 var(--spacing-4);
11
- font-style: italic;
12
- }
13
-
14
- .table-story-scroll {
15
- overflow-x: auto;
16
- }
17
- </style>
18
- `;
19
-
20
- export default {
21
- title: 'Primitives/Tables',
22
- parameters: {
23
- docs: {
24
- description: {
25
- component: 'Responsive tables with various styling options including striped, bordered, and compact variants.'
26
- }
27
- }
28
- }
29
- };
30
-
31
- export const DefaultTable = () => html`
32
- ${tablesStoryStyles}
33
- <section class="table-story-section">
34
- <table>
35
- <thead>
36
- <tr>
37
- <th>Name</th>
38
- <th>Role</th>
39
- <th>Department</th>
40
- <th>Status</th>
41
- </tr>
42
- </thead>
43
- <tbody>
44
- <tr>
45
- <td>Alice Johnson</td>
46
- <td>Senior Developer</td>
47
- <td>Engineering</td>
48
- <td><span class="badge badge-success">Active</span></td>
49
- </tr>
50
- <tr>
51
- <td>Bob Smith</td>
52
- <td>Product Manager</td>
53
- <td>Product</td>
54
- <td><span class="badge badge-success">Active</span></td>
55
- </tr>
56
- <tr>
57
- <td>Carol Williams</td>
58
- <td>UX Designer</td>
59
- <td>Design</td>
60
- <td><span class="badge badge-warning">Away</span></td>
61
- </tr>
62
- <tr>
63
- <td>David Brown</td>
64
- <td>DevOps Engineer</td>
65
- <td>Engineering</td>
66
- <td><span class="badge badge-danger">Offline</span></td>
67
- </tr>
68
- </tbody>
69
- </table>
70
- </section>
71
- `;
72
-
73
- DefaultTable.storyName = 'Default Table';
74
-
75
- export const StripedTable = () => html`
76
- ${tablesStoryStyles}
77
- <section class="table-story-section">
78
- <table class="table-striped">
79
- <thead>
80
- <tr>
81
- <th>Product</th>
82
- <th>Price</th>
83
- <th>Stock</th>
84
- <th>Category</th>
85
- </tr>
86
- </thead>
87
- <tbody>
88
- <tr>
89
- <td>Laptop Pro</td>
90
- <td>$1,299</td>
91
- <td>45</td>
92
- <td>Electronics</td>
93
- </tr>
94
- <tr>
95
- <td>Wireless Mouse</td>
96
- <td>$29</td>
97
- <td>128</td>
98
- <td>Accessories</td>
99
- </tr>
100
- <tr>
101
- <td>USB-C Hub</td>
102
- <td>$59</td>
103
- <td>76</td>
104
- <td>Accessories</td>
105
- </tr>
106
- <tr>
107
- <td>Monitor 27"</td>
108
- <td>$449</td>
109
- <td>23</td>
110
- <td>Electronics</td>
111
- </tr>
112
- <tr>
113
- <td>Mechanical Keyboard</td>
114
- <td>$149</td>
115
- <td>92</td>
116
- <td>Accessories</td>
117
- </tr>
118
- </tbody>
119
- </table>
120
- </section>
121
- `;
122
-
123
- StripedTable.storyName = 'Striped Table';
124
-
125
- export const BorderedCompactTable = () => html`
126
- ${tablesStoryStyles}
127
- <section class="table-story-section">
128
- <table class="table-bordered table-compact">
129
- <thead>
130
- <tr>
131
- <th>ID</th>
132
- <th>Task</th>
133
- <th>Priority</th>
134
- <th>Due Date</th>
135
- </tr>
136
- </thead>
137
- <tbody>
138
- <tr>
139
- <td>#101</td>
140
- <td>Fix navigation bug</td>
141
- <td><span class="badge badge-danger">High</span></td>
142
- <td>Nov 15, 2025</td>
143
- </tr>
144
- <tr>
145
- <td>#102</td>
146
- <td>Update documentation</td>
147
- <td><span class="badge badge-warning">Medium</span></td>
148
- <td>Nov 18, 2025</td>
149
- </tr>
150
- <tr>
151
- <td>#103</td>
152
- <td>Refactor CSS</td>
153
- <td><span class="badge badge-info">Low</span></td>
154
- <td>Nov 25, 2025</td>
155
- </tr>
156
- <tr>
157
- <td>#104</td>
158
- <td>Add unit tests</td>
159
- <td><span class="badge badge-warning">Medium</span></td>
160
- <td>Nov 20, 2025</td>
161
- </tr>
162
- <tr>
163
- <td>#105</td>
164
- <td>Performance audit</td>
165
- <td><span class="badge badge-danger">High</span></td>
166
- <td>Nov 17, 2025</td>
167
- </tr>
168
- </tbody>
169
- </table>
170
- </section>
171
- `;
172
-
173
- BorderedCompactTable.storyName = 'Bordered Compact Table';
174
-
175
- export const ResponsiveTable = () => html`
176
- ${tablesStoryStyles}
177
- <section class="table-story-section">
178
- <p class="table-story-description">
179
- Resize the window to see horizontal scrolling on small screens
180
- </p>
181
- <div class="table-story-scroll">
182
- <table class="table-striped">
183
- <thead>
184
- <tr>
185
- <th>Order ID</th>
186
- <th>Customer</th>
187
- <th>Product</th>
188
- <th>Quantity</th>
189
- <th>Price</th>
190
- <th>Total</th>
191
- <th>Date</th>
192
- <th>Status</th>
193
- </tr>
194
- </thead>
195
- <tbody>
196
- <tr>
197
- <td>#ORD-001</td>
198
- <td>John Doe</td>
199
- <td>Premium Widget</td>
200
- <td>3</td>
201
- <td>$49.99</td>
202
- <td>$149.97</td>
203
- <td>Nov 15, 2025</td>
204
- <td><span class="badge badge-success">Shipped</span></td>
205
- </tr>
206
- <tr>
207
- <td>#ORD-002</td>
208
- <td>Jane Smith</td>
209
- <td>Standard Gadget</td>
210
- <td>1</td>
211
- <td>$29.99</td>
212
- <td>$29.99</td>
213
- <td>Nov 14, 2025</td>
214
- <td><span class="badge badge-warning">Processing</span></td>
215
- </tr>
216
- <tr>
217
- <td>#ORD-003</td>
218
- <td>Bob Johnson</td>
219
- <td>Deluxe Device</td>
220
- <td>2</td>
221
- <td>$99.99</td>
222
- <td>$199.98</td>
223
- <td>Nov 13, 2025</td>
224
- <td><span class="badge badge-success">Delivered</span></td>
225
- </tr>
226
- </tbody>
227
- </table>
228
- </div>
229
- </section>
230
- `;
231
-
232
- ResponsiveTable.storyName = 'Responsive Table';
1
+ import { html } from 'lit';
2
+
3
+ const tablesStoryStyles = html`
4
+ <style>
5
+ .table-story-section {
6
+ padding: var(--spacing-4);
7
+ }
8
+
9
+ .table-story-description {
10
+ margin: 0 0 var(--spacing-4);
11
+ font-style: italic;
12
+ }
13
+
14
+ .table-story-scroll {
15
+ overflow-x: auto;
16
+ }
17
+ </style>
18
+ `;
19
+
20
+ export default {
21
+ title: 'Primitives/Tables',
22
+ tags: ['table', 'data', 'grid', 'tabular', 'responsive'],
23
+ parameters: {
24
+ pds: {
25
+ tags: ['table', 'data', 'grid', 'tabular', 'responsive', 'striped', 'bordered', 'compact']
26
+ },
27
+ docs: {
28
+ description: {
29
+ component: 'Responsive tables with various styling options including striped, bordered, and compact variants.'
30
+ }
31
+ }
32
+ }
33
+ };
34
+
35
+ export const DefaultTable = () => html`
36
+ ${tablesStoryStyles}
37
+ <section class="table-story-section">
38
+ <table>
39
+ <thead>
40
+ <tr>
41
+ <th>Name</th>
42
+ <th>Role</th>
43
+ <th>Department</th>
44
+ <th>Status</th>
45
+ </tr>
46
+ </thead>
47
+ <tbody>
48
+ <tr>
49
+ <td>Alice Johnson</td>
50
+ <td>Senior Developer</td>
51
+ <td>Engineering</td>
52
+ <td><span class="badge badge-success">Active</span></td>
53
+ </tr>
54
+ <tr>
55
+ <td>Bob Smith</td>
56
+ <td>Product Manager</td>
57
+ <td>Product</td>
58
+ <td><span class="badge badge-success">Active</span></td>
59
+ </tr>
60
+ <tr>
61
+ <td>Carol Williams</td>
62
+ <td>UX Designer</td>
63
+ <td>Design</td>
64
+ <td><span class="badge badge-warning">Away</span></td>
65
+ </tr>
66
+ <tr>
67
+ <td>David Brown</td>
68
+ <td>DevOps Engineer</td>
69
+ <td>Engineering</td>
70
+ <td><span class="badge badge-danger">Offline</span></td>
71
+ </tr>
72
+ </tbody>
73
+ </table>
74
+ </section>
75
+ `;
76
+
77
+ DefaultTable.storyName = 'Default Table';
78
+
79
+ export const StripedTable = () => html`
80
+ ${tablesStoryStyles}
81
+ <section class="table-story-section">
82
+ <table class="table-striped">
83
+ <thead>
84
+ <tr>
85
+ <th>Product</th>
86
+ <th>Price</th>
87
+ <th>Stock</th>
88
+ <th>Category</th>
89
+ </tr>
90
+ </thead>
91
+ <tbody>
92
+ <tr>
93
+ <td>Laptop Pro</td>
94
+ <td>$1,299</td>
95
+ <td>45</td>
96
+ <td>Electronics</td>
97
+ </tr>
98
+ <tr>
99
+ <td>Wireless Mouse</td>
100
+ <td>$29</td>
101
+ <td>128</td>
102
+ <td>Accessories</td>
103
+ </tr>
104
+ <tr>
105
+ <td>USB-C Hub</td>
106
+ <td>$59</td>
107
+ <td>76</td>
108
+ <td>Accessories</td>
109
+ </tr>
110
+ <tr>
111
+ <td>Monitor 27"</td>
112
+ <td>$449</td>
113
+ <td>23</td>
114
+ <td>Electronics</td>
115
+ </tr>
116
+ <tr>
117
+ <td>Mechanical Keyboard</td>
118
+ <td>$149</td>
119
+ <td>92</td>
120
+ <td>Accessories</td>
121
+ </tr>
122
+ </tbody>
123
+ </table>
124
+ </section>
125
+ `;
126
+
127
+ StripedTable.storyName = 'Striped Table';
128
+
129
+ export const BorderedCompactTable = () => html`
130
+ ${tablesStoryStyles}
131
+ <section class="table-story-section">
132
+ <table class="table-bordered table-compact">
133
+ <thead>
134
+ <tr>
135
+ <th>ID</th>
136
+ <th>Task</th>
137
+ <th>Priority</th>
138
+ <th>Due Date</th>
139
+ </tr>
140
+ </thead>
141
+ <tbody>
142
+ <tr>
143
+ <td>#101</td>
144
+ <td>Fix navigation bug</td>
145
+ <td><span class="badge badge-danger">High</span></td>
146
+ <td>Nov 15, 2025</td>
147
+ </tr>
148
+ <tr>
149
+ <td>#102</td>
150
+ <td>Update documentation</td>
151
+ <td><span class="badge badge-warning">Medium</span></td>
152
+ <td>Nov 18, 2025</td>
153
+ </tr>
154
+ <tr>
155
+ <td>#103</td>
156
+ <td>Refactor CSS</td>
157
+ <td><span class="badge badge-info">Low</span></td>
158
+ <td>Nov 25, 2025</td>
159
+ </tr>
160
+ <tr>
161
+ <td>#104</td>
162
+ <td>Add unit tests</td>
163
+ <td><span class="badge badge-warning">Medium</span></td>
164
+ <td>Nov 20, 2025</td>
165
+ </tr>
166
+ <tr>
167
+ <td>#105</td>
168
+ <td>Performance audit</td>
169
+ <td><span class="badge badge-danger">High</span></td>
170
+ <td>Nov 17, 2025</td>
171
+ </tr>
172
+ </tbody>
173
+ </table>
174
+ </section>
175
+ `;
176
+
177
+ BorderedCompactTable.storyName = 'Bordered Compact Table';
178
+
179
+ export const TableResponsiveWrapper = () => html`
180
+ <div class="card">
181
+ <h2>Responsive Table Wrapper</h2>
182
+ <p class="text-muted">
183
+ Wrap tables in <code>.table-responsive</code> for horizontal scrolling on mobile.
184
+ This is the recommended approach for wide data tables.
185
+ </p>
186
+ </div>
187
+
188
+ <div class="table-responsive">
189
+ <table class="table-striped">
190
+ <thead>
191
+ <tr>
192
+ <th>Order ID</th>
193
+ <th>Customer</th>
194
+ <th>Product</th>
195
+ <th>Quantity</th>
196
+ <th>Unit Price</th>
197
+ <th>Total</th>
198
+ <th>Order Date</th>
199
+ <th>Ship Date</th>
200
+ <th>Status</th>
201
+ <th>Actions</th>
202
+ </tr>
203
+ </thead>
204
+ <tbody>
205
+ <tr>
206
+ <td>#ORD-001</td>
207
+ <td>John Doe</td>
208
+ <td>Premium Widget Pro</td>
209
+ <td>3</td>
210
+ <td>$49.99</td>
211
+ <td>$149.97</td>
212
+ <td>Nov 15, 2025</td>
213
+ <td>Nov 17, 2025</td>
214
+ <td><span class="badge badge-success">Shipped</span></td>
215
+ <td><button class="btn-sm btn-outline">View</button></td>
216
+ </tr>
217
+ <tr>
218
+ <td>#ORD-002</td>
219
+ <td>Jane Smith</td>
220
+ <td>Standard Gadget</td>
221
+ <td>1</td>
222
+ <td>$29.99</td>
223
+ <td>$29.99</td>
224
+ <td>Nov 14, 2025</td>
225
+ <td>—</td>
226
+ <td><span class="badge badge-warning">Processing</span></td>
227
+ <td><button class="btn-sm btn-outline">View</button></td>
228
+ </tr>
229
+ <tr>
230
+ <td>#ORD-003</td>
231
+ <td>Bob Johnson</td>
232
+ <td>Deluxe Device XL</td>
233
+ <td>2</td>
234
+ <td>$99.99</td>
235
+ <td>$199.98</td>
236
+ <td>Nov 13, 2025</td>
237
+ <td>Nov 14, 2025</td>
238
+ <td><span class="badge badge-success">Delivered</span></td>
239
+ <td><button class="btn-sm btn-outline">View</button></td>
240
+ </tr>
241
+ </tbody>
242
+ </table>
243
+ </div>
244
+
245
+ <div class="card">
246
+ <h3>How It Works</h3>
247
+ <p>
248
+ On screens smaller than the <code>sm</code> breakpoint (640px), the wrapper enables
249
+ horizontal scrolling with touch-friendly momentum scrolling. The table has a minimum
250
+ width (600px) to ensure content doesn't get too compressed.
251
+ </p>
252
+ <pre><code>&lt;div class="table-responsive"&gt;
253
+ &lt;table&gt;
254
+ ...
255
+ &lt;/table&gt;
256
+ &lt;/div&gt;</code></pre>
257
+ </div>
258
+ `;
259
+
260
+ TableResponsiveWrapper.storyName = 'Responsive Wrapper';
261
+
262
+ export const ResponsiveTable = () => html`
263
+ ${tablesStoryStyles}
264
+ <section class="table-story-section">
265
+ <p class="table-story-description">
266
+ Resize the window to see horizontal scrolling on small screens
267
+ </p>
268
+ <div class="table-story-scroll">
269
+ <table class="table-striped">
270
+ <thead>
271
+ <tr>
272
+ <th>Order ID</th>
273
+ <th>Customer</th>
274
+ <th>Product</th>
275
+ <th>Quantity</th>
276
+ <th>Price</th>
277
+ <th>Total</th>
278
+ <th>Date</th>
279
+ <th>Status</th>
280
+ </tr>
281
+ </thead>
282
+ <tbody>
283
+ <tr>
284
+ <td>#ORD-001</td>
285
+ <td>John Doe</td>
286
+ <td>Premium Widget</td>
287
+ <td>3</td>
288
+ <td>$49.99</td>
289
+ <td>$149.97</td>
290
+ <td>Nov 15, 2025</td>
291
+ <td><span class="badge badge-success">Shipped</span></td>
292
+ </tr>
293
+ <tr>
294
+ <td>#ORD-002</td>
295
+ <td>Jane Smith</td>
296
+ <td>Standard Gadget</td>
297
+ <td>1</td>
298
+ <td>$29.99</td>
299
+ <td>$29.99</td>
300
+ <td>Nov 14, 2025</td>
301
+ <td><span class="badge badge-warning">Processing</span></td>
302
+ </tr>
303
+ <tr>
304
+ <td>#ORD-003</td>
305
+ <td>Bob Johnson</td>
306
+ <td>Deluxe Device</td>
307
+ <td>2</td>
308
+ <td>$99.99</td>
309
+ <td>$199.98</td>
310
+ <td>Nov 13, 2025</td>
311
+ <td><span class="badge badge-success">Delivered</span></td>
312
+ </tr>
313
+ </tbody>
314
+ </table>
315
+ </div>
316
+ </section>
317
+ `;
318
+
319
+ ResponsiveTable.storyName = 'Responsive Table';
320
+
321
+ export const TablesReference = () => html`
322
+ <div class="card">
323
+ <h2>Table Classes Reference</h2>
324
+ </div>
325
+
326
+ <table class="table-bordered">
327
+ <thead>
328
+ <tr>
329
+ <th>Class</th>
330
+ <th>Description</th>
331
+ </tr>
332
+ </thead>
333
+ <tbody>
334
+ <tr>
335
+ <td><code>table</code> (element)</td>
336
+ <td>Base table styling with border-collapse and proper spacing</td>
337
+ </tr>
338
+ <tr>
339
+ <td><code>.table-responsive</code></td>
340
+ <td>Wrapper that enables horizontal scrolling on mobile</td>
341
+ </tr>
342
+ <tr>
343
+ <td><code>.table-striped</code></td>
344
+ <td>Alternating row background colors for readability</td>
345
+ </tr>
346
+ <tr>
347
+ <td><code>.table-bordered</code></td>
348
+ <td>Full borders around cells and table</td>
349
+ </tr>
350
+ <tr>
351
+ <td><code>.table-compact</code></td>
352
+ <td>Reduced cell padding for dense data display</td>
353
+ </tr>
354
+ </tbody>
355
+ </table>
356
+ `;
357
+
358
+ TablesReference.storyName = 'Reference';