@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/RequiredFields.stories.js CHANGED
@@ -1,189 +1,189 @@
1
- import { html } from 'lit';
2
-
3
- const requiredFieldsStoryStyles = html`
4
- <style>
5
- .required-form {
6
- max-width: 400px;
7
- display: grid;
8
- gap: var(--spacing-3);
9
- }
10
-
11
- .required-form--wide {
12
- max-width: 500px;
13
- }
14
-
15
- .required-fieldset {
16
- display: grid;
17
- gap: var(--spacing-3);
18
- }
19
-
20
- .required-fieldset--spaced {
21
- margin-top: var(--spacing-4);
22
- }
23
-
24
- .required-actions {
25
- margin-top: var(--spacing-4);
26
- }
27
-
28
- .required-help-text {
29
- color: var(--surface-text-secondary);
30
- display: block;
31
- margin-top: 0.25rem;
32
- }
33
-
34
- .required-field--spaced {
35
- margin-top: var(--spacing-3);
36
- }
37
-
38
- .required-form__button {
39
- justify-self: start;
40
- }
41
- </style>
42
- `;
43
-
44
- export default {
45
- title: 'Enhancements/Required Fields',
46
- tags: ['forms', 'interaction'],
47
- parameters: {
48
- pds: {
49
- tags: ['forms', 'interaction']
50
- },
51
- docs: {
52
- description: {
53
- component: 'Automatic asterisk indicators for required form fields'
54
- }
55
- }
56
- }
57
- };
58
-
59
- export const BasicRequired = () => html`
60
- ${requiredFieldsStoryStyles}
61
- <form
62
- class="required-form"
63
- @submit="${(event) => {
64
- event.preventDefault();
65
- toastFormData(new FormData(event.target));
66
- }}"
67
- >
68
- <label>
69
- <span>Full Name</span>
70
- <input type="text" required placeholder="John Doe">
71
- </label>
72
- <label>
73
- <span>Email</span>
74
- <div class="input-icon">
75
- <pds-icon icon="envelope"></pds-icon>
76
- <input type="email" required placeholder="john@example.com">
77
- </div>
78
- </label>
79
- <label>
80
- <span>Phone (optional)</span>
81
- <div class="input-icon">
82
- <pds-icon icon="phone"></pds-icon>
83
- <input type="tel" placeholder="+1 (555) 123-4567">
84
- </div>
85
- </label>
86
- <button type="submit" class="btn-primary required-form__button">Submit</button>
87
- </form>
88
- `;
89
-
90
- export const MixedRequired = () => html`
91
- ${requiredFieldsStoryStyles}
92
- <form
93
- class="required-form required-form--wide"
94
- @submit="${(event) => {
95
- event.preventDefault();
96
- toastFormData(new FormData(event.target));
97
- }}"
98
- >
99
- <fieldset class="required-fieldset">
100
- <legend>Account Information</legend>
101
- <label>
102
- <span>Username</span>
103
- <div class="input-icon">
104
- <pds-icon icon="user"></pds-icon>
105
- <input type="text" required placeholder="username">
106
- </div>
107
- </label>
108
- <label>
109
- <span>Password</span>
110
- <div class="input-icon">
111
- <pds-icon icon="lock"></pds-icon>
112
- <input type="password" required placeholder="••••••••">
113
- </div>
114
- </label>
115
- <label>
116
- <span>Confirm Password</span>
117
- <div class="input-icon">
118
- <pds-icon icon="lock"></pds-icon>
119
- <input type="password" required placeholder="••••••••">
120
- </div>
121
- </label>
122
- </fieldset>
123
-
124
- <fieldset class="required-fieldset required-fieldset--spaced">
125
- <legend>Optional Details</legend>
126
- <label>
127
- <span>Company</span>
128
- <input type="text" placeholder="Acme Corp">
129
- </label>
130
- <label>
131
- <span>Website</span>
132
- <div class="input-icon">
133
- <pds-icon icon="globe"></pds-icon>
134
- <input type="url" placeholder="https://example.com">
135
- </div>
136
- </label>
137
- </fieldset>
138
-
139
- <div class="required-actions">
140
- <button type="submit" class="btn-primary required-form__button">Create Account</button>
141
- </div>
142
- </form>
143
- `;
144
-
145
- export const InlineHelp = () => html`
146
- ${requiredFieldsStoryStyles}
147
- <form
148
- class="required-form required-form--wide"
149
- @submit="${(event) => {
150
- event.preventDefault();
151
- toastFormData(new FormData(event.target));
152
- }}"
153
- >
154
- <label>
155
- <span>Email Address</span>
156
- <div class="input-icon">
157
- <pds-icon icon="envelope"></pds-icon>
158
- <input type="email" required placeholder="you@example.com">
159
- </div>
160
- <small class="required-help-text">
161
- We'll never share your email with anyone else.
162
- </small>
163
- </label>
164
- <label class="required-field--spaced">
165
- <span>Password</span>
166
- <div class="input-icon">
167
- <pds-icon icon="lock"></pds-icon>
168
- <input type="password" required placeholder="••••••••">
169
- </div>
170
- <small class="required-help-text">
171
- Must be at least 8 characters long.
172
- </small>
173
- </label>
174
- <label class="required-field--spaced">
175
- <span>Newsletter Frequency</span>
176
- <select>
177
- <option>Weekly</option>
178
- <option>Monthly</option>
179
- <option>Never</option>
180
- </select>
181
- <small class="required-help-text">
182
- Optional - choose how often you want updates.
183
- </small>
184
- </label>
185
- <div class="required-actions">
186
- <button type="submit" class="btn-primary required-form__button">Sign Up</button>
187
- </div>
188
- </form>
189
- `;
1
+ import { html } from 'lit';
2
+
3
+ const requiredFieldsStoryStyles = html`
4
+ <style>
5
+ .required-form {
6
+ max-width: 400px;
7
+ display: grid;
8
+ gap: var(--spacing-3);
9
+ }
10
+
11
+ .required-form--wide {
12
+ max-width: 500px;
13
+ }
14
+
15
+ .required-fieldset {
16
+ display: grid;
17
+ gap: var(--spacing-3);
18
+ }
19
+
20
+ .required-fieldset--spaced {
21
+ margin-top: var(--spacing-4);
22
+ }
23
+
24
+ .required-actions {
25
+ margin-top: var(--spacing-4);
26
+ }
27
+
28
+ .required-help-text {
29
+ color: var(--surface-text-secondary);
30
+ display: block;
31
+ margin-top: 0.25rem;
32
+ }
33
+
34
+ .required-field--spaced {
35
+ margin-top: var(--spacing-3);
36
+ }
37
+
38
+ .required-form__button {
39
+ justify-self: start;
40
+ }
41
+ </style>
42
+ `;
43
+
44
+ export default {
45
+ title: 'Enhancements/Required Fields',
46
+ tags: ['required', 'validation', 'form', 'input', 'asterisk'],
47
+ parameters: {
48
+ pds: {
49
+ tags: ['required', 'validation', 'form', 'input', 'asterisk', 'forms', 'interaction', 'enhancement']
50
+ },
51
+ docs: {
52
+ description: {
53
+ component: 'Automatic asterisk indicators for required form fields'
54
+ }
55
+ }
56
+ }
57
+ };
58
+
59
+ export const BasicRequired = () => html`
60
+ ${requiredFieldsStoryStyles}
61
+ <form data-required
62
+ class="required-form"
63
+ @submit="${(event) => {
64
+ event.preventDefault();
65
+ toastFormData(new FormData(event.target));
66
+ }}"
67
+ >
68
+ <label>
69
+ <span>Full Name</span>
70
+ <input type="text" required placeholder="John Doe">
71
+ </label>
72
+ <label>
73
+ <span>Email</span>
74
+ <div class="input-icon">
75
+ <pds-icon icon="envelope"></pds-icon>
76
+ <input type="email" required placeholder="john@example.com">
77
+ </div>
78
+ </label>
79
+ <label>
80
+ <span>Phone (optional)</span>
81
+ <div class="input-icon">
82
+ <pds-icon icon="phone"></pds-icon>
83
+ <input type="tel" placeholder="+1 (555) 123-4567">
84
+ </div>
85
+ </label>
86
+ <button type="submit" class="btn-primary required-form__button">Submit</button>
87
+ </form>
88
+ `;
89
+
90
+ export const MixedRequired = () => html`
91
+ ${requiredFieldsStoryStyles}
92
+ <form data-required
93
+ class="required-form required-form--wide"
94
+ @submit="${(event) => {
95
+ event.preventDefault();
96
+ toastFormData(new FormData(event.target));
97
+ }}"
98
+ >
99
+ <fieldset class="required-fieldset">
100
+ <legend>Account Information</legend>
101
+ <label>
102
+ <span>Username</span>
103
+ <div class="input-icon">
104
+ <pds-icon icon="user"></pds-icon>
105
+ <input type="text" required placeholder="username">
106
+ </div>
107
+ </label>
108
+ <label>
109
+ <span>Password</span>
110
+ <div class="input-icon">
111
+ <pds-icon icon="lock"></pds-icon>
112
+ <input type="password" required placeholder="••••••••">
113
+ </div>
114
+ </label>
115
+ <label>
116
+ <span>Confirm Password</span>
117
+ <div class="input-icon">
118
+ <pds-icon icon="lock"></pds-icon>
119
+ <input type="password" required placeholder="••••••••">
120
+ </div>
121
+ </label>
122
+ </fieldset>
123
+
124
+ <fieldset class="required-fieldset required-fieldset--spaced">
125
+ <legend>Optional Details</legend>
126
+ <label>
127
+ <span>Company</span>
128
+ <input type="text" placeholder="Acme Corp">
129
+ </label>
130
+ <label>
131
+ <span>Website</span>
132
+ <div class="input-icon">
133
+ <pds-icon icon="globe"></pds-icon>
134
+ <input type="url" placeholder="https://example.com">
135
+ </div>
136
+ </label>
137
+ </fieldset>
138
+
139
+ <div class="required-actions">
140
+ <button type="submit" class="btn-primary required-form__button">Create Account</button>
141
+ </div>
142
+ </form>
143
+ `;
144
+
145
+ export const InlineHelp = () => html`
146
+ ${requiredFieldsStoryStyles}
147
+ <form
148
+ class="required-form required-form--wide"
149
+ @submit="${(event) => {
150
+ event.preventDefault();
151
+ toastFormData(new FormData(event.target));
152
+ }}"
153
+ >
154
+ <label>
155
+ <span>Email Address</span>
156
+ <div class="input-icon">
157
+ <pds-icon icon="envelope"></pds-icon>
158
+ <input type="email" required placeholder="you@example.com">
159
+ </div>
160
+ <small class="required-help-text">
161
+ We'll never share your email with anyone else.
162
+ </small>
163
+ </label>
164
+ <label class="required-field--spaced">
165
+ <span>Password</span>
166
+ <div class="input-icon">
167
+ <pds-icon icon="lock"></pds-icon>
168
+ <input type="password" required placeholder="••••••••">
169
+ </div>
170
+ <small class="required-help-text">
171
+ Must be at least 8 characters long.
172
+ </small>
173
+ </label>
174
+ <label class="required-field--spaced">
175
+ <span>Newsletter Frequency</span>
176
+ <select>
177
+ <option>Weekly</option>
178
+ <option>Monthly</option>
179
+ <option>Never</option>
180
+ </select>
181
+ <small class="required-help-text">
182
+ Optional - choose how often you want updates.
183
+ </small>
184
+ </label>
185
+ <div class="required-actions">
186
+ <button type="submit" class="btn-primary required-form__button">Sign Up</button>
187
+ </div>
188
+ </form>
189
+ `;