@pure-ds/storybook 0.4.22 → 0.4.24
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/dist/pds-reference.json +3 -3
- package/package.json +2 -2
- package/public/assets/js/app.js +59 -11
- package/public/assets/js/pds.js +60 -12
- package/public/assets/pds/components/pds-drawer.js +1 -1
- package/public/assets/pds/components/pds-form.js +29 -8
- package/src/js/pds-core/pds-config.js +1 -2
- package/src/js/pds-core/pds-generator.js +46 -5
- package/src/js/pds.js +21 -4
- package/stories/GettingStarted.md +27 -3
- package/stories/components/PdsDrawer.stories.js +2 -4
- package/stories/components/PdsForm.stories.js +4902 -4676
- package/stories/components/PdsFormUiSchema.md +1 -1
- package/stories/enhancements/RequiredFields.stories.js +3 -1
- package/stories/enhancements/Toggles.stories.js +30 -0
|
@@ -434,7 +434,7 @@ Global form options that can be set via the `options` property:
|
|
|
434
434
|
```javascript
|
|
435
435
|
const options = {
|
|
436
436
|
widgets: {
|
|
437
|
-
booleans: "toggle", // "toggle"
|
|
437
|
+
booleans: "toggle", // "toggle" | "toggle-with-icons" | "checkbox"
|
|
438
438
|
numbers: "input", // "input" or "range"
|
|
439
439
|
selects: "standard" // "standard" or "dropdown"
|
|
440
440
|
},
|
|
@@ -40,7 +40,9 @@ export const BasicRequired = () => html`
|
|
|
40
40
|
<input type="tel" placeholder="+1 (555) 123-4567">
|
|
41
41
|
</div>
|
|
42
42
|
</label>
|
|
43
|
-
<
|
|
43
|
+
<nav>
|
|
44
|
+
<button type="submit" class="btn-primary">Submit</button>
|
|
45
|
+
</nav>
|
|
44
46
|
</form>
|
|
45
47
|
`;
|
|
46
48
|
|
|
@@ -134,3 +134,33 @@ export const InCard = () => html`
|
|
|
134
134
|
</div>
|
|
135
135
|
</article>
|
|
136
136
|
`;
|
|
137
|
+
|
|
138
|
+
export const WithIcons = () => html`
|
|
139
|
+
${enhancementHeader("toggle")}
|
|
140
|
+
<div class="toggle-story-layout">
|
|
141
|
+
<div>
|
|
142
|
+
<h3>Toggles with Icons</h3>
|
|
143
|
+
<p class="toggle-story-muted">
|
|
144
|
+
Add the <code>.with-icons</code> class to show checkmark/cross icons in the toggle knob
|
|
145
|
+
</p>
|
|
146
|
+
</div>
|
|
147
|
+
<div class="stack-md">
|
|
148
|
+
<label data-toggle class="with-icons">
|
|
149
|
+
<span data-label>Enable notifications</span>
|
|
150
|
+
<input type="checkbox" checked />
|
|
151
|
+
</label>
|
|
152
|
+
<label data-toggle class="with-icons">
|
|
153
|
+
<span data-label>Dark mode</span>
|
|
154
|
+
<input type="checkbox" />
|
|
155
|
+
</label>
|
|
156
|
+
<label data-toggle class="with-icons">
|
|
157
|
+
<input type="checkbox" checked />
|
|
158
|
+
<span data-label>Auto-save changes</span>
|
|
159
|
+
</label>
|
|
160
|
+
<label data-toggle class="with-icons">
|
|
161
|
+
<input type="checkbox" />
|
|
162
|
+
<span data-label>Show tips</span>
|
|
163
|
+
</label>
|
|
164
|
+
</div>
|
|
165
|
+
</div>
|
|
166
|
+
`;
|