@nypl/design-system-react-components 1.0.1 → 1.0.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.
Files changed (129) hide show
  1. package/CHANGELOG.md +1452 -3
  2. package/README.md +389 -3
  3. package/dist/__tests__/fileMock.d.ts +4 -0
  4. package/dist/__tests__/setup.d.ts +2 -0
  5. package/{lib/stories/0-Welcome.stories.d.ts → dist/__tests__/utils/utils.test.d.ts} +1 -1
  6. package/dist/components/Accordion/Accordion.d.ts +21 -0
  7. package/dist/components/Autosuggest/Autosuggest.stories.d.ts +4 -0
  8. package/dist/components/Breadcrumbs/Breadcrumbs.d.ts +18 -0
  9. package/dist/components/Button/Button.d.ts +25 -0
  10. package/dist/components/ButtonGroup/ButtonGroup.d.ts +22 -0
  11. package/dist/components/Card/Card.d.ts +51 -0
  12. package/dist/components/Checkbox/Checkbox.d.ts +47 -0
  13. package/dist/components/CheckboxGroup/CheckboxGroup.d.ts +49 -0
  14. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +29 -0
  15. package/dist/components/DatePicker/DatePicker.d.ts +81 -0
  16. package/dist/components/Fieldset/Fieldset.d.ts +22 -0
  17. package/dist/components/Form/Form.d.ts +29 -0
  18. package/dist/components/Grid/SimpleGrid.d.ts +17 -0
  19. package/dist/components/Heading/Heading.d.ts +27 -0
  20. package/dist/components/HelperErrorText/HelperErrorText.d.ts +29 -0
  21. package/dist/components/Hero/Hero.d.ts +40 -0
  22. package/dist/components/HorizontalRule/HorizontalRule.d.ts +11 -0
  23. package/dist/components/Icons/Icon.d.ts +37 -0
  24. package/dist/components/Icons/IconSvgs.d.ts +33 -0
  25. package/dist/components/Image/Image.d.ts +61 -0
  26. package/dist/components/Label/Label.d.ts +20 -0
  27. package/dist/components/Link/Link.d.ts +20 -0
  28. package/dist/components/List/List.d.ts +35 -0
  29. package/dist/components/Logo/Logo.d.ts +26 -0
  30. package/dist/components/Logo/LogoSvgs.d.ts +48 -0
  31. package/dist/components/Modal/Modal.d.ts +33 -0
  32. package/dist/components/Notification/Notification.d.ts +50 -0
  33. package/dist/components/Pagination/Pagination.d.ts +27 -0
  34. package/dist/components/Placeholder/Placeholder.d.ts +10 -0
  35. package/dist/components/ProgressIndicator/ProgressIndicator.d.ts +30 -0
  36. package/dist/components/Radio/Radio.d.ts +43 -0
  37. package/dist/components/RadioGroup/RadioGroup.d.ts +51 -0
  38. package/dist/components/SearchBar/SearchBar.d.ts +61 -0
  39. package/dist/components/Select/Select.d.ts +57 -0
  40. package/dist/components/SkeletonLoader/SkeletonLoader.d.ts +39 -0
  41. package/dist/components/SkipNavigation/SkipNavigation.d.ts +17 -0
  42. package/dist/components/Slider/Slider.d.ts +59 -0
  43. package/dist/components/StatusBadge/StatusBadge.d.ts +16 -0
  44. package/dist/components/StructuredContent/StructuredContent.d.ts +28 -0
  45. package/dist/components/StyleGuide/ColorCard.d.ts +12 -0
  46. package/dist/components/Table/Table.d.ts +30 -0
  47. package/dist/components/Tabs/Tabs.d.ts +26 -0
  48. package/dist/components/Template/Template.d.ts +126 -0
  49. package/dist/components/Text/Text.d.ts +16 -0
  50. package/dist/components/TextInput/TextInput.d.ts +79 -0
  51. package/dist/components/Toggle/Toggle.d.ts +42 -0
  52. package/dist/components/VideoPlayer/VideoPlayer.d.ts +38 -0
  53. package/dist/design-system-react-components.cjs.development.js +11648 -0
  54. package/dist/design-system-react-components.cjs.development.js.map +1 -0
  55. package/dist/design-system-react-components.cjs.production.min.js +2 -0
  56. package/dist/design-system-react-components.cjs.production.min.js.map +1 -0
  57. package/dist/design-system-react-components.esm.js +11493 -0
  58. package/dist/design-system-react-components.esm.js.map +1 -0
  59. package/dist/helpers/types.d.ts +1 -0
  60. package/dist/hooks/__tests__/useCarouselStyles.test.d.ts +1 -0
  61. package/dist/hooks/useCarouselStyles.d.ts +17 -0
  62. package/dist/hooks/useNYPLTheme.d.ts +66 -0
  63. package/dist/hooks/useWindowSize.d.ts +10 -0
  64. package/dist/index.d.ts +48 -0
  65. package/dist/index.js +8 -0
  66. package/dist/resources.scss +386 -0
  67. package/dist/styles.css +3 -0
  68. package/dist/theme/components/accordion.d.ts +20 -0
  69. package/dist/theme/components/breadcrumb.d.ts +105 -0
  70. package/dist/theme/components/button.d.ts +120 -0
  71. package/dist/theme/components/buttonGroup.d.ts +11 -0
  72. package/dist/theme/components/card.d.ts +381 -0
  73. package/dist/theme/components/checkbox.d.ts +95 -0
  74. package/dist/theme/components/checkboxGroup.d.ts +14 -0
  75. package/dist/theme/components/componentWrapper.d.ts +12 -0
  76. package/dist/theme/components/customTable.d.ts +624 -0
  77. package/dist/theme/components/datePicker.d.ts +16 -0
  78. package/dist/theme/components/fieldset.d.ts +20 -0
  79. package/dist/theme/components/global.d.ts +73 -0
  80. package/dist/theme/components/globalMixins.d.ts +23 -0
  81. package/dist/theme/components/heading.d.ts +160 -0
  82. package/dist/theme/components/helperErrorText.d.ts +12 -0
  83. package/dist/theme/components/hero.d.ts +499 -0
  84. package/dist/theme/components/horizontalRule.d.ts +15 -0
  85. package/dist/theme/components/icon.d.ts +47755 -0
  86. package/dist/theme/components/image.d.ts +590 -0
  87. package/dist/theme/components/label.d.ts +18 -0
  88. package/dist/theme/components/link.d.ts +62 -0
  89. package/dist/theme/components/list.d.ts +182 -0
  90. package/dist/theme/components/logo.d.ts +477 -0
  91. package/dist/theme/components/notification.d.ts +95 -0
  92. package/dist/theme/components/pagination.d.ts +16 -0
  93. package/dist/theme/components/progressIndicator.d.ts +52 -0
  94. package/dist/theme/components/radio.d.ts +107 -0
  95. package/dist/theme/components/radioGroup.d.ts +14 -0
  96. package/dist/theme/components/searchBar.d.ts +18 -0
  97. package/dist/theme/components/select.d.ts +82 -0
  98. package/dist/theme/components/skeletonLoader.d.ts +102 -0
  99. package/dist/theme/components/skipNavigation.d.ts +25 -0
  100. package/dist/theme/components/slider.d.ts +59 -0
  101. package/dist/theme/components/statusBadge.d.ts +25 -0
  102. package/dist/theme/components/structuredContent.d.ts +326 -0
  103. package/dist/theme/components/tabs.d.ts +136 -0
  104. package/dist/theme/components/template.d.ts +108 -0
  105. package/dist/theme/components/text.d.ts +26 -0
  106. package/dist/theme/components/textInput.d.ts +124 -0
  107. package/dist/theme/components/toggle.d.ts +93 -0
  108. package/dist/theme/components/videoPlayer.d.ts +40 -0
  109. package/dist/theme/foundations/breakpoints.d.ts +23 -0
  110. package/dist/theme/foundations/colors.d.ts +3 -0
  111. package/dist/theme/foundations/global.d.ts +58 -0
  112. package/dist/theme/foundations/radii.d.ts +6 -0
  113. package/dist/theme/foundations/shadows.d.ts +4 -0
  114. package/dist/theme/foundations/spacing.d.ts +82 -0
  115. package/dist/theme/foundations/typography.d.ts +8 -0
  116. package/dist/theme/index.d.ts +20 -0
  117. package/dist/theme/provider.d.ts +3 -0
  118. package/dist/theme/types.d.ts +1 -0
  119. package/dist/utils/componentCategories.d.ts +1 -0
  120. package/dist/utils/interfaces.d.ts +5 -0
  121. package/dist/utils/utils.d.ts +31 -0
  122. package/package.json +132 -20
  123. package/lib/components/Button/Button.d.ts +0 -17
  124. package/lib/components/Button/Button.js +0 -42
  125. package/lib/index.d.ts +0 -1
  126. package/lib/index.js +0 -6
  127. package/lib/stories/0-Welcome.stories.js +0 -19
  128. package/lib/stories/1-Button.stories.d.ts +0 -6
  129. package/lib/stories/1-Button.stories.js +0 -20
@@ -0,0 +1,182 @@
1
+ interface ListBaseStyle {
2
+ inline?: boolean;
3
+ noStyling: boolean;
4
+ }
5
+ export declare const baseListStyles: (inline?: boolean, noStyling?: boolean) => {
6
+ margin: string;
7
+ listStyle: string;
8
+ marginInlineStart: string;
9
+ paddingLeft: string;
10
+ padding: string;
11
+ display: string;
12
+ li: {
13
+ marginRight: string;
14
+ listStyleType: string;
15
+ _notFirst: {
16
+ marginTop: string;
17
+ };
18
+ };
19
+ };
20
+ export declare const baseUnorderedStyles: (noStyling?: boolean) => {
21
+ listStyle: string;
22
+ li: {
23
+ _before: {
24
+ color: string;
25
+ content: string;
26
+ display: string;
27
+ fontWeight: string;
28
+ fontSize: string;
29
+ lineHeight: string;
30
+ marginLeft: string;
31
+ width: string;
32
+ };
33
+ };
34
+ margin: string;
35
+ marginBottom: string;
36
+ };
37
+ export declare const baseSectionDefinitionStyles: {
38
+ borderBottom: string;
39
+ borderColor: string;
40
+ paddingLeft: string;
41
+ h2: {
42
+ borderTop: string;
43
+ borderColor: string;
44
+ margin: string;
45
+ padding: string;
46
+ };
47
+ };
48
+ export declare const baseDefinitionStyles: {
49
+ dl: {
50
+ display: string;
51
+ gridTemplateColumns: {
52
+ base: string;
53
+ md: string;
54
+ };
55
+ gridTemplateRows: string;
56
+ margin: string;
57
+ };
58
+ dt: {
59
+ borderTop: string;
60
+ borderColor: string;
61
+ fontWeight: string;
62
+ paddingBottom: {
63
+ base: string;
64
+ md: string;
65
+ };
66
+ paddingTop: string;
67
+ paddingRight: {
68
+ md: string;
69
+ };
70
+ };
71
+ dd: {
72
+ margin: string;
73
+ paddingBottom: string;
74
+ borderTop: {
75
+ base: string;
76
+ md: string;
77
+ };
78
+ borderColor: {
79
+ md: string;
80
+ };
81
+ paddingTop: {
82
+ md: string;
83
+ };
84
+ };
85
+ borderBottom: string;
86
+ borderColor: string;
87
+ paddingLeft: string;
88
+ h2: {
89
+ borderTop: string;
90
+ borderColor: string;
91
+ margin: string;
92
+ padding: string;
93
+ };
94
+ };
95
+ declare const List: {
96
+ baseStyle: ({ inline, noStyling }: ListBaseStyle) => {
97
+ margin: string;
98
+ listStyle: string;
99
+ marginInlineStart: string;
100
+ paddingLeft: string;
101
+ padding: string;
102
+ display: string;
103
+ li: {
104
+ marginRight: string;
105
+ listStyleType: string;
106
+ _notFirst: {
107
+ marginTop: string;
108
+ };
109
+ };
110
+ };
111
+ variants: {
112
+ ul: ({ noStyling }: ListBaseStyle) => {
113
+ listStyle: string;
114
+ li: {
115
+ _before: {
116
+ color: string;
117
+ content: string;
118
+ display: string;
119
+ fontWeight: string;
120
+ fontSize: string;
121
+ lineHeight: string;
122
+ marginLeft: string;
123
+ width: string;
124
+ };
125
+ };
126
+ margin: string;
127
+ marginBottom: string;
128
+ };
129
+ ol: {
130
+ margin: string;
131
+ marginBottom: string;
132
+ };
133
+ dl: {
134
+ dl: {
135
+ display: string;
136
+ gridTemplateColumns: {
137
+ base: string;
138
+ md: string;
139
+ };
140
+ gridTemplateRows: string;
141
+ margin: string;
142
+ };
143
+ dt: {
144
+ borderTop: string;
145
+ borderColor: string;
146
+ fontWeight: string;
147
+ paddingBottom: {
148
+ base: string;
149
+ md: string;
150
+ };
151
+ paddingTop: string;
152
+ paddingRight: {
153
+ md: string;
154
+ };
155
+ };
156
+ dd: {
157
+ margin: string;
158
+ paddingBottom: string;
159
+ borderTop: {
160
+ base: string;
161
+ md: string;
162
+ };
163
+ borderColor: {
164
+ md: string;
165
+ };
166
+ paddingTop: {
167
+ md: string;
168
+ };
169
+ };
170
+ borderBottom: string;
171
+ borderColor: string;
172
+ paddingLeft: string;
173
+ h2: {
174
+ borderTop: string;
175
+ borderColor: string;
176
+ margin: string;
177
+ padding: string;
178
+ };
179
+ };
180
+ };
181
+ };
182
+ export default List;
@@ -0,0 +1,477 @@
1
+ interface LogoBaseStyle {
2
+ size: keyof typeof size;
3
+ }
4
+ declare const size: {
5
+ default: {
6
+ maxWidth: string;
7
+ };
8
+ xxsmall: {
9
+ maxWidth: string;
10
+ };
11
+ xsmall: {
12
+ maxWidth: string;
13
+ };
14
+ small: {
15
+ maxWidth: string;
16
+ };
17
+ medium: {
18
+ maxWidth: string;
19
+ };
20
+ large: {
21
+ maxWidth: string;
22
+ };
23
+ xlarge: {
24
+ maxWidth: string;
25
+ };
26
+ xxlarge: {
27
+ height: string;
28
+ width: string;
29
+ };
30
+ xxxlarge: {
31
+ height: string;
32
+ width: string;
33
+ };
34
+ };
35
+ declare const Logo: {
36
+ baseStyle: (props: LogoBaseStyle) => {
37
+ svg: {
38
+ maxWidth: string;
39
+ display: string;
40
+ height: string;
41
+ width: string;
42
+ } | {
43
+ maxWidth: string;
44
+ display: string;
45
+ height: string;
46
+ width: string;
47
+ } | {
48
+ maxWidth: string;
49
+ display: string;
50
+ height: string;
51
+ width: string;
52
+ } | {
53
+ maxWidth: string;
54
+ display: string;
55
+ height: string;
56
+ width: string;
57
+ } | {
58
+ maxWidth: string;
59
+ display: string;
60
+ height: string;
61
+ width: string;
62
+ } | {
63
+ maxWidth: string;
64
+ display: string;
65
+ height: string;
66
+ width: string;
67
+ } | {
68
+ maxWidth: string;
69
+ display: string;
70
+ height: string;
71
+ width: string;
72
+ } | {
73
+ height: string;
74
+ width: string;
75
+ display: string;
76
+ } | {
77
+ height: string;
78
+ width: string;
79
+ display: string;
80
+ };
81
+ maxWidth: string;
82
+ display: string;
83
+ height: string;
84
+ width: string;
85
+ } | {
86
+ svg: {
87
+ maxWidth: string;
88
+ display: string;
89
+ height: string;
90
+ width: string;
91
+ } | {
92
+ maxWidth: string;
93
+ display: string;
94
+ height: string;
95
+ width: string;
96
+ } | {
97
+ maxWidth: string;
98
+ display: string;
99
+ height: string;
100
+ width: string;
101
+ } | {
102
+ maxWidth: string;
103
+ display: string;
104
+ height: string;
105
+ width: string;
106
+ } | {
107
+ maxWidth: string;
108
+ display: string;
109
+ height: string;
110
+ width: string;
111
+ } | {
112
+ maxWidth: string;
113
+ display: string;
114
+ height: string;
115
+ width: string;
116
+ } | {
117
+ maxWidth: string;
118
+ display: string;
119
+ height: string;
120
+ width: string;
121
+ } | {
122
+ height: string;
123
+ width: string;
124
+ display: string;
125
+ } | {
126
+ height: string;
127
+ width: string;
128
+ display: string;
129
+ };
130
+ maxWidth: string;
131
+ display: string;
132
+ height: string;
133
+ width: string;
134
+ } | {
135
+ svg: {
136
+ maxWidth: string;
137
+ display: string;
138
+ height: string;
139
+ width: string;
140
+ } | {
141
+ maxWidth: string;
142
+ display: string;
143
+ height: string;
144
+ width: string;
145
+ } | {
146
+ maxWidth: string;
147
+ display: string;
148
+ height: string;
149
+ width: string;
150
+ } | {
151
+ maxWidth: string;
152
+ display: string;
153
+ height: string;
154
+ width: string;
155
+ } | {
156
+ maxWidth: string;
157
+ display: string;
158
+ height: string;
159
+ width: string;
160
+ } | {
161
+ maxWidth: string;
162
+ display: string;
163
+ height: string;
164
+ width: string;
165
+ } | {
166
+ maxWidth: string;
167
+ display: string;
168
+ height: string;
169
+ width: string;
170
+ } | {
171
+ height: string;
172
+ width: string;
173
+ display: string;
174
+ } | {
175
+ height: string;
176
+ width: string;
177
+ display: string;
178
+ };
179
+ maxWidth: string;
180
+ display: string;
181
+ height: string;
182
+ width: string;
183
+ } | {
184
+ svg: {
185
+ maxWidth: string;
186
+ display: string;
187
+ height: string;
188
+ width: string;
189
+ } | {
190
+ maxWidth: string;
191
+ display: string;
192
+ height: string;
193
+ width: string;
194
+ } | {
195
+ maxWidth: string;
196
+ display: string;
197
+ height: string;
198
+ width: string;
199
+ } | {
200
+ maxWidth: string;
201
+ display: string;
202
+ height: string;
203
+ width: string;
204
+ } | {
205
+ maxWidth: string;
206
+ display: string;
207
+ height: string;
208
+ width: string;
209
+ } | {
210
+ maxWidth: string;
211
+ display: string;
212
+ height: string;
213
+ width: string;
214
+ } | {
215
+ maxWidth: string;
216
+ display: string;
217
+ height: string;
218
+ width: string;
219
+ } | {
220
+ height: string;
221
+ width: string;
222
+ display: string;
223
+ } | {
224
+ height: string;
225
+ width: string;
226
+ display: string;
227
+ };
228
+ maxWidth: string;
229
+ display: string;
230
+ height: string;
231
+ width: string;
232
+ } | {
233
+ svg: {
234
+ maxWidth: string;
235
+ display: string;
236
+ height: string;
237
+ width: string;
238
+ } | {
239
+ maxWidth: string;
240
+ display: string;
241
+ height: string;
242
+ width: string;
243
+ } | {
244
+ maxWidth: string;
245
+ display: string;
246
+ height: string;
247
+ width: string;
248
+ } | {
249
+ maxWidth: string;
250
+ display: string;
251
+ height: string;
252
+ width: string;
253
+ } | {
254
+ maxWidth: string;
255
+ display: string;
256
+ height: string;
257
+ width: string;
258
+ } | {
259
+ maxWidth: string;
260
+ display: string;
261
+ height: string;
262
+ width: string;
263
+ } | {
264
+ maxWidth: string;
265
+ display: string;
266
+ height: string;
267
+ width: string;
268
+ } | {
269
+ height: string;
270
+ width: string;
271
+ display: string;
272
+ } | {
273
+ height: string;
274
+ width: string;
275
+ display: string;
276
+ };
277
+ maxWidth: string;
278
+ display: string;
279
+ height: string;
280
+ width: string;
281
+ } | {
282
+ svg: {
283
+ maxWidth: string;
284
+ display: string;
285
+ height: string;
286
+ width: string;
287
+ } | {
288
+ maxWidth: string;
289
+ display: string;
290
+ height: string;
291
+ width: string;
292
+ } | {
293
+ maxWidth: string;
294
+ display: string;
295
+ height: string;
296
+ width: string;
297
+ } | {
298
+ maxWidth: string;
299
+ display: string;
300
+ height: string;
301
+ width: string;
302
+ } | {
303
+ maxWidth: string;
304
+ display: string;
305
+ height: string;
306
+ width: string;
307
+ } | {
308
+ maxWidth: string;
309
+ display: string;
310
+ height: string;
311
+ width: string;
312
+ } | {
313
+ maxWidth: string;
314
+ display: string;
315
+ height: string;
316
+ width: string;
317
+ } | {
318
+ height: string;
319
+ width: string;
320
+ display: string;
321
+ } | {
322
+ height: string;
323
+ width: string;
324
+ display: string;
325
+ };
326
+ maxWidth: string;
327
+ display: string;
328
+ height: string;
329
+ width: string;
330
+ } | {
331
+ svg: {
332
+ maxWidth: string;
333
+ display: string;
334
+ height: string;
335
+ width: string;
336
+ } | {
337
+ maxWidth: string;
338
+ display: string;
339
+ height: string;
340
+ width: string;
341
+ } | {
342
+ maxWidth: string;
343
+ display: string;
344
+ height: string;
345
+ width: string;
346
+ } | {
347
+ maxWidth: string;
348
+ display: string;
349
+ height: string;
350
+ width: string;
351
+ } | {
352
+ maxWidth: string;
353
+ display: string;
354
+ height: string;
355
+ width: string;
356
+ } | {
357
+ maxWidth: string;
358
+ display: string;
359
+ height: string;
360
+ width: string;
361
+ } | {
362
+ maxWidth: string;
363
+ display: string;
364
+ height: string;
365
+ width: string;
366
+ } | {
367
+ height: string;
368
+ width: string;
369
+ display: string;
370
+ } | {
371
+ height: string;
372
+ width: string;
373
+ display: string;
374
+ };
375
+ maxWidth: string;
376
+ display: string;
377
+ height: string;
378
+ width: string;
379
+ } | {
380
+ svg: {
381
+ maxWidth: string;
382
+ display: string;
383
+ height: string;
384
+ width: string;
385
+ } | {
386
+ maxWidth: string;
387
+ display: string;
388
+ height: string;
389
+ width: string;
390
+ } | {
391
+ maxWidth: string;
392
+ display: string;
393
+ height: string;
394
+ width: string;
395
+ } | {
396
+ maxWidth: string;
397
+ display: string;
398
+ height: string;
399
+ width: string;
400
+ } | {
401
+ maxWidth: string;
402
+ display: string;
403
+ height: string;
404
+ width: string;
405
+ } | {
406
+ maxWidth: string;
407
+ display: string;
408
+ height: string;
409
+ width: string;
410
+ } | {
411
+ maxWidth: string;
412
+ display: string;
413
+ height: string;
414
+ width: string;
415
+ } | {
416
+ height: string;
417
+ width: string;
418
+ display: string;
419
+ } | {
420
+ height: string;
421
+ width: string;
422
+ display: string;
423
+ };
424
+ height: string;
425
+ width: string;
426
+ display: string;
427
+ } | {
428
+ svg: {
429
+ maxWidth: string;
430
+ display: string;
431
+ height: string;
432
+ width: string;
433
+ } | {
434
+ maxWidth: string;
435
+ display: string;
436
+ height: string;
437
+ width: string;
438
+ } | {
439
+ maxWidth: string;
440
+ display: string;
441
+ height: string;
442
+ width: string;
443
+ } | {
444
+ maxWidth: string;
445
+ display: string;
446
+ height: string;
447
+ width: string;
448
+ } | {
449
+ maxWidth: string;
450
+ display: string;
451
+ height: string;
452
+ width: string;
453
+ } | {
454
+ maxWidth: string;
455
+ display: string;
456
+ height: string;
457
+ width: string;
458
+ } | {
459
+ maxWidth: string;
460
+ display: string;
461
+ height: string;
462
+ width: string;
463
+ } | {
464
+ height: string;
465
+ width: string;
466
+ display: string;
467
+ } | {
468
+ height: string;
469
+ width: string;
470
+ display: string;
471
+ };
472
+ height: string;
473
+ width: string;
474
+ display: string;
475
+ };
476
+ };
477
+ export default Logo;