Skip to content

[Minor] Added 'asTag' prop to Heading component #689

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

Merged
Jialecl merged 2 commits into from
Feb 15, 2022
Merged

[Minor] Added 'asTag' prop to Heading component #689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
aa38c3a
[Minor] Added 'asTag' prop to Heading component
Feb 14, 2022
6080165
removing some redundancy
Jialecl Feb 14, 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
5 changes: 5 additions & 0 deletions ...mples/heading/properties/heading-table-properties/heading-table-properties.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
<td></td>
<td>Heading text.</td>
</tr>
<tr>
<td>asTag: 'h1' | 'h2' | 'h3' | 'h4' | 'h5'</td>
<td></td>
<td>Specifies the html tag of the heading.</td>
</tr>
<tr>
<td>weight: 'light' | 'normal' | 'bold'</td>
<td></td>
Expand Down
12 changes: 6 additions & 6 deletions projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="container">
<h1 *ngIf="level === 1">{{ text }}</h1>
<h2 *ngIf="level === 2">{{ text }}</h2>
<h3 *ngIf="level === 3">{{ text }}</h3>
<h4 *ngIf="level === 4">{{ text }}</h4>
<h5 *ngIf="level === 5">{{ text }}</h5>
<div class="container" [ngSwitch]="asTag">
<h1 *ngSwitchCase="'h1'">{{ text }}</h1>
<h2 *ngSwitchCase="'h2'">{{ text }}</h2>
<h3 *ngSwitchCase="'h3'">{{ text }}</h3>
<h4 *ngSwitchCase="'h4'">{{ text }}</h4>
<h5 *ngSwitchCase="'h5'">{{ text }}</h5>
</div>
59 changes: 54 additions & 5 deletions projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,47 +4,96 @@ import { DxcHeadingComponent } from "./dxc-heading.component";

describe("DxcHeading tests", () => {
test("should render heading level 1", async () => {
const { getByText } = await render(DxcHeadingComponent, {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 1, text: "heading1" },
});

expect(getByText("heading1"));
expect(screen.getByRole("heading").textContent).toEqual("heading1");
expect(getByRole("heading", { level: 1 })).toBeInTheDocument();
});

test("should render heading level 2", async () => {
const { getByText } = await render(DxcHeadingComponent, {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 2, text: "heading2" },
});

expect(getByText("heading2"));
expect(screen.getByRole("heading").textContent).toEqual("heading2");
expect(getByRole("heading", { level: 2 })).toBeInTheDocument();
});

test("should render heading level 3", async () => {
const { getByText } = await render(DxcHeadingComponent, {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 3, text: "heading3" },
});

expect(getByText("heading3"));
expect(screen.getByRole("heading").textContent).toEqual("heading3");
expect(getByRole("heading", { level: 3 })).toBeInTheDocument();
});

test("should render heading level 4", async () => {
const { getByText } = await render(DxcHeadingComponent, {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 4, text: "heading4" },
});

expect(getByText("heading4"));
expect(screen.getByRole("heading").textContent).toEqual("heading4");
expect(getByRole("heading", { level: 4 })).toBeInTheDocument();
});

test("should render heading level 5", async () => {
const { getByText } = await render(DxcHeadingComponent, {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 5, text: "heading5" },
});

expect(getByText("heading5"));
expect(screen.getByRole("heading").textContent).toEqual("heading5");
expect(getByRole("heading", { level: 5 })).toBeInTheDocument();
});

test("should render heading level 1 and tag h3", async () => {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 1, text: "heading1 as tag h3", asTag: "h3" },
});

expect(getByText("heading1 as tag h3"));
expect(getByRole("heading", { level: 3 })).toBeInTheDocument();
});
test("should render heading level 2 and tag h4", async () => {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 2, text: "heading2 as tag h4", asTag: "h4" },
});

expect(getByText("heading2 as tag h4"));
expect(getByRole("heading", { level: 4 })).toBeInTheDocument();
});

test("should render heading level 3 and tag h5", async () => {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 3, text: "heading3 as tag h5", asTag: "h5" },
});

expect(getByText("heading3 as tag h5"));
expect(getByRole("heading", { level: 5 })).toBeInTheDocument();
});

test("should render heading level 4 and tag h2", async () => {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 4, text: "heading4 as tag h2", asTag: "h2" },
});

expect(getByText("heading4 as tag h2"));
expect(getByRole("heading", { level: 2 })).toBeInTheDocument();
});

test("should render heading level 5 and tag h1", async () => {
const { getByRole, getByText } = await render(DxcHeadingComponent, {
componentProperties: { level: 5, text: "heading5 as tag h1", asTag: "h1" },
});

expect(getByText("heading5 as tag h1"));
expect(getByRole("heading", { level: 1 })).toBeInTheDocument();
});
});
180 changes: 98 additions & 82 deletions projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ export class DxcHeadingComponent {
* Defines the heading level from 1 to 5. The styles of the heading are applied according to the level.
*/
@Input() level: 1 | 2 | 3 | 4 | 5 = 1;
/**
* Specifies the html tag of the heading.
*/
@Input() asTag: "h1" | "h2" | "h3" | "h4" | "h5";
/**
* Heading text.
*/
Expand All @@ -47,6 +51,7 @@ export class DxcHeadingComponent {

defaultInputs = new BehaviorSubject<any>({
level: 1,
asTag: null,
text: null,
weight: null,
margin: null,
Expand All @@ -59,9 +64,14 @@ export class DxcHeadingComponent {
}

public ngOnChanges(changes: SimpleChanges): void {
if (this.level == null) {
this.level = 1;
if (this.asTag == null) {
if (this.level === 1) this.asTag = "h1";
else if (this.level === 2) this.asTag = "h2";
else if (this.level === 3) this.asTag = "h3";
else if (this.level === 4) this.asTag = "h4";
else if (this.level === 5) this.asTag = "h5";
}

const inputs = Object.keys(changes).reduce((result, item) => {
result[item] = changes[item].currentValue;
return result;
Expand All @@ -82,87 +92,93 @@ export class DxcHeadingComponent {
h4,
h5 {
margin: 0px;
}

h1 {
font-weight: ${inputs.weight === "light"
? 200
: inputs.weight === "normal"
? 400
: inputs.weight === "bold"
? 600
: "var(--heading-level1FontWeight)"};
letter-spacing: var(--heading-level1LetterSpacing);
font-size: var(--heading-level1FontSize);
line-height: var(--heading-level1LineHeight);
color: var(--heading-level1FontColor);
font-family: var(--heading-level1FontFamily);
font-style: var(--heading-level1FontStyle);
}

h2 {
font-weight: ${inputs.weight === "light"
? 200
: inputs.weight === "normal"
? 400
: inputs.weight === "bold"
? 600
: "var(--heading-level2FontWeight)"};
letter-spacing: var(--heading-level2LetterSpacing);
font-size: var(--heading-level2FontSize);
line-height: var(--heading-level2LineHeight);
color: var(--heading-level2FontColor);
font-family: var(--heading-level2FontFamily);
font-style: var(--heading-level2FontStyle);
}

h3 {
font-weight: ${inputs.weight === "light"
? 200
: inputs.weight === "normal"
? 400
: inputs.weight === "bold"
? 600
: "var(--heading-level3FontWeight)"};
letter-spacing: var(--heading-level3LetterSpacing);
font-size: var(--heading-level3FontSize);
line-height: var(--heading-level3LineHeight);
color: var(--heading-level3FontColor);
font-family: var(--heading-level3FontFamily);
font-style: var(--heading-level3FontStyle);
}

h4 {
font-weight: ${inputs.weight === "light"
? 200
: inputs.weight === "normal"
? 400
: inputs.weight === "bold"
? 600
: "var(--heading-level4FontWeight)"};
letter-spacing: var(--heading-level4LetterSpacing);
font-size: var(--heading-level4FontSize);
line-height: var(--heading-level4LineHeight);
color: var(--heading-level4FontColor);
font-family: var(--heading-level4FontFamily);
font-style: var(--heading-level4FontStyle);
}

h5 {
font-weight: ${inputs.weight === "light"
? 200
: inputs.weight === "normal"
? 400
: inputs.weight === "bold"
? 600
: "var(--heading-level5FontWeight)"};
letter-spacing: var(--heading-level5LetterSpacing);
font-size: var(--heading-level5FontSize);
line-height: var(--heading-level5LineHeight);
color: var(--heading-level5FontColor);
font-family: var(--heading-level5FontFamily);
font-style: var(--heading-level5FontStyle);
${this.setClassByLevel(inputs.level, inputs.weight)}
}
`;
}

setClassByLevel(level, weight) {
switch (level) {
case 1:
return css`
font-weight: ${weight === "light"
? 200
: weight === "normal"
? 400
: weight === "bold"
? 600
: "var(--heading-level1FontWeight)"};
letter-spacing: var(--heading-level1LetterSpacing);
font-size: var(--heading-level1FontSize);
line-height: var(--heading-level1LineHeight);
color: var(--heading-level1FontColor);
font-family: var(--heading-level1FontFamily);
font-style: var(--heading-level1FontStyle);
`;
case 2:
return css`
font-weight: ${weight === "light"
? 200
: weight === "normal"
? 400
: weight === "bold"
? 600
: "var(--heading-level2FontWeight)"};
letter-spacing: var(--heading-level2LetterSpacing);
font-size: var(--heading-level2FontSize);
line-height: var(--heading-level2LineHeight);
color: var(--heading-level2FontColor);
font-family: var(--heading-level2FontFamily);
font-style: var(--heading-level2FontStyle);
`;
case 3:
return css`
font-weight: ${weight === "light"
? 200
: weight === "normal"
? 400
: weight === "bold"
? 600
: "var(--heading-level3FontWeight)"};
letter-spacing: var(--heading-level3LetterSpacing);
font-size: var(--heading-level3FontSize);
line-height: var(--heading-level3LineHeight);
color: var(--heading-level3FontColor);
font-family: var(--heading-level3FontFamily);
font-style: var(--heading-level3FontStyle);
`;
case 4:
return css`
font-weight: ${weight === "light"
? 200
: weight === "normal"
? 400
: weight === "bold"
? 600
: "var(--heading-level4FontWeight)"};
letter-spacing: var(--heading-level4LetterSpacing);
font-size: var(--heading-level4FontSize);
line-height: var(--heading-level4LineHeight);
color: var(--heading-level4FontColor);
font-family: var(--heading-level4FontFamily);
font-style: var(--heading-level4FontStyle);
`;
case 5:
return css`
font-weight: ${weight === "light"
? 200
: weight === "normal"
? 400
: weight === "bold"
? 600
: "var(--heading-level5FontWeight)"};
letter-spacing: var(--heading-level5LetterSpacing);
font-size: var(--heading-level5FontSize);
line-height: var(--heading-level5LineHeight);
color: var(--heading-level5FontColor);
font-family: var(--heading-level5FontFamily);
font-style: var(--heading-level5FontStyle);
`;
}
}
}