Revive Enterprise Nav components

.changeset/real-yaks-press.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`SideNav` - Deprecated the `SideNav` component. Use the `AppSideNav` component in combination with the `AppHeader` component as a replacement.

packages/components/package.json

@@ -160,6 +160,18 @@
       "./components/hds/app-frame/parts/main.js": "./dist/_app_/components/hds/app-frame/parts/main.js",
       "./components/hds/app-frame/parts/modals.js": "./dist/_app_/components/hds/app-frame/parts/modals.js",
       "./components/hds/app-frame/parts/sidebar.js": "./dist/_app_/components/hds/app-frame/parts/sidebar.js",
+      "./components/hds/app-header/home-link.js": "./dist/_app_/components/hds/app-header/home-link.js",
+      "./components/hds/app-header/index.js": "./dist/_app_/components/hds/app-header/index.js",
+      "./components/hds/app-header/menu-button.js": "./dist/_app_/components/hds/app-header/menu-button.js",
+      "./components/hds/app-side-nav/index.js": "./dist/_app_/components/hds/app-side-nav/index.js",
+      "./components/hds/app-side-nav/list/back-link.js": "./dist/_app_/components/hds/app-side-nav/list/back-link.js",
+      "./components/hds/app-side-nav/list/index.js": "./dist/_app_/components/hds/app-side-nav/list/index.js",
+      "./components/hds/app-side-nav/list/item.js": "./dist/_app_/components/hds/app-side-nav/list/item.js",
+      "./components/hds/app-side-nav/list/link.js": "./dist/_app_/components/hds/app-side-nav/list/link.js",
+      "./components/hds/app-side-nav/list/title.js": "./dist/_app_/components/hds/app-side-nav/list/title.js",
+      "./components/hds/app-side-nav/portal/index.js": "./dist/_app_/components/hds/app-side-nav/portal/index.js",
+      "./components/hds/app-side-nav/portal/target.js": "./dist/_app_/components/hds/app-side-nav/portal/target.js",
+      "./components/hds/app-side-nav/toggle-button.js": "./dist/_app_/components/hds/app-side-nav/toggle-button.js",
       "./components/hds/application-state/body.js": "./dist/_app_/components/hds/application-state/body.js",
       "./components/hds/application-state/footer.js": "./dist/_app_/components/hds/application-state/footer.js",
       "./components/hds/application-state/header.js": "./dist/_app_/components/hds/application-state/header.js",

packages/components/rollup.config.mjs

@@ -14,38 +14,26 @@ const addon = new Addon({
   destDir: 'dist',
 });
 
-const exclude = ['components/hds/app-header', 'components/hds/app-side-nav'];
-
 const plugins = [
   // These are the modules that users should be able to import from your
   // addon. Anything not listed here may get optimized away.
-  addon.publicEntrypoints(
-    [
-      '**/*.{js,ts}',
-      'index.js',
-      'template-registry.js',
-      'styles/@hashicorp/design-system-components.scss',
-    ],
-    {
-      exclude,
-    }
-  ),
+  addon.publicEntrypoints([
+    '**/*.{js,ts}',
+    'index.js',
+    'template-registry.js',
+    'styles/@hashicorp/design-system-components.scss',
+  ]),
 
   // These are the modules that should get reexported into the traditional
   // "app" tree. Things in here should also be in publicEntrypoints above, but
   // not everything in publicEntrypoints necessarily needs to go here.
-  addon.appReexports(
-    [
-      'components/**/!(*types).js',
-      'helpers/**/*.js',
-      'modifiers/**/*.js',
-      'services/**/!(*types).js',
-      'instance-initializers/**/*.js',
-    ],
-    {
-      exclude,
-    }
-  ),
+  addon.appReexports([
+    'components/**/!(*types).js',
+    'helpers/**/*.js',
+    'modifiers/**/*.js',
+    'services/**/!(*types).js',
+    'instance-initializers/**/*.js',
+  ]),
 
   // Follow the V2 Addon rules about dependencies. Your code can import from
   // `dependencies` and `peerDependencies` as well as standard Ember-provided

packages/components/src/components.ts

@@ -43,9 +43,20 @@ export { default as HdsAppFooterStatusLink } from './components/hds/app-footer/s
 export * from './components/hds/app-footer/types.ts';
 
 // AppHeader
-// export { default as HdsAppHeader } from './components/hds/app-header/index.ts';
-// export { default as HdsAppHeaderHomeLink } from './components/hds/app-header/home-link.ts';
-// export { default as HdsAppHeaderMenuButton } from './components/hds/app-header/menu-button.ts';
+export { default as HdsAppHeader } from './components/hds/app-header/index.ts';
+export { default as HdsAppHeaderHomeLink } from './components/hds/app-header/home-link.ts';
+export { default as HdsAppHeaderMenuButton } from './components/hds/app-header/menu-button.ts';
+
+// AppSideNav
+export { default as HdsAppSideNav } from './components/hds/app-side-nav/index.ts';
+export { default as HdsAppSideNavToggleButton } from './components/hds/app-side-nav/toggle-button.ts';
+export { default as HdsAppSideNavPortal } from './components/hds/app-side-nav/portal/index.ts';
+export { default as HdsAppSideNavPortalTarget } from './components/hds/app-side-nav/portal/target.ts';
+export { default as HdsAppSideNavList } from './components/hds/app-side-nav/list/index.ts';
+export { default as HdsAppSideNavListItem } from './components/hds/app-side-nav/list/item.ts';
+export { default as HdsAppSideNavListBackLink } from './components/hds/app-side-nav/list/back-link.ts';
+export { default as HdsAppSideNavListTitle } from './components/hds/app-side-nav/list/title.ts';
+export { default as HdsAppSideNavListLink } from './components/hds/app-side-nav/list/link.ts';
 
 // ApplicationState
 export { default as HdsApplicationState } from './components/hds/application-state/index.ts';

packages/components/src/components/hds/side-nav/index.hbs

@@ -3,6 +3,10 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
+{{!
+  THIS COMPONENT IS NOW DEPRECATED
+}}
+
 {{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}
 
 <Hds::SideNav::Base

packages/components/src/components/hds/side-nav/index.ts

@@ -79,6 +79,21 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
       this.removeEventListeners();
     });
 
+    deprecate(
+      'The `Hds::SideNav` component is now deprecated and will be removed in the next major version of `@hashicorp/design-system-components`. Use `Hds::AppSideNav` instead.',
+      false,
+      {
+        id: 'hds.components.sidenav',
+        until: '5.0.0',
+        url: 'https://helios.hashicorp.design/components/side-nav?tab=version%20history#4140',
+        for: '@hashicorp/design-system-components',
+        since: {
+          available: '4.19.0',
+          enabled: '5.0.0',
+        },
+      }
+    );
+
     if (args.ariaLabel !== undefined) {
       deprecate(
         'The `@ariaLabel` argument for "Hds::SideNav" has been deprecated. It is replaced by aria-labelledby and aria-expanded on the toggle button',

packages/components/src/styles/@hashicorp/design-system-components.scss

@@ -17,8 +17,8 @@
 @use "../components/alert";
 @use "../components/app-footer";
 @use "../components/app-frame";
-// @use "../components/app-header";
-// @use "../components/app-side-nav";
+@use "../components/app-header";
+@use "../components/app-side-nav";
 @use "../components/application-state";
 @use "../components/badge";
 @use "../components/badge-count";

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

@@ -3,93 +3,93 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-// import Component from '@glimmer/component';
+import Component from '@glimmer/component';
 
-// // HDS components
-// import {
-//   HdsAppHeader,
-//   HdsAppHeaderHomeLink,
-//   HdsDropdown,
-//   HdsButton,
-// } from '@hashicorp/design-system-components/components';
+// HDS components
+import {
+  HdsAppHeader,
+  HdsAppHeaderHomeLink,
+  HdsDropdown,
+  HdsButton,
+} from '@hashicorp/design-system-components/components';
 
-// // types
-// import type { HdsAppHeaderSignature } from '@hashicorp/design-system-components/components/hds/app-header/index';
-// import type Owner from '@ember/owner';
+// types
+import type { HdsAppHeaderSignature } from '@hashicorp/design-system-components/components/hds/app-header/index';
+import type Owner from '@ember/owner';
 
-// export interface MockAppHeaderAppHeaderSignature {
-//   Args: {
-//     showOrgPicker?: boolean;
-//     orgPickerLabel?: string;
-//     showRegionPicker?: boolean;
-//     showSearch?: boolean;
-//   };
-//   Element: HdsAppHeaderSignature['Element'];
-// }
+export interface MockAppHeaderAppHeaderSignature {
+  Args: {
+    showOrgPicker?: boolean;
+    orgPickerLabel?: string;
+    showRegionPicker?: boolean;
+    showSearch?: boolean;
+  };
+  Element: HdsAppHeaderSignature['Element'];
+}
 
-// export default class MockAppHeaderAppHeader extends Component<MockAppHeaderAppHeaderSignature> {
-//   showOrgPicker;
-//   orgPickerLabel;
-//   showRegionPicker;
-//   showSearch;
+export default class MockAppHeaderAppHeader extends Component<MockAppHeaderAppHeaderSignature> {
+  showOrgPicker;
+  orgPickerLabel;
+  showRegionPicker;
+  showSearch;
 
-//   constructor(owner: Owner, args: MockAppHeaderAppHeaderSignature['Args']) {
-//     super(owner, args);
-//     this.showOrgPicker = this.args.showOrgPicker ?? true;
-//     this.orgPickerLabel = this.args.orgPickerLabel ?? 'organization-name';
-//     this.showRegionPicker = this.args.showRegionPicker ?? true;
-//     this.showSearch = this.args.showSearch ?? true;
-//   }
+  constructor(owner: Owner, args: MockAppHeaderAppHeaderSignature['Args']) {
+    super(owner, args);
+    this.showOrgPicker = this.args.showOrgPicker ?? true;
+    this.orgPickerLabel = this.args.orgPickerLabel ?? 'organization-name';
+    this.showRegionPicker = this.args.showRegionPicker ?? true;
+    this.showSearch = this.args.showSearch ?? true;
+  }
 
-//   <template>
-//     <HdsAppHeader>
-//       <:logo>
-//         <HdsAppHeaderHomeLink
-//           @icon="hashicorp"
-//           @ariaLabel="HashiCorp home menu"
-//           @href="#"
-//         />
-//       </:logo>
-//       <:globalActions>
-//         {{#if this.showOrgPicker}}
-//           <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
-//             <dd.ToggleButton @text={{this.orgPickerLabel}} @icon="org" />
-//             <dd.Checkmark>
-//               my-organization
-//             </dd.Checkmark>
-//           </HdsDropdown>
-//         {{/if}}
-//       </:globalActions>
-//       <:utilityActions>
-//         {{#if this.showRegionPicker}}
-//           <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
-//             <dd.ToggleButton @text="Europe" @icon="globe" />
-//             <dd.Checkmark @selected={{true}}>Europe</dd.Checkmark>
-//             <dd.Checkmark>Americas</dd.Checkmark>
-//           </HdsDropdown>
-//         {{/if}}
+  <template>
+    <HdsAppHeader>
+      <:logo>
+        <HdsAppHeaderHomeLink
+          @icon="hashicorp"
+          @ariaLabel="HashiCorp home menu"
+          @href="#"
+        />
+      </:logo>
+      <:globalActions>
+        {{#if this.showOrgPicker}}
+          <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
+            <dd.ToggleButton @text={{this.orgPickerLabel}} @icon="org" />
+            <dd.Checkmark>
+              my-organization
+            </dd.Checkmark>
+          </HdsDropdown>
+        {{/if}}
+      </:globalActions>
+      <:utilityActions>
+        {{#if this.showRegionPicker}}
+          <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
+            <dd.ToggleButton @text="Europe" @icon="globe" />
+            <dd.Checkmark @selected={{true}}>Europe</dd.Checkmark>
+            <dd.Checkmark>Americas</dd.Checkmark>
+          </HdsDropdown>
+        {{/if}}
 
-//         {{#if this.showSearch}}
-//           <HdsButton @icon="search" @isIconOnly={{true}} @text="Search" />
-//         {{/if}}
-//         <HdsDropdown @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>
-//         </HdsDropdown>
-//         <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
-//           <dd.ToggleIcon @icon="user" @text="user menu" />
-//           <dd.Title @text="Signed In" />
-//           <dd.Description @text="email@domain.com" />
-//           <dd.Interactive @href="#" @text="Account Settings" />
-//         </HdsDropdown>
-//       </:utilityActions>
-//     </HdsAppHeader>
-//   </template>
-// }
+        {{#if this.showSearch}}
+          <HdsButton @icon="search" @isIconOnly={{true}} @text="Search" />
+        {{/if}}
+        <HdsDropdown @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>
+        </HdsDropdown>
+        <HdsDropdown @enableCollisionDetection={{true}} as |dd|>
+          <dd.ToggleIcon @icon="user" @text="user menu" />
+          <dd.Title @text="Signed In" />
+          <dd.Description @text="email@domain.com" />
+          <dd.Interactive @href="#" @text="Account Settings" />
+        </HdsDropdown>
+      </:utilityActions>
+    </HdsAppHeader>
+  </template>
+}

showcase/app/components/mock/app/index.gts

@@ -6,8 +6,9 @@
 import Component from '@glimmer/component';
 import { hash } from '@ember/helper';
 import style from 'ember-style-modifier';
-// import MockAppHeaderAppHeader from './header/app-header';
-import MockAppSidebarSideNav from './sidebar/side-nav';
+import MockAppHeaderAppHeader from './header/app-header';
+import MockAppSidebarAppSideNav from './sidebar/app-side-nav';
+import MockAppSidebarOldSideNav from './sidebar/side-nav';
 import MockAppMainPageHeader from './main/page-header';
 import MockAppMainGenericTextContent from './main/generic-text-content';
 import MockAppMainGenericAdvancedTable from './main/generic-advanced-table';
@@ -19,8 +20,9 @@ import { HdsAppFrame } from '@hashicorp/design-system-components/components';
 // types
 import type { ComponentLike } from '@glint/template';
 import type { HdsAppFrameSignature } from '@hashicorp/design-system-components/components/hds/app-frame/index';
-// import type { MockAppHeaderAppHeaderSignature } from './header/app-header';
-import type { MockAppSidebarSideNavSignature } from './sidebar/side-nav';
+import type { MockAppHeaderAppHeaderSignature } from './header/app-header';
+import type { MockAppSidebarAppSideNavSignature } from './sidebar/app-side-nav';
+import type { MockAppSidebarOldSideNavSignature } from './sidebar/side-nav';
 import type { MockAppMainPageHeaderSignature } from './main/page-header';
 import type { MockAppMainGenericTextContentSignature } from './main/generic-text-content';
 import type { MockAppMainGenericAdvancedTableSignature } from './main/generic-advanced-table';
@@ -30,17 +32,20 @@ export interface MockAppSignature {
   Args: {
     hasHeader?: HdsAppFrameSignature['Args']['hasHeader'];
     hasSidebar?: HdsAppFrameSignature['Args']['hasSidebar'];
+    hasOldSidebar?: boolean;
     hasFooter?: HdsAppFrameSignature['Args']['hasFooter'];
   };
   Blocks: {
-    // header?: [
-    //   {
-    //     AppHeader?: ComponentLike<MockAppHeaderAppHeaderSignature>;
-    //   },
-    // ];
+    header?: [
+      {
+        AppHeader?: ComponentLike<MockAppHeaderAppHeaderSignature>;
+      },
+    ];
     sidebar?: [
       {
-        SideNav?: ComponentLike<MockAppSidebarSideNavSignature>;
+        SideNav?:
+          | ComponentLike<MockAppSidebarAppSideNavSignature>
+          | ComponentLike<MockAppSidebarOldSideNavSignature>;
       },
     ];
     main?: [
@@ -70,17 +75,21 @@ export default class MockApp extends Component<MockAppSignature> {
       as |Frame|
     >
       <Frame.Header>
-        {{!-- {{#if (has-block "header")}}
+        {{#if (has-block "header")}}
           {{yield (hash AppHeader=MockAppHeaderAppHeader) to="header"}}
         {{else}}
           <MockAppHeaderAppHeader />
-        {{/if}} --}}
+        {{/if}}
       </Frame.Header>
       <Frame.Sidebar>
         {{#if (has-block "sidebar")}}
-          {{yield (hash SideNav=MockAppSidebarSideNav) to="sidebar"}}
+          {{yield (hash SideNav=MockAppSidebarAppSideNav) to="sidebar"}}
         {{else}}
-          <MockAppSidebarSideNav />
+          {{#if @hasOldSidebar}}
+            <MockAppSidebarOldSideNav />
+          {{else}}
+            <MockAppSidebarAppSideNav />
+          {{/if}}
         {{/if}}
       </Frame.Sidebar>
       <Frame.Main {{style overflow="auto"}}>