[AAE-10220] Storybook stories for Info Drawer component (#7757)

* [AAE-10220] Storybook stories for Info Drawer component

* Enchanced Docs, added IF statements & categories for the controls, created mock content

* Readded IF statements after the Storybook update, simplified args, adjusted naming convention in comments component

* Changed location of mocked content

* trigger travis

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

@@ -26,7 +26,7 @@ import { EcmUserService } from '../services';
 
 export default {
     component: CommentListComponent,
-    title: 'Core/Components/Comments/Comment List',
+    title: 'Core/Comments/Comment List',
     decorators: [
         moduleMetadata({
             imports: [CoreStoryModule, CommentsModule],
@@ -40,9 +40,7 @@ export default {
             type: CommentModel,
             description: 'CommentModel array',
             table: {
-                type: {
-                    summary: 'CommentModel'
-                }
+                type: { summary: 'CommentModel' }
             }
         }
     }

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

@@ -27,7 +27,7 @@ import { commentsTaskData, commentsNodeData } from '../mock/comment-content.mock
 
 export default {
     component: CommentsComponent,
-    title: 'Core/Components/Comments/Comment',
+    title: 'Core/Comments/Comment',
     decorators: [
         moduleMetadata({
             imports: [CoreStoryModule, CommentsModule],
@@ -47,23 +47,31 @@ export default {
         readOnly: {
             control: 'boolean',
             description: 'Displays input area to add new comment',
-            table: { type: { summary: 'boolean' } }
+            defaultValue: false,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'false'}
+            }
         },
         nodeId: {
             control: 'text',
             description: 'Necessary in order to add a new Node comment',
+            defaultValue: undefined,
             table: {
                 type: { summary: 'string' },
                 defaultValue: { summary: 'undefined' }
-            }
+            },
+            if: { arg: 'taskId', exists: false }
         },
         taskId: {
             control: 'text',
             description: 'Necessary in order to add a new Task comment',
+            defaultValue: undefined,
             table: {
                 type: { summary: 'string' },
                 defaultValue: { summary: 'undefined' }
-            }
+            },
+            if: { arg: 'nodeId', exists: false }
         }
     }
 } as Meta;
@@ -75,39 +83,29 @@ const template: Story<CommentsComponent> = (args: CommentsComponent) => ({
 export const singleCommentWithAvatar = template.bind({});
 singleCommentWithAvatar.args = {
     comments: [commentsNodeData[0]],
-    nodeId: undefined,
-    readOnly: true,
-    taskId: undefined
+    readOnly: true
 };
 
 export const singleCommentWithoutAvatar = template.bind({});
 singleCommentWithoutAvatar.args = {
     comments: [commentsTaskData[1]],
-    nodeId: undefined,
-    readOnly: true,
-    taskId: undefined
+    readOnly: true
 };
 
 export const noComments = template.bind({});
 noComments.args = {
     comments: [],
-    nodeId: undefined,
-    readOnly: true,
-    taskId: undefined
+    readOnly: true
 };
 
 export const nodeComments = template.bind({});
 nodeComments.args = {
     comments: commentsNodeData,
-    nodeId: '-fake-',
-    readOnly: false,
-    taskId: undefined
+    nodeId: '-fake-'
 };
 
 export const taskComments = template.bind({});
 taskComments.args = {
     comments: commentsTaskData,
-    nodeId: undefined,
-    readOnly: false,
     taskId: '-fake-'
 };

lib/core/info-drawer/info-drawer.component.stories.ts

@@ -0,0 +1,280 @@
+/*!
+* @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 { CoreStoryModule } from '../testing/core.story.module';
+import { InfoDrawerComponent } from './info-drawer.component';
+import { InfoDrawerModule } from './info-drawer.module';
+import { mockTabText, mockCardText } from './mock/info-drawer.mock';
+
+export default {
+    component: InfoDrawerComponent,
+    title: 'Core/Info Drawer/Info Drawer',
+    decorators: [
+        moduleMetadata({
+            imports: [CoreStoryModule, InfoDrawerModule]
+        })
+    ],
+    argTypes: {
+        selectedIndex: {
+            control: 'select',
+            options: [0, 1, 2],
+            defaultValue: 0,
+            description: 'The selected index tab (Tab Layout only)',
+            table: {
+                type: { summary: 'number' },
+                defaultValue: { summary: '0' }
+            }
+        },
+        title: {
+            control: 'text',
+            description: 'The title of the info drawer',
+            defaultValue: null,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'null' }
+            },
+            if: { arg: 'showHeader', truthy: true }
+        },
+        showHeader: {
+            control: 'boolean',
+            description: 'Visibility of the header',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        showSecondTab: {
+            control: 'boolean',
+            description: 'Visibility of the second tab (Tab Layout only)',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        showThirdTab: {
+            control: 'boolean',
+            description: 'Visibility of the third tab (Tab Layout only)',
+            defaultValue: true,
+            table: {
+                type: { summary: 'boolean' },
+                defaultValue: { summary: 'true' }
+            }
+        },
+        label1: {
+            control: 'text',
+            description: 'Label of the first tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Labels'
+            }
+        },
+        label2: {
+            control: 'text',
+            description: 'Label of the second tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Labels'
+            },
+            if: { arg: 'showSecondTab', truthy: true }
+        },
+        label3: {
+            control: 'text',
+            description: 'Label of the third tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Labels'
+            },
+            if: { arg: 'showThirdTab', truthy: true }
+        },
+        icon1: {
+            control: 'text',
+            description: 'Icon of the first tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Icons'
+            }
+        },
+        icon2: {
+            control: 'text',
+            description: 'Icon of the second tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Icons'
+            },
+            if: { arg: 'showSecondTab', truthy: true }
+        },
+        icon3: {
+            control: 'text',
+            description: 'Icon of the third tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Icons'
+            },
+            if: { arg: 'showThirdTab', truthy: true }
+        },
+        tab1Text: {
+            control: 'text',
+            description: 'Text content of the first tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Tab Content'
+            }
+        },
+        tab2Text: {
+            control: 'text',
+            description: 'Text content of the second tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Tab Content'
+            },
+            if: { arg: 'showSecondTab', truthy: true }
+        },
+        tab3Text: {
+            control: 'text',
+            description: 'Text content of the third tab (Tab Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' },
+                category: 'Tab Content'
+            },
+            if: { arg: 'showThirdTab', truthy: true }
+        },
+        cardText: {
+            control: 'text',
+            description: 'The content of the single card (Single Layout only)',
+            defaultValue: undefined,
+            table: {
+                type: { summary: 'string' },
+                defaultValue: { summary: 'undefined' }
+            }
+        },
+        currentTab: {
+            action: 'currentTab',
+            table: { disable: true }
+        }
+    }
+} as Meta;
+
+const tabLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) => ({
+    props: args,
+    template:
+        `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
+            <div info-drawer-buttons>
+                <mat-icon>clear</mat-icon>
+            </div>
+
+            <adf-info-drawer-tab [label]="label1" [icon]="[icon1]">
+                <div class="info-drawer-tab-text">{{ tab1Text }}</div>
+            </adf-info-drawer-tab>
+
+            <adf-info-drawer-tab [label]="label2" [icon]="[icon2]" *ngIf="showSecondTab">
+                <div class="info-drawer-tab-text">{{ tab2Text }}</div>
+            </adf-info-drawer-tab>
+
+            <adf-info-drawer-tab [label]="label3" [icon]="[icon3]" *ngIf="showThirdTab">
+                <div class="info-drawer-tab-text">{{ tab3Text }}</div>
+            </adf-info-drawer-tab>
+
+        </adf-info-drawer>`
+});
+
+const singleLayoutTemplate: Story<InfoDrawerModule> = (args: InfoDrawerComponent) => ({
+    props: args,
+    template:
+        `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader">
+            <div info-drawer-title>File info</div>
+
+            <div info-drawer-buttons>
+                <mat-icon>clear</mat-icon>
+            </div>
+
+            <div info-drawer-content>
+                <mat-card>
+                    {{ cardText }}
+                </mat-card>
+            </div>
+        </adf-info-drawer>`
+});
+
+export const tabLayoutWithTextLabels = tabLayoutTemplate.bind({});
+tabLayoutWithTextLabels.args = {
+    title: 'Activities',
+    label1: 'Activity',
+    label2: 'Details',
+    label3: 'More Info',
+    tab1Text: `This is a variant of the Info Drawer Layout component that displays information in tabs. ${mockTabText}`,
+    tab2Text: mockTabText,
+    tab3Text: mockTabText
+};
+
+tabLayoutWithTextLabels.parameters = {
+    controls: {
+        exclude: ['cardText'],
+        expanded: true
+    }
+};
+
+export const tabLayoutWithIconLabels = tabLayoutTemplate.bind({});
+tabLayoutWithIconLabels.args = {
+    title: 'Activities',
+    icon1: 'people',
+    icon2: 'android',
+    icon3: 'comment',
+    tab1Text: `This is a variant of the Info Drawer Layout component that displays information in tabs. ${mockTabText}`,
+    tab2Text: mockTabText,
+    tab3Text: mockTabText
+};
+
+tabLayoutWithIconLabels.parameters = {
+    controls: {
+        exclude: ['cardText'],
+        expanded: true
+    }
+};
+
+export const singleLayout = singleLayoutTemplate.bind({});
+singleLayout.args = {
+    title: 'Single Activities',
+    cardText: mockCardText,
+    showHeader: true,
+    showSecondTab: false,
+    showThirdTab: false
+};
+
+singleLayout.parameters = {
+    controls: { expanded: true }
+};

lib/core/info-drawer/info-drawer.module.ts

@@ -17,16 +17,19 @@
 
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { MaterialModule } from '../material.module';
-
 import { InfoDrawerLayoutComponent, InfoDrawerTitleDirective, InfoDrawerButtonsDirective, InfoDrawerContentDirective } from './info-drawer-layout.component';
 import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.component';
 import { TranslateModule } from '@ngx-translate/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTabsModule } from '@angular/material/tabs';
+import { MatCardModule } from '@angular/material/card';
 
 @NgModule({
     imports: [
         CommonModule,
-        MaterialModule,
+        MatTabsModule,
+        MatIconModule,
+        MatCardModule,
         TranslateModule
     ],
     declarations: [
@@ -43,7 +46,10 @@ import { TranslateModule } from '@ngx-translate/core';
         InfoDrawerComponent,
         InfoDrawerTitleDirective,
         InfoDrawerButtonsDirective,
-        InfoDrawerContentDirective
+        InfoDrawerContentDirective,
+        MatTabsModule,
+        MatCardModule,
+        MatIconModule
     ]
 })
 export class InfoDrawerModule {}

lib/core/info-drawer/mock/info-drawer.mock.ts

@@ -0,0 +1,15 @@
+export const mockTabText = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam urna odio, sagittis vel nulla vel, condimentum egestas dolor.
+Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris eu hendrerit lectus. Aliquam et ex imperdiet, sodales tellus finibus, malesuada eros.
+Vestibulum aliquet eros sed diam euismod tincidunt.
+Pellentesque euismod, augue at blandit dapibus, ex nunc viverra nisl, non laoreet nibh odio in libero.
+Quisque facilisis, dui luctus fringilla lacinia, dui enim accumsan diam, a vehicula mi nulla quis dolor.
+Maecenas non neque sed nulla tincidunt vehicula.`;
+
+export const mockCardText = `Suspendisse euismod egestas nisi, non ullamcorper orci scelerisque id. Vestibulum mollis ex imperdiet nisl viverra egestas.
+Nunc commodo, mi elementum auctor bibendum, neque tortor justo, eget gravida eros.
+Vestibulum nec dui ac ipsum posuere ullamcorper. Nullam ultrices eget tellus ut gravida. Aliquam ullamcorper tellus ac dui vehicula venenatis.
+Maecenas ante ipsum, vestibulum sit amet fringilla a, fringilla quis leo.
+Sed nisl nisi, lacinia ac ullamcorper non, tincidunt at massa. Sed at metus fermentum augue eleifend porta. Sed nec dui ut quam facilisis cursus at et eros.
+Nulla quis diam vitae odio faucibus faucibus ac ac erat. Sed vehicula est eu congue pretium.
+Donec quis nisi ligula. Donec pellentesque nibh nec scelerisque placerat. Nulla facilisi. Sed egestas nisi at risus iaculis faucibus. Nulla facilisi.
+Aliquam ac tincidunt justo, sit amet aliquet libero.`;