feat(navigation-logo): add heading level (#9054)

**Related Issue:** #7075 ## Summary Added the "headingLevel" property to navigation-logo, similar to Panel.
Esri · Apr 11, 2024 · c2beba8 · c2beba8
1 parent 8b83042
commit c2beba8
Show file tree

Hide file tree

Showing 5 changed files with 90 additions and 23 deletions.
diff --git 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
@@ -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,
+      },
+    ]);
+  });
 });
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
@@ -70,3 +70,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 })}"
+  />
+`;
diff --git 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 <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>
     );

diff --git a/packages/calcite-components/src/demos/navigation.html b/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>