@spaced-out/ui-design-system 0.0.40 → 0.0.41

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 (5) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/Text/Text.js +224 -48
  3. package/lib/components/Text/Text.js.flow +286 -16
  4. package/lib/styles/typography.module.css +13 -1
  5. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -2,6 +2,13 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.0.41](https://github.com/spaced-out/ui-design-system/compare/v0.0.40...v0.0.41) (2023-03-07)
6
+
7
+
8
+ ### Features
9
+
10
+ * text highlighting ([b33fbdd](https://github.com/spaced-out/ui-design-system/commit/b33fbddbb1ac4a5dd00b19061568a6d20105e228))
11
+
5
12
  ### [0.0.40](https://github.com/spaced-out/ui-design-system/compare/v0.0.39...v0.0.40) (2023-03-06)
6
13
 
7
14
 
package/lib/components/Text/Text.js CHANGED
@@ -12,195 +12,371 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
12
12
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
13
13
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
14
14
  function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
15
- const JumboMedium = _ref => {
15
+ const HighlightText = _ref => {
16
+ let {
17
+ text,
18
+ highlight,
19
+ highlightClassName,
20
+ caseSensitiveHighlighting,
21
+ highlightWithBackground
22
+ } = _ref;
23
+ // Split text on highlight term, include term itself into parts, ignore case
24
+ const parts = text.split(new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'));
25
+ return /*#__PURE__*/React.createElement("span", null, parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? /*#__PURE__*/React.createElement("span", {
26
+ className: (0, _classify.default)(_typographyModule.default.highlightText, {
27
+ [_typographyModule.default.bgHighlighting]: highlightWithBackground
28
+ }, highlightClassName)
29
+ }, part) : part));
30
+ };
31
+ const JumboMedium = _ref2 => {
16
32
  let {
17
33
  color = _typography.TEXT_COLORS.primary,
18
34
  children,
19
35
  className,
36
+ highlightedTextClassName,
37
+ highlightString,
38
+ caseSensitiveHighlighting,
39
+ highlightWithBackground,
20
40
  ...props
21
- } = _ref;
41
+ } = _ref2;
22
42
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
23
43
  className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className)
24
- }), children);
44
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
45
+ text: children,
46
+ highlight: highlightString,
47
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
48
+ highlightClassName: highlightedTextClassName,
49
+ highlightWithBackground: highlightWithBackground
50
+ }) : children);
25
51
  };
26
52
  exports.JumboMedium = JumboMedium;
27
- const TitleMedium = _ref2 => {
53
+ const TitleMedium = _ref3 => {
28
54
  let {
29
55
  color = _typography.TEXT_COLORS.primary,
30
56
  children,
31
57
  className,
58
+ highlightedTextClassName,
59
+ highlightString,
60
+ caseSensitiveHighlighting,
61
+ highlightWithBackground,
32
62
  ...props
33
- } = _ref2;
63
+ } = _ref3;
34
64
  return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
35
65
  className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className)
36
- }), children);
66
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
67
+ text: children,
68
+ highlight: highlightString,
69
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
70
+ highlightClassName: highlightedTextClassName,
71
+ highlightWithBackground: highlightWithBackground
72
+ }) : children);
37
73
  };
38
74
  exports.TitleMedium = TitleMedium;
39
- const SubTitleLarge = _ref3 => {
75
+ const SubTitleLarge = _ref4 => {
40
76
  let {
41
77
  color = _typography.TEXT_COLORS.primary,
42
78
  children,
43
79
  className,
80
+ highlightedTextClassName,
81
+ highlightString,
82
+ caseSensitiveHighlighting,
83
+ highlightWithBackground,
44
84
  ...props
45
- } = _ref3;
85
+ } = _ref4;
46
86
  return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
47
87
  className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className)
48
- }), children);
88
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
89
+ text: children,
90
+ highlight: highlightString,
91
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
92
+ highlightClassName: highlightedTextClassName,
93
+ highlightWithBackground: highlightWithBackground
94
+ }) : children);
49
95
  };
50
96
  exports.SubTitleLarge = SubTitleLarge;
51
- const SubTitleMedium = _ref4 => {
97
+ const SubTitleMedium = _ref5 => {
52
98
  let {
53
99
  color = _typography.TEXT_COLORS.primary,
54
100
  children,
55
101
  className,
102
+ highlightedTextClassName,
103
+ highlightString,
104
+ caseSensitiveHighlighting,
105
+ highlightWithBackground,
56
106
  ...props
57
- } = _ref4;
107
+ } = _ref5;
58
108
  return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
59
109
  className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className)
60
- }), children);
110
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
111
+ text: children,
112
+ highlight: highlightString,
113
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
114
+ highlightClassName: highlightedTextClassName,
115
+ highlightWithBackground: highlightWithBackground
116
+ }) : children);
61
117
  };
62
118
  exports.SubTitleMedium = SubTitleMedium;
63
- const SubTitleSmall = _ref5 => {
119
+ const SubTitleSmall = _ref6 => {
64
120
  let {
65
121
  color = _typography.TEXT_COLORS.primary,
66
122
  children,
67
123
  className,
124
+ highlightedTextClassName,
125
+ highlightString,
126
+ caseSensitiveHighlighting,
127
+ highlightWithBackground,
68
128
  ...props
69
- } = _ref5;
129
+ } = _ref6;
70
130
  return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
71
131
  className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className)
72
- }), children);
132
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
133
+ text: children,
134
+ highlight: highlightString,
135
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
136
+ highlightClassName: highlightedTextClassName,
137
+ highlightWithBackground: highlightWithBackground
138
+ }) : children);
73
139
  };
74
140
  exports.SubTitleSmall = SubTitleSmall;
75
- const SubTitleExtraSmall = _ref6 => {
141
+ const SubTitleExtraSmall = _ref7 => {
76
142
  let {
77
143
  color = _typography.TEXT_COLORS.primary,
78
144
  children,
79
145
  className,
146
+ highlightedTextClassName,
147
+ highlightString,
148
+ caseSensitiveHighlighting,
149
+ highlightWithBackground,
80
150
  ...props
81
- } = _ref6;
151
+ } = _ref7;
82
152
  return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
83
153
  className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className)
84
- }), children);
154
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
155
+ text: children,
156
+ highlight: highlightString,
157
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
158
+ highlightClassName: highlightedTextClassName,
159
+ highlightWithBackground: highlightWithBackground
160
+ }) : children);
85
161
  };
86
162
  exports.SubTitleExtraSmall = SubTitleExtraSmall;
87
- const ButtonTextMedium = _ref7 => {
163
+ const ButtonTextMedium = _ref8 => {
88
164
  let {
89
165
  color = _typography.TEXT_COLORS.primary,
90
166
  children,
91
167
  className,
168
+ highlightedTextClassName,
169
+ highlightString,
170
+ caseSensitiveHighlighting,
171
+ highlightWithBackground,
92
172
  ...props
93
- } = _ref7;
173
+ } = _ref8;
94
174
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
95
175
  className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className)
96
- }), children);
176
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
177
+ text: children,
178
+ highlight: highlightString,
179
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
180
+ highlightClassName: highlightedTextClassName,
181
+ highlightWithBackground: highlightWithBackground
182
+ }) : children);
97
183
  };
98
184
  exports.ButtonTextMedium = ButtonTextMedium;
99
- const ButtonTextSmall = _ref8 => {
185
+ const ButtonTextSmall = _ref9 => {
100
186
  let {
101
187
  color = _typography.TEXT_COLORS.primary,
102
188
  children,
103
189
  className,
190
+ highlightedTextClassName,
191
+ highlightString,
192
+ caseSensitiveHighlighting,
193
+ highlightWithBackground,
104
194
  ...props
105
- } = _ref8;
195
+ } = _ref9;
106
196
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
107
197
  className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className)
108
- }), children);
198
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
199
+ text: children,
200
+ highlight: highlightString,
201
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
202
+ highlightClassName: highlightedTextClassName,
203
+ highlightWithBackground: highlightWithBackground
204
+ }) : children);
109
205
  };
110
206
  exports.ButtonTextSmall = ButtonTextSmall;
111
- const ButtonTextExtraSmall = _ref9 => {
207
+ const ButtonTextExtraSmall = _ref10 => {
112
208
  let {
113
209
  color = _typography.TEXT_COLORS.primary,
114
210
  children,
115
211
  className,
212
+ highlightedTextClassName,
213
+ highlightString,
214
+ caseSensitiveHighlighting,
215
+ highlightWithBackground,
116
216
  ...props
117
- } = _ref9;
217
+ } = _ref10;
118
218
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
119
219
  className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className)
120
- }), children);
220
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
221
+ text: children,
222
+ highlight: highlightString,
223
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
224
+ highlightClassName: highlightedTextClassName,
225
+ highlightWithBackground: highlightWithBackground
226
+ }) : children);
121
227
  };
122
228
  exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
123
- const FormInputMedium = _ref10 => {
229
+ const FormInputMedium = _ref11 => {
124
230
  let {
125
231
  color = _typography.TEXT_COLORS.primary,
126
232
  children,
127
233
  className,
234
+ highlightedTextClassName,
235
+ highlightString,
236
+ caseSensitiveHighlighting,
237
+ highlightWithBackground,
128
238
  ...props
129
- } = _ref10;
239
+ } = _ref11;
130
240
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
131
241
  className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
132
- }), children);
242
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
243
+ text: children,
244
+ highlight: highlightString,
245
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
246
+ highlightClassName: highlightedTextClassName,
247
+ highlightWithBackground: highlightWithBackground
248
+ }) : children);
133
249
  };
134
250
  exports.FormInputMedium = FormInputMedium;
135
- const FormInputSmall = _ref11 => {
251
+ const FormInputSmall = _ref12 => {
136
252
  let {
137
253
  color = _typography.TEXT_COLORS.primary,
138
254
  children,
139
255
  className,
256
+ highlightedTextClassName,
257
+ highlightString,
258
+ caseSensitiveHighlighting,
259
+ highlightWithBackground,
140
260
  ...props
141
- } = _ref11;
261
+ } = _ref12;
142
262
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
143
263
  className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
144
- }), children);
264
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
265
+ text: children,
266
+ highlight: highlightString,
267
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
268
+ highlightClassName: highlightedTextClassName,
269
+ highlightWithBackground: highlightWithBackground
270
+ }) : children);
145
271
  };
146
272
  exports.FormInputSmall = FormInputSmall;
147
- const BodyLarge = _ref12 => {
273
+ const BodyLarge = _ref13 => {
148
274
  let {
149
275
  color = _typography.TEXT_COLORS.primary,
150
276
  children,
151
277
  className,
278
+ highlightedTextClassName,
279
+ highlightString,
280
+ caseSensitiveHighlighting,
281
+ highlightWithBackground,
152
282
  ...props
153
- } = _ref12;
283
+ } = _ref13;
154
284
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
155
285
  className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
156
- }), children);
286
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
287
+ text: children,
288
+ highlight: highlightString,
289
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
290
+ highlightClassName: highlightedTextClassName,
291
+ highlightWithBackground: highlightWithBackground
292
+ }) : children);
157
293
  };
158
294
  exports.BodyLarge = BodyLarge;
159
- const BodyMedium = _ref13 => {
295
+ const BodyMedium = _ref14 => {
160
296
  let {
161
297
  color = _typography.TEXT_COLORS.primary,
162
298
  children,
163
299
  className,
300
+ highlightedTextClassName,
301
+ highlightString,
302
+ caseSensitiveHighlighting,
303
+ highlightWithBackground,
164
304
  ...props
165
- } = _ref13;
305
+ } = _ref14;
166
306
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
167
307
  className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
168
- }), children);
308
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
309
+ text: children,
310
+ highlight: highlightString,
311
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
312
+ highlightClassName: highlightedTextClassName,
313
+ highlightWithBackground: highlightWithBackground
314
+ }) : children);
169
315
  };
170
316
  exports.BodyMedium = BodyMedium;
171
- const BodySmall = _ref14 => {
317
+ const BodySmall = _ref15 => {
172
318
  let {
173
319
  color = _typography.TEXT_COLORS.primary,
174
320
  children,
175
321
  className,
322
+ highlightedTextClassName,
323
+ highlightString,
324
+ caseSensitiveHighlighting,
325
+ highlightWithBackground,
176
326
  ...props
177
- } = _ref14;
327
+ } = _ref15;
178
328
  return /*#__PURE__*/React.createElement("p", _extends({}, props, {
179
329
  className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
180
- }), children);
330
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
331
+ text: children,
332
+ highlight: highlightString,
333
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
334
+ highlightClassName: highlightedTextClassName,
335
+ highlightWithBackground: highlightWithBackground
336
+ }) : children);
181
337
  };
182
338
  exports.BodySmall = BodySmall;
183
- const FormLabelMedium = _ref15 => {
339
+ const FormLabelMedium = _ref16 => {
184
340
  let {
185
341
  color = _typography.TEXT_COLORS.primary,
186
342
  children,
187
343
  className,
344
+ highlightedTextClassName,
345
+ highlightString,
346
+ caseSensitiveHighlighting,
347
+ highlightWithBackground,
188
348
  ...props
189
- } = _ref15;
349
+ } = _ref16;
190
350
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
191
351
  className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
192
- }), children);
352
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
353
+ text: children,
354
+ highlight: highlightString,
355
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
356
+ highlightClassName: highlightedTextClassName,
357
+ highlightWithBackground: highlightWithBackground
358
+ }) : children);
193
359
  };
194
360
  exports.FormLabelMedium = FormLabelMedium;
195
- const FormLabelSmall = _ref16 => {
361
+ const FormLabelSmall = _ref17 => {
196
362
  let {
197
363
  color = _typography.TEXT_COLORS.primary,
198
364
  children,
199
365
  className,
366
+ highlightedTextClassName,
367
+ highlightString,
368
+ caseSensitiveHighlighting,
369
+ highlightWithBackground,
200
370
  ...props
201
- } = _ref16;
371
+ } = _ref17;
202
372
  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
203
373
  className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
204
- }), children);
374
+ }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
375
+ text: children,
376
+ highlight: highlightString,
377
+ caseSensitiveHighlighting: caseSensitiveHighlighting,
378
+ highlightClassName: highlightedTextClassName,
379
+ highlightWithBackground: highlightWithBackground
380
+ }) : children);
205
381
  };
206
382
  exports.FormLabelSmall = FormLabelSmall;
package/lib/components/Text/Text.js.flow CHANGED
@@ -13,17 +13,77 @@ export type TextProps = {
13
13
  color?: ColorTypes,
14
14
  children?: React.Node,
15
15
  className?: string,
16
+ highlightedTextClassName?: string,
17
+ highlightString?: string,
18
+ caseSensitiveHighlighting?: boolean,
19
+ highlightWithBackground?: boolean,
16
20
  ...
17
21
  };
18
22
 
23
+ export type HighlightTextProps = {
24
+ text: string,
25
+ highlight: string,
26
+ highlightClassName?: string,
27
+ caseSensitiveHighlighting?: boolean,
28
+ highlightWithBackground?: boolean,
29
+ };
30
+
31
+ const HighlightText = ({
32
+ text,
33
+ highlight,
34
+ highlightClassName,
35
+ caseSensitiveHighlighting,
36
+ highlightWithBackground,
37
+ }: HighlightTextProps) => {
38
+ // Split text on highlight term, include term itself into parts, ignore case
39
+ const parts = text.split(
40
+ new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'),
41
+ );
42
+ return (
43
+ <span>
44
+ {parts.map((part) =>
45
+ part.toLowerCase() === highlight.toLowerCase() ? (
46
+ <span
47
+ className={classify(
48
+ css.highlightText,
49
+ {
50
+ [css.bgHighlighting]: highlightWithBackground,
51
+ },
52
+ highlightClassName,
53
+ )}
54
+ >
55
+ {part}
56
+ </span>
57
+ ) : (
58
+ part
59
+ ),
60
+ )}
61
+ </span>
62
+ );
63
+ };
64
+
19
65
  export const JumboMedium = ({
20
66
  color = TEXT_COLORS.primary,
21
67
  children,
22
68
  className,
69
+ highlightedTextClassName,
70
+ highlightString,
71
+ caseSensitiveHighlighting,
72
+ highlightWithBackground,
23
73
  ...props
24
74
  }: TextProps): React.Node => (
25
75
  <span {...props} className={classify(css.jumboMedium, css[color], className)}>
26
- {children}
76
+ {!!highlightString?.length && typeof children === 'string' ? (
77
+ <HighlightText
78
+ text={children}
79
+ highlight={highlightString}
80
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
81
+ highlightClassName={highlightedTextClassName}
82
+ highlightWithBackground={highlightWithBackground}
83
+ />
84
+ ) : (
85
+ children
86
+ )}
27
87
  </span>
28
88
  );
29
89
 
@@ -31,10 +91,24 @@ export const TitleMedium = ({
31
91
  color = TEXT_COLORS.primary,
32
92
  children,
33
93
  className,
94
+ highlightedTextClassName,
95
+ highlightString,
96
+ caseSensitiveHighlighting,
97
+ highlightWithBackground,
34
98
  ...props
35
99
  }: TextProps): React.Node => (
36
100
  <h1 {...props} className={classify(css.titleMedium, css[color], className)}>
37
- {children}
101
+ {!!highlightString?.length && typeof children === 'string' ? (
102
+ <HighlightText
103
+ text={children}
104
+ highlight={highlightString}
105
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
106
+ highlightClassName={highlightedTextClassName}
107
+ highlightWithBackground={highlightWithBackground}
108
+ />
109
+ ) : (
110
+ children
111
+ )}
38
112
  </h1>
39
113
  );
40
114
 
@@ -42,10 +116,24 @@ export const SubTitleLarge = ({
42
116
  color = TEXT_COLORS.primary,
43
117
  children,
44
118
  className,
119
+ highlightedTextClassName,
120
+ highlightString,
121
+ caseSensitiveHighlighting,
122
+ highlightWithBackground,
45
123
  ...props
46
124
  }: TextProps): React.Node => (
47
125
  <h2 {...props} className={classify(css.subTitleLarge, css[color], className)}>
48
- {children}
126
+ {!!highlightString?.length && typeof children === 'string' ? (
127
+ <HighlightText
128
+ text={children}
129
+ highlight={highlightString}
130
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
131
+ highlightClassName={highlightedTextClassName}
132
+ highlightWithBackground={highlightWithBackground}
133
+ />
134
+ ) : (
135
+ children
136
+ )}
49
137
  </h2>
50
138
  );
51
139
 
@@ -53,13 +141,27 @@ export const SubTitleMedium = ({
53
141
  color = TEXT_COLORS.primary,
54
142
  children,
55
143
  className,
144
+ highlightedTextClassName,
145
+ highlightString,
146
+ caseSensitiveHighlighting,
147
+ highlightWithBackground,
56
148
  ...props
57
149
  }: TextProps): React.Node => (
58
150
  <h3
59
151
  {...props}
60
152
  className={classify(css.subTitleMedium, css[color], className)}
61
153
  >
62
- {children}
154
+ {!!highlightString?.length && typeof children === 'string' ? (
155
+ <HighlightText
156
+ text={children}
157
+ highlight={highlightString}
158
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
159
+ highlightClassName={highlightedTextClassName}
160
+ highlightWithBackground={highlightWithBackground}
161
+ />
162
+ ) : (
163
+ children
164
+ )}
63
165
  </h3>
64
166
  );
65
167
 
@@ -67,10 +169,24 @@ export const SubTitleSmall = ({
67
169
  color = TEXT_COLORS.primary,
68
170
  children,
69
171
  className,
172
+ highlightedTextClassName,
173
+ highlightString,
174
+ caseSensitiveHighlighting,
175
+ highlightWithBackground,
70
176
  ...props
71
177
  }: TextProps): React.Node => (
72
178
  <h4 {...props} className={classify(css.subTitleSmall, css[color], className)}>
73
- {children}
179
+ {!!highlightString?.length && typeof children === 'string' ? (
180
+ <HighlightText
181
+ text={children}
182
+ highlight={highlightString}
183
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
184
+ highlightClassName={highlightedTextClassName}
185
+ highlightWithBackground={highlightWithBackground}
186
+ />
187
+ ) : (
188
+ children
189
+ )}
74
190
  </h4>
75
191
  );
76
192
 
@@ -78,13 +194,27 @@ export const SubTitleExtraSmall = ({
78
194
  color = TEXT_COLORS.primary,
79
195
  children,
80
196
  className,
197
+ highlightedTextClassName,
198
+ highlightString,
199
+ caseSensitiveHighlighting,
200
+ highlightWithBackground,
81
201
  ...props
82
202
  }: TextProps): React.Node => (
83
203
  <h5
84
204
  {...props}
85
205
  className={classify(css.subTitleExtraSmall, css[color], className)}
86
206
  >
87
- {children}
207
+ {!!highlightString?.length && typeof children === 'string' ? (
208
+ <HighlightText
209
+ text={children}
210
+ highlight={highlightString}
211
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
212
+ highlightClassName={highlightedTextClassName}
213
+ highlightWithBackground={highlightWithBackground}
214
+ />
215
+ ) : (
216
+ children
217
+ )}
88
218
  </h5>
89
219
  );
90
220
 
@@ -92,13 +222,27 @@ export const ButtonTextMedium = ({
92
222
  color = TEXT_COLORS.primary,
93
223
  children,
94
224
  className,
225
+ highlightedTextClassName,
226
+ highlightString,
227
+ caseSensitiveHighlighting,
228
+ highlightWithBackground,
95
229
  ...props
96
230
  }: TextProps): React.Node => (
97
231
  <span
98
232
  {...props}
99
233
  className={classify(css.buttonTextMedium, css[color], className)}
100
234
  >
101
- {children}
235
+ {!!highlightString?.length && typeof children === 'string' ? (
236
+ <HighlightText
237
+ text={children}
238
+ highlight={highlightString}
239
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
240
+ highlightClassName={highlightedTextClassName}
241
+ highlightWithBackground={highlightWithBackground}
242
+ />
243
+ ) : (
244
+ children
245
+ )}
102
246
  </span>
103
247
  );
104
248
 
@@ -106,13 +250,27 @@ export const ButtonTextSmall = ({
106
250
  color = TEXT_COLORS.primary,
107
251
  children,
108
252
  className,
253
+ highlightedTextClassName,
254
+ highlightString,
255
+ caseSensitiveHighlighting,
256
+ highlightWithBackground,
109
257
  ...props
110
258
  }: TextProps): React.Node => (
111
259
  <span
112
260
  {...props}
113
261
  className={classify(css.buttonTextSmall, css[color], className)}
114
262
  >
115
- {children}
263
+ {!!highlightString?.length && typeof children === 'string' ? (
264
+ <HighlightText
265
+ text={children}
266
+ highlight={highlightString}
267
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
268
+ highlightClassName={highlightedTextClassName}
269
+ highlightWithBackground={highlightWithBackground}
270
+ />
271
+ ) : (
272
+ children
273
+ )}
116
274
  </span>
117
275
  );
118
276
 
@@ -120,13 +278,27 @@ export const ButtonTextExtraSmall = ({
120
278
  color = TEXT_COLORS.primary,
121
279
  children,
122
280
  className,
281
+ highlightedTextClassName,
282
+ highlightString,
283
+ caseSensitiveHighlighting,
284
+ highlightWithBackground,
123
285
  ...props
124
286
  }: TextProps): React.Node => (
125
287
  <span
126
288
  {...props}
127
289
  className={classify(css.buttonTextExtraSmall, css[color], className)}
128
290
  >
129
- {children}
291
+ {!!highlightString?.length && typeof children === 'string' ? (
292
+ <HighlightText
293
+ text={children}
294
+ highlight={highlightString}
295
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
296
+ highlightClassName={highlightedTextClassName}
297
+ highlightWithBackground={highlightWithBackground}
298
+ />
299
+ ) : (
300
+ children
301
+ )}
130
302
  </span>
131
303
  );
132
304
 
@@ -134,13 +306,27 @@ export const FormInputMedium = ({
134
306
  color = TEXT_COLORS.primary,
135
307
  children,
136
308
  className,
309
+ highlightedTextClassName,
310
+ highlightString,
311
+ caseSensitiveHighlighting,
312
+ highlightWithBackground,
137
313
  ...props
138
314
  }: TextProps): React.Node => (
139
315
  <p
140
316
  {...props}
141
317
  className={classify(css.formInputMedium, css[color], className)}
142
318
  >
143
- {children}
319
+ {!!highlightString?.length && typeof children === 'string' ? (
320
+ <HighlightText
321
+ text={children}
322
+ highlight={highlightString}
323
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
324
+ highlightClassName={highlightedTextClassName}
325
+ highlightWithBackground={highlightWithBackground}
326
+ />
327
+ ) : (
328
+ children
329
+ )}
144
330
  </p>
145
331
  );
146
332
 
@@ -148,10 +334,24 @@ export const FormInputSmall = ({
148
334
  color = TEXT_COLORS.primary,
149
335
  children,
150
336
  className,
337
+ highlightedTextClassName,
338
+ highlightString,
339
+ caseSensitiveHighlighting,
340
+ highlightWithBackground,
151
341
  ...props
152
342
  }: TextProps): React.Node => (
153
343
  <p {...props} className={classify(css.formInputSmall, css[color], className)}>
154
- {children}
344
+ {!!highlightString?.length && typeof children === 'string' ? (
345
+ <HighlightText
346
+ text={children}
347
+ highlight={highlightString}
348
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
349
+ highlightClassName={highlightedTextClassName}
350
+ highlightWithBackground={highlightWithBackground}
351
+ />
352
+ ) : (
353
+ children
354
+ )}
155
355
  </p>
156
356
  );
157
357
 
@@ -159,10 +359,24 @@ export const BodyLarge = ({
159
359
  color = TEXT_COLORS.primary,
160
360
  children,
161
361
  className,
362
+ highlightedTextClassName,
363
+ highlightString,
364
+ caseSensitiveHighlighting,
365
+ highlightWithBackground,
162
366
  ...props
163
367
  }: TextProps): React.Node => (
164
368
  <p {...props} className={classify(css.bodyLarge, css[color], className)}>
165
- {children}
369
+ {!!highlightString?.length && typeof children === 'string' ? (
370
+ <HighlightText
371
+ text={children}
372
+ highlight={highlightString}
373
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
374
+ highlightClassName={highlightedTextClassName}
375
+ highlightWithBackground={highlightWithBackground}
376
+ />
377
+ ) : (
378
+ children
379
+ )}
166
380
  </p>
167
381
  );
168
382
 
@@ -170,10 +384,24 @@ export const BodyMedium = ({
170
384
  color = TEXT_COLORS.primary,
171
385
  children,
172
386
  className,
387
+ highlightedTextClassName,
388
+ highlightString,
389
+ caseSensitiveHighlighting,
390
+ highlightWithBackground,
173
391
  ...props
174
392
  }: TextProps): React.Node => (
175
393
  <p {...props} className={classify(css.bodyMedium, css[color], className)}>
176
- {children}
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
+ )}
177
405
  </p>
178
406
  );
179
407
 
@@ -181,10 +409,24 @@ export const BodySmall = ({
181
409
  color = TEXT_COLORS.primary,
182
410
  children,
183
411
  className,
412
+ highlightedTextClassName,
413
+ highlightString,
414
+ caseSensitiveHighlighting,
415
+ highlightWithBackground,
184
416
  ...props
185
417
  }: TextProps): React.Node => (
186
418
  <p {...props} className={classify(css.bodySmall, css[color], className)}>
187
- {children}
419
+ {!!highlightString?.length && typeof children === 'string' ? (
420
+ <HighlightText
421
+ text={children}
422
+ highlight={highlightString}
423
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
424
+ highlightClassName={highlightedTextClassName}
425
+ highlightWithBackground={highlightWithBackground}
426
+ />
427
+ ) : (
428
+ children
429
+ )}
188
430
  </p>
189
431
  );
190
432
 
@@ -192,13 +434,27 @@ export const FormLabelMedium = ({
192
434
  color = TEXT_COLORS.primary,
193
435
  children,
194
436
  className,
437
+ highlightedTextClassName,
438
+ highlightString,
439
+ caseSensitiveHighlighting,
440
+ highlightWithBackground,
195
441
  ...props
196
442
  }: TextProps): React.Node => (
197
443
  <span
198
444
  {...props}
199
445
  className={classify(css.formLabelMedium, css[color], className)}
200
446
  >
201
- {children}
447
+ {!!highlightString?.length && typeof children === 'string' ? (
448
+ <HighlightText
449
+ text={children}
450
+ highlight={highlightString}
451
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
452
+ highlightClassName={highlightedTextClassName}
453
+ highlightWithBackground={highlightWithBackground}
454
+ />
455
+ ) : (
456
+ children
457
+ )}
202
458
  </span>
203
459
  );
204
460
 
@@ -206,12 +462,26 @@ export const FormLabelSmall = ({
206
462
  color = TEXT_COLORS.primary,
207
463
  children,
208
464
  className,
465
+ highlightedTextClassName,
466
+ highlightString,
467
+ caseSensitiveHighlighting,
468
+ highlightWithBackground,
209
469
  ...props
210
470
  }: TextProps): React.Node => (
211
471
  <span
212
472
  {...props}
213
473
  className={classify(css.formLabelSmall, css[color], className)}
214
474
  >
215
- {children}
475
+ {!!highlightString?.length && typeof children === 'string' ? (
476
+ <HighlightText
477
+ text={children}
478
+ highlight={highlightString}
479
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
480
+ highlightClassName={highlightedTextClassName}
481
+ highlightWithBackground={highlightWithBackground}
482
+ />
483
+ ) : (
484
+ children
485
+ )}
216
486
  </span>
217
487
  );
package/lib/styles/typography.module.css CHANGED
@@ -10,7 +10,8 @@
10
10
  colorTextWarning,
11
11
  colorTextDanger,
12
12
  colorTextInversePrimary,
13
- colorTextInverseSecondary
13
+ colorTextInverseSecondary,
14
+ colorInformationLightest
14
15
  ) from 'variables/_color.css';
15
16
 
16
17
  @value (
@@ -41,6 +42,8 @@
41
42
 
42
43
  @value (size24, size18) from 'variables/_size.css';
43
44
 
45
+ @value (spaceXXSmall, spaceNone) from 'variables/_space.css';
46
+
44
47
  .baseType {
45
48
  /* Design system uses this font */
46
49
  font-family: 'Centra No 2';
@@ -231,3 +234,12 @@
231
234
  overflow: hidden;
232
235
  text-overflow: ellipsis;
233
236
  }
237
+
238
+ .highlightText {
239
+ color: colorTextInformation;
240
+ }
241
+
242
+ .bgHighlighting {
243
+ background-color: colorInformationLightest;
244
+ padding: spaceNone calc(spaceXXSmall / 4);
245
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@spaced-out/ui-design-system",
3
- "version": "0.0.40",
3
+ "version": "0.0.41",
4
4
  "main": "index.js",
5
5
  "description": "Sense UI components library",
6
6
  "author": {