[ADF-2588] make comment component compatible with content (#3128)

docs/core/README.md

@@ -34,6 +34,8 @@ for more information about installing and using the source code.
 | [Toolbar component](toolbar.component.md) | Simple container for headers, titles, actions and breadcrumbs. | [Source](../../lib/core/toolbar/toolbar.component.ts) |
 | [User info component](user-info.component.md) | Shows user information. | [Source](../../lib/core/userinfo/components/user-info.component.ts) |
 | [Viewer component](viewer.component.md) | Displays content from an ACS repository. | [Source](../../lib/core/viewer/components/viewer.component.ts) |
+| [Comment list component](comment-list.component.md) | Shows a list of comments. | [Source](../../lib/core/comments/comment-list.component.ts) |
+| [Comments component](comments.component.md) | Displays comments from users involved in a specified task and allows an involved user to add a comment to the task. | [Source](../../lib/core/comments/comments.component.ts) |
 
 ## Directives
 

docs/core/comment-list.component.md

@@ -0,0 +1,69 @@
+---
+Added: v2.0.0
+Status: Active
+---
+# Comment list component
+
+Shows a list of comments.
+
+![ADF Comment List](../docassets/images/adf-comment-list.png)
+
+## Basic Usage
+
+Populate the comments in the component class:
+
+```ts
+import { CommentProcessModel } from '@alfresco/adf-core';
+
+export class SomeComponent implements OnInit {
+
+  comments: CommentProcessModel[] = [
+    {
+      id: 1,
+      message: 'Comment number 1',
+      created: new Date(),
+      createdBy: {
+        id: 1,
+        email: 'john.doe@alfresco.com',
+        firstName: 'John',
+        lastName: 'Doe'
+      },
+    },
+    {
+      id: 2,
+      message: 'Comment number 2',
+      created: new Date(),
+      createdBy: {
+        id: 2,
+        email: 'jane.doe@alfresco.com',
+        firstName: 'Jane',
+        lastName: 'Doe'
+      },
+    }
+  ];
+
+  onClickCommentRow(comment: CommentProcessModel) {
+    console.log('Clicked row: ', comment);
+  }
+```
+
+In the component template use the comment list component:
+
+```html
+<adf-comment-list
+    [comments]="comments"
+    (clickRow)="onClickCommentRow($event)">
+</adf-comment-list>
+```
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| comments | `any[]` |  | The comments data used to populate the list.  |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| clickRow | `EventEmitter<any>` | Emitted when the user clicks on one of the comment rows. |

docs/core/comments.component.md

@@ -0,0 +1,41 @@
+---
+Added: v2.0.0
+Status: Active
+---
+# Comments Component
+
+Displays comments from users involved in a specified task or content and allows an involved user to add a comment to a task or a content.
+
+![adf-comments](../docassets/images/adf-comments.png)
+
+## Basic Usage Task
+
+```html
+<adf-comments
+    [taskId]="YOUR_TASK_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-comments>
+```
+
+## Basic Usage Content
+
+```html
+<adf-comments
+    [nodeId]="YOUR_NODE_ID"
+    [readOnly]="YOUR_READ_ONLY_FLAG">
+</adf-comments>
+```
+
+### Properties
+
+| Name | Type | Default value | Description |
+| ---- | ---- | ------------- | ----------- |
+| taskId | `string` |  | The numeric ID of the task.  |
+| nodeId | `string` |  | The ID of the node.  |
+| readOnly | `boolean` | `false` | Are the comments read only?  |
+
+### Events
+
+| Name | Type | Description |
+| ---- | ---- | ----------- |
+| error | `EventEmitter<any>` | Emitted when an error occurs while displaying/adding a comment. |