feat(navigation-logo): Increase font-size of heading with no descript…

…ion (#7081) **Related Issue:** #7080 ## Summary Bumps up the font size from `text-0` to `text-1` when the heading is provided with no description. This preserves space when both are present and makes the logo heading more prominent. cc @juliepowell @ashetland @SkyeSeitz - should be a few small changes in Chromatic.
Esri · Jun 28, 2023 · 355e101 · 355e101
1 parent 942d698
commit 355e101
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 2 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
@@ -62,6 +62,10 @@
   font-medium;
 }
 
+.standalone {
+  @apply text-1;
+}
+
 .description {
   @apply text-color-2 truncate;
   font-size: var(--calcite-font-size--1);

diff --git a/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx b/packages/calcite-components/src/components/navigation-logo/navigation-logo.tsx
@@ -104,7 +104,14 @@ export class CalciteNavigationLogo implements LoadableComponent {
           {(heading || description) && (
             <div class={CSS.container}>
               {heading && (
-                <span aria-label={this.heading} class={CSS.heading} key={CSS.heading}>
+                <span
+                  aria-label={this.heading}
+                  class={{
+                    [CSS.heading]: true,
+                    [CSS.standalone]: !this.description
+                  }}
+                  key={CSS.heading}
+                >
                   {heading}
                 </span>
               )}

diff --git a/packages/calcite-components/src/components/navigation-logo/resources.ts b/packages/calcite-components/src/components/navigation-logo/resources.ts
@@ -3,5 +3,6 @@ export const CSS = {
   heading: "heading",
   description: "description",
   anchor: "anchor",
-  image: "image"
+  image: "image",
+  standalone: "standalone"
 };