-
{{ text }}
-
{{ text }}
-
{{ text }}
-
{{ text }}
-
{{ text }}
+
+
{{ text }}
+ {{ text }}
+ {{ text }}
+ {{ text }}
+ {{ text }}
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.spec.ts b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.spec.ts
index 368ad19f2..c3c6d1a03 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.spec.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.spec.ts
@@ -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();
});
});
diff --git a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
index 4c8061444..e55b3c127 100644
--- a/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
+++ b/projects/dxc-ngx-cdk/src/lib/dxc-heading/dxc-heading.component.ts
@@ -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.
*/
@@ -47,6 +51,7 @@ export class DxcHeadingComponent {
defaultInputs = new BehaviorSubject
({
level: 1,
+ asTag: null,
text: null,
weight: null,
margin: null,
@@ -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;
@@ -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);
+ `;
+ }
+ }
}