Add EuiComment

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added support for `href`, `onClick`, and related props in `EuiBasicTable` default actions ([#3115](https://github.com/elastic/eui/pull/3115))
 - Added support for `EuiCodeEditor` to set `readonly` and `id` on `<textarea />` ([#3212](https://github.com/elastic/eui/pull/3212))
+- Added `EuiComment` component ([#3179](https://github.com/elastic/eui/pull/3179))
 
 **Deprecation**
 

src-docs/src/routes.js

@@ -69,6 +69,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';
@@ -364,6 +366,7 @@ const navigation = [
       CallOutExample,
       CardExample,
       CodeExample,
+      CommentExample,
       DescriptionListExample,
       DragAndDropExample,
       EmptyPromptExample,

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+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';
+import { EuiText } from '../../../../src/components/text';
+
+const body = (
+  <EuiText size="s">
+    <p>
+      Far out in the uncharted backwaters of the unfashionable end of the
+      western spiral arm of the Galaxy lies a small unregarded yellow sun.
+    </p>
+  </EuiText>
+);
+
+const longBody = (
+  <EuiText size="s">
+    <p>
+      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.
+    </p>
+  </EuiText>
+);
+
+const copyAction = (
+  <EuiButtonIcon
+    title="Custom action"
+    aria-label="Custom action"
+    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
+      username="pancho1"
+      type="update"
+      event="edited case"
+      timestamp="on Jan 9, 2020"
+    />
+    <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 11, 2020"
+      timelineIcon="tag"
+    />
+    <EuiComment
+      username="elohar"
+      event="added a comment"
+      actions={copyAction}
+      timestamp="on Jan 14, 2020"
+      timelineIcon={<EuiAvatar size="l" name="Eloha" />}>
+      {longBody}
+    </EuiComment>
+  </div>
+);

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

@@ -0,0 +1,103 @@
+import React, { Component, HTMLAttributes } from 'react';
+import { EuiComment } from '../../../../src/components/comment';
+import { EuiButtonIcon } from '../../../../src/components/button';
+import { EuiText } from '../../../../src/components/text';
+import { EuiPopover } from '../../../../src/components/popover';
+import {
+  EuiContextMenuPanel,
+  EuiContextMenuItem,
+} from '../../../../src/components/context_menu';
+import { CommonProps } from '../../../../src/components/common';
+
+const body = (
+  <EuiText size="s">
+    <p>
+      This comment has custom actions available. See the upper right corner.
+    </p>
+  </EuiText>
+);
+
+export type CustomActionsProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {};
+
+interface CustomActionsState {
+  isPopoverOpen: boolean;
+}
+
+export default class extends Component<CustomActionsProps, CustomActionsState> {
+  state = {
+    isPopoverOpen: false,
+  };
+
+  togglePopover = () => {
+    this.setState(prevState => ({
+      isPopoverOpen: !prevState.isPopoverOpen,
+    }));
+  };
+
+  closePopover = () => {
+    this.setState({
+      isPopoverOpen: false,
+    });
+  };
+
+  render() {
+    const { isPopoverOpen } = this.state;
+    const customActions = (
+      <EuiPopover
+        button={
+          <EuiButtonIcon
+            aria-label="Actions"
+            iconType="gear"
+            size="s"
+            color="text"
+            onClick={() => this.togglePopover()}
+          />
+        }
+        isOpen={isPopoverOpen}
+        closePopover={() => this.closePopover()}
+        panelPaddingSize="none"
+        anchorPosition="leftCenter">
+        <EuiContextMenuPanel
+          items={[
+            <EuiContextMenuItem
+              key="A"
+              icon="pencil"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Edit
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="B"
+              icon="share"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Share
+            </EuiContextMenuItem>,
+            <EuiContextMenuItem
+              key="C"
+              icon="copy"
+              onClick={() => {
+                this.closePopover();
+              }}>
+              Copy
+            </EuiContextMenuItem>,
+          ]}
+        />
+      </EuiPopover>
+    );
+    return (
+      <div>
+        <EuiComment
+          username="janed"
+          event="added a comment"
+          actions={customActions}
+          timestamp="Jan 1, 2020">
+          {body}
+        </EuiComment>
+      </div>
+    );
+  }
+}