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

package/lib/components/Text/Text.js

@@ -12,195 +12,371 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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); }
 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; }
 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); }
-const JumboMedium = _ref => {
+const HighlightText = _ref => {
+  let {
+    text,
+    highlight,
+    highlightClassName,
+    caseSensitiveHighlighting,
+    highlightWithBackground
+  } = _ref;
+  // Split text on highlight term, include term itself into parts, ignore case
+  const parts = text.split(new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'));
+  return /*#__PURE__*/React.createElement("span", null, parts.map(part => part.toLowerCase() === highlight.toLowerCase() ? /*#__PURE__*/React.createElement("span", {
+    className: (0, _classify.default)(_typographyModule.default.highlightText, {
+      [_typographyModule.default.bgHighlighting]: highlightWithBackground
+    }, highlightClassName)
+  }, part) : part));
+};
+const JumboMedium = _ref2 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref;
+  } = _ref2;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.jumboMedium, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.JumboMedium = JumboMedium;
-const TitleMedium = _ref2 => {
+const TitleMedium = _ref3 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref2;
+  } = _ref3;
   return /*#__PURE__*/React.createElement("h1", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.titleMedium, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.TitleMedium = TitleMedium;
-const SubTitleLarge = _ref3 => {
+const SubTitleLarge = _ref4 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref3;
+  } = _ref4;
   return /*#__PURE__*/React.createElement("h2", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleLarge, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.SubTitleLarge = SubTitleLarge;
-const SubTitleMedium = _ref4 => {
+const SubTitleMedium = _ref5 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref4;
+  } = _ref5;
   return /*#__PURE__*/React.createElement("h3", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleMedium, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.SubTitleMedium = SubTitleMedium;
-const SubTitleSmall = _ref5 => {
+const SubTitleSmall = _ref6 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref5;
+  } = _ref6;
   return /*#__PURE__*/React.createElement("h4", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleSmall, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.SubTitleSmall = SubTitleSmall;
-const SubTitleExtraSmall = _ref6 => {
+const SubTitleExtraSmall = _ref7 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref6;
+  } = _ref7;
   return /*#__PURE__*/React.createElement("h5", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.subTitleExtraSmall, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.SubTitleExtraSmall = SubTitleExtraSmall;
-const ButtonTextMedium = _ref7 => {
+const ButtonTextMedium = _ref8 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref7;
+  } = _ref8;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextMedium, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.ButtonTextMedium = ButtonTextMedium;
-const ButtonTextSmall = _ref8 => {
+const ButtonTextSmall = _ref9 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref8;
+  } = _ref9;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextSmall, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.ButtonTextSmall = ButtonTextSmall;
-const ButtonTextExtraSmall = _ref9 => {
+const ButtonTextExtraSmall = _ref10 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref9;
+  } = _ref10;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.buttonTextExtraSmall, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.ButtonTextExtraSmall = ButtonTextExtraSmall;
-const FormInputMedium = _ref10 => {
+const FormInputMedium = _ref11 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref10;
+  } = _ref11;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputMedium, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.FormInputMedium = FormInputMedium;
-const FormInputSmall = _ref11 => {
+const FormInputSmall = _ref12 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref11;
+  } = _ref12;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formInputSmall, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.FormInputSmall = FormInputSmall;
-const BodyLarge = _ref12 => {
+const BodyLarge = _ref13 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref12;
+  } = _ref13;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyLarge, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.BodyLarge = BodyLarge;
-const BodyMedium = _ref13 => {
+const BodyMedium = _ref14 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref13;
+  } = _ref14;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodyMedium, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.BodyMedium = BodyMedium;
-const BodySmall = _ref14 => {
+const BodySmall = _ref15 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref14;
+  } = _ref15;
   return /*#__PURE__*/React.createElement("p", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.bodySmall, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.BodySmall = BodySmall;
-const FormLabelMedium = _ref15 => {
+const FormLabelMedium = _ref16 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref15;
+  } = _ref16;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelMedium, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.FormLabelMedium = FormLabelMedium;
-const FormLabelSmall = _ref16 => {
+const FormLabelSmall = _ref17 => {
   let {
     color = _typography.TEXT_COLORS.primary,
     children,
     className,
+    highlightedTextClassName,
+    highlightString,
+    caseSensitiveHighlighting,
+    highlightWithBackground,
     ...props
-  } = _ref16;
+  } = _ref17;
   return /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: (0, _classify.default)(_typographyModule.default.formLabelSmall, _typographyModule.default[color], className)
-  }), children);
+  }), !!highlightString?.length && typeof children === 'string' ? /*#__PURE__*/React.createElement(HighlightText, {
+    text: children,
+    highlight: highlightString,
+    caseSensitiveHighlighting: caseSensitiveHighlighting,
+    highlightClassName: highlightedTextClassName,
+    highlightWithBackground: highlightWithBackground
+  }) : children);
 };
 exports.FormLabelSmall = FormLabelSmall;