[ADF-3746] Add style lint rules (#3975)

* add stylelint

* fix style first part

*  fix style second part

*  fix style third part

*  fix style fourth part

* Fix e2e tests first part

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* fix insights

* fix style abotu component

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* [ADF-3746] Rebase branch

* Fix e2e tests second part

* Rebase branch

*  fix style third part

*  fix style fourth part

* Fix list error

* Fix e2e tests second part

* Rebase branch

* Fix list error

* fix new style added

* tslint fix

* [ADF-3746] Fix scss errors on Process Filters Cloud component

lib/process-services/people/components/people-search-field/people-search-field.component.html

@@ -1,4 +1,4 @@
-<mat-form-field class="search-text-container">
+<mat-form-field class="adf-search-text-container">
     <input
         matInput
         placeholder="{{ searchPlaceholder }}"
@@ -9,22 +9,22 @@
         data-automation-id="adf-people-search-input">
 </mat-form-field>
 <ng-container *ngIf="users$ | async; let users">
-    <div class="search-list-container" id="search-people-list" *ngIf="users.length > 0">
+    <div class="adf-search-list-container" id="search-people-list" *ngIf="users.length > 0">
         <adf-people-list [users]="users" (clickRow)="onRowClick($event)">
             <data-columns>
                 <data-column key="firstName">
                     <ng-template let-entry="$implicit">
-                            <div *ngIf="!entry.row.obj.pictureId" class="people-pic">
+                            <div *ngIf="!entry.row.obj.pictureId" class="adf-people-pic">
                                 {{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}</div>
                             <div>
-                                <img *ngIf="entry.row.obj.pictureId" class="people-img"
+                                <img *ngIf="entry.row.obj.pictureId" class="adf-people-img"
                                     [src]="peopleProcessService.getUserImage(entry.row.obj)"/>
                             </div>
                     </ng-template>
                 </data-column>
-                <data-column key="email" class="full-width">
+                <data-column key="email" class="adf-full-width">
                     <ng-template let-entry="$implicit">
-                        <div class="people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
+                        <div class="adf-people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
                     </ng-template>
                 </data-column>
             </data-columns>

lib/process-services/people/components/people-search-field/people-search-field.component.scss

@@ -6,7 +6,7 @@
     .adf-people-search-field {
         width: 100%;
 
-        .search-text-container {
+        .adf-search-text-container {
             width: 100%;
 
             input {
@@ -14,7 +14,7 @@
             }
         }
 
-        .search-list-container {
+        .adf-search-list-container {
             max-height: 152px;
             width: 100%;
             overflow-y: auto;
@@ -24,7 +24,7 @@
             display: none;
         }
 
-        .people-pic {
+        .adf-people-pic {
             background: mat-color($primary);
             width: 30px;
             padding: 10px 5px;
@@ -37,7 +37,7 @@
             vertical-align: text-bottom;
         }
 
-        .people-img {
+        .adf-people-img {
             border-radius: 90%;
             width: 40px;
             height: 40px;

lib/process-services/people/components/people-search/people-search.component.html

@@ -1,4 +1,4 @@
-<div class="search-text-header">
+<div class="adf-search-text-header">
     <ng-content select="[people-search-title]"></ng-content>
 </div>
 

lib/process-services/people/components/people-search/people-search.component.scss

@@ -6,26 +6,26 @@
     .adf-people-search {
         width: 100%;
 
-        .activiti-label {
+        .adf-activiti-label {
             font-weight: bolder;
         }
 
-        .fix-element-user-list {
-            padding-top: 0px;
-            padding-right: 0px;
-            padding-bottom: 0px;
-            padding-left: 0px;
+        .adf-fix-element-user-list {
+            padding-top: 0;
+            padding-right: 0;
+            padding-bottom: 0;
+            padding-left: 0;
         }
 
-        .search-text-header {
+        .adf-search-text-header {
             font-weight: bold;
             opacity: 0.54;
         }
 
-        .search-list-action-container {
+        .adf-search-list-action-container {
             border-top: 1px solid #eee;
             text-align: right;
-            padding: 5px 0px;
+            padding: 5px 0;
             margin-top: 5px;
             > button {
                 opacity: 0.54;

lib/process-services/people/components/people/people.component.html

@@ -1,17 +1,17 @@
-<mat-card class="assignment-top-container">
-    <div mat-card-content class="assignment-top-container-content">
+<mat-card class="adf-assignment-top-container">
+    <div mat-card-content class="adf-assignment-top-container-content">
         <div class="assignment-header">
-                <div *ngIf="hasPeople()" class="assigment-count" id="people-title">
+                <div *ngIf="hasPeople()" class="adf-assignment-count" id="people-title">
                     {{ 'ADF_TASK_LIST.DETAILS.LABELS.PEOPLE' | translate }} {{ ' (' + people.length + ')' }}
                 </div>
-                <div *ngIf="!hasPeople()" class="assigment-count" id="no-people-label">
+                <div *ngIf="!hasPeople()" class="adf-assignment-count" id="no-people-label">
                     {{ 'ADF_TASK_LIST.DETAILS.PEOPLE.NONE' | translate }}
                 </div>
-                <div *ngIf="isEditMode()" class="add-people" (click)="onAddAssignment()">
+                <div *ngIf="isEditMode()" class="adf-add-people" (click)="onAddAssignment()">
                     <mat-icon class="adf-add-person-icon">person_add</mat-icon>
                 </div>
             </div>
-            <div class="assignment-container" *ngIf="showAssignment">
+            <div class="adf-assignment-container" *ngIf="showAssignment">
                 <adf-people-search
                     #peopleSearch
                     (searchPeople)="searchUser($event)"
@@ -22,7 +22,7 @@
                     <ng-container people-search-action-label>{{ 'ADF_TASK_LIST.PEOPLE.ADD_USER' | translate }}</ng-container>
                 </adf-people-search>
             </div>
-            <div class="assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
+            <div class="adf-assignment-list-container" id="assignment-people-list" *ngIf="hasPeople()">
                 <adf-people-list
                 [users]="people"
                 [actions]="isEditMode()"
@@ -33,16 +33,16 @@
                                 <div *ngIf="!entry.row.obj.pictureId" class="adf-people-search-people-pic">
                                     {{getInitialUserName(entry.row.obj.firstName, entry.row.obj.lastName)}}</div>
                                 <div>
-                                    <img *ngIf="entry.row.obj.pictureId" class="people-img"
+                                    <img *ngIf="entry.row.obj.pictureId" class="adf-people-img"
                                         [src]="peopleProcessService.getUserImage(entry.row.obj)"/>
                                 </div>
                             </ng-template>
                         </data-column>
-                        <data-column key="email" class="full-width">
+                        <data-column key="email" class="adf-full-width">
                             <ng-template let-entry="$implicit">
-                                <div class="people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
-                                <div class="people-email">{{ entry.row.obj.email }}</div>
-                                <div class="people-edit-label">can edit</div>
+                                <div class="adf-people-full-name">{{ getDisplayUser(entry.row.obj.firstName, entry.row.obj.lastName, ' ') }}</div>
+                                <div class="adf-people-email">{{ entry.row.obj.email }}</div>
+                                <div class="adf-people-edit-label">can edit</div>
                             </ng-template>
                         </data-column>
                     </data-columns>

lib/process-services/people/components/people/people.component.scss

@@ -3,19 +3,19 @@
     $foreground: map-get($theme, foreground);
     $header-border: 1px solid mat-color($foreground, divider);
 
-    .assignment-header {
+    .adf-assignment-header {
         border-bottom: $header-border;
         padding: 6px 20px;
     }
 
-    .assigment-count {
+    .adf-assignment-count {
         float: left;
-        padding: 10px 0px;
+        padding: 10px 0;
         font-weight: bolder;
         opacity: 0.54;
     }
 
-    .add-people {
+    .adf-add-people {
         float: right;
         padding: 8px;
         height: 26px;
@@ -26,16 +26,16 @@
         }
     }
 
-    .assignment-top-container.mat-card {
+    .adf-assignment-top-container.mat-card {
         border-top: $header-border;
-        margin: 0px;
-        padding: 0px;
+        margin: 0;
+        padding: 0;
         display: flex;
         flex-flow: row wrap;
         align-items: stretch;
     }
 
-    .assignment-top-container-content {
+    .adf-assignment-top-container-content {
         display: flex;
         flex-flow: column;
         align-items: stretch;
@@ -43,14 +43,14 @@
         max-width: 100%;
     }
 
-    .assignment-container {
+    .adf-assignment-container {
         padding: 10px 20px;
         border-bottom: $header-border;
         max-width: 100%;
     }
 
-    .assignment-list-container {
-        padding: 0px;
+    .adf-assignment-list-container {
+        padding: 0;
     }
 
 
@@ -60,17 +60,17 @@
             display: none;
         }
 
-        .adf-data-table .adf-data-table-cell .cell-container {
+        .adf-data-table .adf-data-table-cell .adf-cell-container {
             flex-direction: column;
             align-items: left;
         }
 
-        .people-email {
+        .adf-people-email {
             opacity: 0.54;
         }
     }
 
-    .people-img {
+    .adf-people-img {
         border-radius: 90%;
         width: 40px;
         height: 40px;