Added useEuiTextDiff hook

package.json

@@ -69,6 +69,7 @@
     "react-virtualized": "^9.21.2",
     "resize-observer-polyfill": "^1.5.0",
     "tabbable": "^3.0.0",
+    "text-diff": "^1.0.1",
     "uuid": "^3.1.0"
   },
   "devDependencies": {

src-docs/src/views/code/code_example.js

@@ -4,7 +4,11 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiCodeBlockImpl } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiCodeBlockImpl,
+  EuiTextDiff,
+} from '../../../../src/components';
 
 import Code from './code';
 const codeSource = require('!!raw-loader!./code');
@@ -23,6 +27,18 @@ import CodeBlockPre from './code_block_pre';
 const codeBlockPreSource = require('!!raw-loader!./code_block_pre');
 const codeBlockPreHtml = renderToHtml(CodeBlockPre);
 
+import TextDiff from './text_diff';
+const textDiffSource = require('!!raw-loader!./text_diff');
+const textDiffHtml = renderToHtml(TextDiff);
+
+import NoDeletion from './text_diff_no_deletions';
+const noDeletionSource = require('!!raw-loader!./text_diff_no_deletions');
+const noDeletionHtml = renderToHtml(NoDeletion);
+
+import TextDiffTimeOut from './text_diff_timeout';
+const TextDiffTimeOutSource = require('!!raw-loader!./text_diff_timeout');
+const TextDiffTimeOutHtml = renderToHtml(TextDiffTimeOut);
+
 export const CodeExample = {
   title: 'Code',
   sections: [
@@ -95,5 +111,65 @@ export const CodeExample = {
       props: { EuiCodeBlockImpl },
       demo: <CodeBlockPre />,
     },
+    {
+      title: 'Text Diff',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: textDiffSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: textDiffHtml,
+        },
+      ],
+      text: (
+        <p>
+          <strong>EuiTextDiff</strong> is for making text comparisions.
+        </p>
+      ),
+      demo: <TextDiff />,
+      props: { EuiTextDiff },
+    },
+    {
+      title: 'Text Diff without deletions',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: noDeletionSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: noDeletionHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>showDeletion</EuiCode> is used for hiding/showing deletions.
+        </p>
+      ),
+      demo: <NoDeletion />,
+      props: { EuiTextDiff },
+    },
+    {
+      title: 'Text Diff with timeout',
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: TextDiffTimeOutSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: TextDiffTimeOutHtml,
+        },
+      ],
+      text: (
+        <p>
+          <EuiCode>timeout</EuiCode> is used for setting timeout.
+        </p>
+      ),
+      demo: <TextDiffTimeOut />,
+      props: { EuiTextDiff },
+    },
   ],
 };

src-docs/src/views/code/text_diff.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import {
+  EuiTextDiff,
+  EuiCode,
+  EuiSpacer,
+  EuiTextColor,
+} from '../../../../src/components';
+
+export default () => {
+  const [del, setDel] = useState(0);
+  const [ins, setIns] = useState(0);
+
+  const initialText =
+    'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy';
+  const currentText =
+    'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day';
+
+  const onGetDataFormat = data => {
+    setDel([...data].filter(el => el.type === 'delete').length);
+    setIns([...data].filter(el => el.type === 'insert').length);
+  };
+
+  return (
+    <>
+      <EuiTextDiff
+        fontSize="m"
+        paddingSize="m"
+        initialText={initialText}
+        currentText={currentText}
+        getDataFormat={onGetDataFormat}
+        disableTimeout={true}
+      />
+      <EuiSpacer />
+      <EuiCode>
+        <EuiTextColor color="secondary"> {ins} </EuiTextColor> Insertions,
+        <EuiTextColor color="danger"> {del} </EuiTextColor>
+        Deletions
+      </EuiCode>
+    </>
+  );
+};

src-docs/src/views/code/text_diff_no_deletions.js

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import {
+  EuiTextDiff,
+  EuiCode,
+  EuiSpacer,
+  EuiTextColor,
+} from '../../../../src/components';
+
+export default () => {
+  const [del, setDel] = useState(0);
+  const [ins, setIns] = useState(0);
+
+  const initialText =
+    'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy';
+  const currentText =
+    'One difference is that interfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day';
+
+  const onGetDataFormat = data => {
+    setDel([...data].filter(el => el.type === 'delete').length);
+    setIns([...data].filter(el => el.type === 'insert').length);
+  };
+
+  return (
+    <>
+      <EuiTextDiff
+        fontSize="m"
+        paddingSize="m"
+        initialText={initialText}
+        currentText={currentText}
+        disableTimeout={true}
+        getDataFormat={onGetDataFormat}
+      />
+      <EuiSpacer />
+      <EuiCode>
+        <EuiTextColor color="secondary">{ins} </EuiTextColor> Insertions,
+        <EuiTextColor color="danger"> {del} </EuiTextColor>
+        Deletions
+      </EuiCode>
+    </>
+  );
+};

src-docs/src/views/code/text_diff_timeout.js

@@ -0,0 +1,57 @@
+import React, { useState } from 'react';
+
+import {
+  EuiTextDiff,
+  EuiCode,
+  EuiSpacer,
+  EuiTextColor,
+  EuiRange,
+} from '../../../../src/components';
+import { htmlIdGenerator } from '../../../../src/services';
+
+export default () => {
+  const [del, setDel] = useState(0);
+  const [ins, setIns] = useState(0);
+  const [value, setValue] = useState(5);
+  const initialText =
+    'One difference is that interface creates a new name that is used everywhere. Type aliases do create a new name — for instance, error text won’t use the alias name. In the code below, hovering over interfaced in code editor will show that it returns an Interface, but will show that aliased returns object literal type.Wish you happy';
+
+  const currentText =
+    'One difference is that inerfaces create a new name that is used everywhere. Type aliases don’t create a new name — for instance, error messages won’t use the alias name. In the code below, hovering over interfaced in an editor will show that it returns an Interface, but will show that aliased returns object literal type.Hope you will be happy every day';
+
+  const onGetDataFormat = data => {
+    console.log('data', data);
+    setDel([...data].filter(el => el.type === 'delete').length);
+    setIns([...data].filter(el => el.type === 'insert').length);
+  };
+
+  return (
+    <>
+      <EuiTextDiff
+        fontSize="m"
+        paddingSize="m"
+        initialText={initialText}
+        currentText={currentText}
+        getDataFormat={onGetDataFormat}
+        timeout={value}
+      />
+      <EuiSpacer />
+      <EuiCode>
+        <EuiTextColor color="secondary">{ins} </EuiTextColor> Insertions,
+        <EuiTextColor color="danger"> {del} </EuiTextColor>
+        Deletions
+      </EuiCode>
+      <EuiSpacer />
+      <EuiRange
+        id={htmlIdGenerator()()}
+        min={0}
+        max={20}
+        value={value}
+        onChange={e => setValue(e.target.value)}
+        showLabels
+        showValue
+        aria-label="An example of EuiRange with showValue prop"
+      />
+    </>
+  );
+};

src/components/code/_index.scss

@@ -1 +1,2 @@
 @import 'code_block';
+@import 'text_diff';

src/components/code/_text_diff.scss

@@ -0,0 +1,43 @@
+.euiTextDiff {
+  display: block;
+  position: relative;
+  background: $euiCodeBlockBackgroundColor;
+  color: $euiCodeBlockColor;
+  box-sizing: border-box;
+  line-height: $euiLineHeight;
+  font-size: inherit;
+  font-family: inherit;
+  font-weight: $euiFontWeightRegular;
+
+  del {
+    color: $euiColorDanger;
+  }
+
+  ins {
+    color: $euiColorSecondary;
+  }
+}
+
+.euiTextDiff--paddingMedium  {
+  padding: $euiSize;
+}
+
+.euiTextDiff--paddingLarge {
+  padding: $euiSizeL;
+}
+
+.euiTextDiff--paddingSmall {
+  padding: $euiSizeS;
+}
+
+.euiTextDiff--fontSmall {
+  font-size: $euiFontSizeXS;
+}
+
+.euiTextDiff--fontMedium {
+  font-size: $euiFontSizeS;
+}
+
+.euiTextDiff--fontLarge {
+  font-size: $euiFontSize;
+}

src/components/code/index.ts

@@ -1,3 +1,4 @@
 export { EuiCode, EuiCodeProps } from './code';
 export { EuiCodeBlock, EuiCodeBlockProps } from './code_block';
 export { EuiCodeBlockImpl } from './_code_block';
+export { EuiTextDiff, EuiTextDiffProps } from './text_diff';

src/components/code/text-diff.d.ts

@@ -0,0 +1 @@
+declare module 'text-diff';