[AAE-10125] Storybook stories for Comments component (#7741)

* [AAE-10125] Storybook stories for Comments component

* [AAE-10125] Storybook stories for Comments component

* Added missing type & defaultValue for nodeId prop

* Fixed MaterialModule imports

* Removed unnecessary module imports

* Created new Stories about comment with & without an avatar

* trigger travis

* travis fix

lib/core/comments/comment-list.component.stories.ts

@@ -0,0 +1,66 @@
+/*!
+ * @license
+ * Copyright 2022 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { action } from '@storybook/addon-actions';
+import { CommentModel } from '../models/comment.model';
+import { CoreStoryModule } from '../testing/core.story.module';
+import { CommentListComponent } from './comment-list.component';
+import { CommentsModule } from './comments.module';
+import { commentsTaskData, commentsNodeData } from '../mock/comment-content.mock';
+import { EcmUserService } from '../services';
+
+export default {
+    component: CommentListComponent,
+    title: 'Core/Components/Comments/Comment List',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CommentsModule],
+            providers: [
+                { provide: EcmUserService, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } }
+            ]
+        })
+    ],
+    argTypes: {
+        comments: {
+            type: CommentModel,
+            description: 'CommentModel array',
+            table: {
+                type: {
+                    summary: 'CommentModel'
+                }
+            }
+        }
+    }
+} as Meta;
+
+const template: Story<CommentListComponent> = (args: CommentListComponent) => ({
+    props: {
+        ...args,
+        clickRow: action('clickRow')
+    }
+});
+
+export const taskBased = template.bind({});
+taskBased.args = {
+    comments: commentsTaskData
+};
+
+export const nodeBased = template.bind({});
+nodeBased.args = {
+    comments: commentsNodeData
+};

lib/core/comments/comments.component.stories.ts

@@ -0,0 +1,117 @@
+/*!
+ * @license
+ * Copyright 2022 Alfresco Software, Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Meta, moduleMetadata, Story } from '@storybook/angular';
+import { CommentContentService, CommentProcessService, EcmUserService } from '../services';
+import { CoreStoryModule } from '../testing/core.story.module';
+import { CommentsComponent } from './comments.component';
+import { CommentsModule } from './comments.module';
+import { CommentModel } from '../models/comment.model';
+import { CommentContentServiceMock } from '../mock/comment-content-service.mock';
+import { CommentProcessServiceMock } from '../mock/comment-process-service.mock';
+import { commentsTaskData, commentsNodeData } from '../mock/comment-content.mock';
+
+export default {
+    component: CommentsComponent,
+    title: 'Core/Components/Comments/Comment',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, CommentsModule],
+            providers: [
+                { provide: CommentContentService, useClass: CommentContentServiceMock },
+                { provide: CommentProcessService, useClass: CommentProcessServiceMock },
+                { provide: EcmUserService, useValue: { getUserProfileImage: () => '../assets/images/logo.png' } }
+            ]
+        })
+    ],
+    argTypes: {
+        comments: {
+            type: CommentModel,
+            description: 'CommentModel array',
+            table: { type: { summary: 'CommentModel' } }
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Displays input area to add new comment',
+            table: { type: { summary: 'boolean' } }
+        },
+        nodeId: {
+            control: 'text',
+            description: 'Necessary in order to add a new Node comment',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            },
+            type: { required: true },
+            if: { arg: 'taskId', exists: false }
+        },
+        taskId: {
+            control: 'text',
+            description: 'Necessary in order to add a new Task comment',
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            },
+            type: { required: true },
+            if: { arg: 'nodeId', exists: false }
+        }
+    }
+} as Meta;
+
+const template: Story<CommentsComponent> = (args: CommentsComponent) => ({
+    props: args
+});
+
+export const singleCommentWithAvatar = template.bind({});
+singleCommentWithAvatar.args = {
+    comments: [commentsNodeData[0]],
+    nodeId: undefined,
+    readOnly: true,
+    taskId: undefined
+};
+
+export const singleCommentWithoutAvatar = template.bind({});
+singleCommentWithoutAvatar.args = {
+    comments: [commentsTaskData[1]],
+    nodeId: undefined,
+    readOnly: true,
+    taskId: undefined
+};
+
+export const noComments = template.bind({});
+noComments.args = {
+    comments: [],
+    nodeId: undefined,
+    readOnly: true,
+    taskId: undefined
+};
+
+export const nodeComments = template.bind({});
+nodeComments.args = {
+    comments: commentsNodeData,
+    nodeId: '-fake-',
+    readOnly: false,
+    taskId: undefined
+};
+
+export const taskComments = template.bind({});
+taskComments.args = {
+    comments: commentsTaskData,
+    nodeId: undefined,
+    readOnly: false,
+    taskId: '-fake-'
+};

lib/core/comments/comments.module.ts

@@ -18,10 +18,12 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { TranslateModule } from '@ngx-translate/core';
-import { MaterialModule } from '../material.module';
-import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DataColumnModule } from '../data-column/data-column.module';
-import { DataTableModule } from '../datatable/datatable.module';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import { MatListModule } from '@angular/material/list';
+import { MatLineModule } from '@angular/material/core';
+import { FormsModule } from '@angular/forms';
 import { PipeModule } from '../pipes/pipe.module';
 
 import { CommentListComponent } from './comment-list.component';
@@ -30,13 +32,14 @@ import { CommentsComponent } from './comments.component';
 @NgModule({
     imports: [
         PipeModule,
-        DataColumnModule,
-        DataTableModule,
         FormsModule,
-        ReactiveFormsModule,
-        MaterialModule,
         CommonModule,
-        TranslateModule
+        TranslateModule,
+        MatButtonModule,
+        MatFormFieldModule,
+        MatInputModule,
+        MatListModule,
+        MatLineModule
     ],
     declarations: [
         CommentListComponent,