@sps-woodland/modal 8.56.1 → 8.56.3
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/lib/index.js +185 -197
- package/lib/index.umd.cjs +33 -33
- package/lib/style.css +2 -1
- package/package.json +4 -4
package/lib/index.js
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { Modal as
|
|
1
|
+
import { Modal as e } from "@sps-woodland/core/modal";
|
|
2
|
+
import { code as t } from "@spscommerce/utils";
|
|
3
|
+
import * as n from "react";
|
|
2
4
|
export * from "@sps-woodland/core/modal";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
basic: {
|
|
18
|
-
react: e`
|
|
5
|
+
//#endregion
|
|
6
|
+
//#region src/manifest.ts
|
|
7
|
+
var r = { Modals: {
|
|
8
|
+
description: () => /* @__PURE__ */ n.createElement("p", null, "Modals are overlays on a page that focus a user’s attention on an important message or a simple action. Examples of a Modal include confirming the deletion of a record, or making a single selection."),
|
|
9
|
+
components: [e],
|
|
10
|
+
examples: {
|
|
11
|
+
general: {
|
|
12
|
+
label: "Usage",
|
|
13
|
+
description: ({ NavigateTo: e }) => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("h5", null, "Use a Modal:"), /* @__PURE__ */ n.createElement("ul", null, /* @__PURE__ */ n.createElement("li", null, "When the user needs to confirm a basic decision, such as deleting a record."), /* @__PURE__ */ n.createElement("li", null, "When important information needs to be displayed to the user before continuing."), /* @__PURE__ */ n.createElement("li", null, "When a simple selection, such as a single form input, is required before proceeding.")), /* @__PURE__ */ n.createElement("h5", null, "Avoid a Modal:"), /* @__PURE__ */ n.createElement("ul", null, /* @__PURE__ */ n.createElement("li", null, "When a complex form is required. Use a ", /* @__PURE__ */ n.createElement(e, { to: "focused-task" }, "Focused Task View"), " instead."), /* @__PURE__ */ n.createElement("li", null, "When sharing non-critical or tertiary information. Use a ", /* @__PURE__ */ n.createElement(e, { to: "growlers" }, "Growler"), " instead.")))
|
|
14
|
+
},
|
|
15
|
+
implementation: {
|
|
16
|
+
label: "Close Button",
|
|
17
|
+
description: () => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("h5", null, "Close Button and Modal dismissiability"), /* @__PURE__ */ n.createElement("p", null, "Remove the Close Button in the upper right of the Modal if the user must choose the course of action before proceeding."), /* @__PURE__ */ n.createElement("p", null, "The close button is included by default and omitted when the prop ", /* @__PURE__ */ n.createElement("code", null, "dismissable"), " is set to ", /* @__PURE__ */ n.createElement("strong", null, "false"), "."), /* @__PURE__ */ n.createElement("p", null, "Setting the ", /* @__PURE__ */ n.createElement("code", null, "dismissable"), " prop to false also prevents dismissing the modal by clicking outside of the modal or by using the", " ", /* @__PURE__ */ n.createElement("strong", null, "escape"), " key.")),
|
|
18
|
+
examples: { basic: { react: t`
|
|
19
19
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
20
20
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
21
21
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -49,31 +49,23 @@ const a = {
|
|
|
49
49
|
</>
|
|
50
50
|
)
|
|
51
51
|
}
|
|
52
|
-
`
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
informational: {
|
|
70
|
-
label: "Informational",
|
|
71
|
-
description: `Use Informational Modals to share impactful information with the user,
|
|
72
|
-
such as telling them when an app will be down for maintenance.`,
|
|
73
|
-
examples: {
|
|
74
|
-
small: {
|
|
75
|
-
description: "Small",
|
|
76
|
-
react: e`
|
|
52
|
+
` } }
|
|
53
|
+
},
|
|
54
|
+
sizing: {
|
|
55
|
+
label: "Sizing",
|
|
56
|
+
description: "There are 4 sizes of Modal:\n Small (4 columns), Medium (6 columns),\n and Large (8 columns), XLarge (12 columns).\n Use the size that best fits the content\n that needs to be in the Modal, erring\n towards the smallest size whenever possible."
|
|
57
|
+
},
|
|
58
|
+
hooks: {
|
|
59
|
+
label: "Using Hooks",
|
|
60
|
+
description: () => /* @__PURE__ */ n.createElement(n.Fragment, null, /* @__PURE__ */ n.createElement("h5", null, "Using the hook"), /* @__PURE__ */ n.createElement("p", null, "To use any modals, you must call the ", /* @__PURE__ */ n.createElement("code", null, "useModal"), " hook. Optional arguments for this hook include:"), /* @__PURE__ */ n.createElement("dl", null, /* @__PURE__ */ n.createElement("dt", null, /* @__PURE__ */ n.createElement("code", null, "isOpen"), ": boolean"), /* @__PURE__ */ n.createElement("dd", null, "Whether the overlay is open by default (controlled)"), /* @__PURE__ */ n.createElement("dt", null, /* @__PURE__ */ n.createElement("code", null, "defaultOpen"), ": boolean"), /* @__PURE__ */ n.createElement("dd", null, "Whether the overlay is open by default (uncontrolled)."), /* @__PURE__ */ n.createElement("dt", null, /* @__PURE__ */ n.createElement("code", null, "onOpenChange"), ": function"), /* @__PURE__ */ n.createElement("dd", null, "Handler that is called when the overlay's open state changes.", /* @__PURE__ */ n.createElement("code", null, "(isOpen: boolean) => void"))), /* @__PURE__ */ n.createElement("h5", null, "Modal Props, Modal State, and Trigger Props"), /* @__PURE__ */ n.createElement("p", null, "The ", /* @__PURE__ */ n.createElement("code", null, "useModal"), " returns an object with ", /* @__PURE__ */ n.createElement("code", null, "modalProps"), ", ", /* @__PURE__ */ n.createElement("code", null, "modalState"), " and ", /* @__PURE__ */ n.createElement("code", null, "triggerProps")), /* @__PURE__ */ n.createElement("p", null, "The ", /* @__PURE__ */ n.createElement("code", null, "triggerProps"), " need to be spread on the element that triggers the modal."), /* @__PURE__ */ n.createElement("p", null, "The ", /* @__PURE__ */ n.createElement("code", null, "modalState"), " object (which is also included in ", /* @__PURE__ */ n.createElement("code", null, "modalProps"), ") allows programmatic access to the state of the modal. This includes a read only ", /* @__PURE__ */ n.createElement("code", null, "isOpen"), " property, a ", /* @__PURE__ */ n.createElement("code", null, "setOpen(isOpen: boolean)"), " method which can be use to set whether the overlay is open, an ", /* @__PURE__ */ n.createElement("code", null, "open()"), " method which opens the overlay, a ", /* @__PURE__ */ n.createElement("code", null, "close()"), " method which closes the overlay and a ", /* @__PURE__ */ n.createElement("code", null, "toggle()"), " method that toggles the overlay's visiblity."), /* @__PURE__ */ n.createElement("p", null, "The ", /* @__PURE__ */ n.createElement("code", null, "modalProps"), " should be spread on the actual ", /* @__PURE__ */ n.createElement("code", null, "Modal"), " component."), /* @__PURE__ */ n.createElement("p", null, "Please refer to the examples to see its implementation"))
|
|
61
|
+
},
|
|
62
|
+
informational: {
|
|
63
|
+
label: "Informational",
|
|
64
|
+
description: "Use Informational Modals to share impactful information with the user,\n such as telling them when an app will be down for maintenance.",
|
|
65
|
+
examples: {
|
|
66
|
+
small: {
|
|
67
|
+
description: "Small",
|
|
68
|
+
react: t`
|
|
77
69
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
78
70
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
79
71
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -99,10 +91,10 @@ const a = {
|
|
|
99
91
|
)
|
|
100
92
|
}
|
|
101
93
|
`
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
94
|
+
},
|
|
95
|
+
medium: {
|
|
96
|
+
description: "Medium",
|
|
97
|
+
react: t`
|
|
106
98
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
107
99
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
108
100
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -125,10 +117,10 @@ const a = {
|
|
|
125
117
|
)
|
|
126
118
|
}
|
|
127
119
|
`
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
120
|
+
},
|
|
121
|
+
large: {
|
|
122
|
+
description: "Large",
|
|
123
|
+
react: t`
|
|
132
124
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
133
125
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
134
126
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -151,10 +143,10 @@ const a = {
|
|
|
151
143
|
)
|
|
152
144
|
}
|
|
153
145
|
`
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
146
|
+
},
|
|
147
|
+
xlarge: {
|
|
148
|
+
description: "Extra Large",
|
|
149
|
+
react: t`
|
|
158
150
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
159
151
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
160
152
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -177,17 +169,16 @@ const a = {
|
|
|
177
169
|
)
|
|
178
170
|
}
|
|
179
171
|
`
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
react: e`
|
|
172
|
+
}
|
|
173
|
+
}
|
|
174
|
+
},
|
|
175
|
+
delete: {
|
|
176
|
+
label: "Delete",
|
|
177
|
+
description: "Use Delete Modals to have the user confirm they want to\n continue with a destructive action. Be clear on what will happen if they continue.",
|
|
178
|
+
examples: {
|
|
179
|
+
small: {
|
|
180
|
+
description: "Small",
|
|
181
|
+
react: t`
|
|
191
182
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
192
183
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
193
184
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -206,10 +197,10 @@ const a = {
|
|
|
206
197
|
)
|
|
207
198
|
}
|
|
208
199
|
`
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
200
|
+
},
|
|
201
|
+
medium: {
|
|
202
|
+
description: "Medium",
|
|
203
|
+
react: t`
|
|
213
204
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
214
205
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
215
206
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -227,10 +218,10 @@ const a = {
|
|
|
227
218
|
)
|
|
228
219
|
}
|
|
229
220
|
`
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
221
|
+
},
|
|
222
|
+
large: {
|
|
223
|
+
description: "Large",
|
|
224
|
+
react: t`
|
|
234
225
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
235
226
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
236
227
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -249,10 +240,10 @@ const a = {
|
|
|
249
240
|
)
|
|
250
241
|
}
|
|
251
242
|
`
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
243
|
+
},
|
|
244
|
+
xlarge: {
|
|
245
|
+
description: "Extra Large",
|
|
246
|
+
react: t`
|
|
256
247
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
257
248
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
258
249
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -270,16 +261,16 @@ const a = {
|
|
|
270
261
|
)
|
|
271
262
|
}
|
|
272
263
|
`
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
264
|
+
}
|
|
265
|
+
}
|
|
266
|
+
},
|
|
267
|
+
failure: {
|
|
268
|
+
label: "Failure",
|
|
269
|
+
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
270
|
+
examples: {
|
|
271
|
+
small: {
|
|
272
|
+
description: "Small",
|
|
273
|
+
react: t`
|
|
283
274
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
284
275
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
285
276
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -298,10 +289,10 @@ const a = {
|
|
|
298
289
|
)
|
|
299
290
|
}
|
|
300
291
|
`
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
|
|
292
|
+
},
|
|
293
|
+
medium: {
|
|
294
|
+
description: "Medium",
|
|
295
|
+
react: t`
|
|
305
296
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
306
297
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
307
298
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -319,10 +310,10 @@ const a = {
|
|
|
319
310
|
)
|
|
320
311
|
}
|
|
321
312
|
`
|
|
322
|
-
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
313
|
+
},
|
|
314
|
+
large: {
|
|
315
|
+
description: "Large",
|
|
316
|
+
react: t`
|
|
326
317
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
327
318
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
328
319
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -341,10 +332,10 @@ const a = {
|
|
|
341
332
|
)
|
|
342
333
|
}
|
|
343
334
|
`
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
335
|
+
},
|
|
336
|
+
xlarge: {
|
|
337
|
+
description: "Extra Large",
|
|
338
|
+
react: t`
|
|
348
339
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
349
340
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
350
341
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -362,16 +353,16 @@ const a = {
|
|
|
362
353
|
)
|
|
363
354
|
}
|
|
364
355
|
`
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
371
|
-
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
356
|
+
}
|
|
357
|
+
}
|
|
358
|
+
},
|
|
359
|
+
success: {
|
|
360
|
+
label: "Success",
|
|
361
|
+
description: "Use Success Modals to confirm that an action has been completed successfully.",
|
|
362
|
+
examples: {
|
|
363
|
+
small: {
|
|
364
|
+
description: "Small",
|
|
365
|
+
react: t`
|
|
375
366
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
376
367
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
377
368
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -390,10 +381,10 @@ const a = {
|
|
|
390
381
|
)
|
|
391
382
|
}
|
|
392
383
|
`
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
384
|
+
},
|
|
385
|
+
medium: {
|
|
386
|
+
description: "Medium",
|
|
387
|
+
react: t`
|
|
397
388
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
398
389
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
399
390
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -411,10 +402,10 @@ const a = {
|
|
|
411
402
|
)
|
|
412
403
|
}
|
|
413
404
|
`
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
405
|
+
},
|
|
406
|
+
large: {
|
|
407
|
+
description: "Large",
|
|
408
|
+
react: t`
|
|
418
409
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
419
410
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
420
411
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -433,10 +424,10 @@ const a = {
|
|
|
433
424
|
)
|
|
434
425
|
}
|
|
435
426
|
`
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
427
|
+
},
|
|
428
|
+
xlarge: {
|
|
429
|
+
description: "Extra Large",
|
|
430
|
+
react: t`
|
|
440
431
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
441
432
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
442
433
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -454,16 +445,16 @@ const a = {
|
|
|
454
445
|
)
|
|
455
446
|
}
|
|
456
447
|
`
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
|
|
448
|
+
}
|
|
449
|
+
}
|
|
450
|
+
},
|
|
451
|
+
successWithFailtures: {
|
|
452
|
+
label: "Success with Failures",
|
|
453
|
+
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
454
|
+
examples: {
|
|
455
|
+
small: {
|
|
456
|
+
description: "Small",
|
|
457
|
+
react: t`
|
|
467
458
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
468
459
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
469
460
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -482,10 +473,10 @@ const a = {
|
|
|
482
473
|
)
|
|
483
474
|
}
|
|
484
475
|
`
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
476
|
+
},
|
|
477
|
+
medium: {
|
|
478
|
+
description: "Medium",
|
|
479
|
+
react: t`
|
|
489
480
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
490
481
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
491
482
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -503,10 +494,10 @@ const a = {
|
|
|
503
494
|
)
|
|
504
495
|
}
|
|
505
496
|
`
|
|
506
|
-
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
|
|
497
|
+
},
|
|
498
|
+
large: {
|
|
499
|
+
description: "Large",
|
|
500
|
+
react: t`
|
|
510
501
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
511
502
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
512
503
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -525,10 +516,10 @@ const a = {
|
|
|
525
516
|
)
|
|
526
517
|
}
|
|
527
518
|
`
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
|
|
519
|
+
},
|
|
520
|
+
xlarge: {
|
|
521
|
+
description: "Extra Large",
|
|
522
|
+
react: t`
|
|
532
523
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
533
524
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
534
525
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -546,16 +537,16 @@ const a = {
|
|
|
546
537
|
)
|
|
547
538
|
}
|
|
548
539
|
`
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
540
|
+
}
|
|
541
|
+
}
|
|
542
|
+
},
|
|
543
|
+
warning: {
|
|
544
|
+
label: "Warning",
|
|
545
|
+
description: "Use Warning Modals to warn of problems that may occur as a result of taking an action. When writing the message, be clear about what will happen if the user continues on the path.",
|
|
546
|
+
examples: {
|
|
547
|
+
small: {
|
|
548
|
+
description: "Small",
|
|
549
|
+
react: t`
|
|
559
550
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
560
551
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
561
552
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -579,10 +570,10 @@ const a = {
|
|
|
579
570
|
)
|
|
580
571
|
}
|
|
581
572
|
`
|
|
582
|
-
|
|
583
|
-
|
|
584
|
-
|
|
585
|
-
|
|
573
|
+
},
|
|
574
|
+
medium: {
|
|
575
|
+
description: "Medium",
|
|
576
|
+
react: t`
|
|
586
577
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
587
578
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
588
579
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -604,10 +595,10 @@ const a = {
|
|
|
604
595
|
)
|
|
605
596
|
}
|
|
606
597
|
`
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
|
|
598
|
+
},
|
|
599
|
+
large: {
|
|
600
|
+
description: "Large",
|
|
601
|
+
react: t`
|
|
611
602
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
612
603
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
613
604
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -626,10 +617,10 @@ const a = {
|
|
|
626
617
|
)
|
|
627
618
|
}
|
|
628
619
|
`
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
620
|
+
},
|
|
621
|
+
xlarge: {
|
|
622
|
+
description: "Extra Large",
|
|
623
|
+
react: t`
|
|
633
624
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
634
625
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
635
626
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -647,16 +638,16 @@ const a = {
|
|
|
647
638
|
)
|
|
648
639
|
}
|
|
649
640
|
`
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
641
|
+
}
|
|
642
|
+
}
|
|
643
|
+
},
|
|
644
|
+
form: {
|
|
645
|
+
label: "Form",
|
|
646
|
+
description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
|
|
647
|
+
examples: {
|
|
648
|
+
small: {
|
|
649
|
+
description: "Small",
|
|
650
|
+
react: t`
|
|
660
651
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
661
652
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
662
653
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -675,10 +666,10 @@ const a = {
|
|
|
675
666
|
)
|
|
676
667
|
}
|
|
677
668
|
`
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
669
|
+
},
|
|
670
|
+
medium: {
|
|
671
|
+
description: "Medium",
|
|
672
|
+
react: t`
|
|
682
673
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
683
674
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
684
675
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -696,10 +687,10 @@ const a = {
|
|
|
696
687
|
)
|
|
697
688
|
}
|
|
698
689
|
`
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
702
|
-
|
|
690
|
+
},
|
|
691
|
+
large: {
|
|
692
|
+
description: "Large",
|
|
693
|
+
react: t`
|
|
703
694
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
704
695
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
705
696
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -718,10 +709,10 @@ const a = {
|
|
|
718
709
|
)
|
|
719
710
|
}
|
|
720
711
|
`
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
712
|
+
},
|
|
713
|
+
xlarge: {
|
|
714
|
+
description: "Extra Large",
|
|
715
|
+
react: t`
|
|
725
716
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
726
717
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
727
718
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -739,13 +730,10 @@ const a = {
|
|
|
739
730
|
)
|
|
740
731
|
}
|
|
741
732
|
`
|
|
742
|
-
|
|
743
|
-
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
}
|
|
747
|
-
|
|
748
|
-
};
|
|
749
|
-
export {
|
|
750
|
-
d as MANIFEST
|
|
751
|
-
};
|
|
733
|
+
}
|
|
734
|
+
}
|
|
735
|
+
}
|
|
736
|
+
}
|
|
737
|
+
} };
|
|
738
|
+
//#endregion
|
|
739
|
+
export { r as MANIFEST };
|
package/lib/index.umd.cjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
(function(
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("@sps-woodland/core/modal"),require("@spscommerce/utils"),require("react")):typeof define==`function`&&define.amd?define([`exports`,`@sps-woodland/core/modal`,`@spscommerce/utils`,`react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.Modal={},e.spsWoodlandCoreModal,e.spscommerceUtils,e.react))})(this,function(e,t,n,r){Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=Object.create,a=Object.defineProperty,o=Object.getOwnPropertyDescriptor,s=Object.getOwnPropertyNames,c=Object.getPrototypeOf,l=Object.prototype.hasOwnProperty,u=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=s(t),c=0,u=i.length,d;c<u;c++)d=i[c],!l.call(e,d)&&d!==n&&a(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=o(t,d))||r.enumerable});return e};r=((e,t,n)=>(n=e==null?{}:i(c(e)),u(t||!e||!e.__esModule||!l.call(e,`default`)?a(n,`default`,{value:e,enumerable:!0}):n,e)))(r,1),e.MANIFEST={Modals:{description:()=>r.createElement(`p`,null,`Modals are overlays on a page that focus a user’s attention on an important message or a simple action. Examples of a Modal include confirming the deletion of a record, or making a single selection.`),components:[t.Modal],examples:{general:{label:`Usage`,description:({NavigateTo:e})=>r.createElement(r.Fragment,null,r.createElement(`h5`,null,`Use a Modal:`),r.createElement(`ul`,null,r.createElement(`li`,null,`When the user needs to confirm a basic decision, such as deleting a record.`),r.createElement(`li`,null,`When important information needs to be displayed to the user before continuing.`),r.createElement(`li`,null,`When a simple selection, such as a single form input, is required before proceeding.`)),r.createElement(`h5`,null,`Avoid a Modal:`),r.createElement(`ul`,null,r.createElement(`li`,null,`When a complex form is required. Use a `,r.createElement(e,{to:`focused-task`},`Focused Task View`),` instead.`),r.createElement(`li`,null,`When sharing non-critical or tertiary information. Use a `,r.createElement(e,{to:`growlers`},`Growler`),` instead.`)))},implementation:{label:`Close Button`,description:()=>r.createElement(r.Fragment,null,r.createElement(`h5`,null,`Close Button and Modal dismissiability`),r.createElement(`p`,null,`Remove the Close Button in the upper right of the Modal if the user must choose the course of action before proceeding.`),r.createElement(`p`,null,`The close button is included by default and omitted when the prop `,r.createElement(`code`,null,`dismissable`),` is set to `,r.createElement(`strong`,null,`false`),`.`),r.createElement(`p`,null,`Setting the `,r.createElement(`code`,null,`dismissable`),` prop to false also prevents dismissing the modal by clicking outside of the modal or by using the`,` `,r.createElement(`strong`,null,`escape`),` key.`)),examples:{basic:{react:n.code`
|
|
2
2
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
3
3
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
4
4
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -32,13 +32,13 @@
|
|
|
32
32
|
</>
|
|
33
33
|
)
|
|
34
34
|
}
|
|
35
|
-
`}}},sizing:{label
|
|
35
|
+
`}}},sizing:{label:`Sizing`,description:`There are 4 sizes of Modal:
|
|
36
36
|
Small (4 columns), Medium (6 columns),
|
|
37
37
|
and Large (8 columns), XLarge (12 columns).
|
|
38
38
|
Use the size that best fits the content
|
|
39
39
|
that needs to be in the Modal, erring
|
|
40
|
-
towards the smallest size whenever possible.`},hooks:{label
|
|
41
|
-
such as telling them when an app will be down for maintenance.`,examples:{small:{description
|
|
40
|
+
towards the smallest size whenever possible.`},hooks:{label:`Using Hooks`,description:()=>r.createElement(r.Fragment,null,r.createElement(`h5`,null,`Using the hook`),r.createElement(`p`,null,`To use any modals, you must call the `,r.createElement(`code`,null,`useModal`),` hook. Optional arguments for this hook include:`),r.createElement(`dl`,null,r.createElement(`dt`,null,r.createElement(`code`,null,`isOpen`),`: boolean`),r.createElement(`dd`,null,`Whether the overlay is open by default (controlled)`),r.createElement(`dt`,null,r.createElement(`code`,null,`defaultOpen`),`: boolean`),r.createElement(`dd`,null,`Whether the overlay is open by default (uncontrolled).`),r.createElement(`dt`,null,r.createElement(`code`,null,`onOpenChange`),`: function`),r.createElement(`dd`,null,`Handler that is called when the overlay's open state changes.`,r.createElement(`code`,null,`(isOpen: boolean) => void`))),r.createElement(`h5`,null,`Modal Props, Modal State, and Trigger Props`),r.createElement(`p`,null,`The `,r.createElement(`code`,null,`useModal`),` returns an object with `,r.createElement(`code`,null,`modalProps`),`, `,r.createElement(`code`,null,`modalState`),` and `,r.createElement(`code`,null,`triggerProps`)),r.createElement(`p`,null,`The `,r.createElement(`code`,null,`triggerProps`),` need to be spread on the element that triggers the modal.`),r.createElement(`p`,null,`The `,r.createElement(`code`,null,`modalState`),` object (which is also included in `,r.createElement(`code`,null,`modalProps`),`) allows programmatic access to the state of the modal. This includes a read only `,r.createElement(`code`,null,`isOpen`),` property, a `,r.createElement(`code`,null,`setOpen(isOpen: boolean)`),` method which can be use to set whether the overlay is open, an `,r.createElement(`code`,null,`open()`),` method which opens the overlay, a `,r.createElement(`code`,null,`close()`),` method which closes the overlay and a `,r.createElement(`code`,null,`toggle()`),` method that toggles the overlay's visiblity.`),r.createElement(`p`,null,`The `,r.createElement(`code`,null,`modalProps`),` should be spread on the actual `,r.createElement(`code`,null,`Modal`),` component.`),r.createElement(`p`,null,`Please refer to the examples to see its implementation`))},informational:{label:`Informational`,description:`Use Informational Modals to share impactful information with the user,
|
|
41
|
+
such as telling them when an app will be down for maintenance.`,examples:{small:{description:`Small`,react:n.code`
|
|
42
42
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
43
43
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
44
44
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -63,7 +63,7 @@
|
|
|
63
63
|
</>
|
|
64
64
|
)
|
|
65
65
|
}
|
|
66
|
-
`},medium:{description
|
|
66
|
+
`},medium:{description:`Medium`,react:n.code`
|
|
67
67
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
68
68
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
69
69
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -85,7 +85,7 @@
|
|
|
85
85
|
</>
|
|
86
86
|
)
|
|
87
87
|
}
|
|
88
|
-
`},large:{description
|
|
88
|
+
`},large:{description:`Large`,react:n.code`
|
|
89
89
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
90
90
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
91
91
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -107,7 +107,7 @@
|
|
|
107
107
|
</>
|
|
108
108
|
)
|
|
109
109
|
}
|
|
110
|
-
`},xlarge:{description
|
|
110
|
+
`},xlarge:{description:`Extra Large`,react:n.code`
|
|
111
111
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
112
112
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
113
113
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -129,8 +129,8 @@
|
|
|
129
129
|
</>
|
|
130
130
|
)
|
|
131
131
|
}
|
|
132
|
-
`}}},delete:{label
|
|
133
|
-
continue with a destructive action. Be clear on what will happen if they continue.`,examples:{small:{description
|
|
132
|
+
`}}},delete:{label:`Delete`,description:`Use Delete Modals to have the user confirm they want to
|
|
133
|
+
continue with a destructive action. Be clear on what will happen if they continue.`,examples:{small:{description:`Small`,react:n.code`
|
|
134
134
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
135
135
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
136
136
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -148,7 +148,7 @@
|
|
|
148
148
|
</>
|
|
149
149
|
)
|
|
150
150
|
}
|
|
151
|
-
`},medium:{description
|
|
151
|
+
`},medium:{description:`Medium`,react:n.code`
|
|
152
152
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
153
153
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
154
154
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -165,7 +165,7 @@
|
|
|
165
165
|
</>
|
|
166
166
|
)
|
|
167
167
|
}
|
|
168
|
-
`},large:{description
|
|
168
|
+
`},large:{description:`Large`,react:n.code`
|
|
169
169
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
170
170
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
171
171
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -183,7 +183,7 @@
|
|
|
183
183
|
</>
|
|
184
184
|
)
|
|
185
185
|
}
|
|
186
|
-
`},xlarge:{description
|
|
186
|
+
`},xlarge:{description:`Extra Large`,react:n.code`
|
|
187
187
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
188
188
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
189
189
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -200,7 +200,7 @@
|
|
|
200
200
|
</>
|
|
201
201
|
)
|
|
202
202
|
}
|
|
203
|
-
`}}},failure:{label
|
|
203
|
+
`}}},failure:{label:`Failure`,description:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,examples:{small:{description:`Small`,react:n.code`
|
|
204
204
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
205
205
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
206
206
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -218,7 +218,7 @@
|
|
|
218
218
|
</>
|
|
219
219
|
)
|
|
220
220
|
}
|
|
221
|
-
`},medium:{description
|
|
221
|
+
`},medium:{description:`Medium`,react:n.code`
|
|
222
222
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
223
223
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
224
224
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -235,7 +235,7 @@
|
|
|
235
235
|
</>
|
|
236
236
|
)
|
|
237
237
|
}
|
|
238
|
-
`},large:{description
|
|
238
|
+
`},large:{description:`Large`,react:n.code`
|
|
239
239
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
240
240
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
241
241
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -253,7 +253,7 @@
|
|
|
253
253
|
</>
|
|
254
254
|
)
|
|
255
255
|
}
|
|
256
|
-
`},xlarge:{description
|
|
256
|
+
`},xlarge:{description:`Extra Large`,react:n.code`
|
|
257
257
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
258
258
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
259
259
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -270,7 +270,7 @@
|
|
|
270
270
|
</>
|
|
271
271
|
)
|
|
272
272
|
}
|
|
273
|
-
`}}},success:{label
|
|
273
|
+
`}}},success:{label:`Success`,description:`Use Success Modals to confirm that an action has been completed successfully.`,examples:{small:{description:`Small`,react:n.code`
|
|
274
274
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
275
275
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
276
276
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -288,7 +288,7 @@
|
|
|
288
288
|
</>
|
|
289
289
|
)
|
|
290
290
|
}
|
|
291
|
-
`},medium:{description
|
|
291
|
+
`},medium:{description:`Medium`,react:n.code`
|
|
292
292
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
293
293
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
294
294
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -305,7 +305,7 @@
|
|
|
305
305
|
</>
|
|
306
306
|
)
|
|
307
307
|
}
|
|
308
|
-
`},large:{description
|
|
308
|
+
`},large:{description:`Large`,react:n.code`
|
|
309
309
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
310
310
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
311
311
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -323,7 +323,7 @@
|
|
|
323
323
|
</>
|
|
324
324
|
)
|
|
325
325
|
}
|
|
326
|
-
`},xlarge:{description
|
|
326
|
+
`},xlarge:{description:`Extra Large`,react:n.code`
|
|
327
327
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
328
328
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
329
329
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -340,7 +340,7 @@
|
|
|
340
340
|
</>
|
|
341
341
|
)
|
|
342
342
|
}
|
|
343
|
-
`}}},successWithFailtures:{label
|
|
343
|
+
`}}},successWithFailtures:{label:`Success with Failures`,description:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,examples:{small:{description:`Small`,react:n.code`
|
|
344
344
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
345
345
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
346
346
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -358,7 +358,7 @@
|
|
|
358
358
|
</>
|
|
359
359
|
)
|
|
360
360
|
}
|
|
361
|
-
`},medium:{description
|
|
361
|
+
`},medium:{description:`Medium`,react:n.code`
|
|
362
362
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
363
363
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
364
364
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -375,7 +375,7 @@
|
|
|
375
375
|
</>
|
|
376
376
|
)
|
|
377
377
|
}
|
|
378
|
-
`},large:{description
|
|
378
|
+
`},large:{description:`Large`,react:n.code`
|
|
379
379
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
380
380
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
381
381
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -393,7 +393,7 @@
|
|
|
393
393
|
</>
|
|
394
394
|
)
|
|
395
395
|
}
|
|
396
|
-
`},xlarge:{description
|
|
396
|
+
`},xlarge:{description:`Extra Large`,react:n.code`
|
|
397
397
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
398
398
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
399
399
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -410,7 +410,7 @@
|
|
|
410
410
|
</>
|
|
411
411
|
)
|
|
412
412
|
}
|
|
413
|
-
`}}},warning:{label
|
|
413
|
+
`}}},warning:{label:`Warning`,description:`Use Warning Modals to warn of problems that may occur as a result of taking an action. When writing the message, be clear about what will happen if the user continues on the path.`,examples:{small:{description:`Small`,react:n.code`
|
|
414
414
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
415
415
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
416
416
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -433,7 +433,7 @@
|
|
|
433
433
|
</>
|
|
434
434
|
)
|
|
435
435
|
}
|
|
436
|
-
`},medium:{description
|
|
436
|
+
`},medium:{description:`Medium`,react:n.code`
|
|
437
437
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
438
438
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
439
439
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -454,7 +454,7 @@
|
|
|
454
454
|
</>
|
|
455
455
|
)
|
|
456
456
|
}
|
|
457
|
-
`},large:{description
|
|
457
|
+
`},large:{description:`Large`,react:n.code`
|
|
458
458
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
459
459
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
460
460
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -472,7 +472,7 @@
|
|
|
472
472
|
</>
|
|
473
473
|
)
|
|
474
474
|
}
|
|
475
|
-
`},xlarge:{description
|
|
475
|
+
`},xlarge:{description:`Extra Large`,react:n.code`
|
|
476
476
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
477
477
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
478
478
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -489,7 +489,7 @@
|
|
|
489
489
|
</>
|
|
490
490
|
)
|
|
491
491
|
}
|
|
492
|
-
`}}},form:{label
|
|
492
|
+
`}}},form:{label:`Form`,description:`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.`,examples:{small:{description:`Small`,react:n.code`
|
|
493
493
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
494
494
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
495
495
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -507,7 +507,7 @@
|
|
|
507
507
|
</>
|
|
508
508
|
)
|
|
509
509
|
}
|
|
510
|
-
`},medium:{description
|
|
510
|
+
`},medium:{description:`Medium`,react:n.code`
|
|
511
511
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
512
512
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
513
513
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -524,7 +524,7 @@
|
|
|
524
524
|
</>
|
|
525
525
|
)
|
|
526
526
|
}
|
|
527
|
-
`},large:{description
|
|
527
|
+
`},large:{description:`Large`,react:n.code`
|
|
528
528
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
529
529
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
530
530
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -542,7 +542,7 @@
|
|
|
542
542
|
</>
|
|
543
543
|
)
|
|
544
544
|
}
|
|
545
|
-
`},xlarge:{description
|
|
545
|
+
`},xlarge:{description:`Extra Large`,react:n.code`
|
|
546
546
|
import { Modal, ModalFooter, useModal } from "@sps-woodland/modal";
|
|
547
547
|
import { sprinkles } from "@sps-woodland/tokens";
|
|
548
548
|
import { Button } from "@sps-woodland/buttons";
|
|
@@ -559,4 +559,4 @@
|
|
|
559
559
|
</>
|
|
560
560
|
)
|
|
561
561
|
}
|
|
562
|
-
`}}}}}}
|
|
562
|
+
`}}}}}},Object.keys(t).forEach(function(n){n!=="default"&&!Object.prototype.hasOwnProperty.call(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:function(){return t[n]}})})});
|
package/lib/style.css
CHANGED
|
@@ -1 +1,2 @@
|
|
|
1
|
-
.pkg_sps-
|
|
1
|
+
.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem0{background-color:#fff;border-style:solid;border-width:.0625rem;border-radius:.25rem;flex-direction:column;max-height:100%;display:flex;overflow:hidden}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem1{border-color:#007db8}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem2,.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem3{border-color:#de002e}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem4{border-color:#0b8940}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem5,.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem6{border-color:#e7760b}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem7{border-color:#4b5356}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem8{width:23.75rem}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksem9{width:36.25rem}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksema{width:48.75rem}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemb{width:73.75rem}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemc{height:100%}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41kseme{color:#fff;align-items:center;padding:1rem;display:flex}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemf{background-color:#4b5356}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemg,.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemh{background-color:#de002e}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemi{background-color:#007db8}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemj{background-color:#0b8940}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemk,.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41kseml{background-color:#e7760b}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemm{flex-grow:1;font-size:.875rem;font-weight:600;line-height:1.25rem}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemn{margin-right:.5rem;font-size:.875rem;font-weight:600;line-height:.875rem}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemo{flex:1;padding:1rem;overflow-y:auto}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemp{background-color:#f3f4f4;justify-content:flex-end;align-items:center;padding:.5rem;display:flex}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemq{color:#fff;border-width:0}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksemr{padding:0 .25rem}.pkg_sps-woodland_core__family_modal__version_8_56_3__hash_41ksems{z-index:1000;background:#f3f4f4cc;justify-content:center;align-items:start;padding:4rem 1rem 1rem;display:flex;position:fixed;inset:0}.z-stratum-dropdown{z-index:1100}
|
|
2
|
+
/*$vite$:1*/
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sps-woodland/modal",
|
|
3
3
|
"description": "SPS Woodland Design System modal component",
|
|
4
|
-
"version": "8.56.
|
|
4
|
+
"version": "8.56.3",
|
|
5
5
|
"author": "SPS Commerce",
|
|
6
6
|
"license": "UNLICENSED",
|
|
7
7
|
"repository": "https://github.com/SPSCommerce/woodland/tree/main/packages/@sps-woodland/modal",
|
|
@@ -30,13 +30,13 @@
|
|
|
30
30
|
"@spscommerce/utils": "^7.0.0 || ^8.0.0 || ^9.0.0",
|
|
31
31
|
"react": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
32
32
|
"react-dom": "^16.14.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
|
|
33
|
-
"@sps-woodland/core": "8.56.
|
|
33
|
+
"@sps-woodland/core": "8.56.3"
|
|
34
34
|
},
|
|
35
35
|
"devDependencies": {
|
|
36
|
-
"@spscommerce/utils": "9.
|
|
36
|
+
"@spscommerce/utils": "9.3.3",
|
|
37
37
|
"react": "16.14.0",
|
|
38
38
|
"react-dom": "16.14.0",
|
|
39
|
-
"@sps-woodland/core": "8.56.
|
|
39
|
+
"@sps-woodland/core": "8.56.3"
|
|
40
40
|
},
|
|
41
41
|
"scripts": {
|
|
42
42
|
"build": "pnpm run build:js && pnpm run build:types && pnpm run build:css",
|