feat(navigation-logo): Adds icon and iconFlipRtl properties (#8054)

**Related Issue:** #7124 ## Summary Adds `icon` and `iconFlipRtl` properties to `calcite-navigation-logo`. Because `calcite-navigation` and related components are offered in one scale, this unique `icon` case will use `scale="l"` due to the prominence and usage of the component, and to ensure `icon` adjacent to `thumbnail` are presented at equal sizes: <img width="558" alt="Screenshot 2023-10-25 at 12 18 31 PM" src="https://github.com/Esri/calcite-design-system/assets/4733155/fa49bc25-c5b1-4051-82b5-785ced404f17">
Esri · Oct 25, 2023 · 049056d · 049056d
1 parent d3aa0aa
commit 049056d
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 4 deletions.
diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss b/packages/calcite-components/src/components/navigation-logo/navigation-logo.scss
@@ -27,11 +27,17 @@
   @apply bg-foreground-3;
 }
 
-.image {
+.image,
+.icon {
   @apply flex h-7 m-0 px-4;
 }
 
-.image ~ .container {
+.image ~ .icon {
+  @apply ps-0;
+}
+
+.image ~ .container,
+.icon ~ .container {
   @apply ps-0;
 }
 

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
@@ -36,12 +36,18 @@ export const headingAndThumbnail_TestOnly = (): string => html`<calcite-navigati
   thumbnail="${placeholderImage({ width: 50, height: 50 })}"
 />`;
 
+export const headingAndIcon_TestOnly = (): string => html`<calcite-navigation-logo
+  heading="ArcGIS Online"
+  icon="link-chart"
+/>`;
+
 export const descriptionAndThumbnail_TestOnly = (): string => html`<calcite-navigation-logo
   description="City of AcmeCo"
   thumbnail="${placeholderImage({ width: 50, height: 50 })}"
 />`;
 
 export const All_TestOnly = (): string => html`<calcite-navigation-logo
+  icon="link-chart"
   heading="ArcGIS Online"
   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
@@ -27,6 +27,12 @@ export class CalciteNavigationLogo implements LoadableComponent {
   /** Specifies the URL destination of the component, which can be set as an absolute or relative path.*/
   @Prop({ reflect: true }) href: string;
 
+  /** Specifies an icon to display. */
+  @Prop({ reflect: true }) icon: string;
+
+  /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
+  @Prop({ reflect: true }) iconFlipRtl = false;
+
   /** Describes the appearance or function of the `thumbnail`. If no label is provided, context will not be provided to assistive technologies. */
   @Prop() label: string;
 
@@ -96,12 +102,18 @@ export class CalciteNavigationLogo implements LoadableComponent {
   //
   // --------------------------------------------------------------------------
 
+  private renderIcon(): VNode {
+    /** Icon scale is not variable as the component does not have a scale property */
+    return <calcite-icon class={CSS.icon} flipRtl={this.iconFlipRtl} icon={this.icon} scale="l" />;
+  }
+
   render(): VNode {
     const { heading, description, 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 && (

diff --git a/packages/calcite-components/src/components/navigation-logo/resources.ts b/packages/calcite-components/src/components/navigation-logo/resources.ts
@@ -5,4 +5,5 @@ export const CSS = {
   anchor: "anchor",
   image: "image",
   standalone: "standalone",
+  icon: "icon",
 };
diff --git a/packages/calcite-components/src/demos/navigation.html b/packages/calcite-components/src/demos/navigation.html
@@ -331,6 +331,16 @@ <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-ui-brand: #bf390f">
+          <calcite-navigation-logo slot="logo" icon="link-chart"> </calcite-navigation-logo>
+        </calcite-navigation>
+      </calcite-shell>
+      <calcite-shell>
+        <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
+          <calcite-navigation-logo heading="Walt's Chips" slot="logo" icon="link-chart"> </calcite-navigation-logo>
+        </calcite-navigation>
+      </calcite-shell>
       <calcite-shell>
         <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
           <calcite-navigation-logo heading="Walt's Chips" description="Eastern Potato Chip Company" slot="logo">
@@ -348,6 +358,17 @@ <h3>
           </calcite-navigation-logo>
         </calcite-navigation>
       </calcite-shell>
+      <calcite-shell>
+        <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
+          <calcite-navigation-logo
+            heading="Walt's Chips"
+            description="Eastern Potato Chip Company"
+            slot="logo"
+            icon="link-chart"
+          >
+          </calcite-navigation-logo>
+        </calcite-navigation>
+      </calcite-shell>
       <calcite-shell>
         <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
           <calcite-navigation-logo
@@ -384,7 +405,24 @@ <h3>
       </calcite-shell>
       <calcite-shell>
         <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
-          <calcite-navigation-logo active description="Eastern Potato Chip Company" slot="logo">
+          <calcite-navigation-logo
+            icon="layer"
+            active
+            heading="Walt's Chips"
+            description="Eastern Potato Chip Company"
+            slot="logo"
+          >
+          </calcite-navigation-logo>
+        </calcite-navigation>
+      </calcite-shell>
+      <calcite-shell>
+        <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
+          <calcite-navigation-logo icon="pin-plus" active heading="Walt's Chips" slot="logo"> </calcite-navigation-logo>
+        </calcite-navigation>
+      </calcite-shell>
+      <calcite-shell>
+        <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
+          <calcite-navigation-logo active icon="layer" description="Eastern Potato Chip Company" slot="logo">
           </calcite-navigation-logo>
         </calcite-navigation>
       </calcite-shell>
@@ -400,7 +438,19 @@ <h3>
           </calcite-navigation-logo>
         </calcite-navigation>
       </calcite-shell>
-
+      <calcite-shell>
+        <calcite-navigation slot="header" style="--calcite-ui-brand: #bf390f">
+          <calcite-navigation-logo
+            active
+            heading="Walt's Chips"
+            icon="address-book"
+            description="Eastern Potato Chip Company"
+            slot="logo"
+            thumbnail="./_assets/images/acme-logo.svg"
+          >
+          </calcite-navigation-logo>
+        </calcite-navigation>
+      </calcite-shell>
       <div id="calcite-navigation-user" class="text-box">
         <h2><code>calcite-navigation-user</code></h2>
         <h3>