Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Minor] Types for Footer component #657

Merged
merged 4 commits into from
Feb 15, 2022
Merged

[Minor] Types for Footer component #657

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2c4df24
[Patch] Types for Footer component
Jan 31, 2022
e83f239
Added clarification about children components
Feb 7, 2022
880450c
Update footer-api.component.html
Feb 7, 2022
087ca23
Removed dot
Feb 7, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 15 additions & 21 deletions ...examples/footer/properties/footer-table-properties/footer-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,11 +21,12 @@
<code>[]</code>
</td>
<td>
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:
<ul>
<li><b>logoSrc</b>: The path of an icon for the link</li>
<li><b>href</b>: URL of the page the link goes to</li>
<li><b>logoSrc</b>: The path of an icon for the link.</li>
<li><b>href</b>: URL of the page the link goes to.</li>
</ul>
</td>
</tr>
Expand All @@ -35,12 +36,11 @@
<code>[]</code>
</td>
<td>
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:
<ul>
<li><b>text</b>: Text for the link</li>
<li><b>href</b>: URL of the page the link goes to</li>
<li><b>text</b>: Text for the link.</li>
<li><b>href</b>: URL of the page the link goes to.</li>
</ul>
</td>
</tr>
Expand All @@ -50,23 +50,17 @@
<td>The text that will be displayed as copyright disclaimer.</td>
</tr>
<tr>
<td>children: node</td>
aidamag marked this conversation as resolved.
Show resolved Hide resolved
<td></td>
<td>
The center section of the footer. Can be used to render custom content in
this area.
</td>
</tr>
<tr>
<td>margin: any (string | object)</td>
<td>margin: string | object</td>
<td></td>
<td>
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.
</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 custom area of the component
Expand Down
84 changes: 67 additions & 17 deletions projects/dxc-ngx-cdk/src/lib/dxc-footer/dxc-footer.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -22,35 +43,64 @@ 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;
}
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<any>({
socialLinks: {},
bottomLinks: {},
copyright: "",
logoSrc: null,
defaultInputs = new BehaviorSubject<DxcFooterInputs>({
margin: null,
padding: null,
});
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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);
Expand All @@ -177,7 +227,7 @@ export class DxcFooterComponent implements OnChanges {
`;
}

setFooterFooterStyle(responsive) {
setFooterFooterStyle(responsive: boolean) {
return css`
display: flex;
justify-content: space-between;
Expand Down
12 changes: 6 additions & 6 deletions projects/dxc-ngx-cdk/src/lib/variables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}