Platform: Link Component Technical Design FRD

Link Component

Summary

Link is a navigational component and is represented through a meaningful text having distinct visual properties. Navigation is to an application defined location – a page or a resource within the application or a webpage or a resource which is outside the application, etc. Link will have a distinct visual cue to represent navigational action.

Design

<fdp-link
    [href]="string"
    [importance]="standard|emphasized"
    [wrap]="true|false"
    [disabled]="true|false"
    [popoverText]="string" 
    (onClick)="onNavigaion($event)"
    >
    <ng-content></ng-content>
</fdp-link>

Property Bindings

href: string

navigational url relative or external.

importance: standard|emphasized

this value of importance will make the link text normal or bold text.

Wrap: Boolean

Setting true will wrap the content to align text with other Form Element.

disabled: Boolean

link can be in enabled or disabled status.

popoverText: string

A popup text will be displayed on long mouse-hover.

Event Bindings

onClick: EventEmitter<Link>

On link click it will check if Navigation is successful or Not. In case of failure, it can notify to application

Two-Way Bindings

N/A

Content Projection

N/A

Interfaces and Types

Related Modules

1. fd-link mixing in fundamental-styles

Additional Notes

Questions:

Deepak:

1. For displaying Pop-over text do we need Pop-over component implementation planned in Q1/Q2?