Merge pull request #802 from dxc-technology/aida-chip-types

Added types for chip component

Author: Jialecl

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

@@ -30,7 +30,7 @@
     <td><b>Deprecated.</b> Path of the icon to be placed before the label.</td>
   </tr>
   <tr>
-    <td>margin: any (string | object)</td>
+    <td>margin: string | object</td>
     <td></td>
     <td>
       Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
@@ -47,7 +47,10 @@
   <tr>
     <td>tabIndexValue: number</td>
     <td><code>0</code></td>
-    <td>Value of the tabindex, it also applies to prefix and suffix icons when a function is given.</td>
+    <td>
+      Value of the tabindex, it also applies to prefix and suffix icons when a
+      function is given.
+    </td>
   </tr>
   <tr>
     <td>suffixIconClick: EventEmitter</td>

projects/dxc-ngx-cdk/src/lib/dxc-button/dxc-button.types.ts

@@ -15,13 +15,13 @@ export type Spacing = {
 };
 
 export interface ButtonProperties {
-    mode: "primary" | "secondary" | "text";
-    label: string;
-    disabled: boolean;
-    iconSrc: string;
-    iconPosition: "before" | "after";
-    margin: Space | Spacing;
-    size: "small" | "medium" | "large" | "fillParent" | "fitContent";
-    type: "reset" | "submit" | "button";
-    tabIndexValue: number;
-}
+  mode: "primary" | "secondary" | "text";
+  label: string;
+  disabled: boolean;
+  iconSrc: string;
+  iconPosition: "before" | "after";
+  margin: Space | Spacing;
+  size: "small" | "medium" | "large" | "fillParent" | "fitContent";
+  type: "reset" | "submit" | "button";
+  tabIndexValue: number;
+}

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

@@ -18,6 +18,7 @@ import {
 import { ChangeDetectorRef, QueryList } from "@angular/core";
 import { DxcChipPrefixIconComponent } from "./dxc-chip-prefix-icon/dxc-chip-prefix-icon.component";
 import { DxcChipSuffixIconComponent } from "./dxc-chip-suffix-icon/dxc-chip-suffix-icon.component";
+import { ChipProperties, Space, Spacing } from "./dxc-chip.types";
 
 @Component({
   selector: "dxc-chip",
@@ -28,9 +29,21 @@ export class DxcChipComponent implements OnChanges {
   @HostBinding("class") className;
   @HostBinding("class.hasTabIndexPrefix") hasTabIndexPrefix: boolean = false;
   @HostBinding("class.hasTabIndexSuffix") hasTabIndexSuffix: boolean = false;
+  /**
+   * Text to be placed inside the chip.
+   */
   @Input() label: string;
+  /**
+   * @deprecated. Path of the icon to be placed after the label.
+   */
   @Input() suffixIconSrc: string;
+  /**
+   * @deprecated. Path of the icon to be placed before the label.
+   */
   @Input() prefixIconSrc: string;
+  /**
+   * If true, the component will be disabled.
+   */
   @Input()
   get disabled(): boolean {
     return this._disabled;
@@ -39,17 +52,38 @@ export class DxcChipComponent implements OnChanges {
     this._disabled = coerceBooleanProperty(value);
   }
   private _disabled;
-  @Input() margin: any;
+  /**
+   * 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 | Spacing;
 
-  @Output() suffixIconClick = new EventEmitter<any>();
-  @Output() prefixIconClick = new EventEmitter<any>();
+  /**
+   * Event that will be emitted when the suffix icon is clicked.
+   */
+  @Output() suffixIconClick: EventEmitter<void> = new EventEmitter<void>();
+  /**
+   * Event that will be emitted when the prefix icon is clicked.
+   */
+  @Output() prefixIconClick: EventEmitter<void> = new EventEmitter<void>();
 
+  /**
+   * Element used as icon to be placed before the chip label.
+   */
   @ContentChildren(DxcChipPrefixIconComponent)
   dxcChipPrefixIcon: QueryList<DxcChipPrefixIconComponent>;
 
+  /**
+   * Element used as icon to be placed after the chip label.
+   */
   @ContentChildren(DxcChipSuffixIconComponent)
   dxcChipSuffixIcon: QueryList<DxcChipSuffixIconComponent>;
 
+  /**
+   * Value of the tabindex, it also applies to prefix and suffix icons when a function is given.
+   */
   @Input()
   get tabIndexValue(): number {
     return this._tabIndexValue;
@@ -59,12 +93,12 @@ export class DxcChipComponent implements OnChanges {
   }
   private _tabIndexValue;
 
-  defaultInputs = new BehaviorSubject<any>({
+  defaultInputs = new BehaviorSubject<ChipProperties>({
     label: "",
     suffixIconSrc: null,
     prefixIconSrc: null,
     disabled: false,
-    margin: "",
+    margin: null,
     tabIndexValue: 0,
   });
 

projects/dxc-ngx-cdk/src/lib/dxc-chip/dxc-chip.types.ts

@@ -0,0 +1,24 @@
+export type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+
+export type Spacing = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
+export interface ChipProperties {
+  label: string;
+  disabled: boolean;
+  margin: Space | Spacing;
+  tabIndexValue: number;
+  suffixIconSrc?: string;
+  prefixIconSrc?: string;
+}

projects/dxc-ngx-cdk/src/lib/utils.ts

@@ -22,11 +22,9 @@ export class CssUtils {
   }
 
   getMarginValue = (margin, type) => {
-    const marginSize = spaces[margin[type]] || "0px";
-     return marginSize;
-  }
-
-
+    const marginSize = margin && margin !== null ? spaces[margin[type]] : "0px";
+    return marginSize;
+  };
 
   getTopMargin(margin) {
     return margin && typeof margin !== "object"
@@ -175,40 +173,44 @@ export class CssUtils {
     return value;
   }
 
-  getBoxShadow(shadowDepth, isImportant:boolean = false) {
+  getBoxShadow(shadowDepth, isImportant: boolean = false) {
     switch (shadowDepth) {
       case "1":
         return css`
           box-shadow: var(--box-oneShadowDepthShadowOffsetX)
             var(--box-oneShadowDepthShadowOffsetY)
             var(--box-oneShadowDepthShadowBlur)
             var(--box-oneShadowDepthShadowSpread)
-            var(--box-oneShadowDepthShadowColor) ${this.isPropertyImportant(isImportant)};`;
+            var(--box-oneShadowDepthShadowColor)
+            ${this.isPropertyImportant(isImportant)};
+        `;
       case "2":
         return css`
-        box-shadow: var(--box-twoShadowDepthShadowOffsetX)
-        var(--box-twoShadowDepthShadowOffsetY)
-        var(--box-twoShadowDepthShadowBlur)
-        var(--box-twoShadowDepthShadowSpread)
-        var(--box-twoShadowDepthShadowColor) ${this.isPropertyImportant(isImportant)};
-        ` ;
+          box-shadow: var(--box-twoShadowDepthShadowOffsetX)
+            var(--box-twoShadowDepthShadowOffsetY)
+            var(--box-twoShadowDepthShadowBlur)
+            var(--box-twoShadowDepthShadowSpread)
+            var(--box-twoShadowDepthShadowColor)
+            ${this.isPropertyImportant(isImportant)};
+        `;
       default:
         return css`
-        box-shadow: var(--box-noneShadowDepthShadowOffsetX)
-        var(--box-noneShadowDepthShadowOffsetY)
-        var(--box-noneShadowDepthShadowBlur)
-        var(--box-noneShadowDepthShadowSpread)
-        var(--box-noneShadowDepthShadowColor) ${this.isPropertyImportant(isImportant)};
+          box-shadow: var(--box-noneShadowDepthShadowOffsetX)
+            var(--box-noneShadowDepthShadowOffsetY)
+            var(--box-noneShadowDepthShadowBlur)
+            var(--box-noneShadowDepthShadowSpread)
+            var(--box-noneShadowDepthShadowColor)
+            ${this.isPropertyImportant(isImportant)};
         `;
     }
   }
 
   readProperty(name: string): string {
     let bodyStyles = window.getComputedStyle(document.body);
     return bodyStyles.getPropertyValue(name);
-}
+  }
 
-  private isPropertyImportant(isImportant){
-    return isImportant ? ' !important': '';
+  private isPropertyImportant(isImportant) {
+    return isImportant ? " !important" : "";
   }
 }