@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/enhancements/Toggles.stories.js CHANGED
@@ -1,167 +1,167 @@
1
- import { html } from 'lit';
2
-
3
- const toggleStoryStyles = html`
4
- <style>
5
- .toggle-story-form {
6
- max-width: 400px;
7
- }
8
-
9
- .toggle-story-form__button {
10
- margin-top: var(--spacing-3);
11
- align-self: flex-start;
12
- }
13
-
14
- .toggle-story-layout {
15
- max-width: 600px;
16
- display: grid;
17
- gap: var(--spacing-4);
18
- }
19
-
20
- .toggle-story-muted {
21
- color: var(--surface-text-secondary);
22
- margin-bottom: var(--spacing-4);
23
- }
24
-
25
- .toggle-story-section {
26
- display: grid;
27
- gap: var(--spacing-3);
28
- }
29
-
30
- .toggle-story-subheading {
31
- margin-bottom: var(--spacing-2);
32
- }
33
-
34
- .toggle-story-card {
35
- max-width: 500px;
36
- display: grid;
37
- gap: var(--spacing-4);
38
- }
39
- </style>
40
- `;
41
-
42
- export default {
43
- title: 'Enhancements/Toggles',
44
- tags: ['forms', 'interaction'],
45
- parameters: {
46
- pds: {
47
- tags: ['forms', 'interaction']
48
- },
49
- docs: {
50
- description: {
51
- component: 'Transform checkboxes into toggle switches using data-toggle attribute'
52
- }
53
- }
54
- }
55
- };
56
-
57
- export const BasicToggle = () => html`
58
- ${toggleStoryStyles}
59
- <label data-toggle>
60
- <span data-label>Enable notifications</span>
61
- <input type="checkbox">
62
- </label>
63
- `;
64
-
65
- export const PreChecked = () => html`
66
- ${toggleStoryStyles}
67
- <label data-toggle>
68
- <span data-label>Dark mode</span>
69
- <input type="checkbox" checked>
70
- </label>
71
- `;
72
-
73
- export const MultipleToggles = () => html`
74
- ${toggleStoryStyles}
75
- <form
76
- class="flex flex-col gap-sm toggle-story-form"
77
- @submit="${(event) => {
78
- event.preventDefault();
79
- toastFormData(new FormData(event.target));
80
- }}"
81
- >
82
- <label data-toggle>
83
- <span data-label>Email notifications</span>
84
- <input type="checkbox" name="email" checked>
85
- </label>
86
- <label data-toggle>
87
- <span data-label>Push notifications</span>
88
- <input type="checkbox" name="push">
89
- </label>
90
- <label data-toggle>
91
- <span data-label>SMS notifications</span>
92
- <input type="checkbox" name="sms">
93
- </label>
94
- <label data-toggle>
95
- <span data-label>Weekly digest</span>
96
- <input type="checkbox" name="digest" checked>
97
- </label>
98
- <button type="submit" class="btn-primary toggle-story-form__button">Save Preferences</button>
99
- </form>
100
- `;
101
-
102
- export const TogglePositions = () => html`
103
- ${toggleStoryStyles}
104
- <div class="toggle-story-layout">
105
- <div>
106
- <h3>Toggle Position Variations</h3>
107
- <p class="toggle-story-muted">
108
- Toggle knob position adapts based on label placement in DOM
109
- </p>
110
- </div>
111
- <div class="flex flex-col gap-md">
112
- <section class="toggle-story-section">
113
- <h4 class="toggle-story-subheading">Label First (Knob on Right)</h4>
114
- <div class="flex flex-col gap-sm">
115
- <label data-toggle>
116
- <span data-label>Email notifications</span>
117
- <input type="checkbox" checked>
118
- </label>
119
- <label data-toggle>
120
- <span data-label>Push notifications</span>
121
- <input type="checkbox">
122
- </label>
123
- </div>
124
- </section>
125
-
126
- <section class="toggle-story-section">
127
- <h4 class="toggle-story-subheading">Label Last (Knob on Left)</h4>
128
- <div class="flex flex-col gap-sm">
129
- <label data-toggle>
130
- <input type="checkbox" checked>
131
- <span data-label>Dark mode enabled</span>
132
- </label>
133
- <label data-toggle>
134
- <input type="checkbox">
135
- <span data-label>Auto-save changes</span>
136
- </label>
137
- </div>
138
- </section>
139
- </div>
140
- </div>
141
- `;
142
-
143
- export const InCard = () => html`
144
- ${toggleStoryStyles}
145
- <article class="card toggle-story-card">
146
- <div>
147
- <h3>Privacy Settings</h3>
148
- <p class="toggle-story-muted">
149
- Control your privacy preferences
150
- </p>
151
- </div>
152
- <div class="flex flex-col gap-sm">
153
- <label data-toggle>
154
- <span data-label>Profile visibility</span>
155
- <input type="checkbox" checked>
156
- </label>
157
- <label data-toggle>
158
- <span data-label>Show online status</span>
159
- <input type="checkbox">
160
- </label>
161
- <label data-toggle>
162
- <span data-label>Allow message requests</span>
163
- <input type="checkbox" checked>
164
- </label>
165
- </div>
166
- </article>
167
- `;
1
+ import { html } from 'lit';
2
+
3
+ const toggleStoryStyles = html`
4
+ <style>
5
+ .toggle-story-form {
6
+ max-width: 400px;
7
+ }
8
+
9
+ .toggle-story-form__button {
10
+ margin-top: var(--spacing-3);
11
+ align-self: flex-start;
12
+ }
13
+
14
+ .toggle-story-layout {
15
+ max-width: 600px;
16
+ display: grid;
17
+ gap: var(--spacing-4);
18
+ }
19
+
20
+ .toggle-story-muted {
21
+ color: var(--surface-text-secondary);
22
+ margin-bottom: var(--spacing-4);
23
+ }
24
+
25
+ .toggle-story-section {
26
+ display: grid;
27
+ gap: var(--spacing-3);
28
+ }
29
+
30
+ .toggle-story-subheading {
31
+ margin-bottom: var(--spacing-2);
32
+ }
33
+
34
+ .toggle-story-card {
35
+ max-width: 500px;
36
+ display: grid;
37
+ gap: var(--spacing-4);
38
+ }
39
+ </style>
40
+ `;
41
+
42
+ export default {
43
+ title: 'Enhancements/Toggles',
44
+ tags: ['toggle', 'switch', 'checkbox', 'forms', 'interaction'],
45
+ parameters: {
46
+ pds: {
47
+ tags: ['toggle', 'switch', 'checkbox', 'forms', 'interaction', 'data-toggle', 'enhancement']
48
+ },
49
+ docs: {
50
+ description: {
51
+ component: 'Transform checkboxes into toggle switches using data-toggle attribute'
52
+ }
53
+ }
54
+ }
55
+ };
56
+
57
+ export const BasicToggle = () => html`
58
+ ${toggleStoryStyles}
59
+ <label data-toggle>
60
+ <span data-label>Enable notifications</span>
61
+ <input type="checkbox">
62
+ </label>
63
+ `;
64
+
65
+ export const PreChecked = () => html`
66
+ ${toggleStoryStyles}
67
+ <label data-toggle>
68
+ <span data-label>Dark mode</span>
69
+ <input type="checkbox" checked>
70
+ </label>
71
+ `;
72
+
73
+ export const MultipleToggles = () => html`
74
+ ${toggleStoryStyles}
75
+ <form
76
+ class="flex flex-col gap-sm toggle-story-form"
77
+ @submit="${(event) => {
78
+ event.preventDefault();
79
+ toastFormData(new FormData(event.target));
80
+ }}"
81
+ >
82
+ <label data-toggle>
83
+ <span data-label>Email notifications</span>
84
+ <input type="checkbox" name="email" checked>
85
+ </label>
86
+ <label data-toggle>
87
+ <span data-label>Push notifications</span>
88
+ <input type="checkbox" name="push">
89
+ </label>
90
+ <label data-toggle>
91
+ <span data-label>SMS notifications</span>
92
+ <input type="checkbox" name="sms">
93
+ </label>
94
+ <label data-toggle>
95
+ <span data-label>Weekly digest</span>
96
+ <input type="checkbox" name="digest" checked>
97
+ </label>
98
+ <button type="submit" class="btn-primary toggle-story-form__button">Save Preferences</button>
99
+ </form>
100
+ `;
101
+
102
+ export const TogglePositions = () => html`
103
+ ${toggleStoryStyles}
104
+ <div class="toggle-story-layout">
105
+ <div>
106
+ <h3>Toggle Position Variations</h3>
107
+ <p class="toggle-story-muted">
108
+ Toggle knob position adapts based on label placement in DOM
109
+ </p>
110
+ </div>
111
+ <div class="flex flex-col gap-md">
112
+ <section class="toggle-story-section">
113
+ <h4 class="toggle-story-subheading">Label First (Knob on Right)</h4>
114
+ <div class="flex flex-col gap-sm">
115
+ <label data-toggle>
116
+ <span data-label>Email notifications</span>
117
+ <input type="checkbox" checked>
118
+ </label>
119
+ <label data-toggle>
120
+ <span data-label>Push notifications</span>
121
+ <input type="checkbox">
122
+ </label>
123
+ </div>
124
+ </section>
125
+
126
+ <section class="toggle-story-section">
127
+ <h4 class="toggle-story-subheading">Label Last (Knob on Left)</h4>
128
+ <div class="flex flex-col gap-sm">
129
+ <label data-toggle>
130
+ <input type="checkbox" checked>
131
+ <span data-label>Dark mode enabled</span>
132
+ </label>
133
+ <label data-toggle>
134
+ <input type="checkbox">
135
+ <span data-label>Auto-save changes</span>
136
+ </label>
137
+ </div>
138
+ </section>
139
+ </div>
140
+ </div>
141
+ `;
142
+
143
+ export const InCard = () => html`
144
+ ${toggleStoryStyles}
145
+ <article class="card toggle-story-card">
146
+ <div>
147
+ <h3>Privacy Settings</h3>
148
+ <p class="toggle-story-muted">
149
+ Control your privacy preferences
150
+ </p>
151
+ </div>
152
+ <div class="flex flex-col gap-sm">
153
+ <label data-toggle>
154
+ <span data-label>Profile visibility</span>
155
+ <input type="checkbox" checked>
156
+ </label>
157
+ <label data-toggle>
158
+ <span data-label>Show online status</span>
159
+ <input type="checkbox">
160
+ </label>
161
+ <label data-toggle>
162
+ <span data-label>Allow message requests</span>
163
+ <input type="checkbox" checked>
164
+ </label>
165
+ </div>
166
+ </article>
167
+ `;
package/stories/foundations/Colors.stories.js CHANGED
@@ -130,9 +130,10 @@ const chooseReadableTextColor = (colorName, shade, fallback) => {
130
130
 
131
131
  export default {
132
132
  title: 'Foundations/Colors',
133
+ tags: ['color', 'colors', 'primary', 'secondary', 'accent', 'semantic', 'palette', 'tokens'],
133
134
  parameters: {
134
135
  pds: {
135
- tags: ['colors']
136
+ tags: ['color', 'colors', 'primary', 'secondary', 'accent', 'success', 'warning', 'danger', 'info', 'neutral', 'gray', 'semantic', 'palette', 'tokens', 'theming']
136
137
  },
137
138
  docs: {
138
139
  description: {
package/stories/foundations/Icons.stories.js CHANGED
@@ -140,7 +140,11 @@ const iconStoryStyles = html`
140
140
 
141
141
  export default {
142
142
  title: 'Foundations/Icons',
143
+ tags: ['icon', 'icons', 'svg', 'phosphor', 'graphic', 'symbol'],
143
144
  parameters: {
145
+ pds: {
146
+ tags: ['icon', 'icons', 'svg', 'phosphor', 'graphic', 'symbol', 'pds-icon', 'sprite']
147
+ },
144
148
  docs: {
145
149
  description: {
146
150
  component: 'Icon system using Phosphor icons with configurable sets per category'