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"
    [isEmphasized]="true|false"
    [isInverted]="true|false"
    [wrap]="true|false"
    [disabled]="true|false"
    [popoverText]="string" 
    >
    <ng-content></ng-content>
</fdp-link>

Property Bindings

href: string

navigational url relative or external.

isEmphasized: true|false

this value of isEmphasized will make the link text normal if false or bold text if true.

isInverted:true|false

if value is true, link colour will be inverted else not.

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.

Template:

<a
    class="fd-link"
    [attr.href]="href"
    [attr.aria-disabled]="disabled"
    [ngClass]="{ 'fd-link--emphasized': isEmphasized, 'fd-link--inverted': isInverted }"
    (click)="onLinkClick($event)"
>
    <ng-content></ng-content>
</a>

Event Bindings

N/A

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?

From Sushma:

---

    In realtime, we use these to properties more for business interactions.

1). Can we have [target]="self|top|blank|parent|custome etc. 2). We need to have [id] as well.

Frank:

• Why do we need now popoever? What it is for?
• from what I read above is this something like a hint? cant we use native property called title?
• You should have also a click event, please look at the link from MetaUI,