AppSideNav - deprioritize adoption (#2518)

Co-authored-by: Alex <alex-ju@users.noreply.github.com>
Co-authored-by: Jory Tindall <jory.tindall@hashicorp.com>

packages/components/package.json

@@ -136,18 +136,6 @@
       "./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

@@ -31,8 +31,14 @@ const plugins = [
     'components/**/!(*types).js',
     'helpers/**/*.js',
     'modifiers/**/*.js',
-    'instance-initializers/**/*.js',
-  ]),
+    'instance-initializers/**/*.js'],
+    {
+      exclude: [
+        'components/**/app-header/**/*.js',
+        'components/**/app-side-nav/**/*.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/hds/side-nav/index.hbs

@@ -2,9 +2,6 @@
   Copyright (c) HashiCorp, Inc.
   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 }}
 

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

@@ -7,7 +7,6 @@ import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
 import { registerDestructor } from '@ember/destroyable';
-import { deprecate } from '@ember/debug';
 
 import type { HdsSideNavBaseSignature } from './base';
 
@@ -74,20 +73,6 @@ export default class HdsSideNav extends Component<HdsSideNavSignature> {
     registerDestructor(this, (): void => {
       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: {
-          enabled: '4.14.0',
-        },
-      }
-    );
   }
 
   addEventListeners(): void {

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

@@ -5,12 +5,14 @@
 
 {{page-title "AppHeader Component"}}
 
-<Shw::Text::H1>AppHeader</Shw::Text::H1>
+<Shw::Text::H1>
+  AppHeader: removed from rollup, examples have been commented out
+</Shw::Text::H1>
 
 <section data-test-percy>
   <Shw::Text::H2>Content</Shw::Text::H2>
 
-  <Shw::Text::H3>With generic content</Shw::Text::H3>
+  {{!-- <Shw::Text::H3>With generic content</Shw::Text::H3>
 
   <Shw::Grid @columns={{1}} {{style gap="2rem"}} as |SG|>
     <SG.Item>
@@ -570,5 +572,5 @@
         </Hds::Dropdown>
       </div>
     </SG.Item>
-  </Shw::Grid>
+  </Shw::Grid> --}}
 </section>

showcase/app/templates/components/app-side-nav.hbs

@@ -5,12 +5,14 @@
 
 {{page-title "AppSideNav Component"}}
 
-<Shw::Text::H1>AppSideNav</Shw::Text::H1>
+<Shw::Text::H1>
+  AppSideNav: removed from rollup, examples have been commented out
+</Shw::Text::H1>
 
 <section data-test-percy>
   <Shw::Text::H2>Content</Shw::Text::H2>
 
-  <Shw::Text::H3>With generic content</Shw::Text::H3>
+  {{!-- <Shw::Text::H3>With generic content</Shw::Text::H3>
 
   <Shw::Flex as |SF|>
     <SF.Item @label="Body base invocation">
@@ -519,5 +521,5 @@
         </SF.Item>
       {{/each}}
     {{/let}}
-  </Shw::Flex>
+  </Shw::Flex> --}}
 </section>

showcase/app/templates/index.hbs

@@ -24,6 +24,7 @@
       </li>
     </ol>
   </div>
+
   <div>
     <Shw::Text::H2>Components</Shw::Text::H2>
     <ol class="shw-text-body">
@@ -42,7 +43,7 @@
           AppFooter
         </LinkTo>
       </li>
-      <li>
+      {{! <li>
         <LinkTo @route="components.app-header">
           AppHeader
         </LinkTo>
@@ -51,7 +52,7 @@
         <LinkTo @route="components.app-side-nav">
           AppSideNav
         </LinkTo>
-      </li>
+      </li> }}
       <li>
         <LinkTo @route="components.application-state">
           Application State
@@ -264,6 +265,7 @@
       </li>
     </ol>
   </div>
+
   <div>
     <Shw::Text::H2>Layouts</Shw::Text::H2>
     <ol class="shw-text-body">
@@ -281,6 +283,7 @@
         </LinkTo>
       </li>
     </ol>
+
     <Shw::Text::H2>Utilities</Shw::Text::H2>
     <ol class="shw-text-body">
       <li>

showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav.hbs

@@ -5,9 +5,11 @@
 
 {{page-title "AppFrame Component - Frameless"}}
 
+{{! NOTE: AppHeader & AppSideNav components are not published so components are commented out for now to satisfy linter }}
+
 <Hds::AppFrame as |Frame|>
   <Frame.Header>
-    <Hds::AppHeader>
+    {{!-- <Hds::AppHeader>
       <:logo>
         <Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp home menu" @href="#" />
       </:logo>
@@ -46,11 +48,11 @@
           <dd.Interactive @href="#" @text="Account Settings" />
         </Hds::Dropdown>
       </:utilityActions>
-    </Hds::AppHeader>
+    </Hds::AppHeader> --}}
   </Frame.Header>
 
   <Frame.Sidebar>
-    <Hds::AppSideNav @isResponsive={{true}} @isCollapsible={{true}}>
+    {{!-- <Hds::AppSideNav @isResponsive={{true}} @isCollapsible={{true}}>
       <Hds::AppSideNav::List class="hds-app-side-nav-hide-when-minimized" aria-label="Dashboard" as |SNL|>
         <SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
       </Hds::AppSideNav::List>
@@ -73,7 +75,7 @@
         <SNL.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
         <SNL.Link @href="#" @isHrefExternal={{true}} @icon="guide" @text="Documentation" />
       </Hds::AppSideNav::List>
-    </Hds::AppSideNav>
+    </Hds::AppSideNav> --}}
   </Frame.Sidebar>
 
   <Frame.Main>

showcase/app/templates/layouts/app-frame/index.hbs

@@ -359,6 +359,7 @@
 
   <Shw::Text::H3>Framed</Shw::Text::H3>
 
+  {{! NOTE: AppHeader & AppSideNav components are not published so examples are commented out for now
   <Shw::Frame
     @id="demo-full-app-frame-with-app-header-and-app-side-nav"
     @src="/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav"
@@ -372,6 +373,7 @@
     @height="780"
     @label="Full AppFrame with AppHeader & old SideNav"
   />
+  }}
 
   <Shw::Frame
     @id="demo-full-app-frame-with-side-nav"

showcase/tests/integration/components/hds/app-header/home-link-test.js

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { module, test } from 'qunit';
+import { module, skip } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { render, resetOnerror, setupOnerror } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
@@ -15,7 +15,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
     resetOnerror();
   });
 
-  test('it should render the component with a CSS class that matches the component name', async function (assert) {
+  skip('it should render the component with a CSS class that matches the component name', async function (assert) {
     await render(
       hbs`<Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" id="test-home-link" />`
     );
@@ -24,7 +24,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   // CONTENT
 
-  test('it renders the passed in args', async function (assert) {
+  skip('it renders the passed in args', async function (assert) {
     await render(
       hbs`<Hds::AppHeader::HomeLink @icon="hashicorp" @ariaLabel="HashiCorp" @href="https://www.hashicorp.com/" id="test-home-link" />`
     );
@@ -35,7 +35,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
       .hasAttribute('aria-label', 'HashiCorp');
   });
 
-  test('it renders the logo with a custom passed in color', async function (assert) {
+  skip('it renders the logo with a custom passed in color', async function (assert) {
     await render(
       hbs`<Hds::AppHeader::HomeLink @icon="boundary" @ariaLabel="Boundary" @color="var(--token-color-boundary-brand)" @href="#" />`
     );
@@ -46,7 +46,7 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) {
 
   // ASSERTIONS
 
-  test('it should throw an assertion if @ariaLabel is missing/has no value', async function (assert) {
+  skip('it should throw an assertion if @ariaLabel is missing/has no value', async function (assert) {
     const errorMessage =
       '@ariaLabel for "Hds::AppHeader::HomeLink" ("Logo") must have a valid value';
     assert.expect(2);