Add EuiCommentList

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Added `showCloseButton` and `dockedBreakpoint` flexibility to `EuiCollapsibleNav` ([#3330](https://github.com/elastic/eui/pull/3330))
 - Added `panelStyle` prop to `EuiPopover` to distinguish style object configuration ([#3329](https://github.com/elastic/eui/pull/3329))
 - Extended `EuiDatePicker`'s `startDate` and `endDate` types to accept `null` values for better interoperability ([#3343](https://github.com/elastic/eui/pull/3343))
+- Added `EuiCommentList` component ([#3344](https://github.com/elastic/eui/pull/3344))
 
 **Bug Fixes**
 

src-docs/src/routes.js

@@ -71,7 +71,7 @@ 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 { CommentListExample } from './views/comment/comment_example';
 
 import { ContextMenuExample } from './views/context_menu/context_menu_example';
 
@@ -371,7 +371,7 @@ const navigation = [
       CallOutExample,
       CardExample,
       CodeExample,
-      CommentExample,
+      CommentListExample,
       DescriptionListExample,
       DragAndDropExample,
       EmptyPromptExample,

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

@@ -1,8 +1,5 @@
 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 { EuiComment } from '../../../../src/components/comment_list';
 import { EuiButtonIcon } from '../../../../src/components/button';
 import { EuiText } from '../../../../src/components/text';
 
@@ -15,19 +12,6 @@ const body = (
   </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"
@@ -46,58 +30,5 @@ export default () => (
       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

@@ -1,5 +1,5 @@
 import React, { Component, HTMLAttributes } from 'react';
-import { EuiComment } from '../../../../src/components/comment';
+import { EuiComment } from '../../../../src/components/comment_list';
 import { EuiButtonIcon } from '../../../../src/components/button';
 import { EuiText } from '../../../../src/components/text';
 import { EuiPopover } from '../../../../src/components/popover';

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

@@ -6,7 +6,11 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiComment } from '../../../../src/components';
+import {
+  EuiCode,
+  EuiComment,
+  EuiCommentList,
+} from '../../../../src/components';
 
 import Comment from './comment';
 const commentSource = require('!!raw-loader!./comment');
@@ -24,6 +28,10 @@ import CommentActions from './comment_actions';
 const commentActionsSource = require('!!raw-loader!./comment_actions');
 const commentActionsHtml = renderToHtml(CommentActions);
 
+import CommentList from './comment_list';
+const commentListSource = require('!!raw-loader!./comment_list');
+const commentListHtml = renderToHtml(CommentList);
+
 const commentSnippet = `<EuiComment username="janed">
   {body}
 </EuiComment>`;
@@ -63,11 +71,46 @@ const commentActionsSnippet = `<EuiComment username="janed" actions={customActio
   {body}
 </EuiComment>`;
 
-export const CommentExample = {
-  title: 'Comment',
+const commentListSnippet = `<EuiCommentList 
+  comments={[
+    {
+      username: username,
+      event: event,
+      timestamp: timestamp,
+      children: body,
+    },
+]}
+/>`;
+
+export const CommentListExample = {
+  title: 'Comment list',
   isNew: true,
   sections: [
     {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: commentListSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: commentListHtml,
+        },
+      ],
+      text: (
+        <div>
+          Use <strong>EuiCommentList</strong> to display a list of{' '}
+          <strong>EuiComments</strong>. Pass an array of{' '}
+          <strong>EuiComment</strong> objects and{' '}
+          <strong>EuiCommentList</strong> will generate a comment thread.
+        </div>
+      ),
+      props: { EuiCommentList, EuiComment },
+      snippet: commentListSnippet,
+      demo: <CommentList />,
+    },
+    {
+      title: 'Comment',
       source: [
         {
           type: GuideSectionTypes.JS,

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

@@ -0,0 +1,112 @@
+import React from 'react';
+import {
+  EuiCommentList,
+  EuiCommentProps,
+} from '../../../../src/components/comment_list';
+import { EuiAvatar } from '../../../../src/components/avatar';
+import { EuiButtonIcon } from '../../../../src/components/button';
+import { EuiText } from '../../../../src/components/text';
+import { EuiBadge } from '../../../../src/components/badge';
+import { EuiFlexGroup, EuiFlexItem } from '../../../../src/components/flex';
+
+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 copyAction = (
+  <EuiButtonIcon
+    title="Custom action"
+    aria-label="Custom action"
+    color="subdued"
+    iconType="copy"
+  />
+);
+
+const complexEvent = (
+  <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>
+);
+
+const complexUsername = (
+  <EuiFlexGroup responsive={false} alignItems="center" gutterSize="s">
+    <EuiFlexItem grow={false}>
+      <EuiAvatar size="s" type="space" name="Pedro" />
+    </EuiFlexItem>
+    <EuiFlexItem grow={false}>pedror</EuiFlexItem>
+  </EuiFlexGroup>
+);
+
+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 avatar = (
+  <EuiAvatar
+    imageUrl="https://source.unsplash.com/64x64/?woman"
+    size="l"
+    name="Juana"
+  />
+);
+
+const comments: EuiCommentProps[] = [
+  {
+    username: 'janed',
+    event: 'added a comment',
+    timestamp: 'on Jan 1, 2020',
+    children: body,
+    actions: copyAction,
+  },
+  {
+    username: 'juanab',
+    type: 'update',
+    actions: copyAction,
+    event: 'pushed incident X0Z235',
+    timestamp: 'on Jan 3, 2020',
+    timelineIcon: avatar,
+  },
+  {
+    username: 'pancho1',
+    type: 'update',
+    event: 'edited case',
+    timestamp: 'on Jan 9, 2020',
+  },
+  {
+    username: complexUsername,
+    type: 'update',
+    actions: copyAction,
+    event: complexEvent,
+    timestamp: 'on Jan 11, 2020',
+    timelineIcon: 'tag',
+  },
+  {
+    username: 'elohar',
+    event: 'added a comment',
+    timestamp: 'on Jan 14, 2020',
+    timelineIcon: <EuiAvatar size="l" name="Eloha" />,
+    children: longBody,
+    actions: copyAction,
+  },
+];
+
+export default () => <EuiCommentList comments={comments} />;

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

@@ -1,5 +1,5 @@
 import React, { Fragment } from 'react';
-import { EuiComment } from '../../../../src/components/comment';
+import { EuiComment } from '../../../../src/components/comment_list';
 import { EuiText } from '../../../../src/components/text';
 import { EuiAvatar } from '../../../../src/components/avatar';
 import { EuiCode } from '../../../../src/components/code';

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { EuiComment } from '../../../../src/components/comment';
+import { EuiComment } from '../../../../src/components/comment_list';
 import { EuiText } from '../../../../src/components/text';
 import { EuiCode } from '../../../../src/components/code';
 

src/components/comment_list/__snapshots__/comment_list.test.tsx.snap

@@ -0,0 +1,49 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`EuiCommentList is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiCommentList testClass1 testClass2"
+  data-test-subj="test subject string"
+>
+  <div
+    class="euiComment"
+  >
+    <div
+      class="euiCommentTimeline"
+    >
+      <div
+        class="euiCommentTimeline__content"
+      >
+        <div
+          class="euiCommentTimeline__icon--default euiCommentTimeline__icon--regular"
+        >
+          <div
+            data-euiicon-type="user"
+          />
+        </div>
+      </div>
+    </div>
+    <figure
+      class="euiCommentEvent euiCommentEvent--regular"
+    >
+      <figcaption
+        class="euiCommentEvent__header"
+      >
+        <div
+          class="euiCommentEvent__headerData"
+        >
+          <div
+            class="euiCommentEvent__headerUsername"
+          >
+            janed
+          </div>
+          <div
+            class="euiCommentEvent__headerEvent"
+          />
+        </div>
+      </figcaption>
+    </figure>
+  </div>
+</div>
+`;