From 2c4df2441ef4d992554b278953236f8ae73e3c80 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 31 Jan 2022 16:07:48 +0100 Subject: [PATCH 1/4] [Patch] Types for Footer component --- .../footer-table-properties.component.html | 36 ++++---- .../lib/dxc-footer/dxc-footer.component.ts | 84 +++++++++++++++---- projects/dxc-ngx-cdk/src/lib/variables.ts | 12 +-- 3 files changed, 88 insertions(+), 44 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/properties/footer-table-properties/footer-table-properties.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/properties/footer-table-properties/footer-table-properties.component.html index dd3bfc569..4ce28554d 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/properties/footer-table-properties/footer-table-properties.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/properties/footer-table-properties/footer-table-properties.component.html @@ -21,11 +21,12 @@ [] - An array of objects representing the links that will be rendered at the - bottom part of the footer. Each object has the following properties: + An array of objects representing the links that will be rendered as icons + at the top-right side of the footer. Each object has the following + properties: @@ -35,12 +36,11 @@ [] - An array of objects representing the incon links that will be rendered at - the top-right side of the footer. Each object has the following - properties: + An array of objects representing the links that will be rendered at the + bottom part of the footer. Each object has the following properties: @@ -50,23 +50,17 @@ The text that will be displayed as copyright disclaimer. - children: node - - - The center section of the footer. Can be used to render custom content in - this area. - - - - margin: any (string | object) + margin: string | object - Size of the top margin to be applied to the footer ('xxsmall' | 'xsmall' | - 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge'). + 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. - padding: any (string | object) + padding: string | object Size of the padding to be applied to the custom area of the component diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts index 01610ce91..3cd2af401 100644 --- a/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts +++ b/projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts @@ -13,6 +13,27 @@ import { responsiveSizes } from "../variables"; import { coerceNumberProperty } from "@angular/cdk/coercion"; import { BackgroundProviderService } from "../background-provider/service/background-provider.service"; +type Space = + | "xxsmall" + | "xsmall" + | "small" + | "medium" + | "large" + | "xlarge" + | "xxlarge"; + +type Margin = { + top?: Space; + bottom?: Space; + left?: Space; + right?: Space; +}; + +export interface DxcFooterInputs{ + margin: Space | Margin, + padding: Space | Margin +} + @Component({ selector: "dxc-footer", templateUrl: "./dxc-footer.component.html", @@ -22,13 +43,48 @@ import { BackgroundProviderService } from "../background-provider/service/backgr export class DxcFooterComponent implements OnChanges { @HostBinding("class") className; + /** + * An array of objects representing the links that will be rendered as + * icons at the top-right side of the footer. Each object has the + * following properties: + * - href: The path of an icon for the link. + * - logoSrc: URL of the page the link goes to. + */ @Input() socialLinks: { href?: string; logoSrc?: string }[]; + /** + * An array of objects representing the links that will be rendered at + * the bottom part of the footer. Each object has the following + * properties: + * - text: Text for the link. + * - href: URL of the page the link goes to. + */ @Input() bottomLinks: { href?: string; text?: string }[]; - + /** + * The text that will be displayed as copyright disclaimer. + */ @Input() copyright: string; - @Input() margin: any; - @Input() padding: 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 | Margin; + /** + * Size of the padding to be applied to the custom area of 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 padding sizes. + */ + @Input() padding: Space | Margin; + /** + * The path of an icon to replace the theme logo. + */ @Input() logoSrc: string; + /** + * Value of the tabindex for all interactuable elements, except those + * inside the custom area. + */ @Input() get tabIndexValue(): number { return this._tabIndexValue; @@ -36,21 +92,15 @@ export class DxcFooterComponent implements OnChanges { set tabIndexValue(value: number) { this._tabIndexValue = coerceNumberProperty(value); } - private _tabIndexValue; + private _tabIndexValue = 0; defaultImglogo: string; - innerWidth; - isResponsive; - - bottomLinksLength; - + innerWidth: number; + isResponsive: boolean; + bottomLinksLength: number; currentBackgroundColor: string; - defaultInputs = new BehaviorSubject({ - socialLinks: {}, - bottomLinks: {}, - copyright: "", - logoSrc: null, + defaultInputs = new BehaviorSubject({ margin: null, padding: null, }); @@ -109,7 +159,7 @@ export class DxcFooterComponent implements OnChanges { constructor(private utils: CssUtils) {} - public ngOnInit() { + public ngOnInit(): void { this.innerWidth = window.innerWidth; this.currentBackgroundColor = this.utils.readProperty( "--footer-backgroundColor" @@ -155,7 +205,7 @@ export class DxcFooterComponent implements OnChanges { return document.body.getAttribute("footer-logo"); } - setFooterContainerStyle(input: any, responsive) { + setFooterContainerStyle(input: any, responsive: boolean) { return css` padding: ${responsive ? "20px" : "24px 36px"}; background-color: var(--footer-backgroundColor); @@ -177,7 +227,7 @@ export class DxcFooterComponent implements OnChanges { `; } - setFooterFooterStyle(responsive) { + setFooterFooterStyle(responsive: boolean) { return css` display: flex; justify-content: space-between; diff --git a/projects/dxc-ngx-cdk/src/lib/variables.ts b/projects/dxc-ngx-cdk/src/lib/variables.ts index 8060bcf89..47bf7a98d 100644 --- a/projects/dxc-ngx-cdk/src/lib/variables.ts +++ b/projects/dxc-ngx-cdk/src/lib/variables.ts @@ -26,10 +26,10 @@ export const colors = { }; export const responsiveSizes = { - mobileSmall: "320", - mobileMedium: "375", - mobileLarge: "425", - tablet: "768", - laptop: "1024", - desktop: "1440" + mobileSmall: 320, + mobileMedium: 375, + mobileLarge: 425, + tablet: 768, + laptop: 1024, + desktop: 1440 } \ No newline at end of file From e83f239ec8e8a86026b3380742f4282925df766c Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 7 Feb 2022 17:38:11 +0100 Subject: [PATCH 2/4] Added clarification about children components --- .../footer/footer-api/footer-api.component.html | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html index 5f76d8fa2..ecb965612 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html @@ -1,5 +1,15 @@ - + - \ No newline at end of file +

+ This component uses the pattern content projection, so all content inside will + be accepted and rendered inside the footer. +

+ + From 880450c8a78920163d95b803a9d9a4df59f2eadf Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 7 Feb 2022 17:39:12 +0100 Subject: [PATCH 3/4] Update footer-api.component.html --- .../examples/footer/footer-api/footer-api.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html index ecb965612..9a2b793ed 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html @@ -9,7 +9,7 @@

This component uses the pattern content projection, so all content inside will - be accepted and rendered inside the footer. + be accepted and rendered inside the footer's custom area..

From 087ca23a6c019b64ce344190113e442d5cbf7c62 Mon Sep 17 00:00:00 2001 From: agonzalez97 Date: Mon, 7 Feb 2022 17:39:49 +0100 Subject: [PATCH 4/4] Removed dot --- .../examples/footer/footer-api/footer-api.component.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html index 9a2b793ed..cd9f6d7e1 100644 --- a/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html +++ b/projects/dxc-ngx-cdk-site/src/app/components/examples/footer/footer-api/footer-api.component.html @@ -9,7 +9,7 @@

This component uses the pattern content projection, so all content inside will - be accepted and rendered inside the footer's custom area.. + be accepted and rendered inside the footer's custom area.