@nypl/design-system-react-components 3.5.5-rc4 → 3.6.0-rc
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/dist/design-system-react-components.cjs +56 -56
- package/dist/design-system-react-components.js +37952 -37858
- package/dist/src/components/Icons/IconSvgs.d.ts +2 -0
- package/dist/src/components/Icons/iconVariables.d.ts +1 -1
- package/dist/src/components/Select/Select.d.ts +4 -1
- package/dist/src/components/StyleGuide/ColorCard.d.ts +124 -26
- package/dist/src/components/TextInput/TextInput.d.ts +1 -2
- package/dist/src/index.d.ts +5 -4
- package/dist/src/theme/components/list.d.ts +6 -6
- package/dist/src/theme/components/notificationContent.d.ts +0 -1
- package/dist/src/theme/components/notificationHeading.d.ts +0 -1
- package/dist/src/theme/components/structuredContent.d.ts +3 -3
- package/dist/src/theme/foundations/colors.d.ts +156 -0
- package/dist/src/utils/constantValues.d.ts +2 -0
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
export declare const iconAlignArray: readonly ["left", "right", "none"];
|
|
2
2
|
export declare const iconColorsArray: readonly ["transparent", "ui.black", "ui.white", "ui.disabled.primary", "ui.disabled.secondary", "ui.error.primary", "ui.error.secondary", "ui.focus", "ui.link.primary", "ui.link.primary-05", "ui.link.primary-10", "ui.link.secondary", "ui.link.tertiary", "ui.status.primary", "ui.status.secondary", "ui.success.primary", "ui.success.secondary", "ui.test", "ui.warning.primary", "ui.warning.secondary", "ui.bg.default", "ui.bg.hover", "ui.bg.active", "ui.border.default", "ui.border.hover", "ui.typography.heading", "ui.typography.body", "ui.typography.inverse.heading", "ui.typography.inverse.body", "ui.gray.xxxx-dark", "ui.gray.xxx-dark", "ui.gray.xx-dark", "ui.gray.x-dark", "ui.gray.dark", "ui.gray.semi-dark", "ui.gray.medium", "ui.gray.semi-medium", "ui.gray.light-cool", "ui.gray.x-light-cool", "ui.gray.xx-light-cool", "ui.gray.light-warm", "ui.gray.x-light-warm", "brand.primary", "brand.secondary", "section.blogs.primary", "section.blogs.secondary", "section.books-and-more.primary", "section.books-and-more.secondary", "section.connect.primary", "section.connect.secondary", "section.education.primary", "section.education.secondary", "section.locations.primary", "section.locations.secondary", "section.research.primary", "section.research.secondary", "section.research-library.lpa", "section.research-library.schomburg", "section.research-library.schwarzman", "section.whats-on.primary", "section.whats-on.secondary", "dark.brand.primary", "dark.brand.secondary", "dark.section.blogs.primary", "dark.section.blogs.secondary", "dark.section.books-and-more.primary", "dark.section.books-and-more.secondary", "dark.section.connect.primary", "dark.section.connect.secondary", "dark.section.education.primary", "dark.section.education.secondary", "dark.section.locations.primary", "dark.section.locations.secondary", "dark.section.research.primary", "dark.section.research.secondary", "dark.section.research-library.primary", "dark.section.research-library.secondary", "dark.section.whats-on.primary", "dark.section.whats-on.secondary", "dark.ui.disabled.primary", "dark.ui.disabled.secondary", "dark.ui.error.primary", "dark.ui.error.secondary", "dark.ui.focus", "dark.ui.link.primary", "dark.ui.link.primary-05", "dark.ui.link.primary-10", "dark.ui.link.secondary", "dark.ui.link.tertiary", "dark.ui.status.primary", "dark.ui.status.secondary", "dark.ui.success.primary", "dark.ui.success.secondary", "dark.ui.test", "dark.ui.warning.secondary", "dark.ui.warning.primary", "dark.ui.bg.page", "dark.ui.bg.default", "dark.ui.bg.hover", "dark.ui.bg.active", "dark.ui.border.default", "dark.ui.border.hover", "dark.ui.typography.heading", "dark.ui.typography.body", "dark.ui.typography.inverse.heading", "dark.ui.typography.inverse.body"];
|
|
3
|
-
export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "contentFilterList", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialX", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityCheck", "utilityHamburger", "utilitySearch"];
|
|
3
|
+
export declare const iconNamesArray: readonly ["accessibilityFull", "accessibilityPartial", "actionCheckCircle", "actionCheckCircleFilled", "actionDelete", "actionExit", "actionHelpDefault", "actionHelpOutline", "actionHome", "actionIdentity", "actionIdentityFilled", "actionLaunch", "actionLightbulb", "actionLockClosed", "actionPayment", "actionPower", "actionRegistration", "actionSearch", "actionSettings", "alertNotificationImportant", "alertWarningFilled", "alertWarningOutline", "arrow", "building", "check", "clock", "close", "communicationCall", "communicationChatBubble", "communicationEmail", "contentFilterList", "decorativeBookBroken", "decorativeEnvelope", "decorativeLibraryCard", "decorativeShoppingBag", "download", "editorMode", "errorFilled", "errorOutline", "fileTypeAudio", "fileTypeDoc", "fileTypeGenericDoc", "fileTypeImage", "fileTypePdf", "fileTypeSpreadsheet", "fileTypeVideo", "headset", "legacyAccountFilled", "legacyAccountUnfilled", "legacySocialFacebook", "legacySocialInstagram", "legacySocialTwitter", "legacySocialYoutube", "locator", "mapsPlace", "minus", "moonCrescent", "navigationMoreVert", "navigationSubdirectoryArrowLeft", "navigationSubdirectoryArrowRight", "plus", "search", "socialFacebook", "socialInstagram", "socialPinterest", "socialSoundCloud", "socialSpotify", "socialTikTok", "socialTumblr", "socialTwitter", "socialVimeo", "socialX", "socialYoutube", "speakerNotes", "sunFull", "utilityAccountFilled", "utilityAccountUnfilled", "utilityCheck", "utilityHamburger", "utilitySearch"];
|
|
4
4
|
export declare const iconRotationsArray: readonly ["rotate0", "rotate90", "rotate180", "rotate270"];
|
|
5
5
|
export declare const iconSizesArray: readonly ["default", "xsmall", "small", "medium", "large", "xlarge", "xxlarge", "xxxlarge", "xxxxlarge", "xxxxxlarge", "2xlarge", "3xlarge", "4xlarge", "5xlarge"];
|
|
6
6
|
export declare const iconTypesArray: readonly ["default", "breadcrumbs"];
|
|
@@ -5,7 +5,7 @@ export declare const selectTypesArray: string[];
|
|
|
5
5
|
export declare const labelPositionsArray: string[];
|
|
6
6
|
export type SelectTypes = typeof selectTypesArray[number];
|
|
7
7
|
export type LabelPositions = typeof labelPositionsArray[number];
|
|
8
|
-
export interface SelectProps {
|
|
8
|
+
export interface SelectProps extends React.SelectHTMLAttributes<HTMLSelectElement> {
|
|
9
9
|
/** A class name for the `div` parent element. */
|
|
10
10
|
className?: string;
|
|
11
11
|
/** The initial value of an uncontrolled component */
|
|
@@ -38,6 +38,9 @@ export interface SelectProps {
|
|
|
38
38
|
onChange?: (event: React.FormEvent) => void;
|
|
39
39
|
/** Placeholder text in the select element. */
|
|
40
40
|
placeholder?: string;
|
|
41
|
+
/** Allows the '(required)' text to be changed for language purposes
|
|
42
|
+
* Note: Parenthesis will be added automatically by the component */
|
|
43
|
+
requiredLabelText?: string;
|
|
41
44
|
/** The variant to display. */
|
|
42
45
|
selectType?: SelectTypes;
|
|
43
46
|
/** Offers the ability to hide the helper/invalid text. */
|
|
@@ -5,45 +5,37 @@ export declare const colorContrastData: {
|
|
|
5
5
|
primary: {
|
|
6
6
|
dataBlackColor: string[];
|
|
7
7
|
dataWhiteColor: string[];
|
|
8
|
-
textColor: string;
|
|
9
8
|
};
|
|
10
9
|
secondary: {
|
|
11
10
|
dataBlackColor: string[];
|
|
12
11
|
dataWhiteColor: string[];
|
|
13
|
-
textColor: string;
|
|
14
12
|
};
|
|
15
13
|
};
|
|
16
14
|
ui: {
|
|
17
15
|
black: {
|
|
18
16
|
dataBlackColor: string[];
|
|
19
17
|
dataWhiteColor: string[];
|
|
20
|
-
textColor: string;
|
|
21
18
|
};
|
|
22
19
|
gray: {
|
|
23
20
|
xxxxDark: {
|
|
24
21
|
dataBlackColor: any[];
|
|
25
22
|
dataWhiteColor: any[];
|
|
26
|
-
textColor: string;
|
|
27
23
|
};
|
|
28
24
|
xxxDark: {
|
|
29
25
|
dataBlackColor: any[];
|
|
30
26
|
dataWhiteColor: any[];
|
|
31
|
-
textColor: string;
|
|
32
27
|
};
|
|
33
28
|
xxDark: {
|
|
34
29
|
dataBlackColor: any[];
|
|
35
30
|
dataWhiteColor: any[];
|
|
36
|
-
textColor: string;
|
|
37
31
|
};
|
|
38
32
|
xDark: {
|
|
39
33
|
dataBlackColor: any[];
|
|
40
34
|
dataWhiteColor: any[];
|
|
41
|
-
textColor: string;
|
|
42
35
|
};
|
|
43
36
|
dark: {
|
|
44
37
|
dataBlackColor: any[];
|
|
45
38
|
dataWhiteColor: any[];
|
|
46
|
-
textColor: string;
|
|
47
39
|
};
|
|
48
40
|
semiDark: {
|
|
49
41
|
dataBlackColor: any[];
|
|
@@ -107,12 +99,11 @@ export declare const colorContrastData: {
|
|
|
107
99
|
};
|
|
108
100
|
};
|
|
109
101
|
};
|
|
110
|
-
export declare const
|
|
102
|
+
export declare const colorCardsData: {
|
|
111
103
|
brand: {
|
|
112
104
|
name: string;
|
|
113
105
|
dataBlackColor: string[];
|
|
114
106
|
dataWhiteColor: string[];
|
|
115
|
-
textColor: string;
|
|
116
107
|
}[];
|
|
117
108
|
blogs: {
|
|
118
109
|
colorSource: string;
|
|
@@ -126,58 +117,49 @@ export declare const cssVars: {
|
|
|
126
117
|
name: string;
|
|
127
118
|
dataBlackColor: string[];
|
|
128
119
|
dataWhiteColor: string[];
|
|
129
|
-
textColor: string;
|
|
130
120
|
}[];
|
|
131
121
|
connect: {
|
|
132
122
|
name: string;
|
|
133
123
|
dataBlackColor: any[];
|
|
134
124
|
dataWhiteColor: any[];
|
|
135
|
-
textColor: string;
|
|
136
125
|
}[];
|
|
137
126
|
education: {
|
|
138
127
|
name: string;
|
|
139
128
|
dataBlackColor: string[];
|
|
140
129
|
dataWhiteColor: string[];
|
|
141
|
-
textColor: string;
|
|
142
130
|
}[];
|
|
143
131
|
locations: {
|
|
144
132
|
colorSource: string;
|
|
145
133
|
name: string;
|
|
146
134
|
dataBlackColor: string[];
|
|
147
135
|
dataWhiteColor: string[];
|
|
148
|
-
textColor: string;
|
|
149
136
|
}[];
|
|
150
137
|
research: {
|
|
151
138
|
name: string;
|
|
152
139
|
dataBlackColor: string[];
|
|
153
140
|
dataWhiteColor: string[];
|
|
154
|
-
textColor: string;
|
|
155
141
|
}[];
|
|
156
142
|
researchLibraries: ({
|
|
157
143
|
name: string;
|
|
158
144
|
dataBlackColor: string[];
|
|
159
145
|
dataWhiteColor: string[];
|
|
160
|
-
textColor: string;
|
|
161
146
|
colorSource?: undefined;
|
|
162
147
|
} | {
|
|
163
148
|
colorSource: string;
|
|
164
149
|
name: string;
|
|
165
150
|
dataBlackColor: string[];
|
|
166
151
|
dataWhiteColor: string[];
|
|
167
|
-
textColor: string;
|
|
168
152
|
})[];
|
|
169
153
|
whatsOn: ({
|
|
170
154
|
name: string;
|
|
171
155
|
dataBlackColor: string[];
|
|
172
156
|
dataWhiteColor: string[];
|
|
173
|
-
textColor: string;
|
|
174
157
|
colorSource?: undefined;
|
|
175
158
|
} | {
|
|
176
159
|
colorSource: string;
|
|
177
160
|
name: string;
|
|
178
161
|
dataBlackColor: string[];
|
|
179
162
|
dataWhiteColor: string[];
|
|
180
|
-
textColor: string;
|
|
181
163
|
})[];
|
|
182
164
|
ui: ({
|
|
183
165
|
colorSource: string;
|
|
@@ -201,6 +183,28 @@ export declare const cssVars: {
|
|
|
201
183
|
dataBrandPrimaryColor?: undefined;
|
|
202
184
|
dataBrandSecondaryColor?: undefined;
|
|
203
185
|
notes?: undefined;
|
|
186
|
+
} | {
|
|
187
|
+
colorSource: string;
|
|
188
|
+
name: string;
|
|
189
|
+
dataBlackColor: any[];
|
|
190
|
+
dataWhiteColor: any[];
|
|
191
|
+
dataBgPageColor: string[];
|
|
192
|
+
dataBgDefaultColor: string[];
|
|
193
|
+
textColor?: undefined;
|
|
194
|
+
dataBrandPrimaryColor?: undefined;
|
|
195
|
+
dataBrandSecondaryColor?: undefined;
|
|
196
|
+
notes?: undefined;
|
|
197
|
+
} | {
|
|
198
|
+
name: string;
|
|
199
|
+
dataBlackColor: any[];
|
|
200
|
+
dataWhiteColor: any[];
|
|
201
|
+
dataBgPageColor: any[];
|
|
202
|
+
dataBgDefaultColor: any[];
|
|
203
|
+
colorSource?: undefined;
|
|
204
|
+
textColor?: undefined;
|
|
205
|
+
dataBrandPrimaryColor?: undefined;
|
|
206
|
+
dataBrandSecondaryColor?: undefined;
|
|
207
|
+
notes?: undefined;
|
|
204
208
|
} | {
|
|
205
209
|
name: string;
|
|
206
210
|
dataBlackColor: any[];
|
|
@@ -212,6 +216,17 @@ export declare const cssVars: {
|
|
|
212
216
|
dataBrandPrimaryColor?: undefined;
|
|
213
217
|
dataBrandSecondaryColor?: undefined;
|
|
214
218
|
notes?: undefined;
|
|
219
|
+
} | {
|
|
220
|
+
colorSource: string;
|
|
221
|
+
name: string;
|
|
222
|
+
dataBlackColor: string[];
|
|
223
|
+
dataWhiteColor: string[];
|
|
224
|
+
dataBrandPrimaryColor: any[];
|
|
225
|
+
dataBrandSecondaryColor: any[];
|
|
226
|
+
dataBgPageColor: string[];
|
|
227
|
+
dataBgDefaultColor: any[];
|
|
228
|
+
textColor?: undefined;
|
|
229
|
+
notes?: undefined;
|
|
215
230
|
} | {
|
|
216
231
|
colorSource: string;
|
|
217
232
|
name: string;
|
|
@@ -235,24 +250,47 @@ export declare const cssVars: {
|
|
|
235
250
|
dataBrandPrimaryColor?: undefined;
|
|
236
251
|
dataBrandSecondaryColor?: undefined;
|
|
237
252
|
})[];
|
|
238
|
-
grayscaleRoot: {
|
|
253
|
+
grayscaleRoot: ({
|
|
254
|
+
name: string;
|
|
255
|
+
dataBlackColor: string[];
|
|
256
|
+
dataWhiteColor: string[];
|
|
257
|
+
textColor?: undefined;
|
|
258
|
+
} | {
|
|
239
259
|
name: string;
|
|
240
260
|
dataBlackColor: string[];
|
|
241
261
|
dataWhiteColor: string[];
|
|
242
262
|
textColor: string;
|
|
243
|
-
}[];
|
|
244
|
-
grayscaleCool: {
|
|
263
|
+
})[];
|
|
264
|
+
grayscaleCool: ({
|
|
265
|
+
name: string;
|
|
266
|
+
dataBlackColor: any[];
|
|
267
|
+
dataWhiteColor: any[];
|
|
268
|
+
textColor?: undefined;
|
|
269
|
+
} | {
|
|
245
270
|
name: string;
|
|
246
271
|
dataBlackColor: any[];
|
|
247
272
|
dataWhiteColor: any[];
|
|
248
273
|
textColor: string;
|
|
249
|
-
}[];
|
|
274
|
+
})[];
|
|
250
275
|
grayscaleWarm: {
|
|
251
276
|
name: string;
|
|
252
277
|
dataBlackColor: string[];
|
|
253
278
|
dataWhiteColor: string[];
|
|
254
279
|
textColor: string;
|
|
255
280
|
}[];
|
|
281
|
+
highlighter: ({
|
|
282
|
+
name: string;
|
|
283
|
+
showColorDataTable: boolean;
|
|
284
|
+
textColor: string;
|
|
285
|
+
dataBlackColor?: undefined;
|
|
286
|
+
dataWhiteColor?: undefined;
|
|
287
|
+
} | {
|
|
288
|
+
name: string;
|
|
289
|
+
dataBlackColor: string[];
|
|
290
|
+
dataWhiteColor: string[];
|
|
291
|
+
showColorDataTable: boolean;
|
|
292
|
+
textColor: string;
|
|
293
|
+
})[];
|
|
256
294
|
dark: ({
|
|
257
295
|
colorSource: string;
|
|
258
296
|
name: string;
|
|
@@ -260,9 +298,9 @@ export declare const cssVars: {
|
|
|
260
298
|
dataWhiteColor: any[];
|
|
261
299
|
dataHeadingColor: string[];
|
|
262
300
|
dataBodyColor: string[];
|
|
263
|
-
textColor: string;
|
|
264
301
|
dataDarkBgPageColor?: undefined;
|
|
265
302
|
dataDarkBgDefaultColor?: undefined;
|
|
303
|
+
textColor?: undefined;
|
|
266
304
|
dataBrandPrimaryColor?: undefined;
|
|
267
305
|
dataBrandSecondaryColor?: undefined;
|
|
268
306
|
} | {
|
|
@@ -277,6 +315,18 @@ export declare const cssVars: {
|
|
|
277
315
|
dataBodyColor?: undefined;
|
|
278
316
|
dataBrandPrimaryColor?: undefined;
|
|
279
317
|
dataBrandSecondaryColor?: undefined;
|
|
318
|
+
} | {
|
|
319
|
+
colorSource: string;
|
|
320
|
+
name: string;
|
|
321
|
+
dataBlackColor: any[];
|
|
322
|
+
dataWhiteColor: any[];
|
|
323
|
+
dataDarkBgPageColor: any[];
|
|
324
|
+
dataDarkBgDefaultColor: any[];
|
|
325
|
+
dataHeadingColor?: undefined;
|
|
326
|
+
dataBodyColor?: undefined;
|
|
327
|
+
textColor?: undefined;
|
|
328
|
+
dataBrandPrimaryColor?: undefined;
|
|
329
|
+
dataBrandSecondaryColor?: undefined;
|
|
280
330
|
} | {
|
|
281
331
|
name: string;
|
|
282
332
|
dataBlackColor: any[];
|
|
@@ -289,6 +339,18 @@ export declare const cssVars: {
|
|
|
289
339
|
dataBodyColor?: undefined;
|
|
290
340
|
dataBrandPrimaryColor?: undefined;
|
|
291
341
|
dataBrandSecondaryColor?: undefined;
|
|
342
|
+
} | {
|
|
343
|
+
name: string;
|
|
344
|
+
dataBlackColor: string[];
|
|
345
|
+
dataWhiteColor: string[];
|
|
346
|
+
dataDarkBgPageColor: string[];
|
|
347
|
+
dataDarkBgDefaultColor: string[];
|
|
348
|
+
colorSource?: undefined;
|
|
349
|
+
dataHeadingColor?: undefined;
|
|
350
|
+
dataBodyColor?: undefined;
|
|
351
|
+
textColor?: undefined;
|
|
352
|
+
dataBrandPrimaryColor?: undefined;
|
|
353
|
+
dataBrandSecondaryColor?: undefined;
|
|
292
354
|
} | {
|
|
293
355
|
name: string;
|
|
294
356
|
dataDarkBgPageColor: string[];
|
|
@@ -297,8 +359,8 @@ export declare const cssVars: {
|
|
|
297
359
|
dataWhiteColor: string[];
|
|
298
360
|
dataHeadingColor: string[];
|
|
299
361
|
dataBodyColor: string[];
|
|
300
|
-
textColor: string;
|
|
301
362
|
colorSource?: undefined;
|
|
363
|
+
textColor?: undefined;
|
|
302
364
|
dataBrandPrimaryColor?: undefined;
|
|
303
365
|
dataBrandSecondaryColor?: undefined;
|
|
304
366
|
} | {
|
|
@@ -313,10 +375,26 @@ export declare const cssVars: {
|
|
|
313
375
|
textColor: string;
|
|
314
376
|
dataHeadingColor?: undefined;
|
|
315
377
|
dataBodyColor?: undefined;
|
|
378
|
+
} | {
|
|
379
|
+
colorSource: string;
|
|
380
|
+
name: string;
|
|
381
|
+
dataBlackColor: any[];
|
|
382
|
+
dataWhiteColor: any[];
|
|
383
|
+
dataBrandPrimaryColor: any[];
|
|
384
|
+
dataBrandSecondaryColor: any[];
|
|
385
|
+
dataDarkBgPageColor: any[];
|
|
386
|
+
dataDarkBgDefaultColor: any[];
|
|
387
|
+
dataHeadingColor?: undefined;
|
|
388
|
+
dataBodyColor?: undefined;
|
|
389
|
+
textColor?: undefined;
|
|
316
390
|
})[];
|
|
391
|
+
darkHighlighter: {
|
|
392
|
+
name: string;
|
|
393
|
+
showColorDataTable: boolean;
|
|
394
|
+
}[];
|
|
317
395
|
};
|
|
318
396
|
export declare const makeColorCard: (data: any) => import("react/jsx-runtime").JSX.Element;
|
|
319
|
-
export declare const getColorCards: (category:
|
|
397
|
+
export declare const getColorCards: (category: string) => any;
|
|
320
398
|
export interface DataTableProps {
|
|
321
399
|
/** Contrast and WCAG compliance data related to the color ui.bg.page when
|
|
322
400
|
* used with the current color. */
|
|
@@ -358,9 +436,29 @@ export interface ColorCardProps extends DataTableProps {
|
|
|
358
436
|
colorName: string;
|
|
359
437
|
/** The name of the color that the current color is based on. */
|
|
360
438
|
colorSource: string;
|
|
439
|
+
/** Show or hide the data table */
|
|
440
|
+
showColorDataTable: boolean;
|
|
361
441
|
/** Details on how a color should be used. */
|
|
362
442
|
notes?: string;
|
|
363
443
|
}
|
|
444
|
+
export declare const colorNamesArray: readonly ["nyplRed", "fluorescentPink", "vividBurgundy", "carrotOrange", "flavescent", "treeGreen", "scienceBlue", "blueberry", "irisPurple"];
|
|
445
|
+
export type ColorNames = typeof colorNamesArray[number];
|
|
446
|
+
export interface ColorBoxProps {
|
|
447
|
+
/** The backgroundColor of the color card. */
|
|
448
|
+
backgroundColor: string;
|
|
449
|
+
/** The name of a color's javascript theme object. */
|
|
450
|
+
colorName: ColorNames;
|
|
451
|
+
/** The name of a color's javascript theme object. */
|
|
452
|
+
colorOption: string;
|
|
453
|
+
/** The color to use for text in the color card. */
|
|
454
|
+
textColor?: IconColors;
|
|
455
|
+
}
|
|
456
|
+
export interface ColorScaleProps {
|
|
457
|
+
/** The name of a color's javascript theme object. */
|
|
458
|
+
colorName: ColorNames;
|
|
459
|
+
}
|
|
364
460
|
export declare const DataTable: (props: PropsWithChildren<DataTableProps>) => import("react/jsx-runtime").JSX.Element;
|
|
461
|
+
export declare const ColorBox: (props: ColorBoxProps) => import("react/jsx-runtime").JSX.Element;
|
|
462
|
+
export declare const ColorScale: (props: ColorScaleProps) => import("react/jsx-runtime").JSX.Element;
|
|
365
463
|
export declare const ColorCard: (props: PropsWithChildren<ColorCardProps>) => import("react/jsx-runtime").JSX.Element;
|
|
366
464
|
export default ColorCard;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import { ChakraComponent } from "@chakra-ui/react";
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { HelperErrorTextType } from "../HelperErrorText/HelperErrorText";
|
|
4
|
-
|
|
5
|
-
export type AutoCompleteValues = typeof autoCompleteValuesArray[number];
|
|
4
|
+
import type { AutoCompleteValues } from "../../utils/constantValues";
|
|
6
5
|
export declare const textInputTypesArray: readonly ["email", "hidden", "number", "password", "text", "textarea", "tel", "url"];
|
|
7
6
|
export type TextInputTypes = typeof textInputTypesArray[number];
|
|
8
7
|
export declare const TextInputFormats: {
|
package/dist/src/index.d.ts
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export { Box, Center, chakra, Circle, ColorModeScript, cookieStorageManager, cookieStorageManagerSSR, FocusLock, Flex, Grid, GridItem, HStack, localStorageManager, Spacer, Square, Stack, useColorMode, useColorModeValue, useStyleConfig, useMediaQuery, useMultiStyleConfig, VStack, } from "@chakra-ui/react";
|
|
2
|
+
export { default as DSProvider } from "./theme/provider";
|
|
2
3
|
export { default as Accordion } from "./components/Accordion/Accordion";
|
|
3
4
|
export type { AccordionTypes, AccordionDataProps, } from "./components/Accordion/Accordion";
|
|
4
5
|
export { default as AlphabetFilter } from "./components/AlphabetFilter/AlphabetFilter";
|
|
@@ -22,7 +23,6 @@ export type { CheckboxGroupProps } from "./components/CheckboxGroup/CheckboxGrou
|
|
|
22
23
|
export { default as ColorCard } from "./components/StyleGuide/ColorCard";
|
|
23
24
|
export { default as DatePicker } from "./components/DatePicker/DatePicker";
|
|
24
25
|
export type { DatePickerTypes, FullDateType, CustomTextInputProps, DatePickerProps, } from "./components/DatePicker/DatePicker";
|
|
25
|
-
export { default as DSProvider } from "./theme/provider";
|
|
26
26
|
export { default as FeaturedContent } from "./components/FeaturedContent/FeaturedContent";
|
|
27
27
|
export type { FeaturedContentImageProps, FeaturedContentPositionType, FeaturedContentProps, FeaturedContentWidthType, } from "./components/FeaturedContent/FeaturedContent";
|
|
28
28
|
export { default as FeedbackBox, useFeedbackBox, } from "./components/FeedbackBox/FeedbackBox";
|
|
@@ -112,11 +112,13 @@ export type { TemplateAppContainerProps, TemplateProps, TemplateContentProps, Te
|
|
|
112
112
|
export { default as Text } from "./components/Text/Text";
|
|
113
113
|
export type { TextProps, TextSizes } from "./components/Text/Text";
|
|
114
114
|
export { default as TextInput } from "./components/TextInput/TextInput";
|
|
115
|
-
export type {
|
|
115
|
+
export type { InputProps, TextInputRefType, TextInputTypes, } from "./components/TextInput/TextInput";
|
|
116
116
|
export { default as Toggle } from "./components/Toggle/Toggle";
|
|
117
117
|
export type { ToggleProps, ToggleSizes } from "./components/Toggle/Toggle";
|
|
118
118
|
export { default as Tooltip } from "./components/Tooltip/Tooltip";
|
|
119
119
|
export type { TooltipProps } from "./components/Tooltip/Tooltip";
|
|
120
|
+
export { default as VideoPlayer } from "./components/VideoPlayer/VideoPlayer";
|
|
121
|
+
export type { VideoPlayerAspectRatios, VideoPlayerProps, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
|
|
120
122
|
export { default as useCarouselStyles } from "./hooks/useCarouselStyles";
|
|
121
123
|
export { default as useCloseDropDown } from "./hooks/useCloseDropDown";
|
|
122
124
|
export { default as useMultiSelect } from "./hooks/useMultiSelect";
|
|
@@ -125,5 +127,4 @@ export { default as useNYPLTheme } from "./hooks/useNYPLTheme";
|
|
|
125
127
|
export { default as useWindowSize } from "./hooks/useWindowSize";
|
|
126
128
|
export { default as useScrollFadeStyles } from "./hooks/useScrollFadeStyles";
|
|
127
129
|
export { default as useFormatNumber } from "./hooks/useFormatNumber";
|
|
128
|
-
export {
|
|
129
|
-
export type { VideoPlayerAspectRatios, VideoPlayerProps, VideoPlayerTypes, } from "./components/VideoPlayer/VideoPlayer";
|
|
130
|
+
export type { AutoCompleteValues } from "./utils/constantValues";
|
|
@@ -77,9 +77,6 @@ export declare const descriptionStyles: (showRowDividers?: boolean) => {
|
|
|
77
77
|
md: string;
|
|
78
78
|
};
|
|
79
79
|
paddingTop: string;
|
|
80
|
-
paddingEnd: {
|
|
81
|
-
md: string;
|
|
82
|
-
};
|
|
83
80
|
_dark: {
|
|
84
81
|
borderColor: string;
|
|
85
82
|
color: string;
|
|
@@ -95,6 +92,9 @@ export declare const descriptionStyles: (showRowDividers?: boolean) => {
|
|
|
95
92
|
borderColor: {
|
|
96
93
|
md: string;
|
|
97
94
|
};
|
|
95
|
+
paddingStart: {
|
|
96
|
+
md: string;
|
|
97
|
+
};
|
|
98
98
|
paddingTop: {
|
|
99
99
|
md: string;
|
|
100
100
|
};
|
|
@@ -204,9 +204,6 @@ declare const List: {
|
|
|
204
204
|
md: string;
|
|
205
205
|
};
|
|
206
206
|
paddingTop: string;
|
|
207
|
-
paddingEnd: {
|
|
208
|
-
md: string;
|
|
209
|
-
};
|
|
210
207
|
_dark: {
|
|
211
208
|
borderColor: string;
|
|
212
209
|
color: string;
|
|
@@ -222,6 +219,9 @@ declare const List: {
|
|
|
222
219
|
borderColor: {
|
|
223
220
|
md: string;
|
|
224
221
|
};
|
|
222
|
+
paddingStart: {
|
|
223
|
+
md: string;
|
|
224
|
+
};
|
|
225
225
|
paddingTop: {
|
|
226
226
|
md: string;
|
|
227
227
|
};
|
|
@@ -348,9 +348,6 @@ declare const StructuredContent: {
|
|
|
348
348
|
* not rendered from the Reservoir DS. Typically, these HTML elements
|
|
349
349
|
* are added from an API response.
|
|
350
350
|
*/
|
|
351
|
-
paddingEnd: {
|
|
352
|
-
md: string;
|
|
353
|
-
};
|
|
354
351
|
_dark: {
|
|
355
352
|
borderColor: string;
|
|
356
353
|
color: string;
|
|
@@ -366,6 +363,9 @@ declare const StructuredContent: {
|
|
|
366
363
|
borderColor: {
|
|
367
364
|
md: string;
|
|
368
365
|
};
|
|
366
|
+
paddingStart: {
|
|
367
|
+
md: string;
|
|
368
|
+
};
|
|
369
369
|
paddingTop: {
|
|
370
370
|
md: string;
|
|
371
371
|
};
|
|
@@ -1,3 +1,159 @@
|
|
|
1
1
|
import { Colors } from "@chakra-ui/react";
|
|
2
|
+
/**
|
|
3
|
+
* All colors can be found in Storybook:
|
|
4
|
+
* https://nypl.github.io/nypl-design-system/reservoir/v3/?path=/docs/style-guide-colors--docs
|
|
5
|
+
*
|
|
6
|
+
* All UI Fills colors can be found in Figma:
|
|
7
|
+
* https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=47083%3A27674
|
|
8
|
+
*
|
|
9
|
+
* All Brand Fills colors can be found in Figma:
|
|
10
|
+
* https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=15454%3A47007
|
|
11
|
+
*
|
|
12
|
+
* All Dark Mode UI Fills colors can be found in Figma:
|
|
13
|
+
* https://www.figma.com/file/qShodlfNCJHb8n03IFyApM/Main?node-id=61991%3A45315
|
|
14
|
+
*
|
|
15
|
+
* At the end of this file, there are objects that extend Chakra's default
|
|
16
|
+
* color shade palette for individual colors. WE DO NOT RECOMMEND to use them
|
|
17
|
+
* and only recommend to use the colors defined by the Design System such as the
|
|
18
|
+
* following "ui", "brand", and "section" colors below.
|
|
19
|
+
*/
|
|
20
|
+
/** Reusable variables: */
|
|
21
|
+
export declare const primitives: {
|
|
22
|
+
nyplRed: {
|
|
23
|
+
DEFAULT: string;
|
|
24
|
+
"25": string;
|
|
25
|
+
"50": string;
|
|
26
|
+
"100": string;
|
|
27
|
+
"200": string;
|
|
28
|
+
"300": string;
|
|
29
|
+
"400": string;
|
|
30
|
+
"500": string;
|
|
31
|
+
"600": string;
|
|
32
|
+
"700": string;
|
|
33
|
+
"800": string;
|
|
34
|
+
"900": string;
|
|
35
|
+
"950": string;
|
|
36
|
+
};
|
|
37
|
+
fluorescentPink: {
|
|
38
|
+
DEFAULT: string;
|
|
39
|
+
"25": string;
|
|
40
|
+
"50": string;
|
|
41
|
+
"100": string;
|
|
42
|
+
"200": string;
|
|
43
|
+
"300": string;
|
|
44
|
+
"400": string;
|
|
45
|
+
"500": string;
|
|
46
|
+
"600": string;
|
|
47
|
+
"700": string;
|
|
48
|
+
"800": string;
|
|
49
|
+
"900": string;
|
|
50
|
+
"950": string;
|
|
51
|
+
};
|
|
52
|
+
vividBurgundy: {
|
|
53
|
+
DEFAULT: string;
|
|
54
|
+
"25": string;
|
|
55
|
+
"50": string;
|
|
56
|
+
"100": string;
|
|
57
|
+
"200": string;
|
|
58
|
+
"300": string;
|
|
59
|
+
"400": string;
|
|
60
|
+
"500": string;
|
|
61
|
+
"600": string;
|
|
62
|
+
"700": string;
|
|
63
|
+
"800": string;
|
|
64
|
+
"900": string;
|
|
65
|
+
"950": string;
|
|
66
|
+
};
|
|
67
|
+
carrotOrange: {
|
|
68
|
+
DEFAULT: string;
|
|
69
|
+
"25": string;
|
|
70
|
+
"50": string;
|
|
71
|
+
"100": string;
|
|
72
|
+
"200": string;
|
|
73
|
+
"300": string;
|
|
74
|
+
"400": string;
|
|
75
|
+
"500": string;
|
|
76
|
+
"600": string;
|
|
77
|
+
"700": string;
|
|
78
|
+
"800": string;
|
|
79
|
+
"900": string;
|
|
80
|
+
"950": string;
|
|
81
|
+
};
|
|
82
|
+
flavescent: {
|
|
83
|
+
DEFAULT: string;
|
|
84
|
+
"25": string;
|
|
85
|
+
"50": string;
|
|
86
|
+
"100": string;
|
|
87
|
+
"200": string;
|
|
88
|
+
"300": string;
|
|
89
|
+
"400": string;
|
|
90
|
+
"500": string;
|
|
91
|
+
"600": string;
|
|
92
|
+
"700": string;
|
|
93
|
+
"800": string;
|
|
94
|
+
"900": string;
|
|
95
|
+
"950": string;
|
|
96
|
+
};
|
|
97
|
+
treeGreen: {
|
|
98
|
+
DEFAULT: string;
|
|
99
|
+
"25": string;
|
|
100
|
+
"50": string;
|
|
101
|
+
"100": string;
|
|
102
|
+
"200": string;
|
|
103
|
+
"300": string;
|
|
104
|
+
"400": string;
|
|
105
|
+
"500": string;
|
|
106
|
+
"600": string;
|
|
107
|
+
"700": string;
|
|
108
|
+
"800": string;
|
|
109
|
+
"900": string;
|
|
110
|
+
"950": string;
|
|
111
|
+
};
|
|
112
|
+
scienceBlue: {
|
|
113
|
+
DEFAULT: string;
|
|
114
|
+
"25": string;
|
|
115
|
+
"50": string;
|
|
116
|
+
"100": string;
|
|
117
|
+
"200": string;
|
|
118
|
+
"300": string;
|
|
119
|
+
"400": string;
|
|
120
|
+
"500": string;
|
|
121
|
+
"600": string;
|
|
122
|
+
"700": string;
|
|
123
|
+
"800": string;
|
|
124
|
+
"900": string;
|
|
125
|
+
"950": string;
|
|
126
|
+
};
|
|
127
|
+
blueberry: {
|
|
128
|
+
DEFAULT: string;
|
|
129
|
+
"25": string;
|
|
130
|
+
"50": string;
|
|
131
|
+
"100": string;
|
|
132
|
+
"200": string;
|
|
133
|
+
"300": string;
|
|
134
|
+
"400": string;
|
|
135
|
+
"500": string;
|
|
136
|
+
"600": string;
|
|
137
|
+
"700": string;
|
|
138
|
+
"800": string;
|
|
139
|
+
"900": string;
|
|
140
|
+
"950": string;
|
|
141
|
+
};
|
|
142
|
+
irisPurple: {
|
|
143
|
+
DEFAULT: string;
|
|
144
|
+
"25": string;
|
|
145
|
+
"50": string;
|
|
146
|
+
"100": string;
|
|
147
|
+
"200": string;
|
|
148
|
+
"300": string;
|
|
149
|
+
"400": string;
|
|
150
|
+
"500": string;
|
|
151
|
+
"600": string;
|
|
152
|
+
"700": string;
|
|
153
|
+
"800": string;
|
|
154
|
+
"900": string;
|
|
155
|
+
"950": string;
|
|
156
|
+
};
|
|
157
|
+
};
|
|
2
158
|
declare const colors: Colors;
|
|
3
159
|
export default colors;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
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"];
|
|
2
|
+
export type AutoCompleteValues = typeof autoCompleteValuesArray[number];
|