feat(navigation-logo): add heading level

packages/calcite-components/src/components.d.ts

@@ -595,7 +595,7 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -1311,7 +1311,7 @@ export namespace Components {
          */
         "activeRange": "start" | "end";
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -1771,7 +1771,7 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -2144,7 +2144,7 @@ export namespace Components {
          */
         "form": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -3264,6 +3264,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.
          */
@@ -3486,7 +3490,7 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -3556,7 +3560,7 @@ export namespace Components {
          */
         "getSelectedItems": () => Promise<Map<string, HTMLCalcitePickListItemElement>>;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -3586,7 +3590,7 @@ export namespace Components {
          */
         "groupTitle": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
     }
@@ -3680,7 +3684,7 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -5176,7 +5180,7 @@ export namespace Components {
          */
         "heading": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -5204,7 +5208,7 @@ export namespace Components {
          */
         "closed": boolean;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel": HeadingLevel;
         /**
@@ -7974,7 +7978,7 @@ declare namespace LocalJSX {
          */
         "heading": string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -8743,7 +8747,7 @@ declare namespace LocalJSX {
          */
         "activeRange"?: "start" | "end";
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -9225,7 +9229,7 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -9617,7 +9621,7 @@ declare namespace LocalJSX {
          */
         "form"?: string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -10825,6 +10829,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.
          */
@@ -11045,7 +11053,7 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -11112,7 +11120,7 @@ declare namespace LocalJSX {
          */
         "filteredItems"?: HTMLCalcitePickListItemElement[];
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -11145,7 +11153,7 @@ declare namespace LocalJSX {
          */
         "groupTitle"?: string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
     }
@@ -11254,7 +11262,7 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -12788,7 +12796,7 @@ declare namespace LocalJSX {
          */
         "heading"?: string;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**
@@ -12820,7 +12828,7 @@ declare namespace LocalJSX {
          */
         "closed"?: boolean;
         /**
-          * Specifies the number at which section headings should start.
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
          */
         "headingLevel"?: HeadingLevel;
         /**

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`<calcite-navigation-logo href=" " heading="esri"></calcite-navigation-logo>`);
   });
+
+  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,
+      },
+    ]);
+  });
 });

packages/calcite-components/src/components/navigation-logo/navigation-logo.stories.ts

@@ -71,3 +71,12 @@ export const withHref_TestOnly = (): string => html`
     </calcite-navigation-logo>
   </calcite-navigation>
 `;
+
+export const headingLevel_TestOnly = (): string => html`
+  <calcite-navigation-logo
+    heading="ArcGIS Online"
+    heading-level="1"
+    description="City of AcmeCo"
+    thumbnail="${placeholderImage({ width: 50, height: 50 })}"
+  />
+`;

packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx

@@ -6,6 +6,7 @@ import {
   setComponentLoaded,
   setUpLoadableComponent,
 } from "../../utils/loadable";
+import { Heading, HeadingLevel } from "../functional/Heading";
 
 @Component({
   tag: "calcite-navigation-logo",
@@ -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 <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale="l" />;
   }
 
+  renderHeaderContent(): VNode {
+    const { heading, headingLevel, description } = this;
+    const headingNode = heading ? (
+      <Heading
+        class={{
+          [CSS.heading]: true,
+          [CSS.standalone]: !this.description,
+        }}
+        key={CSS.heading}
+        level={headingLevel}
+      >
+        {heading}
+      </Heading>
+    ) : null;
+
+    const descriptionNode = description ? (
+      <span class={CSS.description} key={CSS.description}>
+        {description}
+      </span>
+    ) : null;
+
+    return headingNode || descriptionNode ? (
+      <div class={CSS.container} key={CSS.container}>
+        {headingNode}
+        {descriptionNode}
+      </div>
+    ) : null;
+  }
+
   render(): VNode {
-    const { heading, description, thumbnail } = this;
+    const { thumbnail } = this;
     return (
       <Host>
         <a class={CSS.anchor} href={this.href} rel={this.rel} target={this.target}>
           {thumbnail && <img alt={this.label || ""} class={CSS.image} src={thumbnail} />}
           {this.icon && this.renderIcon()}
-          {(heading || description) && (
-            <div class={CSS.container}>
-              {heading && (
-                <span
-                  aria-label={this.heading}
-                  class={{
-                    [CSS.heading]: true,
-                    [CSS.standalone]: !this.description,
-                  }}
-                  key={CSS.heading}
-                >
-                  {heading}
-                </span>
-              )}
-              {description && (
-                <span aria-label={this.description} class={CSS.description} key={CSS.description}>
-                  {description}
-                </span>
-              )}
-            </div>
-          )}
+          {this.renderHeaderContent()}
         </a>
       </Host>
     );

packages/calcite-components/src/demos/navigation.html

@@ -331,6 +331,12 @@ <h3>
           <calcite-navigation-logo heading="Walt's Chips" slot="logo"> </calcite-navigation-logo>
         </calcite-navigation>
       </calcite-shell>
+      <calcite-shell>
+        <calcite-navigation slot="header" style="--calcite-color-brand: #bf390f">
+          <calcite-navigation-logo heading="Walt's Chips with Level" heading-level="3" slot="logo">
+          </calcite-navigation-logo>
+        </calcite-navigation>
+      </calcite-shell>
       <calcite-shell>
         <calcite-navigation slot="header" style="--calcite-color-brand: #bf390f">
           <calcite-navigation-logo slot="logo" icon="link-chart"> </calcite-navigation-logo>