[ACA-4382 ] About Page refactoring to use it across all the platform (#7365)

* about page refactor for global usage

* Development About

* add storybook

* fix build

* fix

* fix

* fix imports

* fix

* fix lint

* fix

* fix

* fix

* fix

lib/core/about/about-package/package-list.component.html

@@ -0,0 +1,11 @@
+<mat-table [dataSource]="data">
+  <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+    <mat-header-cell *matHeaderCellDef>
+      {{ column.header | translate }}
+    </mat-header-cell>
+    <mat-cell *matCellDef="let row">{{ column.cell(row) }}</mat-cell>
+  </ng-container>
+
+  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
+  <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
+</mat-table>

lib/core/about/about-package/package-list.component.ts

@@ -0,0 +1,45 @@
+/*!
+ * @license
+ * Copyright 2019 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 { Component, ViewEncapsulation, ChangeDetectionStrategy, Input } from '@angular/core';
+import { PackageInfo } from '../interfaces';
+
+@Component({
+  selector: 'adf-about-package-list',
+  templateUrl: './package-list.component.html',
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PackageListComponent {
+  columns = [
+    {
+      columnDef: 'title',
+      header: 'ABOUT.PACKAGES.NAME',
+      cell: (row: PackageInfo) => `${row.name}`
+    },
+    {
+      columnDef: 'version',
+      header: 'ABOUT.PACKAGES.VERSION',
+      cell: (row: PackageInfo) => `${row.version}`
+    }
+  ];
+
+  displayedColumns = this.columns.map((x) => x.columnDef);
+
+  @Input()
+  data: Array<PackageInfo> = [];
+}