diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
index d3c6b0e1643..e32580a0cac 100644
--- a/packages/calcite-components/src/components.d.ts
+++ b/packages/calcite-components/src/components.d.ts
@@ -3268,6 +3268,10 @@ export namespace Components {
* Specifies heading text for the component, such as a product or organization name.
*/
"heading": string;
+ /**
+ * Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.
+ */
+ "headingLevel": HeadingLevel;
/**
* Specifies the URL destination of the component, which can be set as an absolute or relative path.
*/
@@ -10829,6 +10833,10 @@ declare namespace LocalJSX {
* Specifies heading text for the component, such as a product or organization name.
*/
"heading"?: string;
+ /**
+ * Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.
+ */
+ "headingLevel"?: HeadingLevel;
/**
* Specifies the URL destination of the component, which can be set as an absolute or relative path.
*/
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts
index 02723ab930d..d33aa0b6fab 100755
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.e2e.ts
@@ -1,5 +1,5 @@
import { html } from "../../../support/formatting";
-import { accessible, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+import { accessible, focusable, hidden, reflects, renders, defaults } from "../../tests/commonTests";
describe("calcite-navigation-logo", () => {
describe("renders", () => {
@@ -32,10 +32,39 @@ describe("calcite-navigation-logo", () => {
propertyName: "target",
value: "_self",
},
+ {
+ propertyName: "headingLevel",
+ value: 1,
+ },
]);
});
describe("is focusable", () => {
focusable(html``);
});
+
+ describe("defaults", () => {
+ defaults("calcite-navigation-logo", [
+ {
+ propertyName: "active",
+ defaultValue: undefined,
+ },
+ {
+ propertyName: "href",
+ defaultValue: undefined,
+ },
+ {
+ propertyName: "rel",
+ defaultValue: undefined,
+ },
+ {
+ propertyName: "target",
+ defaultValue: undefined,
+ },
+ {
+ propertyName: "headingLevel",
+ defaultValue: undefined,
+ },
+ ]);
+ });
});
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts b/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts
index 96753b4cd8d..cec3241345f 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts
@@ -70,3 +70,12 @@ export const withHref_TestOnly = (): string => html`
`;
+
+export const headingLevel_TestOnly = (): string => html`
+
+`;
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
index 7cb5b5c6921..0a817879832 100644
--- a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
+++ b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
@@ -5,6 +5,7 @@ import {
setComponentLoaded,
setUpLoadableComponent,
} from "../../utils/loadable";
+import { Heading, HeadingLevel } from "../functional/Heading";
import { CSS } from "./resources";
@Component({
@@ -59,6 +60,11 @@ export class CalciteNavigationLogo implements LoadableComponent {
/** Specifies the `src` to an image. */
@Prop() thumbnail: string;
+ /**
+ * Specifies the heading level of the component's heading for proper document structure, without affecting visual styling.
+ */
+ @Prop({ reflect: true }) headingLevel: HeadingLevel;
+
//--------------------------------------------------------------------------
//
// Public Methods
@@ -107,34 +113,43 @@ export class CalciteNavigationLogo implements LoadableComponent {
return ;
}
+ renderHeaderContent(): VNode {
+ const { heading, headingLevel, description } = this;
+ const headingNode = heading ? (
+
+ {heading}
+
+ ) : null;
+
+ const descriptionNode = description ? (
+
+ {description}
+
+ ) : null;
+
+ return headingNode || descriptionNode ? (
+
+ {headingNode}
+ {descriptionNode}
+
+ ) : null;
+ }
+
render(): VNode {
- const { heading, description, thumbnail } = this;
+ const { thumbnail } = this;
return (
{thumbnail && }
{this.icon && this.renderIcon()}
- {(heading || description) && (
-
- {heading && (
-
- {heading}
-
- )}
- {description && (
-
- {description}
-
- )}
-
- )}
+ {this.renderHeaderContent()}
);
diff --git a/packages/calcite-components/src/demos/navigation.html b/packages/calcite-components/src/demos/navigation.html
index 541f85a3bbb..51952df706e 100644
--- a/packages/calcite-components/src/demos/navigation.html
+++ b/packages/calcite-components/src/demos/navigation.html
@@ -331,6 +331,12 @@
+
+
+
+
+
+