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

package/lib/components/Text/Text.js.flow

@@ -13,17 +13,77 @@ export type TextProps = {
   color?: ColorTypes,
   children?: React.Node,
   className?: string,
+  highlightedTextClassName?: string,
+  highlightString?: string,
+  caseSensitiveHighlighting?: boolean,
+  highlightWithBackground?: boolean,
   ...
 };
 
+export type HighlightTextProps = {
+  text: string,
+  highlight: string,
+  highlightClassName?: string,
+  caseSensitiveHighlighting?: boolean,
+  highlightWithBackground?: boolean,
+};
+
+const HighlightText = ({
+  text,
+  highlight,
+  highlightClassName,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
+}: HighlightTextProps) => {
+  // Split text on highlight term, include term itself into parts, ignore case
+  const parts = text.split(
+    new RegExp(`(${highlight})`, caseSensitiveHighlighting ? '' : 'gi'),
+  );
+  return (
+    <span>
+      {parts.map((part) =>
+        part.toLowerCase() === highlight.toLowerCase() ? (
+          <span
+            className={classify(
+              css.highlightText,
+              {
+                [css.bgHighlighting]: highlightWithBackground,
+              },
+              highlightClassName,
+            )}
+          >
+            {part}
+          </span>
+        ) : (
+          part
+        ),
+      )}
+    </span>
+  );
+};
+
 export const JumboMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <span {...props} className={classify(css.jumboMedium, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </span>
 );
 
@@ -31,10 +91,24 @@ export const TitleMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <h1 {...props} className={classify(css.titleMedium, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </h1>
 );
 
@@ -42,10 +116,24 @@ export const SubTitleLarge = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <h2 {...props} className={classify(css.subTitleLarge, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </h2>
 );
 
@@ -53,13 +141,27 @@ export const SubTitleMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <h3
     {...props}
     className={classify(css.subTitleMedium, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </h3>
 );
 
@@ -67,10 +169,24 @@ export const SubTitleSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <h4 {...props} className={classify(css.subTitleSmall, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </h4>
 );
 
@@ -78,13 +194,27 @@ export const SubTitleExtraSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <h5
     {...props}
     className={classify(css.subTitleExtraSmall, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </h5>
 );
 
@@ -92,13 +222,27 @@ export const ButtonTextMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <span
     {...props}
     className={classify(css.buttonTextMedium, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </span>
 );
 
@@ -106,13 +250,27 @@ export const ButtonTextSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <span
     {...props}
     className={classify(css.buttonTextSmall, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </span>
 );
 
@@ -120,13 +278,27 @@ export const ButtonTextExtraSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <span
     {...props}
     className={classify(css.buttonTextExtraSmall, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </span>
 );
 
@@ -134,13 +306,27 @@ export const FormInputMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <p
     {...props}
     className={classify(css.formInputMedium, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </p>
 );
 
@@ -148,10 +334,24 @@ export const FormInputSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <p {...props} className={classify(css.formInputSmall, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </p>
 );
 
@@ -159,10 +359,24 @@ export const BodyLarge = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <p {...props} className={classify(css.bodyLarge, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </p>
 );
 
@@ -170,10 +384,24 @@ export const BodyMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <p {...props} className={classify(css.bodyMedium, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </p>
 );
 
@@ -181,10 +409,24 @@ export const BodySmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <p {...props} className={classify(css.bodySmall, css[color], className)}>
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </p>
 );
 
@@ -192,13 +434,27 @@ export const FormLabelMedium = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <span
     {...props}
     className={classify(css.formLabelMedium, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </span>
 );
 
@@ -206,12 +462,26 @@ export const FormLabelSmall = ({
   color = TEXT_COLORS.primary,
   children,
   className,
+  highlightedTextClassName,
+  highlightString,
+  caseSensitiveHighlighting,
+  highlightWithBackground,
   ...props
 }: TextProps): React.Node => (
   <span
     {...props}
     className={classify(css.formLabelSmall, css[color], className)}
   >
-    {children}
+    {!!highlightString?.length && typeof children === 'string' ? (
+      <HighlightText
+        text={children}
+        highlight={highlightString}
+        caseSensitiveHighlighting={caseSensitiveHighlighting}
+        highlightClassName={highlightedTextClassName}
+        highlightWithBackground={highlightWithBackground}
+      />
+    ) : (
+      children
+    )}
   </span>
 );

package/lib/styles/typography.module.css

@@ -10,7 +10,8 @@
   colorTextWarning,
   colorTextDanger,
   colorTextInversePrimary,
-  colorTextInverseSecondary
+  colorTextInverseSecondary,
+  colorInformationLightest
 ) from 'variables/_color.css';
 
 @value (
@@ -41,6 +42,8 @@
 
 @value (size24, size18) from 'variables/_size.css';
 
+@value (spaceXXSmall, spaceNone) from 'variables/_space.css';
+
 .baseType {
   /* Design system uses this font */
   font-family: 'Centra No 2';
@@ -231,3 +234,12 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+.highlightText {
+  color: colorTextInformation;
+}
+
+.bgHighlighting {
+  background-color: colorInformationLightest;
+  padding: spaceNone calc(spaceXXSmall / 4);
+}

package/lib/styles/variables/_size.css

@@ -38,6 +38,8 @@
 
 @value size60: 60px;
 
+@value size90: 90px;
+
 @value size100: 100px;
 
 @value size110: 110px;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportWidth = exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size90 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size58 = exports.size500 = exports.size5 = exports.size480 = exports.size48 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size26 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -45,6 +45,8 @@ const size58 = '58px';
 exports.size58 = size58;
 const size60 = '60px';
 exports.size60 = size60;
+const size90 = '90px';
+exports.size90 = size90;
 const size100 = '100px';
 exports.size100 = size100;
 const size110 = '110px';

package/lib/styles/variables/_size.js.flow

@@ -40,6 +40,8 @@ export const size58 = '58px';
 
 export const size60 = '60px';
 
+export const size90 = '90px';
+
 export const size100 = '100px';
 
 export const size110 = '110px';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {