@pure-ds/storybook 0.3.19 → 0.4.0

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 (39) hide show
  1. package/.storybook/addons/pds-configurator/SearchTool.js +44 -44
  2. package/dist/pds-reference.json +65 -13
  3. package/package.json +50 -50
  4. package/stories/components/PdsCalendar.stories.js +266 -263
  5. package/stories/components/PdsDrawer.stories.js +2 -2
  6. package/stories/components/PdsIcon.stories.js +2 -2
  7. package/stories/components/PdsJsonform.stories.js +2 -2
  8. package/stories/components/PdsRichtext.stories.js +367 -367
  9. package/stories/components/PdsScrollrow.stories.js +140 -140
  10. package/stories/components/PdsSplitpanel.stories.js +502 -502
  11. package/stories/components/PdsTabstrip.stories.js +2 -2
  12. package/stories/components/PdsToaster.stories.js +186 -186
  13. package/stories/components/PdsUpload.stories.js +66 -66
  14. package/stories/enhancements/Dropdowns.stories.js +185 -185
  15. package/stories/enhancements/InteractiveStates.stories.js +625 -625
  16. package/stories/enhancements/MeshGradients.stories.js +321 -320
  17. package/stories/enhancements/OpenGroups.stories.js +227 -227
  18. package/stories/enhancements/RangeSliders.stories.js +232 -232
  19. package/stories/enhancements/RequiredFields.stories.js +189 -189
  20. package/stories/enhancements/Toggles.stories.js +167 -167
  21. package/stories/foundations/Colors.stories.js +2 -1
  22. package/stories/foundations/Icons.stories.js +4 -0
  23. package/stories/foundations/SmartSurfaces.stories.js +485 -367
  24. package/stories/foundations/Spacing.stories.js +5 -1
  25. package/stories/foundations/Typography.stories.js +4 -0
  26. package/stories/foundations/ZIndex.stories.js +329 -325
  27. package/stories/layout/LayoutOverview.stories.js +247 -0
  28. package/stories/layout/LayoutSystem.stories.js +852 -0
  29. package/stories/patterns/BorderEffects.stories.js +74 -72
  30. package/stories/primitives/Accordion.stories.js +5 -3
  31. package/stories/primitives/Alerts.stories.js +261 -46
  32. package/stories/primitives/Badges.stories.js +4 -0
  33. package/stories/primitives/Buttons.stories.js +2 -2
  34. package/stories/primitives/Cards.stories.js +98 -170
  35. package/stories/primitives/Media.stories.js +442 -203
  36. package/stories/primitives/Tables.stories.js +358 -232
  37. package/stories/utilities/Backdrop.stories.js +197 -0
  38. package/stories/patterns/Layout.stories.js +0 -99
  39. package/stories/utilities/GridSystem.stories.js +0 -208
package/stories/enhancements/OpenGroups.stories.js CHANGED
@@ -1,227 +1,227 @@
1
- import { html } from 'lit';
2
-
3
- const openGroupsStoryStyles = html`
4
- <style>
5
- .open-groups-container {
6
- max-width: 37.5rem;
7
- display: grid;
8
- gap: var(--spacing-4);
9
- }
10
-
11
- .open-groups-description {
12
- color: var(--surface-text-secondary);
13
- margin: 0;
14
- }
15
-
16
- .open-groups-description + .open-groups-fieldset,
17
- .open-groups-description + .open-groups-form-fieldset {
18
- margin-top: var(--spacing-4);
19
- }
20
-
21
- .open-groups-fieldset {
22
- display: grid;
23
- gap: var(--spacing-3);
24
- margin: 0;
25
- }
26
-
27
- .open-groups-form {
28
- max-width: 37.5rem;
29
- display: grid;
30
- gap: var(--spacing-4);
31
- }
32
-
33
- .open-groups-form-fieldset {
34
- display: grid;
35
- gap: var(--spacing-3);
36
- }
37
-
38
- .open-groups-actions {
39
- display: flex;
40
- gap: var(--spacing-3);
41
- }
42
-
43
- .open-groups-card {
44
- max-width: 37.5rem;
45
- display: grid;
46
- gap: var(--spacing-4);
47
- }
48
-
49
- .open-groups-card-actions {
50
- margin-top: var(--spacing-4);
51
- }
52
- </style>
53
- `;
54
-
55
- export default {
56
- title: 'Enhancements/Open Groups',
57
- tags: ['forms', 'interaction'],
58
- parameters: {
59
- pds: {
60
- tags: ['forms', 'interaction']
61
- },
62
- docs: {
63
- description: {
64
- component:
65
- 'Dynamic checkbox/radio groups that allow users to add custom options at runtime using the data-open attribute'
66
- }
67
- }
68
- }
69
- };
70
-
71
- export const RadioGroupOpen = () => html`
72
- ${openGroupsStoryStyles}
73
- <section class="open-groups-container">
74
- <h3>Select Your Preferences</h3>
75
- <p class="open-groups-description">
76
- Choose from existing options or add your own
77
- </p>
78
- <fieldset role="group" data-open >
79
- <legend>Favorite Programming Language</legend>
80
- <label>
81
- <span data-label>JavaScript</span>
82
- <input value="javascript" name="language" type="radio">
83
- </label>
84
- <label>
85
- <span data-label>Python</span>
86
- <input value="python" name="language" type="radio">
87
- </label>
88
- <label>
89
- <span data-label>TypeScript</span>
90
- <input value="typescript" name="language" type="radio">
91
- </label>
92
- </fieldset>
93
- </section>
94
- `;
95
-
96
- export const CheckboxGroupOpen = () => html`
97
- ${openGroupsStoryStyles}
98
- <section class="open-groups-container">
99
- <h3>Select Features</h3>
100
- <p class="open-groups-description">
101
- Select multiple features and add custom ones
102
- </p>
103
- <fieldset role="group" data-open>
104
- <legend>Desired Features</legend>
105
- <label>
106
- <span data-label>Dark Mode</span>
107
- <input value="dark-mode" name="features" type="checkbox">
108
- </label>
109
- <label>
110
- <span data-label>Notifications</span>
111
- <input value="notifications" name="features" type="checkbox">
112
- </label>
113
- <label>
114
- <span data-label>Analytics</span>
115
- <input value="analytics" name="features" type="checkbox">
116
- </label>
117
- </fieldset>
118
- </section>
119
- `;
120
-
121
- export const InForm = () => html`
122
- ${openGroupsStoryStyles}
123
- <form
124
- class="open-groups-form"
125
- @submit="${(event) => {
126
- event.preventDefault();
127
- window.toastFormData(new FormData(event.target));
128
- }}"
129
- >
130
- <h3>Survey Form</h3>
131
-
132
- <fieldset role="group" data-open>
133
- <legend>How did you hear about us?</legend>
134
- <label>
135
- <span data-label>Social Media</span>
136
- <input value="social" name="source" type="radio">
137
- </label>
138
- <label>
139
- <span data-label>Search Engine</span>
140
- <input value="search" name="source" type="radio">
141
- </label>
142
- <label>
143
- <span data-label>Friend</span>
144
- <input value="friend" name="source" type="radio">
145
- </label>
146
- </fieldset>
147
-
148
- <fieldset role="group" data-open>
149
- <legend>Interests (select all that apply)</legend>
150
- <label>
151
- <span data-label>Web Development</span>
152
- <input value="webdev" name="interests" type="checkbox">
153
- </label>
154
- <label>
155
- <span data-label>Design</span>
156
- <input value="design" name="interests" type="checkbox">
157
- </label>
158
- <label>
159
- <span data-label>Marketing</span>
160
- <input value="marketing" name="interests" type="checkbox">
161
- </label>
162
- </fieldset>
163
-
164
- <div class="open-groups-actions">
165
- <button type="submit" class="btn-primary">Submit Survey</button>
166
- </div>
167
- </form>
168
- `;
169
-
170
- export const PrefilledValues = () => html`
171
- ${openGroupsStoryStyles}
172
- <section class="open-groups-container">
173
- <h3>Tag Editor</h3>
174
- <p class="open-groups-description">
175
- Select existing tags or create new ones by typing and pressing Enter
176
- </p>
177
- <fieldset role="group" data-open >
178
- <legend>Article Tags</legend>
179
- <label>
180
- <span data-label>JavaScript</span>
181
- <input value="javascript" name="tags" type="checkbox" checked>
182
- </label>
183
- <label>
184
- <span data-label>Tutorial</span>
185
- <input value="tutorial" name="tags" type="checkbox" checked>
186
- </label>
187
- <label>
188
- <span data-label>Beginner</span>
189
- <input value="beginner" name="tags" type="checkbox">
190
- </label>
191
- <label>
192
- <span data-label>Advanced</span>
193
- <input value="advanced" name="tags" type="checkbox">
194
- </label>
195
- </fieldset>
196
- </section>
197
- `;
198
-
199
- export const InCard = () => html`
200
- ${openGroupsStoryStyles}
201
- <article class="card open-groups-card">
202
- <h3>Customize Your Experience</h3>
203
- <p class="open-groups-description">
204
- Choose your preferences and add custom options as needed
205
- </p>
206
-
207
- <fieldset role="group" data-open>
208
- <legend>Notification Channels</legend>
209
- <label>
210
- <span data-label>Email</span>
211
- <input value="email" name="channels" type="checkbox" checked>
212
- </label>
213
- <label>
214
- <span data-label>SMS</span>
215
- <input value="sms" name="channels" type="checkbox">
216
- </label>
217
- <label>
218
- <span data-label>Push</span>
219
- <input value="push" name="channels" type="checkbox" checked>
220
- </label>
221
- </fieldset>
222
-
223
- <div class="open-groups-card-actions">
224
- <button class="btn-primary">Save Preferences</button>
225
- </div>
226
- </article>
227
- `;
1
+ import { html } from 'lit';
2
+
3
+ const openGroupsStoryStyles = html`
4
+ <style>
5
+ .open-groups-container {
6
+ max-width: 37.5rem;
7
+ display: grid;
8
+ gap: var(--spacing-4);
9
+ }
10
+
11
+ .open-groups-description {
12
+ color: var(--surface-text-secondary);
13
+ margin: 0;
14
+ }
15
+
16
+ .open-groups-description + .open-groups-fieldset,
17
+ .open-groups-description + .open-groups-form-fieldset {
18
+ margin-top: var(--spacing-4);
19
+ }
20
+
21
+ .open-groups-fieldset {
22
+ display: grid;
23
+ gap: var(--spacing-3);
24
+ margin: 0;
25
+ }
26
+
27
+ .open-groups-form {
28
+ max-width: 37.5rem;
29
+ display: grid;
30
+ gap: var(--spacing-4);
31
+ }
32
+
33
+ .open-groups-form-fieldset {
34
+ display: grid;
35
+ gap: var(--spacing-3);
36
+ }
37
+
38
+ .open-groups-actions {
39
+ display: flex;
40
+ gap: var(--spacing-3);
41
+ }
42
+
43
+ .open-groups-card {
44
+ max-width: 37.5rem;
45
+ display: grid;
46
+ gap: var(--spacing-4);
47
+ }
48
+
49
+ .open-groups-card-actions {
50
+ margin-top: var(--spacing-4);
51
+ }
52
+ </style>
53
+ `;
54
+
55
+ export default {
56
+ title: 'Enhancements/Open Groups',
57
+ tags: ['fieldset', 'radio', 'checkbox', 'dynamic', 'custom-option'],
58
+ parameters: {
59
+ pds: {
60
+ tags: ['fieldset', 'radio', 'checkbox', 'dynamic', 'custom-option', 'data-open', 'forms', 'interaction', 'enhancement']
61
+ },
62
+ docs: {
63
+ description: {
64
+ component:
65
+ 'Dynamic checkbox/radio groups that allow users to add custom options at runtime using the data-open attribute'
66
+ }
67
+ }
68
+ }
69
+ };
70
+
71
+ export const RadioGroupOpen = () => html`
72
+ ${openGroupsStoryStyles}
73
+ <section class="open-groups-container">
74
+ <h3>Select Your Preferences</h3>
75
+ <p class="open-groups-description">
76
+ Choose from existing options or add your own
77
+ </p>
78
+ <fieldset role="group" data-open >
79
+ <legend>Favorite Programming Language</legend>
80
+ <label>
81
+ <span data-label>JavaScript</span>
82
+ <input value="javascript" name="language" type="radio">
83
+ </label>
84
+ <label>
85
+ <span data-label>Python</span>
86
+ <input value="python" name="language" type="radio">
87
+ </label>
88
+ <label>
89
+ <span data-label>TypeScript</span>
90
+ <input value="typescript" name="language" type="radio">
91
+ </label>
92
+ </fieldset>
93
+ </section>
94
+ `;
95
+
96
+ export const CheckboxGroupOpen = () => html`
97
+ ${openGroupsStoryStyles}
98
+ <section class="open-groups-container">
99
+ <h3>Select Features</h3>
100
+ <p class="open-groups-description">
101
+ Select multiple features and add custom ones
102
+ </p>
103
+ <fieldset role="group" data-open>
104
+ <legend>Desired Features</legend>
105
+ <label>
106
+ <span data-label>Dark Mode</span>
107
+ <input value="dark-mode" name="features" type="checkbox">
108
+ </label>
109
+ <label>
110
+ <span data-label>Notifications</span>
111
+ <input value="notifications" name="features" type="checkbox">
112
+ </label>
113
+ <label>
114
+ <span data-label>Analytics</span>
115
+ <input value="analytics" name="features" type="checkbox">
116
+ </label>
117
+ </fieldset>
118
+ </section>
119
+ `;
120
+
121
+ export const InForm = () => html`
122
+ ${openGroupsStoryStyles}
123
+ <form
124
+ class="open-groups-form"
125
+ @submit="${(event) => {
126
+ event.preventDefault();
127
+ window.toastFormData(new FormData(event.target));
128
+ }}"
129
+ >
130
+ <h3>Survey Form</h3>
131
+
132
+ <fieldset role="group" data-open>
133
+ <legend>How did you hear about us?</legend>
134
+ <label>
135
+ <span data-label>Social Media</span>
136
+ <input value="social" name="source" type="radio">
137
+ </label>
138
+ <label>
139
+ <span data-label>Search Engine</span>
140
+ <input value="search" name="source" type="radio">
141
+ </label>
142
+ <label>
143
+ <span data-label>Friend</span>
144
+ <input value="friend" name="source" type="radio">
145
+ </label>
146
+ </fieldset>
147
+
148
+ <fieldset role="group" data-open>
149
+ <legend>Interests (select all that apply)</legend>
150
+ <label>
151
+ <span data-label>Web Development</span>
152
+ <input value="webdev" name="interests" type="checkbox">
153
+ </label>
154
+ <label>
155
+ <span data-label>Design</span>
156
+ <input value="design" name="interests" type="checkbox">
157
+ </label>
158
+ <label>
159
+ <span data-label>Marketing</span>
160
+ <input value="marketing" name="interests" type="checkbox">
161
+ </label>
162
+ </fieldset>
163
+
164
+ <div class="open-groups-actions">
165
+ <button type="submit" class="btn-primary">Submit Survey</button>
166
+ </div>
167
+ </form>
168
+ `;
169
+
170
+ export const PrefilledValues = () => html`
171
+ ${openGroupsStoryStyles}
172
+ <section class="open-groups-container">
173
+ <h3>Tag Editor</h3>
174
+ <p class="open-groups-description">
175
+ Select existing tags or create new ones by typing and pressing Enter
176
+ </p>
177
+ <fieldset role="group" data-open >
178
+ <legend>Article Tags</legend>
179
+ <label>
180
+ <span data-label>JavaScript</span>
181
+ <input value="javascript" name="tags" type="checkbox" checked>
182
+ </label>
183
+ <label>
184
+ <span data-label>Tutorial</span>
185
+ <input value="tutorial" name="tags" type="checkbox" checked>
186
+ </label>
187
+ <label>
188
+ <span data-label>Beginner</span>
189
+ <input value="beginner" name="tags" type="checkbox">
190
+ </label>
191
+ <label>
192
+ <span data-label>Advanced</span>
193
+ <input value="advanced" name="tags" type="checkbox">
194
+ </label>
195
+ </fieldset>
196
+ </section>
197
+ `;
198
+
199
+ export const InCard = () => html`
200
+ ${openGroupsStoryStyles}
201
+ <article class="card open-groups-card">
202
+ <h3>Customize Your Experience</h3>
203
+ <p class="open-groups-description">
204
+ Choose your preferences and add custom options as needed
205
+ </p>
206
+
207
+ <fieldset role="group" data-open>
208
+ <legend>Notification Channels</legend>
209
+ <label>
210
+ <span data-label>Email</span>
211
+ <input value="email" name="channels" type="checkbox" checked>
212
+ </label>
213
+ <label>
214
+ <span data-label>SMS</span>
215
+ <input value="sms" name="channels" type="checkbox">
216
+ </label>
217
+ <label>
218
+ <span data-label>Push</span>
219
+ <input value="push" name="channels" type="checkbox" checked>
220
+ </label>
221
+ </fieldset>
222
+
223
+ <div class="open-groups-card-actions">
224
+ <button class="btn-primary">Save Preferences</button>
225
+ </div>
226
+ </article>
227
+ `;