Merge pull request #669 from dxc-technology/aida-link-types

Types for Link component

Author: Jialecl

projects/dxc-ngx-cdk-site/src/app/components/examples/link/properties/link-table-properties/link-table-properties.component.html

@@ -1,4 +1,9 @@
-<dxc-heading [level]="4" weight="normal" text="Properties" [margin]="{bottom:'small'}"></dxc-heading>
+<dxc-heading
+  [level]="4"
+  weight="normal"
+  text="Properties"
+  [margin]="{ bottom: 'small' }"
+></dxc-heading>
 <dxc-table>
   <tr>
     <th>Name</th>
@@ -58,9 +63,7 @@
   <tr>
     <td>tabIndexValue: number</td>
     <td><code>0</code></td>
-    <td>
-      Value of the tabindex.
-    </td>
+    <td>Value of the tabindex.</td>
   </tr>
   <tr>
     <td>margin: string | object</td>
@@ -78,8 +81,8 @@
     <td>onClick: EventEmitter</td>
     <td></td>
     <td>
-      If defined, the link will be displayed as a button. 
-      This function will be called when the user clicks the link. 
+      This event will emit in case the user clicks the component. If defined,
+      the link will be displayed as a button.
     </td>
   </tr>
 </dxc-table>

projects/dxc-ngx-cdk/src/lib/dxc-link/dxc-link.component.ts

@@ -18,6 +18,21 @@ import {
 } from "@angular/core";
 import { DxcLinkIconComponent } from "./dxc-link-icon/dxc-link-icon.component";
 
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-link",
   templateUrl: "./dxc-link.component.html",
@@ -32,57 +47,86 @@ export class DxcLinkComponent {
     this._underlined = coerceBooleanProperty(value);
   }
   private _underlined = true;
+  /**
+   * If true, the color is inherited from parent.
+   */
   @Input()
   get inheritColor(): boolean {
     return this._inheritColor;
   }
   set inheritColor(value: boolean) {
     this._inheritColor = coerceBooleanProperty(value);
   }
-  private _inheritColor;
+  private _inheritColor = false;
+  /**
+   * If true, the link is disabled.
+   */
   @Input()
   get disabled(): boolean {
     return this._disabled;
   }
   set disabled(value: boolean) {
     this._disabled = coerceBooleanProperty(value);
   }
-  private _disabled;
+  private _disabled = false;
+  /**
+   * Link text.
+   */
   @Input() text: string;
+  /**
+   * @Deprecated Source of the icon.
+   */
   @Input() iconSrc: string;
+  /**
+   * Indicates the position of the icon in the component.
+   */
   @Input() iconPosition: string;
+  /**
+   * Page to be opened when the user clicks on the link.
+   */
   @Input() href: string;
+  /**
+   * If true, the page is opened in a new browser tab.
+   */
   @Input()
   get newWindow(): boolean {
     return this._newWindow;
   }
   set newWindow(value: boolean) {
     this._newWindow = coerceBooleanProperty(value);
   }
-  private _newWindow;
-  @Input() margin: string;
+  private _newWindow = false;
+  /**
+   * Size of the margin to be applied to the component
+   * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties
+   * in order to specify different margin sizes.
+   */
+  @Input() margin: Space | Margin;
+  /**
+   * Value of the tabindex.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
   }
   set tabIndexValue(value: number) {
     this._tabIndexValue = coerceNumberProperty(value);
   }
-  private _tabIndexValue;
-
+  private _tabIndexValue = 0;
+  /**
+   * This event will emit in case the user clicks the component. If defined,
+   * the link will be displayed as a button.
+   */
   @Output() onClick = new EventEmitter<any>();
 
   @HostBinding("class") className;
-
-  isClickDefined = false;
-
   @ContentChildren(DxcLinkIconComponent)
   dxcLinkIcon: QueryList<DxcLinkIconComponent>;
-
   styledLink: string = css`
     display: inline;
   `;
-
+  isClickDefined = false;
   styledButton: string;
 
   defaultInputs = new BehaviorSubject<any>({