Add support for Text in the AppHeader

.changeset/dry-spiders-tell.md

@@ -0,0 +1,6 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`AppHeader` - Refactored the Home Link, removed the `@ariaLabel` argument, added
+`@text` (should replace `@ariaLabel`) and `@isIconOnly` arguments.

packages/components/src/components/hds/app-header/home-link.hbs

@@ -14,7 +14,10 @@
   @href={{@href}}
   @isHrefExternal={{@isHrefExternal}}
   ...attributes
-  aria-label={{this.ariaLabel}}
+  aria-label={{if this.isIconOnly this.text null}}
 >
   <Hds::Icon @name={{@icon}} @color={{@color}} @stretched={{true}} />
+  {{#unless this.isIconOnly}}
+    <Hds::Text::Display @size="100" @color="foreground-high-contrast">{{this.text}}</Hds::Text::Display>
+  {{/unless}}
 </Hds::Interactive>

packages/components/src/components/hds/app-header/home-link.ts

@@ -12,21 +12,37 @@ import type { HdsInteractiveSignature } from '../interactive/';
 export interface HdsAppHeaderHomeLinkSignature {
   Args: HdsInteractiveSignature['Args'] & {
     icon: HdsIconSignature['Args']['name'];
+    isIconOnly?: boolean;
     color?: string;
-    ariaLabel: string;
+    text: string;
   };
   Element: HdsInteractiveSignature['Element'];
 }
 
 export default class HdsAppHeaderHomeLink extends Component<HdsAppHeaderHomeLinkSignature> {
-  get ariaLabel(): string {
-    const { ariaLabel } = this.args;
+  get text(): string {
+    const { text } = this.args;
 
     assert(
-      '@ariaLabel for "Hds::AppHeader::HomeLink" ("Logo") must have a valid value',
-      ariaLabel !== undefined
+      '@text for "Hds::AppHeader::HomeLink" must have a valid value',
+      text !== undefined
     );
 
-    return ariaLabel;
+    return text;
+  }
+
+  get icon(): HdsIconSignature['Args']['name'] {
+    const { icon } = this.args;
+
+    assert(
+      '@icon name for "Hds::AppHeader::HomeLink" must be provided',
+      icon !== undefined
+    );
+
+    return icon;
+  }
+
+  get isIconOnly(): boolean {
+    return this.args.isIconOnly ?? true;
   }
 }

packages/components/src/styles/components/app-header.scss

@@ -102,6 +102,7 @@
   .hds-app-header__utility-actions {
     display: flex;
     gap: inherit;
+    align-items: center;
   }
 
   // Dropdown & Button color theming overrides
@@ -144,12 +145,11 @@
 .hds-app-header__home-link {
   @include hds-interactive-dark-theme($add-visible-border: false);
   display: flex;
+  gap: 8px;
   align-items: center;
   justify-content: center;
-
-  // Set home link container size:
-  width: var(--token-app-header-home-link-size);
-  height: var(--token-app-header-home-link-size);
+  padding: 3px;
+  text-decoration: none;
 
   // disabled state:
   &:disabled,

showcase/app/components/mock/app/header/app-header.gts

@@ -46,7 +46,8 @@ export default class MockAppHeaderAppHeader extends Component<MockAppHeaderAppHe
       <:logo>
         <HdsAppHeaderHomeLink
           @icon="hashicorp"
-          @ariaLabel="HashiCorp home menu"
+          @text="HashiCorp home menu"
+          @isIconOnly={{true}}
           @href="#"
         />
       </:logo>

showcase/app/templates/components/app-header/index.hbs

@@ -1,6 +1,6 @@
 {{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
+Copyright (c) HashiCorp, Inc.
+SPDX-License-Identifier: MPL-2.0
 }}
 
 {{page-title "AppHeader Component"}}
@@ -43,7 +43,7 @@
     <SG.Item @label="With minimum recommended phase 1 content">
       <Hds::AppHeader @hasA11yRefocus={{false}}>
         <:logo>
-          <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
+          <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp home menu" @href="#" />
         </:logo>
         <:globalActions>
           <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
@@ -80,7 +80,7 @@
     <SG.Item @label="With max recommended phase 1 content & Terraform logo">
       <Hds::AppHeader @hasA11yRefocus={{false}}>
         <:logo>
-          <Hds::AppHeader::HomeLink @icon="terraform" @ariaLabel="Terraform home menu" @href="#" />
+          <Hds::AppHeader::HomeLink @icon="terraform" @text="Terraform home menu" @href="#" />
         </:logo>
         <:globalActions>
           <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
@@ -119,7 +119,7 @@
     <SG.Item @label="With max proposed future content">
       <Hds::AppHeader @hasA11yRefocus={{false}}>
         <:logo>
-          <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
+          <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp home menu" @href="#" />
         </:logo>
         <:globalActions>
           <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
@@ -171,7 +171,7 @@
     <SG.Item @label="40 characters long organization name with dashes">
       <Hds::AppHeader @hasA11yRefocus={{false}}>
         <:logo>
-          <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
+          <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp home menu" @href="#" />
         </:logo>
         <:globalActions>
           <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
@@ -207,7 +207,7 @@
     <SG.Item @label="40 characters long organization name with no dashes">
       <Hds::AppHeader @hasA11yRefocus={{false}}>
         <:logo>
-          <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
+          <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp home menu" @href="#" />
         </:logo>
         <:globalActions>
           <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
@@ -241,6 +241,91 @@
     </SG.Item>
   </Shw::Grid>
 
+  <Shw::Divider @level="2" />
+
+  <Shw::Text::H3>With text</Shw::Text::H3>
+
+  <Shw::Grid @columns={{1}} {{style gap="2rem"}} as |SG|>
+
+    <SG.Item>
+      <Hds::AppHeader @hasA11yRefocus={{false}}>
+        <:logo>
+          <Hds::AppHeader::HomeLink @icon="terraform" @text="Terraform Admin Console" @isIconOnly={{false}} @href="#" />
+        </:logo>
+        <:utilityActions>
+          <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
+            <dd.ToggleIcon @icon="user" @text="user menu" />
+            <dd.Title @text="Signed In" />
+            <dd.Description @text="[email protected]" />
+            <dd.Interactive @href="#">Account Settings</dd.Interactive>
+          </Hds::Dropdown>
+        </:utilityActions>
+      </Hds::AppHeader>
+    </SG.Item>
+
+    <SG.Item>
+      <Hds::AppHeader @hasA11yRefocus={{false}}>
+        <:logo>
+          <Hds::AppHeader::HomeLink @icon="hashicorp" @text="Admin UI" @isIconOnly={{false}} @href="#" />
+        </:logo>
+        <:globalActions>
+          <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
+            <dd.ToggleButton @text="Choose an organization" @icon="org" />
+            <dd.Checkmark>
+              organizationName
+            </dd.Checkmark>
+          </Hds::Dropdown>
+        </:globalActions>
+        <:utilityActions>
+          <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
+            <dd.ToggleIcon @icon="help" @text="help menu" />
+            <dd.Title @text="Help & Support" />
+            <dd.Interactive @href="#">Documentation</dd.Interactive>
+            <dd.Interactive @href="#">Tutorials</dd.Interactive>
+            <dd.Interactive @href="#">Terraform Provider</dd.Interactive>
+            <dd.Interactive @href="#">Changelog</dd.Interactive>
+            <dd.Separator />
+            <dd.Interactive @href="#">Create support ticket</dd.Interactive>
+            <dd.Interactive @href="#">Give feedback</dd.Interactive>
+          </Hds::Dropdown>
+
+          <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
+            <dd.ToggleIcon @icon="user" @text="user menu" />
+            <dd.Title @text="Signed In" />
+            <dd.Description @text="[email protected]" />
+            <dd.Interactive @href="#">Account Settings</dd.Interactive>
+          </Hds::Dropdown>
+        </:utilityActions>
+      </Hds::AppHeader>
+    </SG.Item>
+
+    <SG.Item>
+      <Hds::AppHeader @hasA11yRefocus={{false}}>
+        <:logo>
+          <Hds::AppHeader::HomeLink @icon="boundary-color" @text="Boundary Desktop" @isIconOnly={{false}} @href="#" />
+        </:logo>
+        <:utilityActions>
+          <Hds::Button @color="secondary" @icon="search" @isIconOnly={{true}} @text="Search" />
+        </:utilityActions>
+      </Hds::AppHeader>
+    </SG.Item>
+
+    <SG.Item>
+      <Hds::AppHeader @hasA11yRefocus={{false}}>
+        <:logo>
+          <Hds::AppHeader::HomeLink
+            @icon="hashicorp"
+            @text="HashiCorp Cloud Platform"
+            @isIconOnly={{false}}
+            @href="#"
+          />
+          <Hds::Badge @text="Assuming Role: Admin" @color="highlight" @icon="eye" @type="filled" />
+        </:logo>
+      </Hds::AppHeader>
+    </SG.Item>
+
+  </Shw::Grid>
+
   <Shw::Divider />
 
   <Shw::Text::H2>Options</Shw::Text::H2>
@@ -249,7 +334,7 @@
     <SG.Item @label="With custom breakpoint (menu button is visible at wide screen width)">
       <Hds::AppHeader @hasA11yRefocus={{false}} @breakpoint="20000px">
         <:logo>
-          <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
+          <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp home menu" @href="#" />
         </:logo>
         <:globalActions>
           <Hds::Dropdown @enableCollisionDetection={{true}} as |dd|>
@@ -285,9 +370,8 @@
   </Shw::Grid>
 
   <Shw::Divider />
-</section>
 
-<Shw::Divider />
+</section>
 
 {{! For some reason, Ember tests don't play well with iframes (URL not found) so we can't take snapshots of these examples in Percy }}
 <section>
@@ -337,51 +421,67 @@
 
   <Shw::Text::H2>Base elements</Shw::Text::H2>
 
-  <Shw::Text::H3>SideNav::Header::HomeLink</Shw::Text::H3>
+  <Shw::Text::H3>AppHeader::HomeLink</Shw::Text::H3>
 
   <Shw::Text::H4>Content</Shw::Text::H4>
 
   <Shw::Flex as |SF|>
     <SF.Item @label="Icon">
       <div class="hds-app-header">
-        <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" />
+        <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp" @href="#" />
       </div>
     </SF.Item>
 
     <SF.Item @label="Custom color">
       <div class="hds-app-header">
         <Hds::AppHeader::HomeLink
           @icon="boundary"
-          @ariaLabel="Boundary"
+          @text="Boundary"
           @color="var(--token-color-boundary-brand)"
           @href="#"
         />
       </div>
     </SF.Item>
   </Shw::Flex>
 
+  <Shw::Text::H4>Text</Shw::Text::H4>
+
+  <Shw::Flex as |SF|>
+    <SF.Item>
+      <div class="hds-app-header">
+        <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp" @href="#" @title="Admin UI" />
+      </div>
+    </SF.Item>
+
+    <SF.Item>
+      <div class="hds-app-header">
+        <Hds::AppHeader::HomeLink @icon="terraform" @text="Terraform" @href="#" @title="Terraform Admin Console" />
+      </div>
+    </SF.Item>
+  </Shw::Flex>
+
   <Shw::Text::H4>States</Shw::Text::H4>
 
   <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
+    {{#let (array "default" "hover" "active" "focus") as |states|}}
       {{#each states as |state|}}
         <SF.Item @label={{state}}>
           <div class="hds-app-header">
-            <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="#" mock-state-value={{state}} />
+            <Hds::AppHeader::HomeLink @icon="hashicorp" @text="HashiCorp" @href="#" mock-state-value={{state}} />
           </div>
         </SF.Item>
       {{/each}}
     {{/let}}
   </Shw::Flex>
 
   <Shw::Flex as |SF|>
-    {{#let (array "default" "hover" "active" "focus" "disabled") as |states|}}
+    {{#let (array "default" "hover" "active" "focus") as |states|}}
       {{#each states as |state|}}
         <SF.Item>
           <div class="hds-app-header">
             <Hds::AppHeader::HomeLink
               @icon="boundary"
-              @ariaLabel="Boundary"
+              @text="Boundary"
               @color="var(--token-color-boundary-brand)"
               @href="#"
               mock-state-value={{state}}
@@ -392,6 +492,24 @@
     {{/let}}
   </Shw::Flex>
 
+  <Shw::Flex as |SF|>
+    {{#let (array "default" "hover" "active" "focus") as |states|}}
+      {{#each states as |state|}}
+        <SF.Item @label={{state}}>
+          <div class="hds-app-header">
+            <Hds::AppHeader::HomeLink
+              @icon="terraform"
+              @text="Terraform Admin Console"
+              @isIconOnly={{false}}
+              @href="#"
+              mock-state-value={{state}}
+            />
+          </div>
+        </SF.Item>
+      {{/each}}
+    {{/let}}
+  </Shw::Flex>
+
   <Shw::Divider @level="2" />
 
   <Shw::Text::H3>Buttons within AppHeader</Shw::Text::H3>