From 031636ea0d71c28278981c9cfc73c4c94d5a0ec7 Mon Sep 17 00:00:00 2001 From: raquelarrojo Date: Mon, 21 Feb 2022 17:25:39 +0100 Subject: [PATCH 1/2] Added box types --- .../box-table-properties.component.html | 9 ++- .../dxc-ngx-cdk/src/lib/dxc-box/README.md | 2 +- .../src/lib/dxc-box/dxc-box.component.ts | 56 ++++++++++++++++--- 3 files changed, 57 insertions(+), 10 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html index b00ec8010..1042cb3f8 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html @@ -1,4 +1,9 @@ - + Name @@ -15,7 +20,7 @@ 'inline-flex' - Changes the display CSS property of the Box div. + Changes the display CSS property of the box div. margin: any (string | object) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md index d2c83f19d..dad267400 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md +++ b/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md @@ -46,7 +46,7 @@ The API properties are the following: 'inline-flex' - Changes the display CSS property of the Box div. + Changes the display CSS property of the box div. @Input
margin: any (string | object) diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts index d4ec53386..aaaef42ff 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-box/dxc-box.component.ts @@ -8,7 +8,30 @@ 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", @@ -16,11 +39,28 @@ import { BackgroundProviderService } from '../background-provider/service/backgr }) 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())}`; } From cd048eb8d01abbac68b8f5e806063f9155263baf Mon Sep 17 00:00:00 2001 From: raquelarrojo Date: Tue, 22 Feb 2022 09:09:40 +0100 Subject: [PATCH 2/2] Change box api documentation. --- .../box-table-properties.component.html | 6 +++--- projects/dxc-ngx-cdk/src/lib/dxc-box/README.md | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html index 1042cb3f8..0f7c6273a 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/box/properties/box-table-properties/box-table-properties.component.html @@ -11,7 +11,7 @@ Description - shadowDepth: number (0 | 1 | 2) + shadowDepth: 0 | 1 | 2 2 The size of the shadow to be displayed around the box. @@ -23,7 +23,7 @@ Changes the display CSS property of the box div. - margin: any (string | object) + margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | @@ -33,7 +33,7 @@ - padding: any (string | object) + padding: string | object Size of the padding to be applied to the component ('xxsmall' | 'xsmall' | diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md b/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md index dad267400..1384c5728 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md +++ b/projects/dxc-ngx-cdk/src/lib/dxc-box/README.md @@ -37,7 +37,7 @@ The API properties are the following: Description - @Input
shadowDepth: number (0 | 1 | 2) + @Input
shadowDepth: 0 | 1 | 2 2 The size of the shadow to be displayed around the box. @@ -49,7 +49,7 @@ The API properties are the following: Changes the display CSS property of the box div. - @Input
margin: any (string | object) + @Input
margin: string | object Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | @@ -59,7 +59,7 @@ The API properties are the following: - @Input
padding: any (string | object) + @Input
padding: string | object Size of the padding to be applied to the component ('xxsmall' | 'xsmall' |