EuiHighlight: converted to Typescript (#2681)

* Tranlates EuiHighlight to Typescript

* Adds CHANGELOG line

* Corrects what was pointed out in the review

* Removes propType

* Removes className from props

CHANGELOG.md

@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `17.2.1`.
+- Converted `EuiHighlight` to Typescript ([#2681](https://github.com/elastic/eui/pull/2681))
 
 ## [`17.2.1`](https://github.com/elastic/eui/tree/v17.2.1)
 

src/components/highlight/highlight.tsx

@@ -0,0 +1,73 @@
+import React, { Fragment, HTMLAttributes, FunctionComponent } from 'react';
+import { CommonProps } from '../common';
+
+export type EuiHighlightProps = HTMLAttributes<HTMLSpanElement> &
+  CommonProps & {
+    children: string;
+
+    /**
+     * What to search for
+     */
+    search: string;
+
+    /**
+     * Should the search be strict or not
+     */
+    strict?: boolean;
+  };
+
+const highlight = (
+  searchSubject: string,
+  searchValue: string,
+  isStrict: boolean = false
+) => {
+  if (!searchValue) {
+    return searchSubject;
+  }
+
+  if (!searchSubject) {
+    return null;
+  }
+
+  const normalizedSearchSubject: string = isStrict
+    ? searchSubject
+    : searchSubject.toLowerCase();
+  const normalizedSearchValue: string = isStrict
+    ? searchValue
+    : searchValue.toLowerCase();
+
+  const indexOfMatch: number = normalizedSearchSubject.indexOf(
+    normalizedSearchValue
+  );
+  if (indexOfMatch === -1) {
+    return searchSubject;
+  }
+
+  const preMatch: string = searchSubject.substr(0, indexOfMatch);
+  const match: string = searchSubject.substr(indexOfMatch, searchValue.length);
+  const postMatch: string = searchSubject.substr(
+    indexOfMatch + searchValue.length
+  );
+
+  return (
+    <Fragment>
+      {preMatch}
+      <strong>{match}</strong>
+      {postMatch}
+    </Fragment>
+  );
+};
+
+export const EuiHighlight: FunctionComponent<EuiHighlightProps> = ({
+  children,
+  className,
+  search,
+  strict,
+  ...rest
+}) => {
+  return (
+    <span className={className} {...rest}>
+      {highlight(children, search, strict)}
+    </span>
+  );
+};