feat: (Core) component for object marker with document changes (#3178)

* Object marker directive changes Object marker directive changes renaimg the dir and committing the build issues renaimg the dir and committing the build issues Updating the RC verion of style to the latest Updating the RC verion of style to the latest Update object-marker.component.spec.ts updating the documentation updating the documentation Updating the comments Updating the comments adding icon to the content dynamically adding icon to the content dynamically updating the test cases updating the test cases updating the code change for the glyph icon change updating the code change for the glyph icon change updating the test cases updating the test cases * updating the template in Object Marker updating the template in Object Marker * underline on hover fixed underline on hover fixed Update package-lock.json removing unwanter variables and adding label properties removing unwanter variables and adding label properties Revert "Update package-lock.json" This reverts commit 76bdbdb. * documentation changes documentation changes * Object marker directive changes Object marker directive changes renaimg the dir and committing the build issues renaimg the dir and committing the build issues Updating the RC verion of style to the latest Updating the RC verion of style to the latest Update object-marker.component.spec.ts updating the documentation updating the documentation Updating the comments Updating the comments adding icon to the content dynamically adding icon to the content dynamically updating the test cases updating the test cases updating the code change for the glyph icon change updating the code change for the glyph icon change updating the test cases updating the test cases updating the template in Object Marker updating the template in Object Marker underline on hover fixed underline on hover fixed Update package-lock.json removing unwanter variables and adding label properties removing unwanter variables and adding label properties Revert "Update package-lock.json" This reverts commit 76bdbdb. * Update package-lock.json
SAP · Oct 1, 2020 · 48961d4 · 48961d4
1 parent ef81011
commit 48961d4
Show file tree

Hide file tree

Showing 21 changed files with 348 additions and 1 deletion.
diff --git a/apps/docs/src/app/core/api-files.ts b/apps/docs/src/app/core/api-files.ts
@@ -56,7 +56,12 @@ export const API_FILES = {
     datePicker: ['DatePickerComponent', 'DateFormatParser', 'DateFormatParserDefault', 'FdDate'],
     datetimePicker: ['DatetimePickerComponent', 'FdDateTime', 'DateTimeFormatParser', 'DateTimeFormatParserDefault'],
     fileInput: ['FileInputComponent', 'FileSelectDirective', 'FileDragndropDirective'],
-    fileUploader: ['FileUploaderComponent', 'FileUploaderSelectDirective', 'FileUploaderDragndropDirective', 'FileUploaderService'],
+    fileUploader: [
+        'FileUploaderComponent',
+        'FileUploaderSelectDirective',
+        'FileUploaderDragndropDirective',
+        'FileUploaderService'
+    ],
     fixedCardLayout: ['FixedCardLayoutComponent', 'CardDefinitionDirective'],
     form: [
         'FormControlComponent',
@@ -160,6 +165,7 @@ export const API_FILES = {
         'NotificationDefault',
         'NotificationRef'
     ],
+    objectMarker: ['ObjectMarkerComponent'],
     objectStatus: ['ObjectStatusModule', 'ObjectStatusComponent'],
     pagination: ['PaginationComponent', 'PaginationModel', 'PaginationService'],
     panel: ['PanelComponent', 'PanelTitleDirective'],

diff --git a/...core/component-docs/object-marker/examples/object-marker-Icon-text-example.component.html b/...core/component-docs/object-marker/examples/object-marker-Icon-text-example.component.html
@@ -0,0 +1,5 @@
+<span fd-object-marker glyph="add-favorite" aria-label="Favourite Icon with Text" label="Favourite"></span>
+<span fd-object-marker glyph="flag" aria-label="Flag Icon with Text" label="Flag"></span>
+<span fd-object-marker glyph="user-edit" aria-label="Edit Icon with Text" label="Edit"></span>
+<span fd-object-marker glyph="private" aria-label="Locked Icon with Text" label="Locked"></span>
+<span fd-object-marker glyph="request" aria-label="Request Icon with Text" label="Request"></span>
diff --git a/...core/component-docs/object-marker/examples/object-marker-clickable-example.component.html b/...core/component-docs/object-marker/examples/object-marker-clickable-example.component.html
@@ -0,0 +1,15 @@
+<a
+    fd-object-marker
+    glyph="add-favorite"
+    clickable="true"
+    aria-label="Object Maker with Text Clickable"
+    label="Favourite"
+></a>
+<a
+    fd-object-marker
+    [glyph]="glyph"
+    clickable="true"
+    aria-label="Object Maker with Text Clickable"
+    (click)="changeGlyph()"
+    label="Locked"
+></a>
diff --git a/...p/core/component-docs/object-marker/examples/object-marker-clickable-example.component.ts b/...p/core/component-docs/object-marker/examples/object-marker-clickable-example.component.ts
@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-object-marker-clickable-example',
+    templateUrl: './object-marker-clickable-example.component.html'
+})
+export class ObjectMarkerClickableExampleComponent {
+    glyph = 'private';
+    changeGlyph(): void {
+        this.glyph = 'add-favorite';
+    }
+}
diff --git a/...s/src/app/core/component-docs/object-marker/examples/object-marker-example.component.html b/...s/src/app/core/component-docs/object-marker/examples/object-marker-example.component.html
@@ -0,0 +1,5 @@
+<span fd-object-marker glyph="add-favorite" title="Favorite" aria-label="Favourite Icon" aria-hidden="true"></span>
+<span fd-object-marker glyph="flag" title="Flag" aria-label="Favourite Flag" aria-hidden="true"></span>
+<span fd-object-marker glyph="request" title="Request" aria-label="Favourite Request" aria-hidden="true"></span>
+<span fd-object-marker glyph="user-edit" title="Editable" aria-label="Favourite Editable" aria-hidden="true"></span>
+<span fd-object-marker glyph="private" title="Private" aria-label="Favourite Private" aria-hidden="true"></span>
diff --git a/...ocs/src/app/core/component-docs/object-marker/examples/object-marker-example.component.ts b/...ocs/src/app/core/component-docs/object-marker/examples/object-marker-example.component.ts
@@ -0,0 +1,19 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-object-marker-example',
+    templateUrl: './object-marker-example.component.html'
+})
+export class ObjectMarkerExampleComponent {}
+
+@Component({
+    selector: 'fd-object-marker-icon-text-example',
+    templateUrl: './object-marker-Icon-text-example.component.html'
+})
+export class ObjectMarkerIconAndTextExampleComponent {}
+
+@Component({
+    selector: 'fd-object-marker-text-example',
+    templateUrl: './object-marker-text-example.component.html'
+})
+export class ObjectMarkerTextExampleComponent {}
diff --git a/.../app/core/component-docs/object-marker/examples/object-marker-text-example.component.html b/.../app/core/component-docs/object-marker/examples/object-marker-text-example.component.html
@@ -0,0 +1,4 @@
+<span fd-object-marker aria-label="Object Maker with Text" label="Draft"></span>
+<span fd-object-marker aria-label="Object Maker with Text" label="Request"></span>
+<a fd-object-marker clickable="true" aria-label="Object Maker with only Text Clickable" label="Locked"></a>
+<a fd-object-marker clickable="true" aria-label="Object Maker with only Text Clickable" label="Edit"></a>
diff --git a/apps/docs/src/app/core/component-docs/object-marker/object-marker-docs.component.html b/apps/docs/src/app/core/component-docs/object-marker/object-marker-docs.component.html
@@ -0,0 +1,46 @@
+<fd-docs-section-title id="icon-only" componentName="objectmarker">
+    Object marker Only Icon Example
+</fd-docs-section-title>
+<description>
+    Standard list of icon used of the Object marker use <code>glyph</code> property to add icon.
+</description>
+<component-example>
+    <fd-object-marker-example></fd-object-marker-example>
+</component-example>
+<code-example [exampleFiles]="objectMarkerIconOnly"></code-example>
+<separator></separator>
+
+<fd-docs-section-title id="Object-marker-text" componentName="objectmarker">
+    Object marker Text and clickable Text
+</fd-docs-section-title>
+<description>
+    Standard Object marker Text and clickable use <code>clickable</code> boolean property to add hovering effects.
+</description>
+<component-example>
+    <fd-object-marker-text-example></fd-object-marker-text-example>
+</component-example>
+<code-example [exampleFiles]="objectMarkerText"></code-example>
+<separator></separator>
+
+<fd-docs-section-title id="icon-text" componentName="objectmarker">
+    Object marker Icon and text readonly.
+</fd-docs-section-title>
+<description> Standard Object marker with icon and text use <code>glyph</code> property to add icon. </description>
+<component-example>
+    <fd-object-marker-icon-text-example></fd-object-marker-icon-text-example>
+</component-example>
+<code-example [exampleFiles]="objectMarkerIconandText"></code-example>
+<separator></separator>
+
+<fd-docs-section-title id="clickable" componentName="objectmarker">
+    Object marker icon and text clickable.
+</fd-docs-section-title>
+<description>
+    Standard Object marker with icon and text with clickable use <code>clickable</code> boolean property to add hovering
+    effects.
+</description>
+<component-example>
+    <fd-object-marker-clickable-example></fd-object-marker-clickable-example>
+</component-example>
+<code-example [exampleFiles]="objectMarkerClickable"></code-example>
+<separator></separator>
diff --git a/apps/docs/src/app/core/component-docs/object-marker/object-marker-docs.component.ts b/apps/docs/src/app/core/component-docs/object-marker/object-marker-docs.component.ts
@@ -0,0 +1,48 @@
+import { Component, OnInit } from '@angular/core';
+import { ExampleFile } from '../../../documentation/core-helpers/code-example/example-file';
+import * as ObjectMarkerExample from '!raw-loader!./examples/object-marker-example.component.html';
+import * as ObjectMarkerIconandText from '!raw-loader!./examples/object-marker-Icon-text-example.component.html';
+import * as ObjectMarkerClickable from '!raw-loader!./examples/object-marker-clickable-example.component.html';
+import * as ObjectMarkerText from '!raw-loader!./examples/object-marker-text-example.component.html';
+import * as ObjectMarkerClickAble from '!raw-loader!./examples/object-marker-clickable-example.component.ts';
+
+@Component({
+    selector: 'fd-object-marker-docs',
+    templateUrl: './object-marker-docs.component.html'
+})
+export class ObjectMarkerDocsComponent {
+    objectMarkerIconOnly: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectMarkerExample,
+            fileName: 'object-marker-example'
+        }
+    ];
+    objectMarkerIconandText: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectMarkerIconandText,
+            fileName: 'object-marker-example'
+        }
+    ];
+    objectMarkerText: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectMarkerText,
+            fileName: 'object-marker-example'
+        }
+    ];
+    objectMarkerClickable: ExampleFile[] = [
+        {
+            language: 'html',
+            code: ObjectMarkerClickable,
+            fileName: 'object-marker-clickable-example'
+        },
+        {
+            language: 'typescript',
+            code: ObjectMarkerClickAble,
+            fileName: 'object-marker-clickable-example',
+            component: 'ObjectMarkerClickableExampleComponent'
+        }
+    ];
+}
diff --git a/apps/docs/src/app/core/component-docs/object-marker/object-marker-docs.module.ts b/apps/docs/src/app/core/component-docs/object-marker/object-marker-docs.module.ts
@@ -0,0 +1,39 @@
+import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
+import { Routes, RouterModule } from '@angular/router';
+import { ObjectMarkerModule } from '@fundamental-ngx/core';
+import { ObjectMarkerDocsComponent } from './object-marker-docs.component';
+import { ObjectMarkerHeaderComponent } from './object-marker-header/object-marker-header.component';
+import { ApiComponent } from '../../../documentation/core-helpers/api/api.component';
+import { API_FILES } from '../../api-files';
+import {
+    ObjectMarkerExampleComponent,
+    ObjectMarkerIconAndTextExampleComponent,
+    ObjectMarkerTextExampleComponent
+} from './examples/object-marker-example.component';
+import { SharedDocumentationPageModule } from '../../../documentation/shared-documentation-page.module';
+import { ObjectMarkerClickableExampleComponent } from './examples/object-marker-clickable-example.component';
+
+const routes: Routes = [
+    {
+        path: '',
+        component: ObjectMarkerHeaderComponent,
+        children: [
+            { path: '', component: ObjectMarkerDocsComponent },
+            { path: 'api', component: ApiComponent, data: { content: API_FILES.objectMarker } }
+        ]
+    }
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes), ObjectMarkerModule, SharedDocumentationPageModule],
+    exports: [RouterModule],
+    declarations: [
+        ObjectMarkerDocsComponent,
+        ObjectMarkerHeaderComponent,
+        ObjectMarkerExampleComponent,
+        ObjectMarkerIconAndTextExampleComponent,
+        ObjectMarkerClickableExampleComponent,
+        ObjectMarkerTextExampleComponent
+    ]
+})
+export class ObjectMarkerDocsModule {}
diff --git a/...ore/component-docs/object-marker/object-marker-header/object-marker-header.component.html b/...ore/component-docs/object-marker/object-marker-header/object-marker-header.component.html
@@ -0,0 +1,12 @@
+<header>Object Marker</header>
+<description>
+    <p>
+        Object Marker is replacing the Badges With the self-explanatory statuses Flag and Favorite are always displayed
+        as an icon,
+    </p>
+    <p>Generic indication of marked object with diffrent set of icon.</p>
+</description>
+<import module="ObjectMarkerModule"></import>
+
+<fd-header-tabs></fd-header-tabs>
+<router-outlet></router-outlet>
diff --git a/.../core/component-docs/object-marker/object-marker-header/object-marker-header.component.ts b/.../core/component-docs/object-marker/object-marker-header/object-marker-header.component.ts
@@ -0,0 +1,7 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+    selector: 'fd-object-marker-header',
+    templateUrl: './object-marker-header.component.html'
+})
+export class ObjectMarkerHeaderComponent {}
diff --git a/apps/docs/src/app/core/core-documentation.routes.ts b/apps/docs/src/app/core/core-documentation.routes.ts
@@ -204,6 +204,13 @@ export const ROUTES: Routes = [
                         (m) => m.NotificationDocsModule
                     )
             },
+            {
+                path: 'object-marker',
+                loadChildren: () =>
+                    import('./component-docs/object-marker/object-marker-docs.module').then(
+                        (m) => m.ObjectMarkerDocsModule
+                    )
+            },
             {
                 path: 'object-status',
                 loadChildren: () =>

diff --git a/apps/docs/src/app/core/documentation/core-documentation.component.ts b/apps/docs/src/app/core/documentation/core-documentation.component.ts
@@ -47,6 +47,7 @@ export class CoreDocumentationComponent extends DocumentationBaseComponent {
             { url: 'core/message-strip', name: 'Message Strip' },
             { url: 'core/multi-input', name: 'Multi Input' },
             { url: 'core/notification', name: 'Notification' },
+            { url: 'core/object-marker', name: 'Object Marker' },
             { url: 'core/object-status', name: 'Object Status' },
             { url: 'core/pagination', name: 'Pagination' },
             { url: 'core/panel', name: 'Panel' },

diff --git a/libs/core/src/index.ts b/libs/core/src/index.ts
@@ -32,6 +32,7 @@ export * from './lib/multi-input/public_api';
 export * from './lib/message-strip/public_api';
 export * from './lib/nested-list/public_api';
 export * from './lib/notification/public_api';
+export * from './lib/object-marker/public_api';
 export * from './lib/pagination/public_api';
 export * from './lib/panel/public_api';
 export * from './lib/popover/public_api';

diff --git a/libs/core/src/lib/fundamental-ngx-core.module.ts b/libs/core/src/lib/fundamental-ngx-core.module.ts
@@ -66,6 +66,7 @@ import { ComboboxMobileModule } from './combobox/combobox-mobile/combobox-mobile
 import { CarouselModule } from './utils/directives/carousel/carousel.module';
 import { ToolbarModule } from './toolbar/toolbar.module';
 import { CardModule } from './card/card.module';
+import { ObjectMarkerModule } from './object-marker/object-marker.module';
 
 @NgModule({
     imports: [CommonModule, FormsModule],
@@ -109,6 +110,7 @@ import { CardModule } from './card/card.module';
         MultiInputMobileModule,
         NestedListModule,
         NotificationModule,
+        ObjectMarkerModule,
         ObjectStatusModule,
         PaginationModule,
         PanelModule,

diff --git a/libs/core/src/lib/object-marker/object-marker.component.scss b/libs/core/src/lib/object-marker/object-marker.component.scss
@@ -0,0 +1 @@
+@import '~fundamental-styles/dist/object-marker';
diff --git a/libs/core/src/lib/object-marker/object-marker.component.spec.ts b/libs/core/src/lib/object-marker/object-marker.component.spec.ts
@@ -0,0 +1,41 @@
+import { Component, ViewChild } from '@angular/core';
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { ObjectMarkerComponent } from './object-marker.component';
+
+@Component({
+    selector: 'fd-test-object-marker',
+    template: ` <span fd-object-marker>Test Object Marker</span> `
+})
+class TestObjectMarkerComponent {
+    @ViewChild(ObjectMarkerComponent, { static: true })
+    objectMarkerComponent: ObjectMarkerComponent;
+}
+
+describe('ObjectMarkerComponent', () => {
+    let component: ObjectMarkerComponent;
+    let fixture: ComponentFixture<TestObjectMarkerComponent>;
+
+    beforeEach(async(() => {
+        TestBed.configureTestingModule({
+            declarations: [ObjectMarkerComponent, TestObjectMarkerComponent]
+        }).compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(TestObjectMarkerComponent);
+        component = fixture.componentInstance.objectMarkerComponent;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+
+    it('Should Add Clickable Class', () => {
+        component.clickable = true;
+        component.buildComponentCssClass();
+        fixture.detectChanges();
+        expect(component.elementRef().nativeElement.classList.contains('fd-object-marker--link')).toBe(true);
+    });
+});
diff --git a/libs/core/src/lib/object-marker/object-marker.component.ts b/libs/core/src/lib/object-marker/object-marker.component.ts
@@ -0,0 +1,64 @@
+import {
+    Component,
+    OnInit,
+    ViewEncapsulation,
+    ChangeDetectionStrategy,
+    Input,
+    OnChanges,
+    ElementRef
+} from '@angular/core';
+import { CssClassBuilder, applyCssClass } from '../utils/public_api';
+
+@Component({
+    // tslint:disable-next-line:component-selector
+    selector: '[fd-object-marker]',
+    template: ` <i class="fd-object-marker__icon" [ngClass]="' sap-icon--' + glyph" *ngIf="glyph"></i>
+        <span *ngIf="label" class="fd-object-marker__text">{{ label }}</span>
+        <ng-content></ng-content>`,
+    styleUrls: ['./object-marker.component.scss'],
+    encapsulation: ViewEncapsulation.None,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class ObjectMarkerComponent implements OnChanges, OnInit, CssClassBuilder {
+    /** User's custom classes */
+    @Input()
+    class: string;
+    /** Glyph (icon) of the Object Status.*/
+    @Input()
+    glyph: string;
+
+    /** Whether the Object Status is clickable. */
+    @Input()
+    clickable = false;
+
+    /** Define the text content of the Object Status */
+    @Input()
+    label: string;
+
+    /** @hidden */
+    constructor(private readonly _elementRef: ElementRef) {}
+
+    @applyCssClass
+    /** CssClassBuilder interface implementation
+     * function must return single string
+     * function is responsible for order which css classes are applied
+     */
+    buildComponentCssClass(): string[] {
+        return ['fd-object-marker', this.clickable ? 'fd-object-marker--link' : '', this.class];
+    }
+
+    /** @hidden */
+    ngOnChanges(): void {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
+    ngOnInit(): void {
+        this.buildComponentCssClass();
+    }
+
+    /** @hidden */
+    elementRef(): ElementRef<any> {
+        return this._elementRef;
+    }
+}