fix: Platform wrapper component for object status with document chang…

…es (#2764) * chore(release): version 0.20.1-rc.23 build 10059 [ci skip] fix: (platform) Link documentation changes and Extending from Base class. (#2751) * docs: documentation change and removed unused file[ci skip] * docs:pre tag in module import * doc:internationl support * docs:updated text * docs:reviewed docs * docs:routerlink used * docs:moved import statement above * fix:baseclass used, docs,examples update * tests:fixed tests for changes * fix:review comments Object Status platform wrapper component Object Status platform wrapper component adding aria label adding aria label adding few formattig in the code changes adding few formattig in the code changes Update object-status.component.ts pushing the documenta changes updating the lint issue and rebasing the code updating the lint issue and rebasing the code * adding few more refined examples adding few more refined examples * migrating from SharedDocumentationModule to SharedDocumentationPageModule migrating from SharedDocumentationModule to SharedDocumentationPageModule to fix build issue Co-authored-by: fundamental-bot <fundamental@sap.com> Co-authored-by: Inna Atanasova <39598672+InnaAtanasova@users.noreply.github.com>
SAP · Aug 19, 2020 · 40e3dfb · 40e3dfb
1 parent 3df41a4
commit 40e3dfb
Show file tree

Hide file tree

Showing 26 changed files with 647 additions and 3 deletions.
diff --git a/apps/docs/src/app/platform/api-files.ts b/apps/docs/src/app/platform/api-files.ts
@@ -14,6 +14,7 @@ export const API_FILES = {
     link: ['LinkComponent'],
     menu: ['MenuComponent', 'MenuItemComponent', 'MenuTriggerDirective'],
     menuButton: ['MenuButtonComponent'],
+    objectStatus: ['ObjectStatusComponent'],
     radioGroup: ['RadioGroupComponent'],
     searchField: ['SearchFieldComponent'],
     select: ['SelectPlatformComponent'],

diff --git a/...platform/component-docs/platform-object-status/platform-object-status-docs.component.html b/...platform/component-docs/platform-object-status/platform-object-status-docs.component.html
@@ -0,0 +1,86 @@
+<fd-docs-section-title id="'default'" componentName="'objectStatus'">
+    Default Object Status
+</fd-docs-section-title>
+<component-example>
+    <fdp-platform-object-status-example></fdp-platform-object-status-example>
+</component-example>
+<code-example [exampleFiles]="platformDefaultObjectStatusHtmlType"></code-example>
+
+<fd-docs-section-title id="'Text'" componentName="'objectStatus'">
+    Object Status Text Only
+</fd-docs-section-title>
+<component-example>
+    <fdp-object-status-text-example></fdp-object-status-text-example>
+</component-example>
+<code-example [exampleFiles]="platformObjectStatusTextExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="'iconandText'" componentName="'objectStatus'">
+    Object Status with Text and Icon
+</fd-docs-section-title>
+<description></description>
+<component-example>
+    <fdp-object-status-numeric-icon-example></fdp-object-status-numeric-icon-example>
+</component-example>
+<code-example [exampleFiles]="platformObjectStatusNumericIconExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="'genericText'" componentName="'objectStatus'">
+    Object Status with Generic Indication Colors
+</fd-docs-section-title>
+<description></description>
+<component-example>
+    <fdp-object-status-generic-text-example></fdp-object-status-generic-text-example>
+</component-example>
+<code-example [exampleFiles]="platformObjectStatusTextIconExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="'clickable'" componentName="'objectStatus'">
+    Clickable Object Status
+</fd-docs-section-title>
+<description>For clickable Object Status set the <code>[clickable]</code> property to <code>true</code>.</description>
+<component-example>
+    <fdp-object-status-clickable-and-icon-example></fdp-object-status-clickable-and-icon-example>
+</component-example>
+<code-example [exampleFiles]="platformObjectStatusclickableAndIconExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="'inverted'" componentName="'objectStatus'">
+    Inverted Object Status
+</fd-docs-section-title>
+<description
+    >Inverted Object Status are achieved by setting the <code>[inverted]</code> property to
+    <code>true</code>.</description
+>
+<component-example>
+    <fdp-object-status-inverted-example></fdp-object-status-inverted-example>
+</component-example>
+<code-example [exampleFiles]="platformObjectStatusInvertedExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="'invertedGeneric'" componentName="'objectStatus'">
+    Inverted Object Status with Generic Indication Colors
+</fd-docs-section-title>
+<description></description>
+<component-example>
+    <fdp-object-status-inverted-generic-text-example></fdp-object-status-inverted-generic-text-example>
+</component-example>
+<code-example [exampleFiles]="platformObjectStatusInverterdGenericExample"></code-example>
+
+<separator></separator>
+
+<fd-docs-section-title id="'objectStatusLarge'" componentName="'objectStatus'">
+    Object Status Large Design
+</fd-docs-section-title>
+<description>For Object Status in large design use <code>[large]="true"</code>.</description>
+<component-example>
+    <fdp-object-status-object-status-large-example></fdp-object-status-object-status-large-example>
+</component-example>
+<code-example [exampleFiles]="platformObjectStatusLargeExample"></code-example>
+
+<separator></separator>
diff --git a/...p/platform/component-docs/platform-object-status/platform-object-status-docs.component.ts b/...p/platform/component-docs/platform-object-status/platform-object-status-docs.component.ts
@@ -0,0 +1,83 @@
+import { Component, ViewEncapsulation, ChangeDetectionStrategy } from '@angular/core';
+import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
+
+import * as PlatformObjectStatusDefaultExample from '!raw-loader!./platform-object-status-example/platform-object-status-example.component.html';
+import * as PlatformObjectStatusTextExample from '!raw-loader!./platform-object-status-example/platform-object-status-text-example.component.html';
+import * as PlatformObjectStatusGenericTextExample from '!raw-loader!./platform-object-status-example/platform-object-status-generic-text-example.component.html';
+import * as PlatformObjectStatusTextIconExample from '!raw-loader!./platform-object-status-example/platform-object-status-icon-text-example.component.html';
+import * as PlatformObjectStatusClickableAndIConExample from '!raw-loader!./platform-object-status-example/platform-object-status-clickable-and-icon-example.component.html';
+import * as PlatformObjectStatusInvertedTextExample from '!raw-loader!./platform-object-status-example/platform-object-status-inverted-example.component.html';
+import * as PlatformObjectStatusInvertedGenericExample from '!raw-loader!./platform-object-status-example/platform-object-status-inverted-generic-text-example.component.html';
+import * as PlatformObjectStatusLargeExample from '!raw-loader!./platform-object-status-example/platform-object-status-large-example.component.html';
+
+@Component({
+    selector: 'fdp-platform-object-status-docs',
+    templateUrl: './platform-object-status-docs.component.html',
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class PlatformObjectStatusDocsComponent {
+    platformDefaultObjectStatusHtmlType: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusDefaultExample,
+            fileName: 'platform-object-status-example'
+        }
+    ];
+
+    platformObjectStatusTextExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusTextExample,
+            fileName: 'platform-object-status-text-example'
+        }
+    ];
+
+    platformObjectStatusTextIconExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusGenericTextExample,
+            fileName: 'platform-object-status-generic-text-example'
+        }
+    ];
+
+    platformObjectStatusNumericIconExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusTextIconExample,
+            fileName: 'platform-object-status-icon-text-example'
+        }
+    ];
+
+    platformObjectStatusclickableAndIconExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusClickableAndIConExample,
+            fileName: 'platform-object-status-clickable-and-icon-example'
+        }
+    ];
+
+    platformObjectStatusInvertedExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusInvertedTextExample,
+            fileName: 'platform-object-status-inverted-example'
+        }
+    ];
+
+    platformObjectStatusInverterdGenericExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusInvertedGenericExample,
+            fileName: 'platform-object-status-inverted-generic-text-example'
+        }
+    ];
+
+    platformObjectStatusLargeExample: ExampleFile[] = [
+        {
+            language: 'html',
+            code: PlatformObjectStatusLargeExample,
+            fileName: 'platform-object-status-large-example'
+        }
+    ];
+}
diff --git a/.../app/platform/component-docs/platform-object-status/platform-object-status-docs.module.ts b/.../app/platform/component-docs/platform-object-status/platform-object-status-docs.module.ts
@@ -0,0 +1,47 @@
+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { ApiComponent } from '../../../documentation/core-helpers/api/api.component';
+import { API_FILES } from '../../api-files';
+import { PlatformObjectStatusHeaderComponent } from './platform-object-status-header/platform-object-status-header.component';
+import { PlatformObjectStatusDocsComponent } from './platform-object-status-docs.component';
+import {
+    PlatformObjectStatusExampleComponent,
+    PlatformObjectStatusTextExampleComponent,
+    PlatformObjectStatusGenericExampleComponent,
+    PlatformObjectStatusTextIconExampleComponent,
+    PlatformObjectStatusClickableAndIconExampleComponent,
+    PlatformObjectStatusInvertedTextExampleComponent,
+    PlatformObjectStatusInvertedGenericTextExampleComponent,
+    PlatformObjectStatusLargeExampleComponent
+} from './platform-object-status-example/platform-object-status-example.component';
+import { PlatformObjectStatusModule } from '@fundamental-ngx/platform';
+import { SharedDocumentationPageModule } from '../../../documentation/shared-documentation-page.module';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: PlatformObjectStatusHeaderComponent,
+        children: [
+            { path: '', component: PlatformObjectStatusDocsComponent },
+            { path: 'api', component: ApiComponent, data: { content: API_FILES.objectStatus } }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes), SharedDocumentationPageModule, PlatformObjectStatusModule],
+    exports: [RouterModule],
+    declarations: [
+        PlatformObjectStatusDocsComponent,
+        PlatformObjectStatusExampleComponent,
+        PlatformObjectStatusTextExampleComponent,
+        PlatformObjectStatusGenericExampleComponent,
+        PlatformObjectStatusTextIconExampleComponent,
+        PlatformObjectStatusClickableAndIconExampleComponent,
+        PlatformObjectStatusInvertedTextExampleComponent,
+        PlatformObjectStatusInvertedGenericTextExampleComponent,
+        PlatformObjectStatusLargeExampleComponent,
+        PlatformObjectStatusHeaderComponent
+    ]
+})
+export class PlatformObjectStatusDocsModule {}
diff --git a/...rm-object-status-example/platform-object-status-clickable-and-icon-example.component.html b/...rm-object-status-example/platform-object-status-clickable-and-icon-example.component.html
@@ -0,0 +1,20 @@
+<fdp-object-status status="negative" glyph="status-negative" clickable="true" (click)="showObjectStatus()"
+    >Negative</fdp-object-status
+>
+<fdp-object-status status="critical" glyph="status-critical" clickable="true" (click)="showObjectStatus()"
+    >Critical</fdp-object-status
+>
+<fdp-object-status status="positive" glyph="status-positive" clickable="true" (click)="showObjectStatus()"
+    >Positive</fdp-object-status
+>
+<fdp-object-status status="informative" glyph="hint" clickable="true" (click)="showObjectStatus()"
+    >Informative</fdp-object-status
+>
+<fdp-object-status glyph="to-be-reviewed" clickable="true" (click)="showObjectStatus()">Default</fdp-object-status>
+<br />
+<br />
+<ng-container *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8]">
+    <fdp-object-status indicationColor="{{ item }}" clickable="true" (click)="showAlert(item)"
+        >Indication Color {{ item }}</fdp-object-status
+    >
+</ng-container>
diff --git a/...bject-status/platform-object-status-example/platform-object-status-example.component.html b/...bject-status/platform-object-status-example/platform-object-status-example.component.html
@@ -0,0 +1 @@
+<fdp-object-status glyph="hide">Object Status</fdp-object-status>
diff --git a/...bject-status/platform-object-status-example/platform-object-status-example.component.scss b/...bject-status/platform-object-status-example/platform-object-status-example.component.scss
@@ -0,0 +1,3 @@
+fdp-object-status {
+    margin-right: 20px;
+}
diff --git a/...-object-status/platform-object-status-example/platform-object-status-example.component.ts b/...-object-status/platform-object-status-example/platform-object-status-example.component.ts
@@ -0,0 +1,68 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fdp-platform-object-status-example',
+    templateUrl: './platform-object-status-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusExampleComponent {}
+
+@Component({
+    selector: 'fdp-object-status-text-example',
+    templateUrl: './platform-object-status-text-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusTextExampleComponent {}
+
+@Component({
+    selector: 'fdp-object-status-generic-text-example',
+    templateUrl: './platform-object-status-generic-text-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusGenericExampleComponent {}
+
+@Component({
+    selector: 'fdp-object-status-numeric-icon-example',
+    templateUrl: './platform-object-status-icon-text-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusTextIconExampleComponent {}
+
+@Component({
+    selector: 'fdp-object-status-clickable-and-icon-example',
+    templateUrl: './platform-object-status-clickable-and-icon-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusClickableAndIconExampleComponent {
+    showAlert(index: number): void {
+        alert('you clicked the clickable ObjectStatus' + index);
+    }
+    showObjectStatus(): void {
+        alert('you clicked the clickable ObjectStatus');
+    }
+}
+
+@Component({
+    selector: 'fdp-object-status-inverted-example',
+    templateUrl: './platform-object-status-inverted-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusInvertedTextExampleComponent {}
+
+@Component({
+    selector: 'fdp-object-status-inverted-generic-text-example',
+    templateUrl: './platform-object-status-inverted-generic-text-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusInvertedGenericTextExampleComponent {}
+
+@Component({
+    selector: 'fdp-object-status-object-status-large-example',
+    templateUrl: './platform-object-status-large-example.component.html',
+    styleUrls: ['./platform-object-status-example.component.scss']
+})
+export class PlatformObjectStatusLargeExampleComponent {
+    showAlert(): void {
+        alert('clicked alert large');
+    }
+}
diff --git a/...platform-object-status-example/platform-object-status-generic-text-example.component.html b/...platform-object-status-example/platform-object-status-generic-text-example.component.html
@@ -0,0 +1,3 @@
+<ng-container *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8]">
+    <fdp-object-status indicationColor="{{ item }}">Indication Color {{ item }}</fdp-object-status>
+</ng-container>
diff --git a/...us/platform-object-status-example/platform-object-status-icon-text-example.component.html b/...us/platform-object-status-example/platform-object-status-icon-text-example.component.html
@@ -0,0 +1,5 @@
+<fdp-object-status status="negative" glyph="status-negative">Negative</fdp-object-status>
+<fdp-object-status status="critical" glyph="status-critical">Critical</fdp-object-status>
+<fdp-object-status status="positive" glyph="status-positive">Positive</fdp-object-status>
+<fdp-object-status status="informative" glyph="hint">Informative</fdp-object-status>
+<fdp-object-status glyph="to-be-reviewed">Default</fdp-object-status>
diff --git a/...tus/platform-object-status-example/platform-object-status-inverted-example.component.html b/...tus/platform-object-status-example/platform-object-status-inverted-example.component.html
@@ -0,0 +1,43 @@
+<fdp-object-status status="negative" glyph="status-negative" inverted="true"></fdp-object-status>
+<fdp-object-status status="critical" glyph="status-critical" inverted="true"></fdp-object-status>
+<fdp-object-status status="positive" glyph="status-positive" inverted="true"></fdp-object-status>
+<fdp-object-status status="informative" glyph="hint" inverted="true"></fdp-object-status>
+<fdp-object-status glyph="to-be-reviewed" inverted="true"></fdp-object-status>
+
+<br /><br />
+
+<fdp-object-status status="negative" inverted="true">Negative</fdp-object-status>
+<fdp-object-status status="critical" inverted="true">Critical</fdp-object-status>
+<fdp-object-status status="positive" inverted="true">Positive</fdp-object-status>
+<fdp-object-status status="informative" inverted="true">Informative</fdp-object-status>
+<fdp-object-status inverted="true">Default</fdp-object-status>
+
+<br /><br />
+
+<fdp-object-status status="negative" inverted="true">5</fdp-object-status>
+<fdp-object-status status="critical" inverted="true">20</fdp-object-status>
+<fdp-object-status status="positive" inverted="true">2.99</fdp-object-status>
+<fdp-object-status status="informative" inverted="true">10</fdp-object-status>
+<fdp-object-status inverted="true">99+</fdp-object-status>
+
+<br /><br />
+
+<fdp-object-status status="negative" glyph="status-negative" inverted="true">Negative</fdp-object-status>
+<fdp-object-status status="critical" glyph="status-critical" inverted="true">Critical</fdp-object-status>
+<fdp-object-status status="positive" glyph="status-positive" inverted="true">Positive</fdp-object-status>
+<fdp-object-status status="informative" glyph="hint" inverted="true">Informative</fdp-object-status>
+<fdp-object-status glyph="to-be-reviewed" inverted="true">Default</fdp-object-status>
+
+<br /><br />
+
+<fdp-object-status status="negative" glyph="status-negative" clickable="true" inverted="true"
+    >Negative</fdp-object-status
+>
+<fdp-object-status status="critical" glyph="status-critical" clickable="true" inverted="true"
+    >Critical</fdp-object-status
+>
+<fdp-object-status status="positive" glyph="status-positive" clickable="true" inverted="true"
+    >Positive</fdp-object-status
+>
+<fdp-object-status status="informative" glyph="hint" clickable="true" inverted="true">Informative</fdp-object-status>
+<fdp-object-status glyph="to-be-reviewed" clickable="true" inverted="true">Default</fdp-object-status>
diff --git a/...object-status-example/platform-object-status-inverted-generic-text-example.component.html b/...object-status-example/platform-object-status-inverted-generic-text-example.component.html
@@ -0,0 +1,5 @@
+<ng-container *ngFor="let item of [1, 2, 3, 4, 5, 6, 7, 8]">
+    <fdp-object-status indicationColor="{{ item }}" [clickable]="true" [inverted]="true"
+        >Indication Color {{ item }}</fdp-object-status
+    >
+</ng-container>