@nypl/design-system-react-components 2.1.1 → 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 (10) hide show
  1. package/dist/design-system-react-components.cjs +48 -48
  2. package/dist/design-system-react-components.js +3198 -3155
  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 +4 -0
  6. package/dist/src/helpers/types.d.ts +1 -1
  7. package/dist/src/theme/components/logo.d.ts +35 -383
  8. package/dist/src/utils/getSectionColors.d.ts +13 -0
  9. package/package.json +3 -3
  10. 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: {
@@ -18,6 +20,8 @@ export interface InputProps {
18
20
  /** FOR INTERNAL DS USE ONLY: additional helper text id(s) to be used for the input's `aria-describedby` value.
19
21
  * If more than one, separate each with a space */
20
22
  additionalHelperTextIds?: string;
23
+ /** String value used to set the autocomplete attribute. */
24
+ autoComplete?: AutoCompleteValues;
21
25
  /** A class name for the TextInput parent div. */
22
26
  className?: string;
23
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/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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "2.1.1",
3
+ "version": "2.1.2",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -57,7 +57,7 @@
57
57
  },
58
58
  "dependencies": {
59
59
  "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
60
- "@chakra-ui/react": ">=1.8.5 <=1.8.8",
60
+ "@chakra-ui/react": ">=1.8.5 <=1.8.9",
61
61
  "@chakra-ui/system": ">=1.11.0 <=1.12.1",
62
62
  "@charlietango/use-native-lazy-loading": "1.10.0",
63
63
  "@emotion/react": "11.4.1",
@@ -73,7 +73,7 @@
73
73
  },
74
74
  "peerDependencies": {
75
75
  "@chakra-ui/focus-lock": ">=1.2.6 <2.0.0",
76
- "@chakra-ui/react": ">=1.8.5 <=1.8.8",
76
+ "@chakra-ui/react": ">=1.8.5 <=1.8.9",
77
77
  "@chakra-ui/system": ">=1.11.0 <=1.12.1",
78
78
  "@emotion/react": "11.4.1",
79
79
  "@emotion/styled": "11.3.0",
package/dist/src/helpers/getSectionColors.d.ts DELETED
@@ -1,8 +0,0 @@
1
- import { SectionTypes } from "./types";
2
- type ColorSection = {
3
- primary: string;
4
- secondary: string | null;
5
- };
6
- type ColorVal = string;
7
- export declare function getSectionColors(type: SectionTypes, colorVal?: "primary" | "secondary"): ColorSection | ColorVal;
8
- export {};