@nypl/design-system-react-components 2.1.0 → 2.1.2

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 (12) hide show
  1. package/dist/design-system-react-components.cjs +45 -45
  2. package/dist/design-system-react-components.js +4804 -4746
  3. package/dist/src/components/Logo/Logo.d.ts +4 -1
  4. package/dist/src/components/Logo/logoVariables.d.ts +1 -0
  5. package/dist/src/components/TextInput/TextInput.d.ts +6 -0
  6. package/dist/src/helpers/types.d.ts +1 -1
  7. package/dist/src/theme/components/hero.d.ts +21 -11
  8. package/dist/src/theme/components/logo.d.ts +35 -383
  9. package/dist/src/utils/getSectionColors.d.ts +13 -0
  10. package/dist/src/utils/utils.d.ts +2 -1
  11. package/package.json +13 -13
  12. package/dist/src/helpers/getSectionColors.d.ts +0 -8
package/dist/src/components/Logo/Logo.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  import React from "react";
2
- import { logoNamesArray, logoSizesArray } from "./logoVariables";
2
+ import { logoNamesArray, logoSizeBasedOnArray, logoSizesArray } from "./logoVariables";
3
3
  export type LogoNames = typeof logoNamesArray[number];
4
4
  export type LogoSizes = typeof logoSizesArray[number];
5
+ export type LogoSizeBasedOn = typeof logoSizeBasedOnArray[number];
5
6
  export interface LogoProps {
6
7
  /** Optional className that will be added to the parent element */
7
8
  className?: string;
@@ -14,6 +15,8 @@ export interface LogoProps {
14
15
  name?: LogoNames;
15
16
  /** Sets the logo size. */
16
17
  size?: LogoSizes;
18
+ /** Sets the logo size based on the width or height. Width by default. */
19
+ sizeBasedOn?: LogoSizeBasedOn;
17
20
  /** For accessibility purposes, the text passed in the `title` prop gets
18
21
  * rendered in a `title` element in the SVG. This descriptive text is not
19
22
  * visible but is needed for screenreaders to describe the graphic. */
package/dist/src/components/Logo/logoVariables.d.ts CHANGED
@@ -1,2 +1,3 @@
1
1
  export declare const logoNamesArray: readonly ["appleAppStoreBlack", "appleAppStoreWhite", "bplBlack", "bplWhite", "cleverBadgeColor", "cleverColor", "cleverWhite", "digitalCollectionsBlack", "digitalCollectionsWhite", "firstbookColor", "firstbookColorNegative", "googlePlayBlack", "lpaBlack", "lpaColor", "lpaWhite", "mlnBlack", "mlnColor", "mlnWhite", "nycdoeBlack", "nycdoeColor", "nycdoeWhite", "nycpsBlack", "nycpsColor", "nycpsWhite", "nyplFullBlack", "nyplFullWhite", "nyplLionBlack", "nyplLionWhite", "nyplTextBlack", "nyplTextWhite", "openebooksColor", "openebooksNegative", "openebooksWithTextColor", "openebooksWithTextNegative", "qplAltBlack", "qplAltWhite", "qplBlack", "qplColor", "qplWhite", "reservoirIconColor", "reservoirVerticalColor", "schomburgBlack", "schomburgCircleBlack", "schomburgCircleColor", "schomburgCircleWhite", "schomburgColor", "schomburgWhite", "simplyeBlack", "simplyeWhite", "simplyeColor", "snflBlack", "snflWhite", "treasuresColor", "treasuresColorNegative"];
2
2
  export declare const logoSizesArray: readonly ["default", "xxsmall", "xsmall", "small", "medium", "large"];
3
+ export declare const logoSizeBasedOnArray: readonly ["height", "width"];
package/dist/src/components/TextInput/TextInput.d.ts CHANGED
@@ -1,5 +1,7 @@
1
1
  import React from "react";
2
2
  import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
3
+ export declare const autoCompleteValuesArray: readonly ["on", "off", "additional-name", "address-level1", "address-level2", "address-level3", "address-level4", "address-line1", "address-line2", "address-line3", "bday-day", "bday-month", "bday-year", "bday", "cc-additional-name", "cc-csc", "cc-exp-month", "cc-exp-year", "cc-exp", "cc-family-name", "cc-given-name", "cc-name", "cc-number", "cc-type", "country-name", "country", "current-password", "email", "family-name", "given-name", "honorific-prefix", "honorific-suffix", "impp", "language", "name", "new-password", "nickname", "organization-title", "organization", "photo", "postal-code", "sex", "street-address", "tel-area-code", "tel-country-code", "tel-extension", "tel-local-prefix", "tel-local-suffix", "tel-local", "tel-national", "tel", "transaction-amount", "transaction-currency", "url", "username"];
4
+ export type AutoCompleteValues = typeof autoCompleteValuesArray[number];
3
5
  export declare const textInputTypesArray: readonly ["email", "hidden", "number", "password", "text", "textarea", "tel", "url"];
4
6
  export type TextInputTypes = typeof textInputTypesArray[number];
5
7
  export declare const TextInputFormats: {
@@ -13,9 +15,13 @@ export declare const TextInputFormats: {
13
15
  };
14
16
  export type TextInputVariants = "default" | "searchBar" | "searchBarSelect";
15
17
  export interface InputProps {
18
+ /** FOR INTERNAL DS USE ONLY: Adds an aria-label or appends to an existing aria-label for screen readers.*/
19
+ additionalAriaLabel?: string;
16
20
  /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
17
21
  * If more than one, separate each with a space */
18
22
  additionalHelperTextIds?: string;
23
+ /** String value used to set the autocomplete attribute. */
24
+ autoComplete?: AutoCompleteValues;
19
25
  /** A class name for the TextInput parent div. */
20
26
  className?: string;
21
27
  /** The starting value of the input field. */
package/dist/src/helpers/types.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  export declare const layoutTypesArray: readonly ["column", "row"];
2
2
  export type LayoutTypes = typeof layoutTypesArray[number];
3
- export declare const sectionDataMap: {
3
+ export declare const sectionColorsDataMap: {
4
4
  blogs: {
5
5
  primary: string;
6
6
  secondary: string;
package/dist/src/theme/components/hero.d.ts CHANGED
@@ -1,10 +1,5 @@
1
1
  declare const Hero: {
2
- baseStyle: {
3
- bgColor: string;
4
- _dark: {
5
- bgColor: string;
6
- };
7
- };
2
+ baseStyle: {};
8
3
  variants: {
9
4
  primary: {
10
5
  alignItems: string;
@@ -74,6 +69,7 @@ declare const Hero: {
74
69
  order: string;
75
70
  };
76
71
  overflowX: string;
72
+ bgColor: string;
77
73
  content: {
78
74
  paddingEnd: string;
79
75
  paddingStart: string;
@@ -126,6 +122,9 @@ declare const Hero: {
126
122
  md: string;
127
123
  };
128
124
  };
125
+ _dark: {
126
+ bgColor: string;
127
+ };
129
128
  };
130
129
  secondaryBooksAndMore: {
131
130
  heading: {
@@ -154,6 +153,7 @@ declare const Hero: {
154
153
  order: string;
155
154
  };
156
155
  overflowX: string;
156
+ bgColor: string;
157
157
  content: {
158
158
  paddingEnd: string;
159
159
  paddingStart: string;
@@ -206,6 +206,9 @@ declare const Hero: {
206
206
  md: string;
207
207
  };
208
208
  };
209
+ _dark: {
210
+ bgColor: string;
211
+ };
209
212
  };
210
213
  secondaryLocations: {
211
214
  heading: {
@@ -234,6 +237,7 @@ declare const Hero: {
234
237
  order: string;
235
238
  };
236
239
  overflowX: string;
240
+ bgColor: string;
237
241
  content: {
238
242
  paddingEnd: string;
239
243
  paddingStart: string;
@@ -286,6 +290,9 @@ declare const Hero: {
286
290
  md: string;
287
291
  };
288
292
  };
293
+ _dark: {
294
+ bgColor: string;
295
+ };
289
296
  };
290
297
  secondaryResearch: {
291
298
  heading: {
@@ -314,6 +321,7 @@ declare const Hero: {
314
321
  order: string;
315
322
  };
316
323
  overflowX: string;
324
+ bgColor: string;
317
325
  content: {
318
326
  paddingEnd: string;
319
327
  paddingStart: string;
@@ -366,6 +374,9 @@ declare const Hero: {
366
374
  md: string;
367
375
  };
368
376
  };
377
+ _dark: {
378
+ bgColor: string;
379
+ };
369
380
  };
370
381
  secondaryWhatsOn: {
371
382
  heading: {
@@ -394,6 +405,7 @@ declare const Hero: {
394
405
  order: string;
395
406
  };
396
407
  overflowX: string;
408
+ bgColor: string;
397
409
  content: {
398
410
  paddingEnd: string;
399
411
  paddingStart: string;
@@ -446,9 +458,11 @@ declare const Hero: {
446
458
  md: string;
447
459
  };
448
460
  };
461
+ _dark: {
462
+ bgColor: string;
463
+ };
449
464
  };
450
465
  tertiary: {
451
- bg: string;
452
466
  content: {
453
467
  color: string;
454
468
  display: string;
@@ -486,9 +500,6 @@ declare const Hero: {
486
500
  p: {
487
501
  marginBottom: string;
488
502
  };
489
- _dark: {
490
- bg: string;
491
- };
492
503
  };
493
504
  campaign: {
494
505
  alignItems: string;
@@ -527,7 +538,6 @@ declare const Hero: {
527
538
  md: string;
528
539
  };
529
540
  _dark: {
530
- bg: string;
531
541
  color: string;
532
542
  };
533
543
  };
package/dist/src/theme/components/logo.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  interface LogoBaseStyle {
2
- size: keyof typeof size;
2
+ size: keyof typeof size | keyof typeof sizeBasedOnHeight;
3
+ sizeBasedOn: "height" | "width";
3
4
  }
4
5
  declare const size: {
5
6
  default: {
@@ -32,247 +33,53 @@ declare const size: {
32
33
  width: string;
33
34
  };
34
35
  };
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;
36
+ declare const sizeBasedOnHeight: {
37
+ default: {
38
+ maxHeight: string;
39
+ };
40
+ xxsmall: {
41
+ maxHeight: string;
42
+ };
43
+ xsmall: {
44
+ maxHeight: string;
45
+ };
46
+ small: {
47
+ maxHeight: string;
48
+ };
49
+ medium: {
50
+ maxHeight: string;
51
+ };
52
+ large: {
53
+ maxHeight: string;
54
+ };
55
+ xlarge: {
56
+ maxHeight: string;
57
+ };
58
+ xxlarge: {
181
59
  height: string;
182
60
  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;
61
+ };
62
+ xxxlarge: {
230
63
  height: string;
231
64
  width: string;
232
- } | {
65
+ };
66
+ };
67
+ declare const Logo: {
68
+ baseStyle: (props: LogoBaseStyle) => {
233
69
  svg: {
234
70
  maxWidth: string;
235
71
  display: string;
236
72
  height: string;
237
73
  width: string;
238
74
  } | {
239
- maxWidth: string;
240
- display: string;
241
75
  height: string;
242
76
  width: string;
243
- } | {
244
- maxWidth: string;
245
77
  display: string;
246
- height: string;
247
- width: string;
248
78
  } | {
249
- maxWidth: string;
79
+ maxHeight: string;
250
80
  display: string;
251
81
  height: string;
252
82
  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
83
  };
277
84
  maxWidth: string;
278
85
  display: string;
@@ -285,97 +92,18 @@ declare const Logo: {
285
92
  height: string;
286
93
  width: string;
287
94
  } | {
288
- maxWidth: string;
289
- display: string;
290
95
  height: string;
291
96
  width: string;
292
- } | {
293
- maxWidth: string;
294
97
  display: string;
295
- height: string;
296
- width: string;
297
98
  } | {
298
- maxWidth: string;
99
+ maxHeight: string;
299
100
  display: string;
300
101
  height: string;
301
102
  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
103
  };
326
- maxWidth: string;
327
- display: string;
328
104
  height: string;
329
105
  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
106
  display: string;
377
- height: string;
378
- width: string;
379
107
  } | {
380
108
  svg: {
381
109
  maxWidth: string;
@@ -383,95 +111,19 @@ declare const Logo: {
383
111
  height: string;
384
112
  width: string;
385
113
  } | {
386
- maxWidth: string;
387
- display: string;
388
- height: string;
389
- width: string;
390
- } | {
391
- maxWidth: string;
392
- display: string;
393
114
  height: string;
394
115
  width: string;
395
- } | {
396
- maxWidth: string;
397
116
  display: string;
398
- height: string;
399
- width: string;
400
- } | {
401
- maxWidth: string;
402
- display: string;
403
- height: string;
404
- width: string;
405
117
  } | {
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;
118
+ maxHeight: string;
418
119
  display: string;
419
- } | {
420
120
  height: string;
421
121
  width: string;
422
- display: string;
423
122
  };
424
- height: string;
425
- width: string;
123
+ maxHeight: string;
426
124
  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
125
  height: string;
473
126
  width: string;
474
- display: string;
475
127
  };
476
128
  };
477
129
  export default Logo;
package/dist/src/utils/getSectionColors.d.ts ADDED
@@ -0,0 +1,13 @@
1
+ import { SectionTypes } from "../helpers/types";
2
+ type ColorSection = {
3
+ primary: string;
4
+ secondary: string | null;
5
+ };
6
+ type ColorValue = string;
7
+ interface GetSectionColorsProps {
8
+ type: SectionTypes;
9
+ colorValue?: "primary" | "secondary";
10
+ isDark?: boolean;
11
+ }
12
+ export declare function getSectionColors({ type, colorValue, isDark, }: GetSectionColorsProps): ColorSection | ColorValue;
13
+ export {};
package/dist/src/utils/utils.d.ts CHANGED
@@ -17,6 +17,7 @@ export declare const getStorybookHrefProps: (pageCount: number) => {
17
17
  getPageHref: (selectedPage: number) => string;
18
18
  };
19
19
  interface GetAriaAttrsProps {
20
+ additionalAriaLabel?: string;
20
21
  footnote: HelperErrorTextType;
21
22
  id: string;
22
23
  labelText: HelperErrorTextType;
@@ -28,7 +29,7 @@ interface GetAriaAttrsProps {
28
29
  * Get aria-* attributes for input components. This sets the `aria-label` and
29
30
  * `aria-describedby` attributes, based on the label and footnote values.
30
31
  */
31
- export declare const getAriaAttrs: ({ footnote, id, labelText, name, additionalHelperTextIds, showLabel, }: GetAriaAttrsProps) => AriaAttributes;
32
+ export declare const getAriaAttrs: ({ additionalAriaLabel, footnote, id, labelText, name, additionalHelperTextIds, showLabel, }: GetAriaAttrsProps) => AriaAttributes;
32
33
  /** Convert a hex color value to an rgb or rgba value */
33
34
  export declare const hexToRGB: (hex: string, alpha: number) => string;
34
35
  /** Calculate color luminance */