Add EuiComment

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Improved `EuiModal` close button position to prevent from overlapping with the title ([#3176](https://github.com/elastic/eui/pull/3176))
+- Added `EuiComment` component ([#3179](https://github.com/elastic/eui/pull/3179))
 
 **Bug Fixes**
 

src-docs/src/routes.js

@@ -67,6 +67,8 @@ import { ColorPickerExample } from './views/color_picker/color_picker_example';
 
 import { ComboBoxExample } from './views/combo_box/combo_box_example';
 
+import { CommentExample } from './views/comment/comment_example';
+
 import { ContextMenuExample } from './views/context_menu/context_menu_example';
 
 import { ControlBarExample } from './views/control_bar/control_bar_example';
@@ -353,6 +355,7 @@ const navigation = [
       CallOutExample,
       CardExample,
       CodeExample,
+      CommentExample,
       DescriptionListExample,
       DragAndDropExample,
       EmptyPromptExample,

src-docs/src/views/comment/comment.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+import { EuiIcon } from '../../../../src/components/icon';
+import { EuiAvatar } from '../../../../src/components/avatar';
+import { EuiBadge } from '../../../../src/components/badge';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+import { EuiButtonIcon } from '../../../../src/components/button';
+
+const body =
+  'Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun.';
+
+const longBody =
+  'This planet has - or rather had - a problem, which was this: most of the people living on it were unhappy for pretty much of the time. Many solutions were suggested for this problem, but most of these were largely concerned with the movements of small green pieces of paper, which is odd because on the whole it was not the small green pieces of paper that were unhappy.';
+
+const bodyUpdate = 'This type of comment can also have a body';
+
+const copyAction = <EuiButtonIcon color="subdued" iconType="copy" />;
+
+export default () => (
+  <div>
+    <EuiComment
+      username="janed"
+      event="added a comment"
+      actions={copyAction}
+      timestamp="on Jan 1, 2020">
+      {body}
+    </EuiComment>
+    <EuiComment
+      username="juanab"
+      type="update"
+      actions={copyAction}
+      event="pushed incident X0Z235"
+      timestamp="on Jan 3, 2020"
+      timelineIcon={
+        <EuiAvatar
+          imageUrl="https://source.unsplash.com/64x64/?woman"
+          size="l"
+          name="Juana"
+        />
+      }
+    />
+    <EuiComment
+      actions={copyAction}
+      username={
+        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>
+            <EuiAvatar size="s" type="space" name="Pedro" />
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>pedror</EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      type="update"
+      event={
+        <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+          <EuiFlexItem grow={false}>added tags</EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="primary">sample</EuiBadge>
+          </EuiFlexItem>
+          <EuiFlexItem grow={false}>
+            <EuiBadge color="secondary">review</EuiBadge>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      }
+      timestamp="on Jan 4, 2020"
+      timelineIcon={
+        <div className="euiCommentTimeline__contentDefault">
+          <EuiIcon size="l" type="tag" />
+        </div>
+      }
+    />
+    <EuiComment
+      username="pancho1"
+      type="update"
+      event="edited case"
+      timestamp="on Jan 11, 2020"
+      timelineIcon={<EuiAvatar size="l" name="Pancho" />}
+    />
+    <EuiComment
+      username="elohar"
+      event="added a comment"
+      actions={copyAction}
+      timestamp="on Jan 14, 2020"
+      timelineIcon={<EuiAvatar size="l" name="Eloha" />}>
+      {longBody}
+    </EuiComment>
+    <EuiComment
+      username="pancho1"
+      type="update"
+      event="edited case"
+      timestamp="on Jan 21, 2020"
+      timelineIcon={<EuiAvatar size="l" name="Pancho" />}>
+      {bodyUpdate}
+    </EuiComment>
+  </div>
+);

src-docs/src/views/comment/comment_example.js

@@ -0,0 +1,59 @@
+import React from 'react';
+
+import { renderToHtml } from '../../services';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode, EuiComment } from '../../../../src/components';
+
+import Comment from './comment';
+const commentSource = require('!!raw-loader!./comment');
+const commentHtml = renderToHtml(Comment);
+
+const commentSnippet = `<EuiComment username="janed">
+  {body}
+</EuiComment>`;
+
+export const CommentExample = {
+  title: 'Comment',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentHtml,
+        },
+      ],
+      text: (
+        <div>
+          <p>
+            Use <EuiCode>EuiComment</EuiCode> for displaying comment threads
+            with <EuiCode>EuiCommentList</EuiCode>. There are two different
+            types of comments <EuiCode>regular</EuiCode> and{' '}
+            <EuiCode>update</EuiCode> available through the{' '}
+            <EuiCode>type</EuiCode> prop. Use comments of type{' '}
+            <EuiCode>update</EuiCode> to display comments that generally do not
+            have a body and are logging actions that either the user or the
+            system has performed (e.g. &ldquo;jsmith edited a case&rdquo; or
+            &ldquo;kibanamachine added the backport missing label&rdquo;).
+          </p>
+          <p>
+            The <EuiCode>timelineIcon</EuiCode> can be customized as needed. It
+            is recommended to use an element of dimensions 40x40. The default{' '}
+            <EuiCode>timelineIcon</EuiCode> is a user icon.
+          </p>
+          <p>
+            Use <EuiCode>children</EuiCode> to pass the body of the comment.
+          </p>
+        </div>
+      ),
+      props: { EuiComment },
+      snippet: commentSnippet,
+      demo: <Comment />,
+    },
+  ],
+};