From 355e101fae4d9aadadebaa169973639735578a2e Mon Sep 17 00:00:00 2001
From: Adam Tirella <macandcheese@users.noreply.github.com>
Date: Wed, 28 Jun 2023 13:40:33 -0700
Subject: [PATCH] feat(navigation-logo): Increase font-size of heading with no
 description (#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.
---
 .../src/components/navigation-logo/navigation-logo.scss  | 4 ++++
 .../src/components/navigation-logo/navigation-logo.tsx   | 9 ++++++++-
 .../src/components/navigation-logo/resources.ts          | 3 ++-
 3 files changed, 14 insertions(+), 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
index 30e80f27da1..a18d0412fc8 100644
--- 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
index fd95ec4d404..d62ab1569ba 100644
--- 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
index 23c654b4708..cdf85663b22 100644
--- 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"
 };