@nypl/design-system-react-components 1.7.2 → 2.0.0-rc2

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 (30) hide show
  1. package/dist/design-system-react-components.cjs +55 -55
  2. package/dist/design-system-react-components.js +7990 -7815
  3. package/dist/src/components/Link/Link.d.ts +7 -2
  4. package/dist/src/components/StyledList/StyledList.d.ts +2 -1
  5. package/dist/src/index.d.ts +1 -1
  6. package/dist/src/theme/components/accordion.d.ts +1 -1
  7. package/dist/src/theme/components/alphabetFilter.d.ts +11 -4
  8. package/dist/src/theme/components/breadcrumb.d.ts +1 -0
  9. package/dist/src/theme/components/card.d.ts +76 -12
  10. package/dist/src/theme/components/customTable.d.ts +15 -9
  11. package/dist/src/theme/components/feedbackBox.d.ts +8 -0
  12. package/dist/src/theme/components/fieldset.d.ts +4 -3
  13. package/dist/src/theme/components/global.d.ts +1 -0
  14. package/dist/src/theme/components/heading.d.ts +84 -2
  15. package/dist/src/theme/components/hero.d.ts +20 -9
  16. package/dist/src/theme/components/image.d.ts +0 -4
  17. package/dist/src/theme/components/label.d.ts +1 -0
  18. package/dist/src/theme/components/link.d.ts +48 -2
  19. package/dist/src/theme/components/list.d.ts +2 -0
  20. package/dist/src/theme/components/modal.d.ts +6 -0
  21. package/dist/src/theme/components/multiSelectMenuButton.d.ts +4 -0
  22. package/dist/src/theme/components/notification.d.ts +1 -0
  23. package/dist/src/theme/components/pagination.d.ts +3 -0
  24. package/dist/src/theme/components/progressIndicator.d.ts +1 -0
  25. package/dist/src/theme/components/structuredContent.d.ts +44 -14
  26. package/dist/src/theme/components/tabs.d.ts +3 -3
  27. package/dist/src/theme/components/tooltip.d.ts +2 -0
  28. package/dist/src/utils/utils.d.ts +2 -0
  29. package/dist/styles.css +1 -1
  30. package/package.json +1 -1
package/dist/src/components/Link/Link.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import React from "react";
2
- export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards"];
2
+ export declare const linkTypesArray: readonly ["action", "backwards", "button", "buttonPrimary", "buttonSecondary", "buttonPill", "buttonCallout", "buttonNoBrand", "buttonDisabled", "default", "external", "forwards", "standalone"];
3
3
  export type LinkTypes = typeof linkTypesArray[number];
4
4
  export interface LinkProps {
5
5
  /** Any child node passed to the component. */
@@ -10,12 +10,17 @@ export interface LinkProps {
10
10
  href?: string;
11
11
  /** ID used for accessibility purposes. */
12
12
  id?: string;
13
+ /** Used to explicitly set the underline style for a text link. If true, link
14
+ * text will always be underlined; if false, link text will only show
15
+ * underline in hover state. */
16
+ isUnderlined?: boolean;
13
17
  onClick?: (event: React.MouseEvent<HTMLDivElement | HTMLAnchorElement, MouseEvent>) => void;
14
18
  /** Visibly hidden text that will only be read by screenreaders. */
15
19
  screenreaderOnlyText?: string;
16
20
  /** Prop that sets the HTML attribute to target where the link should go. */
17
21
  target?: "_blank" | "_parent" | "_self" | "_top";
18
- /** Controls the link visuals: action, button, backwards, forwards, or default. */
22
+ /** Controls the link visuals: action, button, backwards, forwards,
23
+ * standalone, or default. */
19
24
  type?: LinkTypes;
20
25
  }
21
26
  /**
package/dist/src/components/StyledList/StyledList.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import React from "react";
2
- import { TextSizes } from "../Text/Text";
2
+ export declare const textSizesArray: readonly ["default", "body1", "body2", "caption", "tag", "mini"];
3
+ export type TextSizes = typeof textSizesArray[number];
3
4
  export interface StyledListProps {
4
5
  /** Any child node passed to the component. */
5
6
  children?: React.ReactNode;
package/dist/src/index.d.ts CHANGED
@@ -28,7 +28,7 @@ export { default as Hero } from "./components/Hero/Hero";
28
28
  export type { HeroTypes } from "./components/Hero/Hero";
29
29
  export { default as HorizontalRule } from "./components/HorizontalRule/HorizontalRule";
30
30
  export { default as Icon } from "./components/Icons/Icon";
31
- export type { IconAlign, IconColors, IconNames, IconRotationTypes, IconRotations, IconSizes, IconTypes, } from "./components/Icons/Icon";
31
+ export type { IconAlign, IconColors, IconNames, IconRotations, IconSizes, IconTypes, } from "./components/Icons/Icon";
32
32
  export { default as Image } from "./components/Image/Image";
33
33
  export type { ImageRatios, ImageSizes, ImageTypes, } from "./components/Image/Image";
34
34
  export { default as Label } from "./components/Label/Label";
package/dist/src/theme/components/accordion.d.ts CHANGED
@@ -6,12 +6,12 @@ declare const Accordion: {
6
6
  width: string;
7
7
  _dark: {
8
8
  bg: string;
9
- color: string;
10
9
  borderColor: string;
11
10
  };
12
11
  };
13
12
  button: {
14
13
  borderWidth: string;
14
+ color: string;
15
15
  fontWeight: string;
16
16
  _dark: {
17
17
  bg: string;
package/dist/src/theme/components/alphabetFilter.d.ts CHANGED
@@ -12,16 +12,23 @@ declare const AlphabetFilter: {
12
12
  padding: string;
13
13
  margin: string;
14
14
  fontWeight: string;
15
- fontSize: string;
15
+ fontSize: {
16
+ base: string;
17
+ md: string;
18
+ };
16
19
  lineHeight: string;
17
20
  _last: {
18
- padding: string;
21
+ fontSize: string;
19
22
  fontWeight: string;
20
- whiteSpace: string;
21
- fontSize: {
23
+ px: {
24
+ base: string;
25
+ md: string;
26
+ };
27
+ py: {
22
28
  base: any;
23
29
  md: string;
24
30
  };
31
+ whiteSpace: string;
25
32
  };
26
33
  _disabled: {
27
34
  color: string;
package/dist/src/theme/components/breadcrumb.d.ts CHANGED
@@ -27,6 +27,7 @@ declare const Breadcrumb: {
27
27
  a: {
28
28
  _hover: {
29
29
  color: string;
30
+ textDecoration: string;
30
31
  };
31
32
  };
32
33
  "li:last-child": {
package/dist/src/theme/components/card.d.ts CHANGED
@@ -104,11 +104,27 @@ declare const _default: {
104
104
  heading: {
105
105
  marginBottom: string;
106
106
  a: {
107
+ textDecoration: string;
107
108
  color: string;
108
- };
109
- _dark: {
110
- a: {
109
+ textDecorationStyle: string;
110
+ textDecorationThickness: string;
111
+ textUnderlineOffset: string;
112
+ _dark: {
113
+ color: string;
114
+ };
115
+ _hover: {
116
+ color: string;
117
+ textDecorationStyle: string;
118
+ textDecorationThickness: string;
119
+ _dark: {
120
+ color: string;
121
+ };
122
+ };
123
+ _visited: {
111
124
  color: string;
125
+ _dark: {
126
+ color: string;
127
+ };
112
128
  };
113
129
  };
114
130
  };
@@ -162,11 +178,27 @@ declare const _default: {
162
178
  heading: {
163
179
  marginBottom: string;
164
180
  a: {
181
+ textDecoration: string;
165
182
  color: string;
166
- };
167
- _dark: {
168
- a: {
183
+ textDecorationStyle: string;
184
+ textDecorationThickness: string;
185
+ textUnderlineOffset: string;
186
+ _dark: {
187
+ color: string;
188
+ };
189
+ _hover: {
190
+ color: string;
191
+ textDecorationStyle: string;
192
+ textDecorationThickness: string;
193
+ _dark: {
194
+ color: string;
195
+ };
196
+ };
197
+ _visited: {
169
198
  color: string;
199
+ _dark: {
200
+ color: string;
201
+ };
170
202
  };
171
203
  };
172
204
  };
@@ -221,11 +253,27 @@ declare const _default: {
221
253
  heading: {
222
254
  marginBottom: string;
223
255
  a: {
256
+ textDecoration: string;
224
257
  color: string;
225
- };
226
- _dark: {
227
- a: {
258
+ textDecorationStyle: string;
259
+ textDecorationThickness: string;
260
+ textUnderlineOffset: string;
261
+ _dark: {
262
+ color: string;
263
+ };
264
+ _hover: {
265
+ color: string;
266
+ textDecorationStyle: string;
267
+ textDecorationThickness: string;
268
+ _dark: {
269
+ color: string;
270
+ };
271
+ };
272
+ _visited: {
228
273
  color: string;
274
+ _dark: {
275
+ color: string;
276
+ };
229
277
  };
230
278
  };
231
279
  };
@@ -277,11 +325,27 @@ declare const _default: {
277
325
  heading: {
278
326
  marginBottom: string;
279
327
  a: {
328
+ textDecoration: string;
280
329
  color: string;
281
- };
282
- _dark: {
283
- a: {
330
+ textDecorationStyle: string;
331
+ textDecorationThickness: string;
332
+ textUnderlineOffset: string;
333
+ _dark: {
334
+ color: string;
335
+ };
336
+ _hover: {
337
+ color: string;
338
+ textDecorationStyle: string;
339
+ textDecorationThickness: string;
340
+ _dark: {
341
+ color: string;
342
+ };
343
+ };
344
+ _visited: {
284
345
  color: string;
346
+ _dark: {
347
+ color: string;
348
+ };
285
349
  };
286
350
  };
287
351
  };
package/dist/src/theme/components/customTable.d.ts CHANGED
@@ -49,7 +49,7 @@ export declare const baseCellStyles: (columnHeadersBackgroundColor?: string, col
49
49
  };
50
50
  fontSize: {
51
51
  base: string;
52
- lg: string;
52
+ md: string;
53
53
  };
54
54
  gap: string;
55
55
  letterSpacing: string;
@@ -141,7 +141,7 @@ export declare const baseTHStyles: (columnHeadersBackgroundColor?: string, colum
141
141
  };
142
142
  fontSize: {
143
143
  base: string;
144
- lg: string;
144
+ md: string;
145
145
  };
146
146
  gap: string;
147
147
  letterSpacing: string;
@@ -230,7 +230,7 @@ export declare const baseTDStyles: (columnHeadersBackgroundColor?: string, colum
230
230
  };
231
231
  fontSize: {
232
232
  base: string;
233
- lg: string;
233
+ md: string;
234
234
  };
235
235
  gap: string;
236
236
  letterSpacing: string;
@@ -354,7 +354,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
354
354
  };
355
355
  fontSize: {
356
356
  base: string;
357
- lg: string;
357
+ md: string;
358
358
  };
359
359
  gap: string;
360
360
  letterSpacing: string;
@@ -443,7 +443,7 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
443
443
  };
444
444
  fontSize: {
445
445
  base: string;
446
- lg: string;
446
+ md: string;
447
447
  };
448
448
  gap: string;
449
449
  letterSpacing: string;
@@ -486,7 +486,10 @@ export declare const baseStyle: ({ columnHeadersBackgroundColor, columnHeadersTe
486
486
  caption: {
487
487
  captionSide: string;
488
488
  color: string;
489
- fontSize: string;
489
+ fontSize: {
490
+ base: string;
491
+ md: string;
492
+ };
490
493
  fontWeight: string;
491
494
  marginBottom: string;
492
495
  marginStart: string;
@@ -584,7 +587,7 @@ declare const CustomTable: {
584
587
  };
585
588
  fontSize: {
586
589
  base: string;
587
- lg: string;
590
+ md: string;
588
591
  };
589
592
  gap: string;
590
593
  letterSpacing: string;
@@ -673,7 +676,7 @@ declare const CustomTable: {
673
676
  };
674
677
  fontSize: {
675
678
  base: string;
676
- lg: string;
679
+ md: string;
677
680
  };
678
681
  gap: string;
679
682
  letterSpacing: string;
@@ -716,7 +719,10 @@ declare const CustomTable: {
716
719
  caption: {
717
720
  captionSide: string;
718
721
  color: string;
719
- fontSize: string;
722
+ fontSize: {
723
+ base: string;
724
+ md: string;
725
+ };
720
726
  fontWeight: string;
721
727
  marginBottom: string;
722
728
  marginStart: string;
package/dist/src/theme/components/feedbackBox.d.ts CHANGED
@@ -57,6 +57,12 @@ declare const FeedbackBox: {
57
57
  base: string;
58
58
  md: string;
59
59
  };
60
+ aside: {
61
+ color: string;
62
+ _dark: {
63
+ color: string;
64
+ };
65
+ };
60
66
  };
61
67
  drawerHeader: {
62
68
  alignItems: string;
@@ -67,6 +73,7 @@ declare const FeedbackBox: {
67
73
  md: string;
68
74
  };
69
75
  borderTopWidth: string;
76
+ color: string;
70
77
  display: string;
71
78
  fontSize: string;
72
79
  px: string;
@@ -78,6 +85,7 @@ declare const FeedbackBox: {
78
85
  _dark: {
79
86
  background: string;
80
87
  borderColor: string;
88
+ color: string;
81
89
  };
82
90
  };
83
91
  openButton: {
package/dist/src/theme/components/fieldset.d.ts CHANGED
@@ -6,6 +6,10 @@ declare const Fieldset: {
6
6
  border: number;
7
7
  padding: number;
8
8
  legend: {
9
+ _dark: {
10
+ color: string;
11
+ };
12
+ color: string;
9
13
  display: string;
10
14
  fontSize: string;
11
15
  fontWeight: string;
@@ -14,9 +18,6 @@ declare const Fieldset: {
14
18
  span: {
15
19
  fontWeight: string;
16
20
  };
17
- _dark: {
18
- color: string;
19
- };
20
21
  };
21
22
  };
22
23
  };
package/dist/src/theme/components/global.d.ts CHANGED
@@ -91,6 +91,7 @@ declare const defaultElementSizes: {
91
91
  mobileFieldHeight: string;
92
92
  };
93
93
  declare const labelLegendText: {
94
+ color: string;
94
95
  display: string;
95
96
  fontSize: string;
96
97
  fontWeight: string;
package/dist/src/theme/components/heading.d.ts CHANGED
@@ -1,6 +1,9 @@
1
1
  export declare const headings: {
2
2
  one: {
3
3
  width: string;
4
+ a: {
5
+ textUnderlineOffset: string;
6
+ };
4
7
  marginTop: string;
5
8
  marginStart: string;
6
9
  marginEnd: string;
@@ -11,6 +14,9 @@ export declare const headings: {
11
14
  };
12
15
  two: {
13
16
  width: string;
17
+ a: {
18
+ textUnderlineOffset: string;
19
+ };
14
20
  marginTop: string;
15
21
  marginStart: string;
16
22
  marginEnd: string;
@@ -50,62 +56,93 @@ export declare const headings: {
50
56
  letterSpacing: string;
51
57
  lineHeight: string;
52
58
  width: string;
59
+ a: {
60
+ textUnderlineOffset: string;
61
+ };
53
62
  };
54
63
  heading1: {
55
64
  fontWeight: string;
56
65
  letterSpacing: string;
57
66
  lineHeight: string;
58
67
  width: string;
68
+ a: {
69
+ textUnderlineOffset: string;
70
+ };
59
71
  };
60
72
  heading2: {
61
73
  fontWeight: string;
62
74
  letterSpacing: string;
63
75
  lineHeight: string;
64
76
  width: string;
77
+ a: {
78
+ textUnderlineOffset: string;
79
+ };
65
80
  };
66
81
  heading3: {
67
82
  fontWeight: string;
68
83
  letterSpacing: string;
69
84
  lineHeight: string;
70
85
  width: string;
86
+ a: {
87
+ textUnderlineOffset: string;
88
+ };
71
89
  };
72
90
  heading4: {
73
91
  fontWeight: string;
92
+ letterSpacing: string;
74
93
  lineHeight: string;
75
94
  width: string;
95
+ a: {
96
+ textUnderlineOffset: string;
97
+ };
76
98
  };
77
99
  heading5: {
78
100
  fontWeight: string;
101
+ letterSpacing: string;
79
102
  lineHeight: string;
80
103
  width: string;
81
104
  };
82
105
  heading6: {
83
106
  fontWeight: string;
107
+ letterSpacing: string;
84
108
  lineHeight: string;
85
109
  width: string;
86
110
  };
87
111
  };
88
112
  declare const Heading: {
89
113
  parts: string[];
90
- baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace }: {
114
+ baseStyle: ({ isCapitalized, isUppercase, isLowercase, noSpace, url }: {
91
115
  isCapitalized: any;
92
116
  isUppercase: any;
93
117
  isLowercase: any;
94
118
  noSpace: any;
119
+ url: any;
95
120
  }) => {
96
121
  a: {
97
- color: string;
98
122
  textDecoration: string;
123
+ color: string;
124
+ textDecorationStyle: string;
125
+ textDecorationThickness: string;
126
+ textUnderlineOffset: string;
99
127
  _dark: {
100
128
  color: string;
101
129
  };
102
130
  _hover: {
131
+ color: string;
132
+ textDecorationStyle: string;
133
+ textDecorationThickness: string;
134
+ _dark: {
135
+ color: string;
136
+ };
137
+ };
138
+ _visited: {
103
139
  color: string;
104
140
  _dark: {
105
141
  color: string;
106
142
  };
107
143
  };
108
144
  };
145
+ color: string;
109
146
  textTransform: string;
110
147
  _dark: {
111
148
  color: string;
@@ -123,36 +160,54 @@ declare const Heading: {
123
160
  letterSpacing: string;
124
161
  lineHeight: string;
125
162
  width: string;
163
+ a: {
164
+ textUnderlineOffset: string;
165
+ };
126
166
  };
127
167
  h2: {
128
168
  fontWeight: string;
129
169
  letterSpacing: string;
130
170
  lineHeight: string;
131
171
  width: string;
172
+ a: {
173
+ textUnderlineOffset: string;
174
+ };
132
175
  };
133
176
  h3: {
134
177
  fontWeight: string;
135
178
  letterSpacing: string;
136
179
  lineHeight: string;
137
180
  width: string;
181
+ a: {
182
+ textUnderlineOffset: string;
183
+ };
138
184
  };
139
185
  h4: {
140
186
  fontWeight: string;
187
+ letterSpacing: string;
141
188
  lineHeight: string;
142
189
  width: string;
190
+ a: {
191
+ textUnderlineOffset: string;
192
+ };
143
193
  };
144
194
  h5: {
145
195
  fontWeight: string;
196
+ letterSpacing: string;
146
197
  lineHeight: string;
147
198
  width: string;
148
199
  };
149
200
  h6: {
150
201
  fontWeight: string;
202
+ letterSpacing: string;
151
203
  lineHeight: string;
152
204
  width: string;
153
205
  };
154
206
  one: {
155
207
  width: string;
208
+ a: {
209
+ textUnderlineOffset: string;
210
+ };
156
211
  marginTop: string;
157
212
  marginStart: string;
158
213
  marginEnd: string;
@@ -163,6 +218,9 @@ declare const Heading: {
163
218
  };
164
219
  two: {
165
220
  width: string;
221
+ a: {
222
+ textUnderlineOffset: string;
223
+ };
166
224
  marginTop: string;
167
225
  marginStart: string;
168
226
  marginEnd: string;
@@ -211,42 +269,63 @@ declare const Heading: {
211
269
  letterSpacing: string;
212
270
  lineHeight: string;
213
271
  width: string;
272
+ a: {
273
+ textUnderlineOffset: string;
274
+ };
214
275
  };
215
276
  heading1: {
216
277
  fontWeight: string;
217
278
  letterSpacing: string;
218
279
  lineHeight: string;
219
280
  width: string;
281
+ a: {
282
+ textUnderlineOffset: string;
283
+ };
220
284
  };
221
285
  heading2: {
222
286
  fontWeight: string;
223
287
  letterSpacing: string;
224
288
  lineHeight: string;
225
289
  width: string;
290
+ a: {
291
+ textUnderlineOffset: string;
292
+ };
226
293
  };
227
294
  heading3: {
228
295
  fontWeight: string;
229
296
  letterSpacing: string;
230
297
  lineHeight: string;
231
298
  width: string;
299
+ a: {
300
+ textUnderlineOffset: string;
301
+ };
232
302
  };
233
303
  heading4: {
234
304
  fontWeight: string;
305
+ letterSpacing: string;
235
306
  lineHeight: string;
236
307
  width: string;
308
+ a: {
309
+ textUnderlineOffset: string;
310
+ };
237
311
  };
238
312
  heading5: {
239
313
  fontWeight: string;
314
+ letterSpacing: string;
240
315
  lineHeight: string;
241
316
  width: string;
242
317
  };
243
318
  heading6: {
244
319
  fontWeight: string;
320
+ letterSpacing: string;
245
321
  lineHeight: string;
246
322
  width: string;
247
323
  };
248
324
  primary: {
249
325
  width: string;
326
+ a: {
327
+ textUnderlineOffset: string;
328
+ };
250
329
  marginTop: string;
251
330
  marginStart: string;
252
331
  marginEnd: string;
@@ -257,6 +336,9 @@ declare const Heading: {
257
336
  };
258
337
  secondary: {
259
338
  width: string;
339
+ a: {
340
+ textUnderlineOffset: string;
341
+ };
260
342
  marginTop: string;
261
343
  marginStart: string;
262
344
  marginEnd: string;