Merge pull request #706 from dxc-technology/rarrojolopez-box-component

Added box types

Author: mawelCaballero

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

@@ -1,12 +1,17 @@
-<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>
     <th>Default</th>
     <th>Description</th>
   </tr>
   <tr>
-    <td>shadowDepth: number (0 | 1 | 2)</td>
+    <td>shadowDepth: 0 | 1 | 2</td>
     <td><code>2</code></td>
     <td>The size of the shadow to be displayed around the box.</td>
   </tr>
@@ -15,10 +20,10 @@
     <td>
       <code>'inline-flex'</code>
     </td>
-    <td>Changes the display CSS property of the Box div.</td>
+    <td>Changes the display CSS property of the box div.</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' |
@@ -28,7 +33,7 @@
     </td>
   </tr>
   <tr>
-    <td>padding: any (string | object)</td>
+    <td>padding: string | object</td>
     <td></td>
     <td>
       Size of the padding to be applied to the component ('xxsmall' | 'xsmall' |

projects/dxc-ngx-cdk/src/lib/dxc-box/README.md

@@ -37,7 +37,7 @@ The API properties are the following:
         <th>Description</th>
     </tr>
     <tr>
-        <td>@Input<br>shadowDepth: number (0 | 1 | 2)</td>
+        <td>@Input<br>shadowDepth: 0 | 1 | 2</td>
         <td><code>2</code></td>
         <td>The size of the shadow to be displayed around the box.</td>
     </tr>
@@ -46,10 +46,10 @@ The API properties are the following:
         <td>
         <code>'inline-flex'</code>
         </td>
-        <td>Changes the display CSS property of the Box div.</td>
+        <td>Changes the display CSS property of the box div.</td>
     </tr>
     <tr>
-        <td>@Input<br>margin: any (string | object)</td>
+        <td>@Input<br>margin: string | object</td>
         <td></td>
         <td>
         Size of the margin to be applied to the component ('xxsmall' | 'xsmall' |
@@ -59,7 +59,7 @@ The API properties are the following:
         </td>
     </tr>
     <tr>
-        <td>@Input<br>padding: any (string | object)</td>
+        <td>@Input<br>padding: string | object</td>
         <td></td>
         <td>
         Size of the padding to be applied to the component ('xxsmall' | 'xsmall' |

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

@@ -8,19 +8,59 @@ import {
 import { BehaviorSubject } from "rxjs";
 import { css } from "emotion";
 import { CssUtils } from "../utils";
-import { BackgroundProviderService } from '../background-provider/service/background-provider.service';
+import { BackgroundProviderService } from "../background-provider/service/background-provider.service";
+
+type Size = "small" | "medium" | "large" | "fillParent" | "fitContent";
+type Space =
+  | "xxsmall"
+  | "xsmall"
+  | "small"
+  | "medium"
+  | "large"
+  | "xlarge"
+  | "xxlarge";
+type Margin = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+type Padding = {
+  top?: Space;
+  bottom?: Space;
+  left?: Space;
+  right?: Space;
+};
+
 @Component({
   selector: "dxc-box",
   templateUrl: "./dxc-box.component.html",
   providers: [CssUtils, BackgroundProviderService],
 })
 export class DxcBoxComponent implements OnInit {
   @HostBinding("class") className;
-  @Input() shadowDepth: number;
-  @Input() display: string;
-  @Input() margin: any;
-  @Input() padding: any;
-  @Input() size: string;
+  /**
+   * The size of the shadow to be displayed around the box.
+   */
+  @Input() shadowDepth: 0 | 1 | 2 = 2;
+  /**
+   * Changes the display CSS property of the box div.
+   */
+  @Input() display: string = "inline-flex";
+  /**
+   * 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;
+  /**
+   * Size of the padding to be applied to the custom area ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+   * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different padding sizes.
+   */
+  @Input() padding: Space | Padding;
+  /**
+   * Size of the component.
+   */
+  @Input() size: Size = "fitContent";
   currentBackgroundColor;
 
   sizes = {
@@ -59,7 +99,9 @@ export class DxcBoxComponent implements OnInit {
       result[item] = changes[item].currentValue;
       return result;
     }, {});
-    this.currentBackgroundColor = this.utils.readProperty('--box-backgroundColor');
+    this.currentBackgroundColor = this.utils.readProperty(
+      "--box-backgroundColor"
+    );
     this.defaultInputs.next({ ...this.defaultInputs.getValue(), ...inputs });
     this.className = `${this.getDynamicStyle(this.defaultInputs.getValue())}`;
   }