feat: implement remaining UIShell sub-components

.parity-check-data.json

@@ -572,7 +572,7 @@
     },
     "UIShell": {
       "lastCheckedCommit": "5102bd860864c2580048183ffaf50d1ffd4400b5",
-      "lastSyncedCommit": "N/A",
+      "lastSyncedCommit": "5102bd860864c2580048183ffaf50d1ffd4400b5",
       "hasChanges": false,
       "changeCount": 0,
       "lastUpdate": null

carbon-components-ember/package.json

@@ -2968,15 +2968,26 @@
       "./components/carbon/tooltip.js": "./dist/_app_/components/carbon/tooltip.js",
       "./components/carbon/tree-view.js": "./dist/_app_/components/carbon/tree-view.js",
       "./components/carbon/ui-shell.js": "./dist/_app_/components/carbon/ui-shell.js",
+      "./components/carbon/ui-shell/-header-container.js": "./dist/_app_/components/carbon/ui-shell/-header-container.js",
       "./components/carbon/ui-shell/-header.js": "./dist/_app_/components/carbon/ui-shell/-header.js",
       "./components/carbon/ui-shell/-header/-global-action.js": "./dist/_app_/components/carbon/ui-shell/-header/-global-action.js",
+      "./components/carbon/ui-shell/-header/-menu-item.js": "./dist/_app_/components/carbon/ui-shell/-header/-menu-item.js",
+      "./components/carbon/ui-shell/-header/-menu.js": "./dist/_app_/components/carbon/ui-shell/-header/-menu.js",
+      "./components/carbon/ui-shell/-header/-panel.js": "./dist/_app_/components/carbon/ui-shell/-header/-panel.js",
+      "./components/carbon/ui-shell/-header/-side-nav-items.js": "./dist/_app_/components/carbon/ui-shell/-header/-side-nav-items.js",
       "./components/carbon/ui-shell/-nav.js": "./dist/_app_/components/carbon/ui-shell/-nav.js",
       "./components/carbon/ui-shell/-nav/-item.js": "./dist/_app_/components/carbon/ui-shell/-nav/-item.js",
       "./components/carbon/ui-shell/-sidenav.js": "./dist/_app_/components/carbon/ui-shell/-sidenav.js",
+      "./components/carbon/ui-shell/-sidenav/-details.js": "./dist/_app_/components/carbon/ui-shell/-sidenav/-details.js",
       "./components/carbon/ui-shell/-sidenav/-divider.js": "./dist/_app_/components/carbon/ui-shell/-sidenav/-divider.js",
       "./components/carbon/ui-shell/-sidenav/-footer.js": "./dist/_app_/components/carbon/ui-shell/-sidenav/-footer.js",
+      "./components/carbon/ui-shell/-sidenav/-header.js": "./dist/_app_/components/carbon/ui-shell/-sidenav/-header.js",
+      "./components/carbon/ui-shell/-sidenav/-icon.js": "./dist/_app_/components/carbon/ui-shell/-sidenav/-icon.js",
       "./components/carbon/ui-shell/-sidenav/-menu.js": "./dist/_app_/components/carbon/ui-shell/-sidenav/-menu.js",
       "./components/carbon/ui-shell/-sidenav/-sub-menu.js": "./dist/_app_/components/carbon/ui-shell/-sidenav/-sub-menu.js",
+      "./components/carbon/ui-shell/-switcher.js": "./dist/_app_/components/carbon/ui-shell/-switcher.js",
+      "./components/carbon/ui-shell/-switcher/-divider.js": "./dist/_app_/components/carbon/ui-shell/-switcher/-divider.js",
+      "./components/carbon/ui-shell/-switcher/-item.js": "./dist/_app_/components/carbon/ui-shell/-switcher/-item.js",
       "./components/carbon/unordered-list.js": "./dist/_app_/components/carbon/unordered-list.js",
       "./helpers/carbon/default-to.js": "./dist/_app_/helpers/carbon/default-to.js",
       "./helpers/carbon/generic.js": "./dist/_app_/helpers/carbon/generic.js",

carbon-components-ember/src/components/ui-shell.gts

@@ -1,6 +1,8 @@
 import { default as Header } from './ui-shell/-header.gts';
 import { default as Sidenav } from './ui-shell/-sidenav.gts';
 import { default as Nav } from './ui-shell/-nav.gts';
+import { default as Switcher } from './ui-shell/-switcher.gts';
+import { default as HeaderContainer } from './ui-shell/-header-container.gts';
 import Component from '@glimmer/component';
 import UIShellHeader from './ui-shell/-header.gts';
 import { hash } from '@ember/helper';
@@ -12,6 +14,8 @@ export interface UIShellSignature {
         Header: typeof UIShellHeader;
         Sidenav: typeof Sidenav;
         Nav: typeof Nav;
+        Switcher: typeof Switcher;
+        HeaderContainer: typeof HeaderContainer;
       },
     ];
     content: [];
@@ -20,7 +24,16 @@ export interface UIShellSignature {
 
 export default class UIShell extends Component<UIShellSignature> {
   <template>
-    {{yield (hash Header=Header Sidenav=Sidenav Nav=Nav) to='shell'}}
+    {{yield
+      (hash
+        Header=Header
+        Sidenav=Sidenav
+        Nav=Nav
+        Switcher=Switcher
+        HeaderContainer=HeaderContainer
+      )
+      to='shell'
+    }}
     <main id='main-content' class='cds--content'>
       {{yield to='content'}}
     </main>

carbon-components-ember/src/components/ui-shell/-header-container.gts

@@ -0,0 +1,49 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { registerDestructor } from '@ember/destroyable';
+import { hash } from '@ember/helper';
+
+export interface UIShellHeaderContainerSignature {
+  Args: {
+    isSideNavExpanded?: boolean;
+  };
+  Blocks: {
+    default: [
+      {
+        isSideNavExpanded: boolean;
+        onClickSideNavExpand: () => void;
+      },
+    ];
+  };
+}
+
+export default class UIShellHeaderContainer extends Component<UIShellHeaderContainerSignature> {
+  @tracked isSideNavExpanded = this.args.isSideNavExpanded ?? false;
+
+  constructor(owner: any, args: UIShellHeaderContainerSignature['Args']) {
+    super(owner, args);
+    window.addEventListener('keydown', this.handleWindowKeydown);
+    registerDestructor(this, () => {
+      window.removeEventListener('keydown', this.handleWindowKeydown);
+    });
+  }
+
+  handleWindowKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.isSideNavExpanded = false;
+    }
+  };
+
+  onClickSideNavExpand = () => {
+    this.isSideNavExpanded = !this.isSideNavExpanded;
+  };
+
+  <template>
+    {{yield
+      (hash
+        isSideNavExpanded=this.isSideNavExpanded
+        onClickSideNavExpand=this.onClickSideNavExpand
+      )
+    }}
+  </template>
+}

carbon-components-ember/src/components/ui-shell/-header.gts

@@ -1,9 +1,10 @@
-import { default as Icon } from '../../components/icon.gts';
+import { Close, Menu } from '../../icons.ts';
 import { default as not } from 'ember-truth-helpers/helpers/not';
 import { on } from '@ember/modifier';
 import { fn } from '@ember/helper';
 import Component from '@glimmer/component';
 import UIShellHeaderGlobalAction from './-header/-global-action.gts';
+import UIShellHeaderPanel from './-header/-panel.gts';
 
 export interface UIShellHeaderSignature {
   Args: {
@@ -15,6 +16,7 @@ export interface UIShellHeaderSignature {
   Blocks: {
     header: [];
     headerGlobal: [typeof UIShellHeaderGlobalAction];
+    headerPanel: [typeof UIShellHeaderPanel];
   };
 }
 
@@ -33,7 +35,11 @@ export default class UIShellHeader extends Component<UIShellHeaderSignature> {
           type='button'
           {{on 'click' (fn @onToggle (not @open))}}
         >
-          <Icon @icon={{if @open 'close' 'menu'}} />
+          {{#if @open}}
+            <Close @size={{20}} />
+          {{else}}
+            <Menu @size={{20}} />
+          {{/if}}
         </button>
       {{/if}}
       <a class='cds--header__name' href='#'>
@@ -48,6 +54,7 @@ export default class UIShellHeader extends Component<UIShellHeaderSignature> {
       <div class='cds--header__global'>
         {{yield UIShellHeaderGlobalAction to='headerGlobal'}}
       </div>
+      {{yield UIShellHeaderPanel to='headerPanel'}}
     </header>
   </template>
 }

carbon-components-ember/src/components/ui-shell/-header/-global-action.gts

@@ -16,7 +16,7 @@ export default class UIShellHeaderGlobalAction extends Component<UIShellHeaderGl
     <button
       aria-label={{@aria-label}}
       title={{@aria-label}}
-      class='cds--header__action'
+      class='cds--header__action cds--btn cds--btn--icon-only'
       type='button'
       {{on 'click' @onClick}}
       ...attributes

carbon-components-ember/src/components/ui-shell/-header/-menu-item.gts

@@ -0,0 +1,30 @@
+import Component from '@glimmer/component';
+
+export interface UIShellHeaderMenuItemSignature {
+  Element: HTMLAnchorElement;
+  Args: {
+    isActive?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class UIShellHeaderMenuItem extends Component<UIShellHeaderMenuItemSignature> {
+  <template>
+    <li>
+      <a
+        class='cds--header__menu-item
+          {{if @isActive "cds--header__menu-item--current"}}'
+        href='#'
+        tabindex='0'
+        aria-current='{{if @isActive "page"}}'
+        ...attributes
+      >
+        <span class='cds--text-truncate--end'>
+          {{yield}}
+        </span>
+      </a>
+    </li>
+  </template>
+}

carbon-components-ember/src/components/ui-shell/-header/-menu.gts

@@ -0,0 +1,56 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { on } from '@ember/modifier';
+import { ChevronDown } from '../../../icons.ts';
+import UIShellHeaderMenuItem from './-menu-item.gts';
+
+export interface UIShellHeaderMenuSignature {
+  Element: HTMLLIElement;
+  Args: {
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    menuLinkName: string;
+    isActive?: boolean;
+  };
+  Blocks: {
+    default: [typeof UIShellHeaderMenuItem];
+  };
+}
+
+export default class UIShellHeaderMenu extends Component<UIShellHeaderMenuSignature> {
+  @tracked expanded = false;
+
+  toggleExpanded = () => {
+    this.expanded = !this.expanded;
+  };
+
+  <template>
+    <li
+      class='cds--header__submenu
+        {{if @isActive "cds--header__menu-item--current"}}'
+      ...attributes
+    >
+      {{! template-lint-disable no-unsupported-role-attributes }}
+      <a
+        aria-haspopup='menu'
+        aria-expanded='{{if this.expanded "true" "false"}}'
+        aria-label={{@aria-label}}
+        aria-labelledby={{@aria-labelledby}}
+        class='cds--header__menu-item cds--header__menu-title'
+        href='#'
+        tabindex='0'
+        {{on 'click' this.toggleExpanded}}
+      >
+        {{@menuLinkName}}
+        <ChevronDown @svgClass='cds--header__menu-arrow' />
+      </a>
+      <ul
+        aria-label={{@aria-label}}
+        aria-labelledby={{@aria-labelledby}}
+        class='cds--header__menu'
+      >
+        {{yield UIShellHeaderMenuItem}}
+      </ul>
+    </li>
+  </template>
+}

carbon-components-ember/src/components/ui-shell/-header/-panel.gts

@@ -0,0 +1,33 @@
+import Component from '@glimmer/component';
+import { on } from '@ember/modifier';
+
+export interface UIShellHeaderPanelSignature {
+  Element: HTMLDivElement;
+  Args: {
+    expanded?: boolean;
+    onToggle?: (value: boolean) => void;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class UIShellHeaderPanel extends Component<UIShellHeaderPanelSignature> {
+  handleKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Escape') {
+      this.args.onToggle?.(false);
+    }
+  };
+
+  <template>
+    {{! template-lint-disable no-invalid-interactive }}
+    <div
+      class='cds--header-panel
+        {{if @expanded "cds--header-panel--expanded"}}'
+      {{on 'keydown' this.handleKeydown}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  </template>
+}

carbon-components-ember/src/components/ui-shell/-header/-side-nav-items.gts

@@ -0,0 +1,23 @@
+import Component from '@glimmer/component';
+
+export interface UIShellHeaderSideNavItemsSignature {
+  Element: HTMLUListElement;
+  Args: {
+    hasDivider?: boolean;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class UIShellHeaderSideNavItems extends Component<UIShellHeaderSideNavItemsSignature> {
+  <template>
+    <ul
+      class='cds--side-nav__header-navigation
+        {{if @hasDivider "cds--side-nav__header-divider"}}'
+      ...attributes
+    >
+      {{yield}}
+    </ul>
+  </template>
+}

carbon-components-ember/src/components/ui-shell/-nav.gts

@@ -1,18 +1,19 @@
 import Component from '@glimmer/component';
 import UIShellNavItem from '../../components/ui-shell/-nav/-item.gts';
+import UIShellHeaderMenu from '../../components/ui-shell/-header/-menu.gts';
 
 export interface Signature {
   Element: null;
   Blocks: {
-    default: [typeof UIShellNavItem];
+    default: [typeof UIShellNavItem, typeof UIShellHeaderMenu];
   };
 }
 
 export default class InnerClass extends Component<Signature> {
   <template>
     <nav aria-label='IBM [Platform]' class='cds--header__nav'>
       <ul class='cds--header__menu-bar'>
-        {{yield UIShellNavItem}}
+        {{yield UIShellNavItem UIShellHeaderMenu}}
       </ul>
     </nav>
   </template>

carbon-components-ember/src/components/ui-shell/-sidenav.gts

@@ -4,6 +4,10 @@ import Component from '@glimmer/component';
 import NavMenuComponent, { type SubMenu } from './-sidenav/-menu.gts';
 import Divider from './-sidenav/-divider.gts';
 import Footer from './-sidenav/-footer.gts';
+import SideNavHeader from './-sidenav/-header.gts';
+import SideNavDetails from './-sidenav/-details.gts';
+import SideNavIcon from './-sidenav/-icon.gts';
+import HeaderSideNavItems from './-header/-side-nav-items.gts';
 import { fn } from '@ember/helper';
 import { stylesheet } from 'astroturf';
 import type Icon from '../icon';
@@ -22,7 +26,14 @@ export interface UIShellNavSignature {
     transitionTo: (menu: MenuItem | SubMenu) => void;
   };
   Blocks: {
-    default: [typeof NavMenuComponent, typeof Divider];
+    default: [
+      typeof NavMenuComponent,
+      typeof Divider,
+      typeof SideNavHeader,
+      typeof SideNavDetails,
+      typeof SideNavIcon,
+      typeof HeaderSideNavItems,
+    ];
     content: [];
     footer: [typeof Footer];
   };
@@ -51,7 +62,7 @@ export default class UIShellNav extends Component<UIShellNavSignature> {
     >
       <ul class='cds--side-nav__items'>
         {{#unless @menuItems}}
-          {{yield Menu Divider}}
+          {{yield Menu Divider SideNavHeader SideNavDetails SideNavIcon HeaderSideNavItems}}
         {{/unless}}
         {{#each @menuItems as |menu|}}
           <Menu

carbon-components-ember/src/components/ui-shell/-sidenav/-details.gts

@@ -0,0 +1,22 @@
+import Component from '@glimmer/component';
+
+export interface UIShellSideNavDetailsSignature {
+  Element: HTMLDivElement;
+  Args: {
+    title: string;
+  };
+  Blocks: {
+    default: [];
+  };
+}
+
+export default class UIShellSideNavDetails extends Component<UIShellSideNavDetailsSignature> {
+  <template>
+    <div class='cds--side-nav__details' ...attributes>
+      <h2 class='cds--side-nav__title' title={{@title}}>
+        {{@title}}
+      </h2>
+      {{yield}}
+    </div>
+  </template>
+}