@nypl/design-system-react-components 1.0.3-beta → 1.0.5

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 (39) hide show
  1. package/CHANGELOG.md +1499 -0
  2. package/README.md +171 -133
  3. package/dist/__tests__/mediaMatchMock.d.ts +79 -0
  4. package/dist/components/Card/Card.d.ts +8 -6
  5. package/dist/components/Heading/Heading.d.ts +6 -0
  6. package/dist/components/Icons/Icon.d.ts +1 -1
  7. package/dist/components/Icons/IconSvgs.d.ts +15 -0
  8. package/dist/components/Logo/Logo.d.ts +1 -1
  9. package/dist/components/Logo/LogoSvgs.d.ts +3 -0
  10. package/dist/components/StyleGuide/ColorCard.d.ts +25 -7
  11. package/dist/components/Table/Table.d.ts +3 -2
  12. package/dist/components/Text/Text.d.ts +6 -0
  13. package/dist/design-system-react-components.cjs.development.js +2086 -1019
  14. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  15. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  16. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  17. package/dist/design-system-react-components.esm.js +2064 -1029
  18. package/dist/design-system-react-components.esm.js.map +1 -1
  19. package/dist/hooks/__tests__/useNYPLBreakpoints.test.d.ts +1 -0
  20. package/dist/hooks/useNYPLBreakpoints.d.ts +13 -0
  21. package/dist/index.d.ts +3 -1
  22. package/dist/resources.scss +0 -4
  23. package/dist/styles.css +3 -2
  24. package/dist/theme/components/button.d.ts +7 -2
  25. package/dist/theme/components/checkbox.d.ts +1 -1
  26. package/dist/theme/components/customTable.d.ts +522 -34
  27. package/dist/theme/components/datePicker.d.ts +1 -0
  28. package/dist/theme/components/global.d.ts +4 -1
  29. package/dist/theme/components/heading.d.ts +5 -1
  30. package/dist/theme/components/image.d.ts +18 -0
  31. package/dist/theme/components/radio.d.ts +3 -0
  32. package/dist/theme/components/searchBar.d.ts +6 -0
  33. package/dist/theme/components/select.d.ts +4 -5
  34. package/dist/theme/components/structuredContent.d.ts +117 -17
  35. package/dist/theme/components/text.d.ts +5 -1
  36. package/dist/theme/components/textInput.d.ts +4 -0
  37. package/dist/theme/components/toggle.d.ts +1 -0
  38. package/dist/theme/provider.d.ts +2 -1
  39. package/package.json +15 -14
package/dist/theme/components/image.d.ts CHANGED
@@ -104,6 +104,7 @@ declare const CustomImage: {
104
104
  baseStyle: ({ size }: CustomImageBaseStyle) => {
105
105
  figure: {
106
106
  img: {
107
+ backgroundColor: string;
107
108
  marginBottom: string;
108
109
  };
109
110
  maxWidth: string;
@@ -111,6 +112,7 @@ declare const CustomImage: {
111
112
  width: string;
112
113
  } | {
113
114
  img: {
115
+ backgroundColor: string;
114
116
  marginBottom: string;
115
117
  };
116
118
  maxWidth: string;
@@ -120,6 +122,7 @@ declare const CustomImage: {
120
122
  width: string;
121
123
  } | {
122
124
  img: {
125
+ backgroundColor: string;
123
126
  marginBottom: string;
124
127
  };
125
128
  maxWidth: string;
@@ -129,6 +132,7 @@ declare const CustomImage: {
129
132
  width: string;
130
133
  } | {
131
134
  img: {
135
+ backgroundColor: string;
132
136
  marginBottom: string;
133
137
  };
134
138
  maxWidth: string;
@@ -138,6 +142,7 @@ declare const CustomImage: {
138
142
  width: string;
139
143
  } | {
140
144
  img: {
145
+ backgroundColor: string;
141
146
  marginBottom: string;
142
147
  };
143
148
  maxWidth: string;
@@ -147,6 +152,7 @@ declare const CustomImage: {
147
152
  width: string;
148
153
  } | {
149
154
  img: {
155
+ backgroundColor: string;
150
156
  marginBottom: string;
151
157
  };
152
158
  maxWidth: string;
@@ -162,6 +168,7 @@ declare const CustomImage: {
162
168
  img: {
163
169
  maxWidth: string;
164
170
  display: string;
171
+ backgroundColor: string;
165
172
  boxSizing: string;
166
173
  objectFit: string;
167
174
  position: string;
@@ -171,6 +178,7 @@ declare const CustomImage: {
171
178
  marginLeft: string;
172
179
  marginRight: string;
173
180
  display: string;
181
+ backgroundColor: string;
174
182
  boxSizing: string;
175
183
  objectFit: string;
176
184
  position: string;
@@ -180,6 +188,7 @@ declare const CustomImage: {
180
188
  marginLeft: string;
181
189
  marginRight: string;
182
190
  display: string;
191
+ backgroundColor: string;
183
192
  boxSizing: string;
184
193
  objectFit: string;
185
194
  position: string;
@@ -189,6 +198,7 @@ declare const CustomImage: {
189
198
  marginLeft: string;
190
199
  marginRight: string;
191
200
  display: string;
201
+ backgroundColor: string;
192
202
  boxSizing: string;
193
203
  objectFit: string;
194
204
  position: string;
@@ -198,6 +208,7 @@ declare const CustomImage: {
198
208
  marginLeft: string;
199
209
  marginRight: string;
200
210
  display: string;
211
+ backgroundColor: string;
201
212
  boxSizing: string;
202
213
  objectFit: string;
203
214
  position: string;
@@ -207,6 +218,7 @@ declare const CustomImage: {
207
218
  marginLeft: string;
208
219
  marginRight: string;
209
220
  display: string;
221
+ backgroundColor: string;
210
222
  boxSizing: string;
211
223
  objectFit: string;
212
224
  position: string;
@@ -269,6 +281,7 @@ declare const CustomImageWrapper: {
269
281
  overflow: string;
270
282
  };
271
283
  img: {
284
+ backgroundColor: string;
272
285
  height: string;
273
286
  left: string;
274
287
  maxWidth: string;
@@ -330,6 +343,7 @@ declare const CustomImageWrapper: {
330
343
  overflow: string;
331
344
  };
332
345
  img: {
346
+ backgroundColor: string;
333
347
  height: string;
334
348
  left: string;
335
349
  maxWidth: string;
@@ -391,6 +405,7 @@ declare const CustomImageWrapper: {
391
405
  overflow: string;
392
406
  };
393
407
  img: {
408
+ backgroundColor: string;
394
409
  height: string;
395
410
  left: string;
396
411
  maxWidth: string;
@@ -452,6 +467,7 @@ declare const CustomImageWrapper: {
452
467
  overflow: string;
453
468
  };
454
469
  img: {
470
+ backgroundColor: string;
455
471
  height: string;
456
472
  left: string;
457
473
  maxWidth: string;
@@ -513,6 +529,7 @@ declare const CustomImageWrapper: {
513
529
  overflow: string;
514
530
  };
515
531
  img: {
532
+ backgroundColor: string;
516
533
  height: string;
517
534
  left: string;
518
535
  maxWidth: string;
@@ -574,6 +591,7 @@ declare const CustomImageWrapper: {
574
591
  overflow: string;
575
592
  };
576
593
  img: {
594
+ backgroundColor: string;
577
595
  height: string;
578
596
  left: string;
579
597
  maxWidth: string;
package/dist/theme/components/radio.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  declare const Radio: {
2
2
  parts: string[];
3
3
  baseStyle: {
4
+ bg: string;
5
+ fontSize: string;
4
6
  control: {
5
7
  verticalAlign: string;
6
8
  transitionProperty: string;
@@ -8,6 +10,7 @@ declare const Radio: {
8
10
  border: string;
9
11
  borderRadius: string;
10
12
  borderColor: string;
13
+ backgroundColor: string;
11
14
  color: string;
12
15
  outline: string;
13
16
  _checked: {
package/dist/theme/components/searchBar.d.ts CHANGED
@@ -11,7 +11,13 @@ declare const SearchBar: {
11
11
  md: string;
12
12
  };
13
13
  select: {
14
+ flexShrink: string;
14
15
  marginBottom: string;
16
+ maxWidth: {
17
+ base: any;
18
+ md: string;
19
+ };
20
+ textOverflow: string;
15
21
  };
16
22
  };
17
23
  };
package/dist/theme/components/select.d.ts CHANGED
@@ -26,6 +26,10 @@ declare const Select: {
26
26
  borderRadius: string;
27
27
  borderColor: string;
28
28
  fontSize: string;
29
+ minHeight: {
30
+ base: string;
31
+ md: string;
32
+ };
29
33
  paddingTop: string;
30
34
  paddingRight: string;
31
35
  paddingBottom: string;
@@ -72,11 +76,6 @@ declare const Select: {
72
76
  borderRightRadius: {
73
77
  md: string;
74
78
  };
75
- _hover: {
76
- borderRightColor: {
77
- md: string;
78
- };
79
- };
80
79
  };
81
80
  };
82
81
  };
package/dist/theme/components/structuredContent.d.ts CHANGED
@@ -179,46 +179,146 @@ declare const StructuredContent: {
179
179
  table: {
180
180
  width: string;
181
181
  th: {
182
- border: string;
183
- borderBottom: string;
184
182
  color: string;
185
- fontSize: string;
186
183
  fontWeight: string;
187
- letterSpacing: string;
188
- paddingLeft: number;
189
- paddingRight: string;
190
184
  textTransform: string;
191
185
  _first: {
192
- paddingLeft: string;
186
+ paddingLeft: {
187
+ base: string;
188
+ md: string;
189
+ };
190
+ };
191
+ border: string;
192
+ borderBottom: string;
193
+ borderColor: {
194
+ base: string;
195
+ md: string;
196
+ };
197
+ display: {
198
+ base: string;
199
+ md: string;
200
+ };
201
+ fontSize: {
202
+ base: string;
203
+ lg: string;
204
+ };
205
+ gap: string;
206
+ letterSpacing: string;
207
+ lineHeight: number;
208
+ paddingBottom: {
209
+ base: string;
210
+ md: string;
211
+ };
212
+ paddingLeft: number;
213
+ paddingRight: {
214
+ base: string;
215
+ md: string;
216
+ };
217
+ paddingTop: {
218
+ base: string;
219
+ md: string;
193
220
  };
194
221
  _last: {
222
+ paddingRight: {
223
+ base: string;
224
+ md: string;
225
+ };
226
+ borderBottom: string;
227
+ borderColor: {
228
+ base: string;
229
+ md: string;
230
+ };
231
+ };
232
+ "> span": {
233
+ flexBasis: string;
234
+ paddingBottom: {
235
+ base: string;
236
+ md: string;
237
+ };
195
238
  paddingRight: string;
239
+ paddingTop: {
240
+ base: string;
241
+ md: string;
242
+ };
243
+ _first: {
244
+ bg: string;
245
+ color: string;
246
+ fontWeight: string;
247
+ paddingLeft: string;
248
+ };
196
249
  };
197
250
  textAlign: string;
198
251
  paddingInlineStart: string;
199
252
  paddingInlineEnd: string;
200
- paddingTop: string;
201
- paddingBottom: string;
202
- lineHeight: string;
203
253
  };
204
254
  td: {
255
+ _first: {
256
+ paddingLeft: {
257
+ base: string;
258
+ md: string;
259
+ };
260
+ };
261
+ _last: {
262
+ borderBottom: {
263
+ base: number;
264
+ md: string;
265
+ };
266
+ borderColor: {
267
+ base: string;
268
+ md: string;
269
+ };
270
+ };
205
271
  border: string;
206
272
  borderBottom: string;
273
+ borderColor: {
274
+ base: string;
275
+ md: string;
276
+ };
277
+ display: {
278
+ base: string;
279
+ md: string;
280
+ };
281
+ fontSize: {
282
+ base: string;
283
+ lg: string;
284
+ };
285
+ gap: string;
207
286
  letterSpacing: string;
287
+ lineHeight: number;
288
+ paddingBottom: {
289
+ base: string;
290
+ md: string;
291
+ };
208
292
  paddingLeft: number;
209
- paddingRight: string;
210
- _first: {
211
- paddingLeft: string;
293
+ paddingRight: {
294
+ base: string;
295
+ md: string;
212
296
  };
213
- _last: {
297
+ paddingTop: {
298
+ base: string;
299
+ md: string;
300
+ };
301
+ "> span": {
302
+ flexBasis: string;
303
+ paddingBottom: {
304
+ base: string;
305
+ md: string;
306
+ };
214
307
  paddingRight: string;
308
+ paddingTop: {
309
+ base: string;
310
+ md: string;
311
+ };
312
+ _first: {
313
+ bg: string;
314
+ color: string;
315
+ fontWeight: string;
316
+ paddingLeft: string;
317
+ };
215
318
  };
216
319
  textAlign: string;
217
320
  paddingInlineStart: string;
218
321
  paddingInlineEnd: string;
219
- paddingTop: string;
220
- paddingBottom: string;
221
- lineHeight: string;
222
322
  };
223
323
  };
224
324
  };
package/dist/theme/components/text.d.ts CHANGED
@@ -1,13 +1,17 @@
1
1
  interface TextBaseStyle {
2
2
  isBold: boolean;
3
3
  isItalic: boolean;
4
+ isCapitalized: boolean;
5
+ isUppercase: boolean;
6
+ isLowercase: boolean;
4
7
  noSpace: boolean;
5
8
  variant: string;
6
9
  }
7
10
  declare const Text: {
8
- baseStyle: ({ isBold, isItalic, noSpace, variant }: TextBaseStyle) => {
11
+ baseStyle: ({ isBold, isItalic, isCapitalized, isUppercase, isLowercase, noSpace, variant, }: TextBaseStyle) => {
9
12
  fontStyle: string;
10
13
  fontWeight: string;
14
+ textTransform: string;
11
15
  marginBottom: string;
12
16
  };
13
17
  variants: {
package/dist/theme/components/textInput.d.ts CHANGED
@@ -7,6 +7,10 @@ declare const TextInput: {
7
7
  borderColor: string;
8
8
  borderRadius: string;
9
9
  fontSize: string;
10
+ minHeight: {
11
+ base: string;
12
+ md: string;
13
+ };
10
14
  py: string;
11
15
  px: string;
12
16
  _hover: {
package/dist/theme/components/toggle.d.ts CHANGED
@@ -28,6 +28,7 @@ declare const _default: {
28
28
  alignItems: string;
29
29
  opacity: number;
30
30
  track: {
31
+ backgroundColor: string;
31
32
  border: string;
32
33
  borderColor: string;
33
34
  p: string;
package/dist/theme/provider.d.ts CHANGED
@@ -1,3 +1,4 @@
1
1
  import React from "react";
2
- declare const DSProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
2
+ import { ChakraProviderProps } from "@chakra-ui/react";
3
+ declare const DSProvider: ({ children, colorModeManager, }: React.PropsWithChildren<ChakraProviderProps>) => JSX.Element;
3
4
  export default DSProvider;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nypl/design-system-react-components",
3
- "version": "1.0.3-beta",
3
+ "version": "1.0.5",
4
4
  "description": "NYPL Reservoir Design System React Components",
5
5
  "repository": {
6
6
  "type": "git",
@@ -58,13 +58,14 @@
58
58
  "dependencies": {
59
59
  "@chakra-ui/react": ">=1.8.5 <=1.8.8",
60
60
  "@chakra-ui/system": ">=1.11.0 <=1.12.1",
61
+ "@charlietango/use-native-lazy-loading": "1.10.0",
61
62
  "@emotion/react": ">=11.4.1",
62
63
  "@emotion/styled": ">=11.3.0",
63
64
  "framer-motion": "^4.1.17",
64
- "he": "1.2.0",
65
65
  "react-datepicker": "4.1.1",
66
+ "react-intersection-observer": "9.2.2",
66
67
  "system-font-css": "2.0.2",
67
- "typescript": "4.3.5"
68
+ "typescript": "*"
68
69
  },
69
70
  "peerDependencies": {
70
71
  "@chakra-ui/react": ">=1.8.5 <=1.8.8",
@@ -73,21 +74,22 @@
73
74
  "@emotion/styled": ">=11.3.0",
74
75
  "framer-motion": "^4.1.17",
75
76
  "react": ">=16.13.0",
76
- "react-dom": ">=16.13.0"
77
+ "react-dom": ">=16.13.0",
78
+ "typescript": "*"
77
79
  },
78
80
  "devDependencies": {
79
81
  "@babel/core": "7.14.6",
80
82
  "@chakra-ui/storybook-addon": "1.0.3",
81
83
  "@mdx-js/react": "1.6.22",
82
84
  "@size-limit/preset-small-lib": "5.0.1",
83
- "@storybook/addon-a11y": "6.4.19",
84
- "@storybook/addon-actions": "6.4.19",
85
- "@storybook/addon-docs": "6.4.19",
86
- "@storybook/addon-essentials": "6.4.19",
87
- "@storybook/addon-jest": "6.4.19",
88
- "@storybook/addon-links": "6.4.19",
89
- "@storybook/addons": "6.4.19",
90
- "@storybook/react": "6.4.19",
85
+ "@storybook/addon-a11y": "6.5.7",
86
+ "@storybook/addon-actions": "6.5.7",
87
+ "@storybook/addon-docs": "6.5.7",
88
+ "@storybook/addon-essentials": "6.5.7",
89
+ "@storybook/addon-jest": "6.5.7",
90
+ "@storybook/addon-links": "6.5.7",
91
+ "@storybook/addons": "6.5.7",
92
+ "@storybook/react": "6.5.7",
91
93
  "@svgr/rollup": "5.5.0",
92
94
  "@svgr/webpack": "5.5.0",
93
95
  "@testing-library/jest-dom": "5.14.1",
@@ -111,7 +113,7 @@
111
113
  "eslint-config-react-app": "6.0.0",
112
114
  "eslint-plugin-flowtype": "5.8.2",
113
115
  "eslint-plugin-react-hooks": "4.2.0",
114
- "eslint-plugin-storybook": "^0.5.6",
116
+ "eslint-plugin-storybook": "0.5.12",
115
117
  "gulp": "4.0.2",
116
118
  "gulp-concat": "^2.6.1",
117
119
  "husky": "^7.0.4",
@@ -132,7 +134,6 @@
132
134
  "rollup-plugin-svg": "2.0.0",
133
135
  "sass": "1.35.1",
134
136
  "sass-loader": "10.0.0",
135
- "semantic-release-slack-bot": "2.1.0",
136
137
  "size-limit": "5.0.1",
137
138
  "storybook-addon-designs": "6.2.1",
138
139
  "style-loader": "2.0.0",