@pure-ds/storybook 0.1.5 → 0.1.7
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/.storybook/addons/pds-configurator/preview.js +2 -2
- package/dist/pds-reference.json +1 -1
- package/package.json +3 -3
- package/scripts/package-build.js +2 -4
- package/stories/GettingStarted.md +96 -96
- package/stories/components/PdsDrawer.stories.js +602 -19
- package/stories/components/PdsIcon.stories.js +22 -6
- package/stories/components/PdsTabstrip.stories.js +434 -26
- package/stories/foundations/Colors.stories.js +240 -75
- package/stories/foundations/Icons.stories.js +287 -177
- package/stories/foundations/Spacing.stories.js +161 -57
- package/stories/foundations/Typography.stories.js +945 -68
- package/stories/primitives/Alerts.stories.js +25 -31
- package/stories/primitives/Badges.stories.js +146 -35
- package/stories/primitives/Buttons.stories.js +213 -85
- package/stories/primitives/Cards.stories.js +330 -53
- package/stories/primitives/Forms.stories.js +92 -161
|
@@ -1,13 +1,29 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
|
|
3
|
+
const docsParameters = {
|
|
4
|
+
description: {
|
|
5
|
+
component: 'Slide-out panels from any edge'
|
|
6
|
+
}
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
if (typeof window !== 'undefined') {
|
|
10
|
+
import('../reference/reference-docs.js')
|
|
11
|
+
.then(({ createComponentDocsPage }) => {
|
|
12
|
+
docsParameters.page = createComponentDocsPage('pds-drawer');
|
|
13
|
+
})
|
|
14
|
+
.catch((error) => {
|
|
15
|
+
console.warn('storybook: docs page failed to load for pds-drawer', error);
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
|
|
3
19
|
export default {
|
|
4
|
-
title: '
|
|
20
|
+
title: 'Components/Pds Drawer',
|
|
21
|
+
tags: ['autodocs', 'grouping'],
|
|
5
22
|
parameters: {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
23
|
+
pds: {
|
|
24
|
+
tags: ['navigation', 'layout', 'grouping', 'interaction']
|
|
25
|
+
},
|
|
26
|
+
docs: docsParameters
|
|
11
27
|
},
|
|
12
28
|
argTypes: {
|
|
13
29
|
position: {
|
|
@@ -19,22 +35,589 @@ export default {
|
|
|
19
35
|
};
|
|
20
36
|
|
|
21
37
|
export const Default = {
|
|
22
|
-
render: (args) =>
|
|
23
|
-
|
|
24
|
-
|
|
38
|
+
render: (args) => {
|
|
39
|
+
setTimeout(() => {
|
|
40
|
+
const btn = document.querySelector('#open-drawer-btn');
|
|
41
|
+
const drawer = document.querySelector('#demo-drawer');
|
|
42
|
+
const closeBtn = document.querySelector('#close-drawer-btn');
|
|
43
|
+
|
|
44
|
+
if (btn && drawer) {
|
|
45
|
+
btn.onclick = () => drawer.open = true;
|
|
46
|
+
}
|
|
47
|
+
if (closeBtn && drawer) {
|
|
48
|
+
closeBtn.onclick = () => drawer.open = false;
|
|
49
|
+
}
|
|
50
|
+
}, 0);
|
|
51
|
+
|
|
52
|
+
return html`
|
|
53
|
+
<button id="open-drawer-btn" class="btn-primary">
|
|
54
|
+
<pds-icon icon="list"></pds-icon>
|
|
55
|
+
<span>Open Drawer (${args.position})</span>
|
|
56
|
+
</button>
|
|
57
|
+
|
|
58
|
+
<pds-drawer id="demo-drawer" position="${args.position}">
|
|
59
|
+
<div slot="drawer-header" class="flex items-center gap-md">
|
|
60
|
+
<pds-icon icon="info" size="lg"></pds-icon>
|
|
61
|
+
<h2>Drawer from ${args.position}</h2>
|
|
62
|
+
</div>
|
|
63
|
+
|
|
64
|
+
<div slot="drawer-content" class="flex flex-col gap-md">
|
|
65
|
+
<article class="card">
|
|
66
|
+
<h4>About this Drawer</h4>
|
|
67
|
+
<p>This drawer slides from the <strong>${args.position}</strong> edge of the screen. Drawers are perfect for:</p>
|
|
68
|
+
<ul>
|
|
69
|
+
<li>Navigation menus</li>
|
|
70
|
+
<li>Filter panels</li>
|
|
71
|
+
<li>Settings dialogs</li>
|
|
72
|
+
<li>Detail views</li>
|
|
73
|
+
</ul>
|
|
74
|
+
</article>
|
|
75
|
+
|
|
76
|
+
<article class="card surface-elevated">
|
|
77
|
+
<h4>Quick Actions</h4>
|
|
78
|
+
<nav class="flex flex-col gap-sm">
|
|
79
|
+
<button class="btn-outline">
|
|
80
|
+
<pds-icon icon="download"></pds-icon>
|
|
81
|
+
<span>Download Report</span>
|
|
82
|
+
</button>
|
|
83
|
+
<button class="btn-outline">
|
|
84
|
+
<pds-icon icon="share"></pds-icon>
|
|
85
|
+
<span>Share with Team</span>
|
|
86
|
+
</button>
|
|
87
|
+
<button class="btn-outline">
|
|
88
|
+
<pds-icon icon="printer"></pds-icon>
|
|
89
|
+
<span>Print Document</span>
|
|
90
|
+
</button>
|
|
91
|
+
</nav>
|
|
92
|
+
</article>
|
|
93
|
+
|
|
94
|
+
<button id="close-drawer-btn" class="btn-primary">
|
|
95
|
+
<pds-icon icon="x"></pds-icon>
|
|
96
|
+
<span>Close Drawer</span>
|
|
97
|
+
</button>
|
|
98
|
+
</div>
|
|
99
|
+
</pds-drawer>
|
|
100
|
+
`;
|
|
101
|
+
},
|
|
102
|
+
args: {
|
|
103
|
+
position: 'right'
|
|
104
|
+
}
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
export const AllPositions = () => {
|
|
108
|
+
setTimeout(() => {
|
|
109
|
+
['left', 'right', 'top', 'bottom'].forEach(pos => {
|
|
110
|
+
const btn = document.querySelector(`#open-drawer-${pos}`);
|
|
111
|
+
const drawer = document.querySelector(`#drawer-${pos}`);
|
|
112
|
+
const closeBtn = document.querySelector(`#close-drawer-${pos}`);
|
|
113
|
+
|
|
114
|
+
if (btn && drawer) {
|
|
115
|
+
btn.onclick = () => drawer.open = true;
|
|
116
|
+
}
|
|
117
|
+
if (closeBtn && drawer) {
|
|
118
|
+
closeBtn.onclick = () => drawer.open = false;
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
}, 0);
|
|
122
|
+
|
|
123
|
+
return html`
|
|
124
|
+
<div class="grid grid-auto-sm gap-md">
|
|
125
|
+
<button id="open-drawer-bottom" class="btn-primary">
|
|
126
|
+
<pds-icon icon="sidebar" rotate="-90" size="sm"></pds-icon>
|
|
127
|
+
<span>Bottom Drawer</span>
|
|
128
|
+
</button>
|
|
129
|
+
<button id="open-drawer-left" class="btn-secondary">
|
|
130
|
+
<pds-icon icon="sidebar" size="sm"></pds-icon>
|
|
131
|
+
<span>Left Drawer</span>
|
|
132
|
+
</button>
|
|
133
|
+
<button id="open-drawer-right" class="btn-secondary">
|
|
134
|
+
<pds-icon icon="sidebar" rotate="180" size="sm"></pds-icon>
|
|
135
|
+
<span>Right Drawer</span>
|
|
136
|
+
</button>
|
|
137
|
+
<button id="open-drawer-top" class="btn-secondary">
|
|
138
|
+
<pds-icon icon="sidebar" rotate="90" size="sm"></pds-icon>
|
|
139
|
+
<span>Top Drawer</span>
|
|
140
|
+
</button>
|
|
141
|
+
</div>
|
|
142
|
+
|
|
143
|
+
<pds-drawer id="drawer-left" position="left">
|
|
144
|
+
<div slot="drawer-header" class="flex items-center gap-md">
|
|
145
|
+
<pds-icon icon="list" size="lg"></pds-icon>
|
|
146
|
+
<h2>Main Navigation</h2>
|
|
147
|
+
</div>
|
|
148
|
+
<div slot="drawer-content" class="flex flex-col gap-md">
|
|
149
|
+
<p>
|
|
150
|
+
<strong>Use case:</strong> Primary navigation menu for web applications
|
|
151
|
+
</p>
|
|
152
|
+
|
|
153
|
+
<nav class="flex flex-col gap-sm">
|
|
154
|
+
<button class="btn-outline">
|
|
155
|
+
<pds-icon icon="house"></pds-icon>
|
|
156
|
+
<span>Dashboard</span>
|
|
157
|
+
</button>
|
|
158
|
+
<button class="btn-outline">
|
|
159
|
+
<pds-icon icon="folder"></pds-icon>
|
|
160
|
+
<span>Projects</span>
|
|
161
|
+
</button>
|
|
162
|
+
<button class="btn-outline">
|
|
163
|
+
<pds-icon icon="users"></pds-icon>
|
|
164
|
+
<span>Team</span>
|
|
165
|
+
</button>
|
|
166
|
+
<button class="btn-outline">
|
|
167
|
+
<pds-icon icon="calendar"></pds-icon>
|
|
168
|
+
<span>Schedule</span>
|
|
169
|
+
</button>
|
|
170
|
+
<button class="btn-outline">
|
|
171
|
+
<pds-icon icon="chart-bar"></pds-icon>
|
|
172
|
+
<span>Analytics</span>
|
|
173
|
+
</button>
|
|
174
|
+
</nav>
|
|
175
|
+
|
|
176
|
+
<hr>
|
|
177
|
+
|
|
178
|
+
<button class="btn-outline">
|
|
179
|
+
<pds-icon icon="gear"></pds-icon>
|
|
180
|
+
<span>Settings</span>
|
|
181
|
+
</button>
|
|
182
|
+
|
|
183
|
+
<button id="close-drawer-left" class="btn-secondary">
|
|
184
|
+
<pds-icon icon="x"></pds-icon>
|
|
185
|
+
<span>Close</span>
|
|
186
|
+
</button>
|
|
187
|
+
</div>
|
|
188
|
+
</pds-drawer>
|
|
189
|
+
|
|
190
|
+
<pds-drawer id="drawer-right" position="right">
|
|
191
|
+
<div slot="drawer-header" class="flex items-center justify-between">
|
|
192
|
+
<h2>Filter & Sort</h2>
|
|
193
|
+
<button id="close-drawer-right" class="icon-only btn-outline btn-sm">
|
|
194
|
+
<pds-icon icon="x" label="Close"></pds-icon>
|
|
195
|
+
</button>
|
|
196
|
+
</div>
|
|
197
|
+
<div slot="drawer-content" class="flex flex-col gap-md">
|
|
198
|
+
<p>
|
|
199
|
+
<strong>Use case:</strong> Filters, detail panels, or property inspectors
|
|
200
|
+
</p>
|
|
201
|
+
|
|
202
|
+
<article class="card">
|
|
203
|
+
<fieldset role="group">
|
|
204
|
+
<legend>Filter by Status</legend>
|
|
205
|
+
<label data-toggle>
|
|
206
|
+
<input type="checkbox" checked>
|
|
207
|
+
<span>Active</span>
|
|
208
|
+
</label>
|
|
209
|
+
<label data-toggle>
|
|
210
|
+
<input type="checkbox" checked>
|
|
211
|
+
<span>In Progress</span>
|
|
212
|
+
</label>
|
|
213
|
+
<label data-toggle>
|
|
214
|
+
<input type="checkbox">
|
|
215
|
+
<span>Completed</span>
|
|
216
|
+
</label>
|
|
217
|
+
<label data-toggle>
|
|
218
|
+
<input type="checkbox">
|
|
219
|
+
<span>Archived</span>
|
|
220
|
+
</label>
|
|
221
|
+
</fieldset>
|
|
222
|
+
</article>
|
|
223
|
+
|
|
224
|
+
<article class="card surface-elevated">
|
|
225
|
+
<label>
|
|
226
|
+
<span>Sort By</span>
|
|
227
|
+
<select>
|
|
228
|
+
<option>Date Created (Newest)</option>
|
|
229
|
+
<option>Date Created (Oldest)</option>
|
|
230
|
+
<option>Name (A-Z)</option>
|
|
231
|
+
<option>Name (Z-A)</option>
|
|
232
|
+
<option>Priority</option>
|
|
233
|
+
</select>
|
|
234
|
+
</label>
|
|
235
|
+
</article>
|
|
236
|
+
|
|
237
|
+
<div class="flex gap-sm">
|
|
238
|
+
<button class="btn-primary">
|
|
239
|
+
<pds-icon icon="check"></pds-icon>
|
|
240
|
+
<span>Apply</span>
|
|
241
|
+
</button>
|
|
242
|
+
<button class="btn-outline">
|
|
243
|
+
<pds-icon icon="arrow-counter-clockwise"></pds-icon>
|
|
244
|
+
<span>Reset</span>
|
|
245
|
+
</button>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
</pds-drawer>
|
|
249
|
+
|
|
250
|
+
<pds-drawer id="drawer-top" position="top">
|
|
251
|
+
<div slot="drawer-header" class="flex items-center gap-md">
|
|
252
|
+
<pds-icon icon="bell-ringing" size="lg"></pds-icon>
|
|
253
|
+
<h2>Notifications</h2>
|
|
254
|
+
<span class="badge badge-primary">3 new</span>
|
|
255
|
+
</div>
|
|
256
|
+
<div slot="drawer-content" class="flex flex-col gap-md">
|
|
257
|
+
<p>
|
|
258
|
+
<strong>Use case:</strong> Notification center or announcement banners
|
|
259
|
+
</p>
|
|
260
|
+
|
|
261
|
+
<div class="flex flex-col gap-md">
|
|
262
|
+
<article class="card surface-elevated">
|
|
263
|
+
<div class="flex gap-md items-start">
|
|
264
|
+
<div class="badge badge-success">
|
|
265
|
+
<pds-icon icon="check-circle"></pds-icon>
|
|
266
|
+
</div>
|
|
267
|
+
<div>
|
|
268
|
+
<div class="flex justify-between items-start gap-md">
|
|
269
|
+
<strong>Deployment Successful</strong>
|
|
270
|
+
<small>2m ago</small>
|
|
271
|
+
</div>
|
|
272
|
+
<p>
|
|
273
|
+
Your application has been deployed to production successfully.
|
|
274
|
+
</p>
|
|
275
|
+
</div>
|
|
276
|
+
</div>
|
|
277
|
+
</article>
|
|
278
|
+
|
|
279
|
+
<article class="card surface-elevated">
|
|
280
|
+
<div class="flex gap-md items-start">
|
|
281
|
+
<div class="badge badge-info">
|
|
282
|
+
<pds-icon icon="user-plus"></pds-icon>
|
|
283
|
+
</div>
|
|
284
|
+
<div>
|
|
285
|
+
<div class="flex justify-between items-start gap-md">
|
|
286
|
+
<strong>New Team Member</strong>
|
|
287
|
+
<small>1h ago</small>
|
|
288
|
+
</div>
|
|
289
|
+
<p>
|
|
290
|
+
Sarah Johnson joined the Design Team.
|
|
291
|
+
</p>
|
|
292
|
+
</div>
|
|
293
|
+
</div>
|
|
294
|
+
</article>
|
|
295
|
+
|
|
296
|
+
<article class="card surface-elevated">
|
|
297
|
+
<div class="flex gap-md items-start">
|
|
298
|
+
<div class="badge badge-warning">
|
|
299
|
+
<pds-icon icon="warning"></pds-icon>
|
|
300
|
+
</div>
|
|
301
|
+
<div>
|
|
302
|
+
<div class="flex justify-between items-start gap-md">
|
|
303
|
+
<strong>API Rate Limit Warning</strong>
|
|
304
|
+
<small>3h ago</small>
|
|
305
|
+
</div>
|
|
306
|
+
<p>
|
|
307
|
+
You're approaching 80% of your API rate limit.
|
|
308
|
+
</p>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
</article>
|
|
312
|
+
</div>
|
|
313
|
+
|
|
314
|
+
<button id="close-drawer-top" class="btn-secondary">
|
|
315
|
+
<pds-icon icon="check"></pds-icon>
|
|
316
|
+
<span>Mark All as Read</span>
|
|
317
|
+
</button>
|
|
318
|
+
</div>
|
|
319
|
+
</pds-drawer>
|
|
320
|
+
|
|
321
|
+
<pds-drawer id="drawer-bottom" position="bottom">
|
|
322
|
+
<div slot="drawer-header" class="flex items-center gap-md">
|
|
323
|
+
<pds-icon icon="toolbox" size="lg"></pds-icon>
|
|
324
|
+
<h2>Quick Actions</h2>
|
|
325
|
+
</div>
|
|
326
|
+
<div slot="drawer-content" class="flex flex-col gap-md">
|
|
327
|
+
<p>
|
|
328
|
+
<strong>Use case:</strong> Command palette, quick actions, or contextual toolbars
|
|
329
|
+
</p>
|
|
330
|
+
|
|
331
|
+
<div class="flex gap-md flex-wrap justify-center">
|
|
332
|
+
<button class="btn-primary">
|
|
333
|
+
<pds-icon icon="plus"></pds-icon>
|
|
334
|
+
<span>New Document</span>
|
|
335
|
+
</button>
|
|
336
|
+
<button class="btn-secondary">
|
|
337
|
+
<pds-icon icon="upload"></pds-icon>
|
|
338
|
+
<span>Upload Files</span>
|
|
339
|
+
</button>
|
|
340
|
+
<button class="btn-secondary">
|
|
341
|
+
<pds-icon icon="folder-plus"></pds-icon>
|
|
342
|
+
<span>Create Folder</span>
|
|
343
|
+
</button>
|
|
344
|
+
<button class="btn-outline">
|
|
345
|
+
<pds-icon icon="link"></pds-icon>
|
|
346
|
+
<span>Share Link</span>
|
|
347
|
+
</button>
|
|
348
|
+
<button class="btn-outline">
|
|
349
|
+
<pds-icon icon="download"></pds-icon>
|
|
350
|
+
<span>Export Data</span>
|
|
351
|
+
</button>
|
|
352
|
+
<button class="btn-outline">
|
|
353
|
+
<pds-icon icon="printer"></pds-icon>
|
|
354
|
+
<span>Print</span>
|
|
355
|
+
</button>
|
|
356
|
+
</div>
|
|
357
|
+
|
|
358
|
+
<button id="close-drawer-bottom" class="btn-secondary">
|
|
359
|
+
<pds-icon icon="x"></pds-icon>
|
|
360
|
+
<span>Close</span>
|
|
361
|
+
</button>
|
|
362
|
+
</div>
|
|
363
|
+
</pds-drawer>
|
|
364
|
+
`;
|
|
365
|
+
};
|
|
366
|
+
|
|
367
|
+
export const NavigationDrawer = () => {
|
|
368
|
+
setTimeout(() => {
|
|
369
|
+
const btn = document.querySelector('#open-nav-drawer');
|
|
370
|
+
const drawer = document.querySelector('#nav-drawer');
|
|
371
|
+
const closeBtn = document.querySelector('#close-nav-drawer');
|
|
372
|
+
|
|
373
|
+
if (btn && drawer) {
|
|
374
|
+
btn.onclick = () => drawer.open = true;
|
|
375
|
+
}
|
|
376
|
+
if (closeBtn && drawer) {
|
|
377
|
+
closeBtn.onclick = () => drawer.open = false;
|
|
378
|
+
}
|
|
379
|
+
}, 0);
|
|
380
|
+
|
|
381
|
+
return html`
|
|
382
|
+
<button id="open-nav-drawer" class="btn-primary">
|
|
383
|
+
<pds-icon icon="list"></pds-icon>
|
|
384
|
+
<span>Open Navigation</span>
|
|
25
385
|
</button>
|
|
26
386
|
|
|
27
|
-
<pds-drawer id="
|
|
28
|
-
<
|
|
29
|
-
|
|
30
|
-
<
|
|
31
|
-
|
|
32
|
-
|
|
387
|
+
<pds-drawer id="nav-drawer" position="left">
|
|
388
|
+
<div slot="drawer-header" class="flex items-center gap-md">
|
|
389
|
+
<pds-icon icon="compass" size="lg"></pds-icon>
|
|
390
|
+
<h2>Navigation</h2>
|
|
391
|
+
</div>
|
|
392
|
+
|
|
393
|
+
<nav slot="drawer-content" class="flex flex-col gap-sm">
|
|
394
|
+
<button class="btn-outline">
|
|
395
|
+
<pds-icon icon="house"></pds-icon>
|
|
396
|
+
<span>Home</span>
|
|
397
|
+
</button>
|
|
398
|
+
<button class="btn-outline">
|
|
399
|
+
<pds-icon icon="user"></pds-icon>
|
|
400
|
+
<span>Profile</span>
|
|
401
|
+
</button>
|
|
402
|
+
<button class="btn-outline">
|
|
403
|
+
<pds-icon icon="bell"></pds-icon>
|
|
404
|
+
<span>Notifications</span>
|
|
405
|
+
</button>
|
|
406
|
+
<button class="btn-outline">
|
|
407
|
+
<pds-icon icon="gear"></pds-icon>
|
|
408
|
+
<span>Settings</span>
|
|
33
409
|
</button>
|
|
410
|
+
|
|
411
|
+
<hr>
|
|
412
|
+
|
|
413
|
+
<button class="btn-outline">
|
|
414
|
+
<pds-icon icon="book-open"></pds-icon>
|
|
415
|
+
<span>Documentation</span>
|
|
416
|
+
</button>
|
|
417
|
+
<button class="btn-outline">
|
|
418
|
+
<pds-icon icon="chat-circle"></pds-icon>
|
|
419
|
+
<span>Support</span>
|
|
420
|
+
</button>
|
|
421
|
+
|
|
422
|
+
<hr>
|
|
423
|
+
|
|
424
|
+
<button id="close-nav-drawer" class="btn-primary">
|
|
425
|
+
<pds-icon icon="x"></pds-icon>
|
|
426
|
+
<span>Close Menu</span>
|
|
427
|
+
</button>
|
|
428
|
+
</nav>
|
|
429
|
+
</pds-drawer>
|
|
430
|
+
`;
|
|
431
|
+
};
|
|
432
|
+
|
|
433
|
+
NavigationDrawer.storyName = 'Navigation Menu';
|
|
434
|
+
|
|
435
|
+
export const SettingsDrawer = () => {
|
|
436
|
+
setTimeout(() => {
|
|
437
|
+
const btn = document.querySelector('#open-settings-drawer');
|
|
438
|
+
const drawer = document.querySelector('#settings-drawer');
|
|
439
|
+
const closeBtn = document.querySelector('#close-settings-drawer');
|
|
440
|
+
|
|
441
|
+
if (btn && drawer) {
|
|
442
|
+
btn.onclick = () => drawer.open = true;
|
|
443
|
+
}
|
|
444
|
+
if (closeBtn && drawer) {
|
|
445
|
+
closeBtn.onclick = () => drawer.open = false;
|
|
446
|
+
}
|
|
447
|
+
}, 0);
|
|
448
|
+
|
|
449
|
+
return html`
|
|
450
|
+
<button id="open-settings-drawer" class="btn-primary">
|
|
451
|
+
<pds-icon icon="gear"></pds-icon>
|
|
452
|
+
<span>Open Settings</span>
|
|
453
|
+
</button>
|
|
454
|
+
|
|
455
|
+
<pds-drawer id="settings-drawer" position="right">
|
|
456
|
+
<div slot="drawer-header" class="flex items-center gap-md">
|
|
457
|
+
<pds-icon icon="gear" size="lg"></pds-icon>
|
|
458
|
+
<h2>Settings</h2>
|
|
459
|
+
</div>
|
|
460
|
+
|
|
461
|
+
<div slot="drawer-content" class="flex flex-col gap-md">
|
|
462
|
+
<article class="card">
|
|
463
|
+
<fieldset>
|
|
464
|
+
<legend>Profile Settings</legend>
|
|
465
|
+
<label>
|
|
466
|
+
<span>Username</span>
|
|
467
|
+
<div class="input-icon">
|
|
468
|
+
<pds-icon icon="user"></pds-icon>
|
|
469
|
+
<input type="text" value="john_doe" placeholder="Enter your username">
|
|
470
|
+
</div>
|
|
471
|
+
</label>
|
|
472
|
+
<label>
|
|
473
|
+
<span>Email</span>
|
|
474
|
+
<div class="input-icon">
|
|
475
|
+
<pds-icon icon="envelope"></pds-icon>
|
|
476
|
+
<input type="email" value="john@example.com" placeholder="your.email@example.com">
|
|
477
|
+
</div>
|
|
478
|
+
</label>
|
|
479
|
+
</fieldset>
|
|
480
|
+
</article>
|
|
481
|
+
|
|
482
|
+
<article class="card">
|
|
483
|
+
<fieldset role="group">
|
|
484
|
+
<legend>Notifications</legend>
|
|
485
|
+
<label data-toggle>
|
|
486
|
+
<input type="checkbox" checked>
|
|
487
|
+
<span>Email notifications</span>
|
|
488
|
+
</label>
|
|
489
|
+
<label data-toggle>
|
|
490
|
+
<input type="checkbox" checked>
|
|
491
|
+
<span>Push notifications</span>
|
|
492
|
+
</label>
|
|
493
|
+
<label data-toggle>
|
|
494
|
+
<input type="checkbox">
|
|
495
|
+
<span>SMS notifications</span>
|
|
496
|
+
</label>
|
|
497
|
+
</fieldset>
|
|
498
|
+
</article>
|
|
499
|
+
|
|
500
|
+
<article class="card surface-elevated">
|
|
501
|
+
<fieldset role="group">
|
|
502
|
+
<legend>Privacy</legend>
|
|
503
|
+
<label data-toggle>
|
|
504
|
+
<input type="checkbox" checked>
|
|
505
|
+
<span>Public profile</span>
|
|
506
|
+
</label>
|
|
507
|
+
<label data-toggle>
|
|
508
|
+
<input type="checkbox">
|
|
509
|
+
<span>Show email address</span>
|
|
510
|
+
</label>
|
|
511
|
+
</fieldset>
|
|
512
|
+
</article>
|
|
513
|
+
|
|
514
|
+
<div class="flex gap-md">
|
|
515
|
+
<button class="btn-primary">
|
|
516
|
+
<pds-icon icon="check"></pds-icon>
|
|
517
|
+
<span>Save Changes</span>
|
|
518
|
+
</button>
|
|
519
|
+
<button id="close-settings-drawer" class="btn-outline">
|
|
520
|
+
<span>Cancel</span>
|
|
521
|
+
</button>
|
|
522
|
+
</div>
|
|
34
523
|
</div>
|
|
35
524
|
</pds-drawer>
|
|
36
|
-
|
|
37
|
-
args: {
|
|
38
|
-
position: 'right'
|
|
39
|
-
}
|
|
525
|
+
`;
|
|
40
526
|
};
|
|
527
|
+
|
|
528
|
+
SettingsDrawer.storyName = 'Settings Panel';
|
|
529
|
+
|
|
530
|
+
export const DetailDrawer = () => {
|
|
531
|
+
setTimeout(() => {
|
|
532
|
+
const btn = document.querySelector('#open-detail-drawer');
|
|
533
|
+
const drawer = document.querySelector('#detail-drawer');
|
|
534
|
+
const closeBtn = document.querySelector('#close-detail-drawer');
|
|
535
|
+
|
|
536
|
+
if (btn && drawer) {
|
|
537
|
+
btn.onclick = () => drawer.open = true;
|
|
538
|
+
}
|
|
539
|
+
if (closeBtn && drawer) {
|
|
540
|
+
closeBtn.onclick = () => drawer.open = false;
|
|
541
|
+
}
|
|
542
|
+
}, 0);
|
|
543
|
+
|
|
544
|
+
return html`
|
|
545
|
+
<button id="open-detail-drawer" class="btn-primary">
|
|
546
|
+
<pds-icon icon="eye"></pds-icon>
|
|
547
|
+
<span>View Details</span>
|
|
548
|
+
</button>
|
|
549
|
+
|
|
550
|
+
<pds-drawer id="detail-drawer" position="right">
|
|
551
|
+
<div slot="drawer-header" class="flex items-center justify-between">
|
|
552
|
+
<h2>Project Details</h2>
|
|
553
|
+
<button id="close-detail-drawer" class="icon-only btn-outline">
|
|
554
|
+
<pds-icon icon="x" label="Close"></pds-icon>
|
|
555
|
+
</button>
|
|
556
|
+
</div>
|
|
557
|
+
|
|
558
|
+
<div slot="drawer-content" class="flex flex-col gap-md">
|
|
559
|
+
<div class="card border-gradient flex items-center justify-center">
|
|
560
|
+
<pds-icon icon="image" size="xl"></pds-icon>
|
|
561
|
+
</div>
|
|
562
|
+
|
|
563
|
+
<h3>Modern Web Dashboard</h3>
|
|
564
|
+
<p>A comprehensive dashboard application built with modern web technologies and PDS.</p>
|
|
565
|
+
|
|
566
|
+
<article class="card">
|
|
567
|
+
<h4>Project Info</h4>
|
|
568
|
+
<dl class="grid grid-cols-2 gap-sm">
|
|
569
|
+
<dt>Status:</dt>
|
|
570
|
+
<dd>In Progress</dd>
|
|
571
|
+
<dt>Team:</dt>
|
|
572
|
+
<dd>8 members</dd>
|
|
573
|
+
<dt>Due Date:</dt>
|
|
574
|
+
<dd>Dec 31, 2024</dd>
|
|
575
|
+
<dt>Priority:</dt>
|
|
576
|
+
<dd><span class="badge badge-primary">High</span></dd>
|
|
577
|
+
</dl>
|
|
578
|
+
</article>
|
|
579
|
+
|
|
580
|
+
<article class="card surface-elevated">
|
|
581
|
+
<h4>Recent Activity</h4>
|
|
582
|
+
<div class="flex flex-col gap-md">
|
|
583
|
+
<div class="flex gap-sm">
|
|
584
|
+
<pds-icon icon="check" class="icon-primary"></pds-icon>
|
|
585
|
+
<div>
|
|
586
|
+
<strong>Task completed</strong>
|
|
587
|
+
<div><small>2 hours ago</small></div>
|
|
588
|
+
</div>
|
|
589
|
+
</div>
|
|
590
|
+
<div class="flex gap-sm">
|
|
591
|
+
<pds-icon icon="chat-circle" class="icon-secondary"></pds-icon>
|
|
592
|
+
<div>
|
|
593
|
+
<strong>New comment</strong>
|
|
594
|
+
<div><small>5 hours ago</small></div>
|
|
595
|
+
</div>
|
|
596
|
+
</div>
|
|
597
|
+
<div class="flex gap-sm">
|
|
598
|
+
<pds-icon icon="upload" class="icon-accent"></pds-icon>
|
|
599
|
+
<div>
|
|
600
|
+
<strong>File uploaded</strong>
|
|
601
|
+
<div><small>1 day ago</small></div>
|
|
602
|
+
</div>
|
|
603
|
+
</div>
|
|
604
|
+
</div>
|
|
605
|
+
</article>
|
|
606
|
+
|
|
607
|
+
<div class="flex gap-sm">
|
|
608
|
+
<button class="btn-primary">
|
|
609
|
+
<pds-icon icon="pencil"></pds-icon>
|
|
610
|
+
<span>Edit Project</span>
|
|
611
|
+
</button>
|
|
612
|
+
<button class="btn-outline">
|
|
613
|
+
<pds-icon icon="share"></pds-icon>
|
|
614
|
+
<span>Share</span>
|
|
615
|
+
</button>
|
|
616
|
+
</div>
|
|
617
|
+
</div>
|
|
618
|
+
</pds-drawer>
|
|
619
|
+
`;
|
|
620
|
+
};
|
|
621
|
+
|
|
622
|
+
DetailDrawer.storyName = 'Detail Panel';
|
|
623
|
+
|
|
@@ -1,13 +1,29 @@
|
|
|
1
1
|
import { html } from 'lit';
|
|
2
2
|
|
|
3
|
+
const docsParameters = {
|
|
4
|
+
description: {
|
|
5
|
+
component: 'SVG sprite icons with fallbacks'
|
|
6
|
+
}
|
|
7
|
+
};
|
|
8
|
+
|
|
9
|
+
if (typeof window !== 'undefined') {
|
|
10
|
+
import('../reference/reference-docs.js')
|
|
11
|
+
.then(({ createComponentDocsPage }) => {
|
|
12
|
+
docsParameters.page = createComponentDocsPage('pds-icon');
|
|
13
|
+
})
|
|
14
|
+
.catch((error) => {
|
|
15
|
+
console.warn('storybook: docs page failed to load for pds-icon', error);
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
|
|
3
19
|
export default {
|
|
4
|
-
title: '
|
|
20
|
+
title: 'Components/Pds Icon',
|
|
21
|
+
tags: ['autodocs', 'icons', 'svg', 'sprite', 'buttons'],
|
|
5
22
|
parameters: {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
}
|
|
23
|
+
pds: {
|
|
24
|
+
tags: ['icons', 'svg', 'sprite']
|
|
25
|
+
},
|
|
26
|
+
docs: docsParameters
|
|
11
27
|
},
|
|
12
28
|
argTypes: {
|
|
13
29
|
icon: {
|