@spaced-out/ui-design-system 0.1.9 → 0.1.10

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 (24) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/lib/components/Button/Button.js +2 -0
  3. package/lib/components/Button/Button.js.flow +4 -0
  4. package/lib/components/Dropdown/Dropdown.js +2 -3
  5. package/lib/components/Dropdown/Dropdown.js.flow +2 -1
  6. package/lib/components/Input/Input.js +2 -2
  7. package/lib/components/Input/Input.js.flow +2 -1
  8. package/lib/components/Menu/Menu.js +4 -3
  9. package/lib/components/Menu/Menu.js.flow +23 -19
  10. package/lib/components/SearchInput/SearchInput.js +2 -3
  11. package/lib/components/SearchInput/SearchInput.js.flow +2 -1
  12. package/lib/components/Text/Text.js +69 -51
  13. package/lib/components/Text/Text.js.flow +565 -397
  14. package/lib/components/Textarea/Textarea.js +2 -2
  15. package/lib/components/Textarea/Textarea.js.flow +2 -1
  16. package/lib/components/Toast/Toast.js +10 -6
  17. package/lib/components/Toast/Toast.js.flow +18 -10
  18. package/lib/components/Toggle/Toggle.js +4 -3
  19. package/lib/components/Toggle/Toggle.js.flow +69 -62
  20. package/lib/components/Truncate/Truncate.js +10 -7
  21. package/lib/components/Truncate/Truncate.js.flow +49 -37
  22. package/lib/components/Typeahead/Typeahead.js +2 -3
  23. package/lib/components/Typeahead/Typeahead.js.flow +2 -1
  24. package/package.json +1 -1
package/lib/components/Text/Text.js.flow CHANGED
@@ -29,13 +29,14 @@ export type HighlightTextProps = {
29
29
  highlightWithBackground?: boolean,
30
30
  };
31
31
 
32
- const HighlightText = ({
32
+ const HighlightText: React$AbstractComponent<HighlightTextProps, HTMLSpanElement> =
33
+ React.forwardRef<HighlightTextProps, HTMLSpanElement>( ({
33
34
  text,
34
35
  highlight,
35
36
  highlightClassName,
36
37
  caseSensitiveHighlighting,
37
38
  highlightWithBackground,
38
- }: HighlightTextProps) => {
39
+ }: HighlightTextProps, ref) => {
39
40
  // Split text on highlight term, include term itself into parts, ignore case
40
41
  let highlights = '';
41
42
  if (Array.isArray(highlight)) {
@@ -49,7 +50,7 @@ const HighlightText = ({
49
50
  .filter((part) => part !== '');
50
51
 
51
52
  return (
52
- <span>
53
+ <span ref={ref}>
53
54
  {parts.map((part, idx) =>
54
55
  highlights.toLowerCase().includes(escapeRegExp(part).toLowerCase()) ? (
55
56
  <span
@@ -71,428 +72,595 @@ const HighlightText = ({
71
72
  )}
72
73
  </span>
73
74
  );
74
- };
75
+ }
76
+ )
75
77
 
76
- export const JumboMedium = ({
77
- color = TEXT_COLORS.primary,
78
- children,
79
- className,
80
- highlightedTextClassName,
81
- highlightString,
82
- caseSensitiveHighlighting,
83
- highlightWithBackground,
84
- ...props
85
- }: TextProps): React.Node => (
86
- <span {...props} className={classify(css.jumboMedium, css[color], className)}>
87
- {!!highlightString?.length && typeof children === 'string' ? (
88
- <HighlightText
89
- text={children}
90
- highlight={highlightString}
91
- caseSensitiveHighlighting={caseSensitiveHighlighting}
92
- highlightClassName={highlightedTextClassName}
93
- highlightWithBackground={highlightWithBackground}
94
- />
95
- ) : (
96
- children
97
- )}
98
- </span>
99
- );
78
+ export const JumboMedium: React$AbstractComponent<TextProps, HTMLSpanElement> =
79
+ React.forwardRef<TextProps, HTMLSpanElement>(
80
+ (
81
+ {
82
+ color = TEXT_COLORS.primary,
83
+ children,
84
+ className,
85
+ highlightedTextClassName,
86
+ highlightString,
87
+ caseSensitiveHighlighting,
88
+ highlightWithBackground,
89
+ ...props
90
+ }: TextProps,
91
+ ref,
92
+ ): React.Node => (
93
+ <span
94
+ {...props}
95
+ className={classify(css.jumboMedium, css[color], className)}
96
+ ref={ref}
97
+ >
98
+ {!!highlightString?.length && typeof children === 'string' ? (
99
+ <HighlightText
100
+ text={children}
101
+ highlight={highlightString}
102
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
103
+ highlightClassName={highlightedTextClassName}
104
+ highlightWithBackground={highlightWithBackground}
105
+ />
106
+ ) : (
107
+ children
108
+ )}
109
+ </span>
110
+ ),
111
+ );
100
112
 
101
- export const TitleMedium = ({
102
- color = TEXT_COLORS.primary,
103
- children,
104
- className,
105
- highlightedTextClassName,
106
- highlightString,
107
- caseSensitiveHighlighting,
108
- highlightWithBackground,
109
- ...props
110
- }: TextProps): React.Node => (
111
- <h1 {...props} className={classify(css.titleMedium, css[color], className)}>
112
- {!!highlightString?.length && typeof children === 'string' ? (
113
- <HighlightText
114
- text={children}
115
- highlight={highlightString}
116
- caseSensitiveHighlighting={caseSensitiveHighlighting}
117
- highlightClassName={highlightedTextClassName}
118
- highlightWithBackground={highlightWithBackground}
119
- />
120
- ) : (
121
- children
122
- )}
123
- </h1>
113
+ export const TitleMedium: React$AbstractComponent<
114
+ TextProps,
115
+ HTMLHeadingElement,
116
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
117
+ (
118
+ {
119
+ color = TEXT_COLORS.primary,
120
+ children,
121
+ className,
122
+ highlightedTextClassName,
123
+ highlightString,
124
+ caseSensitiveHighlighting,
125
+ highlightWithBackground,
126
+ ...props
127
+ }: TextProps,
128
+ ref,
129
+ ): React.Node => (
130
+ <h1
131
+ {...props}
132
+ className={classify(css.titleMedium, css[color], className)}
133
+ ref={ref}
134
+ >
135
+ {!!highlightString?.length && typeof children === 'string' ? (
136
+ <HighlightText
137
+ text={children}
138
+ highlight={highlightString}
139
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
140
+ highlightClassName={highlightedTextClassName}
141
+ highlightWithBackground={highlightWithBackground}
142
+ />
143
+ ) : (
144
+ children
145
+ )}
146
+ </h1>
147
+ ),
124
148
  );
125
149
 
126
- export const SubTitleLarge = ({
127
- color = TEXT_COLORS.primary,
128
- children,
129
- className,
130
- highlightedTextClassName,
131
- highlightString,
132
- caseSensitiveHighlighting,
133
- highlightWithBackground,
134
- ...props
135
- }: TextProps): React.Node => (
136
- <h2 {...props} className={classify(css.subTitleLarge, css[color], className)}>
137
- {!!highlightString?.length && typeof children === 'string' ? (
138
- <HighlightText
139
- text={children}
140
- highlight={highlightString}
141
- caseSensitiveHighlighting={caseSensitiveHighlighting}
142
- highlightClassName={highlightedTextClassName}
143
- highlightWithBackground={highlightWithBackground}
144
- />
145
- ) : (
146
- children
147
- )}
148
- </h2>
150
+ export const SubTitleLarge: React$AbstractComponent<
151
+ TextProps,
152
+ HTMLHeadingElement,
153
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
154
+ (
155
+ {
156
+ color = TEXT_COLORS.primary,
157
+ children,
158
+ className,
159
+ highlightedTextClassName,
160
+ highlightString,
161
+ caseSensitiveHighlighting,
162
+ highlightWithBackground,
163
+ ...props
164
+ }: TextProps,
165
+ ref,
166
+ ): React.Node => (
167
+ <h2
168
+ {...props}
169
+ className={classify(css.subTitleLarge, css[color], className)}
170
+ ref={ref}
171
+ >
172
+ {!!highlightString?.length && typeof children === 'string' ? (
173
+ <HighlightText
174
+ text={children}
175
+ highlight={highlightString}
176
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
177
+ highlightClassName={highlightedTextClassName}
178
+ highlightWithBackground={highlightWithBackground}
179
+ />
180
+ ) : (
181
+ children
182
+ )}
183
+ </h2>
184
+ ),
149
185
  );
150
186
 
151
- export const SubTitleMedium = ({
152
- color = TEXT_COLORS.primary,
153
- children,
154
- className,
155
- highlightedTextClassName,
156
- highlightString,
157
- caseSensitiveHighlighting,
158
- highlightWithBackground,
159
- ...props
160
- }: TextProps): React.Node => (
161
- <h3
162
- {...props}
163
- className={classify(css.subTitleMedium, css[color], className)}
164
- >
165
- {!!highlightString?.length && typeof children === 'string' ? (
166
- <HighlightText
167
- text={children}
168
- highlight={highlightString}
169
- caseSensitiveHighlighting={caseSensitiveHighlighting}
170
- highlightClassName={highlightedTextClassName}
171
- highlightWithBackground={highlightWithBackground}
172
- />
173
- ) : (
174
- children
175
- )}
176
- </h3>
187
+ export const SubTitleMedium: React$AbstractComponent<
188
+ TextProps,
189
+ HTMLHeadingElement,
190
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
191
+ (
192
+ {
193
+ color = TEXT_COLORS.primary,
194
+ children,
195
+ className,
196
+ highlightedTextClassName,
197
+ highlightString,
198
+ caseSensitiveHighlighting,
199
+ highlightWithBackground,
200
+ ...props
201
+ }: TextProps,
202
+ ref,
203
+ ): React.Node => (
204
+ <h3
205
+ {...props}
206
+ className={classify(css.subTitleMedium, css[color], className)}
207
+ ref={ref}
208
+ >
209
+ {!!highlightString?.length && typeof children === 'string' ? (
210
+ <HighlightText
211
+ text={children}
212
+ highlight={highlightString}
213
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
214
+ highlightClassName={highlightedTextClassName}
215
+ highlightWithBackground={highlightWithBackground}
216
+ />
217
+ ) : (
218
+ children
219
+ )}
220
+ </h3>
221
+ ),
177
222
  );
178
223
 
179
- export const SubTitleSmall = ({
180
- color = TEXT_COLORS.primary,
181
- children,
182
- className,
183
- highlightedTextClassName,
184
- highlightString,
185
- caseSensitiveHighlighting,
186
- highlightWithBackground,
187
- ...props
188
- }: TextProps): React.Node => (
189
- <h4 {...props} className={classify(css.subTitleSmall, css[color], className)}>
190
- {!!highlightString?.length && typeof children === 'string' ? (
191
- <HighlightText
192
- text={children}
193
- highlight={highlightString}
194
- caseSensitiveHighlighting={caseSensitiveHighlighting}
195
- highlightClassName={highlightedTextClassName}
196
- highlightWithBackground={highlightWithBackground}
197
- />
198
- ) : (
199
- children
200
- )}
201
- </h4>
224
+ export const SubTitleSmall: React$AbstractComponent<
225
+ TextProps,
226
+ HTMLHeadingElement,
227
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
228
+ (
229
+ {
230
+ color = TEXT_COLORS.primary,
231
+ children,
232
+ className,
233
+ highlightedTextClassName,
234
+ highlightString,
235
+ caseSensitiveHighlighting,
236
+ highlightWithBackground,
237
+ ...props
238
+ }: TextProps,
239
+ ref,
240
+ ): React.Node => (
241
+ <h4
242
+ {...props}
243
+ className={classify(css.subTitleSmall, css[color], className)}
244
+ ref={ref}
245
+ >
246
+ {!!highlightString?.length && typeof children === 'string' ? (
247
+ <HighlightText
248
+ text={children}
249
+ highlight={highlightString}
250
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
251
+ highlightClassName={highlightedTextClassName}
252
+ highlightWithBackground={highlightWithBackground}
253
+ />
254
+ ) : (
255
+ children
256
+ )}
257
+ </h4>
258
+ ),
202
259
  );
203
260
 
204
- export const SubTitleExtraSmall = ({
205
- color = TEXT_COLORS.primary,
206
- children,
207
- className,
208
- highlightedTextClassName,
209
- highlightString,
210
- caseSensitiveHighlighting,
211
- highlightWithBackground,
212
- ...props
213
- }: TextProps): React.Node => (
214
- <h5
215
- {...props}
216
- className={classify(css.subTitleExtraSmall, css[color], className)}
217
- >
218
- {!!highlightString?.length && typeof children === 'string' ? (
219
- <HighlightText
220
- text={children}
221
- highlight={highlightString}
222
- caseSensitiveHighlighting={caseSensitiveHighlighting}
223
- highlightClassName={highlightedTextClassName}
224
- highlightWithBackground={highlightWithBackground}
225
- />
226
- ) : (
227
- children
228
- )}
229
- </h5>
261
+ export const SubTitleExtraSmall: React$AbstractComponent<
262
+ TextProps,
263
+ HTMLHeadingElement,
264
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
265
+ (
266
+ {
267
+ color = TEXT_COLORS.primary,
268
+ children,
269
+ className,
270
+ highlightedTextClassName,
271
+ highlightString,
272
+ caseSensitiveHighlighting,
273
+ highlightWithBackground,
274
+ ...props
275
+ }: TextProps,
276
+ ref,
277
+ ): React.Node => (
278
+ <h5
279
+ {...props}
280
+ className={classify(css.subTitleExtraSmall, css[color], className)}
281
+ ref={ref}
282
+ >
283
+ {!!highlightString?.length && typeof children === 'string' ? (
284
+ <HighlightText
285
+ text={children}
286
+ highlight={highlightString}
287
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
288
+ highlightClassName={highlightedTextClassName}
289
+ highlightWithBackground={highlightWithBackground}
290
+ />
291
+ ) : (
292
+ children
293
+ )}
294
+ </h5>
295
+ ),
230
296
  );
231
297
 
232
- export const ButtonTextMedium = ({
233
- color = TEXT_COLORS.primary,
234
- children,
235
- className,
236
- highlightedTextClassName,
237
- highlightString,
238
- caseSensitiveHighlighting,
239
- highlightWithBackground,
240
- ...props
241
- }: TextProps): React.Node => (
242
- <span
243
- {...props}
244
- className={classify(css.buttonTextMedium, css[color], className)}
245
- >
246
- {!!highlightString?.length && typeof children === 'string' ? (
247
- <HighlightText
248
- text={children}
249
- highlight={highlightString}
250
- caseSensitiveHighlighting={caseSensitiveHighlighting}
251
- highlightClassName={highlightedTextClassName}
252
- highlightWithBackground={highlightWithBackground}
253
- />
254
- ) : (
255
- children
256
- )}
257
- </span>
298
+ export const ButtonTextMedium: React$AbstractComponent<
299
+ TextProps,
300
+ HTMLSpanElement,
301
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
302
+ (
303
+ {
304
+ color = TEXT_COLORS.primary,
305
+ children,
306
+ className,
307
+ highlightedTextClassName,
308
+ highlightString,
309
+ caseSensitiveHighlighting,
310
+ highlightWithBackground,
311
+ ...props
312
+ }: TextProps,
313
+ ref,
314
+ ): React.Node => (
315
+ <span
316
+ {...props}
317
+ className={classify(css.buttonTextMedium, css[color], className)}
318
+ ref={ref}
319
+ >
320
+ {!!highlightString?.length && typeof children === 'string' ? (
321
+ <HighlightText
322
+ text={children}
323
+ highlight={highlightString}
324
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
325
+ highlightClassName={highlightedTextClassName}
326
+ highlightWithBackground={highlightWithBackground}
327
+ />
328
+ ) : (
329
+ children
330
+ )}
331
+ </span>
332
+ ),
258
333
  );
259
334
 
260
- export const ButtonTextSmall = ({
261
- color = TEXT_COLORS.primary,
262
- children,
263
- className,
264
- highlightedTextClassName,
265
- highlightString,
266
- caseSensitiveHighlighting,
267
- highlightWithBackground,
268
- ...props
269
- }: TextProps): React.Node => (
270
- <span
271
- {...props}
272
- className={classify(css.buttonTextSmall, css[color], className)}
273
- >
274
- {!!highlightString?.length && typeof children === 'string' ? (
275
- <HighlightText
276
- text={children}
277
- highlight={highlightString}
278
- caseSensitiveHighlighting={caseSensitiveHighlighting}
279
- highlightClassName={highlightedTextClassName}
280
- highlightWithBackground={highlightWithBackground}
281
- />
282
- ) : (
283
- children
284
- )}
285
- </span>
335
+ export const ButtonTextSmall: React$AbstractComponent<
336
+ TextProps,
337
+ HTMLSpanElement,
338
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
339
+ (
340
+ {
341
+ color = TEXT_COLORS.primary,
342
+ children,
343
+ className,
344
+ highlightedTextClassName,
345
+ highlightString,
346
+ caseSensitiveHighlighting,
347
+ highlightWithBackground,
348
+ ...props
349
+ }: TextProps,
350
+ ref,
351
+ ): React.Node => (
352
+ <span
353
+ {...props}
354
+ className={classify(css.buttonTextSmall, css[color], className)}
355
+ ref={ref}
356
+ >
357
+ {!!highlightString?.length && typeof children === 'string' ? (
358
+ <HighlightText
359
+ text={children}
360
+ highlight={highlightString}
361
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
362
+ highlightClassName={highlightedTextClassName}
363
+ highlightWithBackground={highlightWithBackground}
364
+ />
365
+ ) : (
366
+ children
367
+ )}
368
+ </span>
369
+ ),
286
370
  );
287
371
 
288
- export const ButtonTextExtraSmall = ({
289
- color = TEXT_COLORS.primary,
290
- children,
291
- className,
292
- highlightedTextClassName,
293
- highlightString,
294
- caseSensitiveHighlighting,
295
- highlightWithBackground,
296
- ...props
297
- }: TextProps): React.Node => (
298
- <span
299
- {...props}
300
- className={classify(css.buttonTextExtraSmall, css[color], className)}
301
- >
302
- {!!highlightString?.length && typeof children === 'string' ? (
303
- <HighlightText
304
- text={children}
305
- highlight={highlightString}
306
- caseSensitiveHighlighting={caseSensitiveHighlighting}
307
- highlightClassName={highlightedTextClassName}
308
- highlightWithBackground={highlightWithBackground}
309
- />
310
- ) : (
311
- children
312
- )}
313
- </span>
372
+ export const ButtonTextExtraSmall: React$AbstractComponent<
373
+ TextProps,
374
+ HTMLSpanElement,
375
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
376
+ (
377
+ {
378
+ color = TEXT_COLORS.primary,
379
+ children,
380
+ className,
381
+ highlightedTextClassName,
382
+ highlightString,
383
+ caseSensitiveHighlighting,
384
+ highlightWithBackground,
385
+ ...props
386
+ }: TextProps,
387
+ ref,
388
+ ): React.Node => (
389
+ <span
390
+ {...props}
391
+ className={classify(css.buttonTextExtraSmall, css[color], className)}
392
+ ref={ref}
393
+ >
394
+ {!!highlightString?.length && typeof children === 'string' ? (
395
+ <HighlightText
396
+ text={children}
397
+ highlight={highlightString}
398
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
399
+ highlightClassName={highlightedTextClassName}
400
+ highlightWithBackground={highlightWithBackground}
401
+ />
402
+ ) : (
403
+ children
404
+ )}
405
+ </span>
406
+ ),
314
407
  );
315
408
 
316
- export const FormInputMedium = ({
317
- color = TEXT_COLORS.primary,
318
- children,
319
- className,
320
- highlightedTextClassName,
321
- highlightString,
322
- caseSensitiveHighlighting,
323
- highlightWithBackground,
324
- ...props
325
- }: TextProps): React.Node => (
326
- <p
327
- {...props}
328
- className={classify(css.formInputMedium, css[color], className)}
329
- >
330
- {!!highlightString?.length && typeof children === 'string' ? (
331
- <HighlightText
332
- text={children}
333
- highlight={highlightString}
334
- caseSensitiveHighlighting={caseSensitiveHighlighting}
335
- highlightClassName={highlightedTextClassName}
336
- highlightWithBackground={highlightWithBackground}
337
- />
338
- ) : (
339
- children
340
- )}
341
- </p>
409
+ export const FormInputMedium: React$AbstractComponent<
410
+ TextProps,
411
+ HTMLParagraphElement,
412
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
413
+ (
414
+ {
415
+ color = TEXT_COLORS.primary,
416
+ children,
417
+ className,
418
+ highlightedTextClassName,
419
+ highlightString,
420
+ caseSensitiveHighlighting,
421
+ highlightWithBackground,
422
+ ...props
423
+ }: TextProps,
424
+ ref,
425
+ ): React.Node => (
426
+ <p
427
+ {...props}
428
+ className={classify(css.formInputMedium, css[color], className)}
429
+ ref={ref}
430
+ >
431
+ {!!highlightString?.length && typeof children === 'string' ? (
432
+ <HighlightText
433
+ text={children}
434
+ highlight={highlightString}
435
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
436
+ highlightClassName={highlightedTextClassName}
437
+ highlightWithBackground={highlightWithBackground}
438
+ />
439
+ ) : (
440
+ children
441
+ )}
442
+ </p>
443
+ ),
342
444
  );
343
445
 
344
- export const FormInputSmall = ({
345
- color = TEXT_COLORS.primary,
346
- children,
347
- className,
348
- highlightedTextClassName,
349
- highlightString,
350
- caseSensitiveHighlighting,
351
- highlightWithBackground,
352
- ...props
353
- }: TextProps): React.Node => (
354
- <p {...props} className={classify(css.formInputSmall, css[color], className)}>
355
- {!!highlightString?.length && typeof children === 'string' ? (
356
- <HighlightText
357
- text={children}
358
- highlight={highlightString}
359
- caseSensitiveHighlighting={caseSensitiveHighlighting}
360
- highlightClassName={highlightedTextClassName}
361
- highlightWithBackground={highlightWithBackground}
362
- />
363
- ) : (
364
- children
365
- )}
366
- </p>
446
+ export const FormInputSmall: React$AbstractComponent<
447
+ TextProps,
448
+ HTMLParagraphElement,
449
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
450
+ (
451
+ {
452
+ color = TEXT_COLORS.primary,
453
+ children,
454
+ className,
455
+ highlightedTextClassName,
456
+ highlightString,
457
+ caseSensitiveHighlighting,
458
+ highlightWithBackground,
459
+ ...props
460
+ }: TextProps,
461
+ ref,
462
+ ): React.Node => (
463
+ <p
464
+ {...props}
465
+ className={classify(css.formInputSmall, css[color], className)}
466
+ ref={ref}
467
+ >
468
+ {!!highlightString?.length && typeof children === 'string' ? (
469
+ <HighlightText
470
+ text={children}
471
+ highlight={highlightString}
472
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
473
+ highlightClassName={highlightedTextClassName}
474
+ highlightWithBackground={highlightWithBackground}
475
+ />
476
+ ) : (
477
+ children
478
+ )}
479
+ </p>
480
+ ),
367
481
  );
368
482
 
369
- export const BodyLarge = ({
370
- color = TEXT_COLORS.primary,
371
- children,
372
- className,
373
- highlightedTextClassName,
374
- highlightString,
375
- caseSensitiveHighlighting,
376
- highlightWithBackground,
377
- ...props
378
- }: TextProps): React.Node => (
379
- <p {...props} className={classify(css.bodyLarge, css[color], className)}>
380
- {!!highlightString?.length && typeof children === 'string' ? (
381
- <HighlightText
382
- text={children}
383
- highlight={highlightString}
384
- caseSensitiveHighlighting={caseSensitiveHighlighting}
385
- highlightClassName={highlightedTextClassName}
386
- highlightWithBackground={highlightWithBackground}
387
- />
388
- ) : (
389
- children
390
- )}
391
- </p>
483
+ export const BodyLarge: React$AbstractComponent<
484
+ TextProps,
485
+ HTMLParagraphElement,
486
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
487
+ (
488
+ {
489
+ color = TEXT_COLORS.primary,
490
+ children,
491
+ className,
492
+ highlightedTextClassName,
493
+ highlightString,
494
+ caseSensitiveHighlighting,
495
+ highlightWithBackground,
496
+ ...props
497
+ }: TextProps,
498
+ ref,
499
+ ): React.Node => (
500
+ <p
501
+ {...props}
502
+ className={classify(css.bodyLarge, css[color], className)}
503
+ ref={ref}
504
+ >
505
+ {!!highlightString?.length && typeof children === 'string' ? (
506
+ <HighlightText
507
+ text={children}
508
+ highlight={highlightString}
509
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
510
+ highlightClassName={highlightedTextClassName}
511
+ highlightWithBackground={highlightWithBackground}
512
+ />
513
+ ) : (
514
+ children
515
+ )}
516
+ </p>
517
+ ),
392
518
  );
393
519
 
394
- export const BodyMedium = ({
395
- color = TEXT_COLORS.primary,
396
- children,
397
- className,
398
- highlightedTextClassName,
399
- highlightString,
400
- caseSensitiveHighlighting,
401
- highlightWithBackground,
402
- ...props
403
- }: TextProps): React.Node => (
404
- <p {...props} className={classify(css.bodyMedium, css[color], className)}>
405
- {!!highlightString?.length && typeof children === 'string' ? (
406
- <HighlightText
407
- text={children}
408
- highlight={highlightString}
409
- caseSensitiveHighlighting={caseSensitiveHighlighting}
410
- highlightClassName={highlightedTextClassName}
411
- highlightWithBackground={highlightWithBackground}
412
- />
413
- ) : (
414
- children
415
- )}
416
- </p>
520
+ export const BodyMedium: React$AbstractComponent<
521
+ TextProps,
522
+ HTMLParagraphElement,
523
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
524
+ (
525
+ {
526
+ color = TEXT_COLORS.primary,
527
+ children,
528
+ className,
529
+ highlightedTextClassName,
530
+ highlightString,
531
+ caseSensitiveHighlighting,
532
+ highlightWithBackground,
533
+ ...props
534
+ }: TextProps,
535
+ ref,
536
+ ): React.Node => (
537
+ <p
538
+ {...props}
539
+ className={classify(css.bodyMedium, css[color], className)}
540
+ ref={ref}
541
+ >
542
+ {!!highlightString?.length && typeof children === 'string' ? (
543
+ <HighlightText
544
+ text={children}
545
+ highlight={highlightString}
546
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
547
+ highlightClassName={highlightedTextClassName}
548
+ highlightWithBackground={highlightWithBackground}
549
+ />
550
+ ) : (
551
+ children
552
+ )}
553
+ </p>
554
+ ),
417
555
  );
418
556
 
419
- export const BodySmall = ({
420
- color = TEXT_COLORS.primary,
421
- children,
422
- className,
423
- highlightedTextClassName,
424
- highlightString,
425
- caseSensitiveHighlighting,
426
- highlightWithBackground,
427
- ...props
428
- }: TextProps): React.Node => (
429
- <p {...props} className={classify(css.bodySmall, css[color], className)}>
430
- {!!highlightString?.length && typeof children === 'string' ? (
431
- <HighlightText
432
- text={children}
433
- highlight={highlightString}
434
- caseSensitiveHighlighting={caseSensitiveHighlighting}
435
- highlightClassName={highlightedTextClassName}
436
- highlightWithBackground={highlightWithBackground}
437
- />
438
- ) : (
439
- children
440
- )}
441
- </p>
557
+ export const BodySmall: React$AbstractComponent<
558
+ TextProps,
559
+ HTMLParagraphElement,
560
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
561
+ (
562
+ {
563
+ color = TEXT_COLORS.primary,
564
+ children,
565
+ className,
566
+ highlightedTextClassName,
567
+ highlightString,
568
+ caseSensitiveHighlighting,
569
+ highlightWithBackground,
570
+ ...props
571
+ }: TextProps,
572
+ ref,
573
+ ): React.Node => (
574
+ <p
575
+ {...props}
576
+ className={classify(css.bodySmall, css[color], className)}
577
+ ref={ref}
578
+ >
579
+ {!!highlightString?.length && typeof children === 'string' ? (
580
+ <HighlightText
581
+ text={children}
582
+ highlight={highlightString}
583
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
584
+ highlightClassName={highlightedTextClassName}
585
+ highlightWithBackground={highlightWithBackground}
586
+ />
587
+ ) : (
588
+ children
589
+ )}
590
+ </p>
591
+ ),
442
592
  );
443
593
 
444
- export const FormLabelMedium = ({
445
- color = TEXT_COLORS.primary,
446
- children,
447
- className,
448
- highlightedTextClassName,
449
- highlightString,
450
- caseSensitiveHighlighting,
451
- highlightWithBackground,
452
- ...props
453
- }: TextProps): React.Node => (
454
- <span
455
- {...props}
456
- className={classify(css.formLabelMedium, css[color], className)}
457
- >
458
- {!!highlightString?.length && typeof children === 'string' ? (
459
- <HighlightText
460
- text={children}
461
- highlight={highlightString}
462
- caseSensitiveHighlighting={caseSensitiveHighlighting}
463
- highlightClassName={highlightedTextClassName}
464
- highlightWithBackground={highlightWithBackground}
465
- />
466
- ) : (
467
- children
468
- )}
469
- </span>
594
+ export const FormLabelMedium: React$AbstractComponent<
595
+ TextProps,
596
+ HTMLSpanElement,
597
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
598
+ (
599
+ {
600
+ color = TEXT_COLORS.primary,
601
+ children,
602
+ className,
603
+ highlightedTextClassName,
604
+ highlightString,
605
+ caseSensitiveHighlighting,
606
+ highlightWithBackground,
607
+ ...props
608
+ }: TextProps,
609
+ ref,
610
+ ): React.Node => (
611
+ <span
612
+ {...props}
613
+ className={classify(css.formLabelMedium, css[color], className)}
614
+ ref={ref}
615
+ >
616
+ {!!highlightString?.length && typeof children === 'string' ? (
617
+ <HighlightText
618
+ text={children}
619
+ highlight={highlightString}
620
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
621
+ highlightClassName={highlightedTextClassName}
622
+ highlightWithBackground={highlightWithBackground}
623
+ />
624
+ ) : (
625
+ children
626
+ )}
627
+ </span>
628
+ ),
470
629
  );
471
630
 
472
- export const FormLabelSmall = ({
473
- color = TEXT_COLORS.primary,
474
- children,
475
- className,
476
- highlightedTextClassName,
477
- highlightString,
478
- caseSensitiveHighlighting,
479
- highlightWithBackground,
480
- ...props
481
- }: TextProps): React.Node => (
482
- <span
483
- {...props}
484
- className={classify(css.formLabelSmall, css[color], className)}
485
- >
486
- {!!highlightString?.length && typeof children === 'string' ? (
487
- <HighlightText
488
- text={children}
489
- highlight={highlightString}
490
- caseSensitiveHighlighting={caseSensitiveHighlighting}
491
- highlightClassName={highlightedTextClassName}
492
- highlightWithBackground={highlightWithBackground}
493
- />
494
- ) : (
495
- children
496
- )}
497
- </span>
631
+ export const FormLabelSmall: React$AbstractComponent<
632
+ TextProps,
633
+ HTMLSpanElement,
634
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
635
+ (
636
+ {
637
+ color = TEXT_COLORS.primary,
638
+ children,
639
+ className,
640
+ highlightedTextClassName,
641
+ highlightString,
642
+ caseSensitiveHighlighting,
643
+ highlightWithBackground,
644
+ ...props
645
+ }: TextProps,
646
+ ref,
647
+ ): React.Node => (
648
+ <span
649
+ {...props}
650
+ className={classify(css.formLabelSmall, css[color], className)}
651
+ ref={ref}
652
+ >
653
+ {!!highlightString?.length && typeof children === 'string' ? (
654
+ <HighlightText
655
+ text={children}
656
+ highlight={highlightString}
657
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
658
+ highlightClassName={highlightedTextClassName}
659
+ highlightWithBackground={highlightWithBackground}
660
+ />
661
+ ) : (
662
+ children
663
+ )}
664
+ </span>
665
+ ),
498
666
  );