diff --git a/.changeset/seven-mugs-think.md b/.changeset/seven-mugs-think.md deleted file mode 100644 index 308d1744b9..0000000000 --- a/.changeset/seven-mugs-think.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -"@hashicorp/design-system-components": minor ---- - -`SideNav` - Deprecated the `SideNav` component. Use the [`AppSideNav` component](/components/app-side-nav) as a replacement. diff --git a/packages/components/package.json b/packages/components/package.json index 820ec191cf..2588930663 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 76932ea53c..b75d264796 100644 --- a/packages/components/rollup.config.mjs +++ b/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 diff --git a/packages/components/src/components/hds/side-nav/index.hbs b/packages/components/src/components/hds/side-nav/index.hbs index eb9dd44987..2a7df14374 100644 --- a/packages/components/src/components/hds/side-nav/index.hbs +++ b/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 }} diff --git a/packages/components/src/components/hds/side-nav/index.ts b/packages/components/src/components/hds/side-nav/index.ts index 2303cd5942..5ed5df55e3 100644 --- a/packages/components/src/components/hds/side-nav/index.ts +++ b/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 { 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 { diff --git a/showcase/app/templates/components/app-header.hbs b/showcase/app/templates/components/app-header.hbs index 67f43da9c0..c614b97bdf 100644 --- a/showcase/app/templates/components/app-header.hbs +++ b/showcase/app/templates/components/app-header.hbs @@ -5,12 +5,14 @@ {{page-title "AppHeader Component"}} -AppHeader + + AppHeader: removed from rollup, examples have been commented out +
Content - With generic content + {{!-- With generic content @@ -570,5 +572,5 @@ - + --}}
\ No newline at end of file diff --git a/showcase/app/templates/components/app-side-nav.hbs b/showcase/app/templates/components/app-side-nav.hbs index 59bdd1d89f..23df92fa2d 100644 --- a/showcase/app/templates/components/app-side-nav.hbs +++ b/showcase/app/templates/components/app-side-nav.hbs @@ -5,12 +5,14 @@ {{page-title "AppSideNav Component"}} -AppSideNav + + AppSideNav: removed from rollup, examples have been commented out +
Content - With generic content + {{!-- With generic content @@ -519,5 +521,5 @@ {{/each}} {{/let}} - + --}}
\ No newline at end of file diff --git a/showcase/app/templates/index.hbs b/showcase/app/templates/index.hbs index 49c768c311..7d5689a96b 100644 --- a/showcase/app/templates/index.hbs +++ b/showcase/app/templates/index.hbs @@ -24,6 +24,7 @@ +
Components
    @@ -42,7 +43,7 @@ AppFooter -
  1. + {{!
  2. AppHeader @@ -51,7 +52,7 @@ AppSideNav -
    3. + }}
  3. Application State @@ -264,6 +265,7 @@
+
Layouts
    @@ -281,6 +283,7 @@
+ Utilities
  1. diff --git a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav.hbs b/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav.hbs index caa2d3b0eb..3228f9d341 100644 --- a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header-and-app-side-nav.hbs +++ b/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 }} + - + {{!-- <:logo> @@ -46,11 +48,11 @@ - + --}} - + {{!-- @@ -73,7 +75,7 @@ - + --}} diff --git a/showcase/app/templates/layouts/app-frame/index.hbs b/showcase/app/templates/layouts/app-frame/index.hbs index b66953298b..af824a57ab 100644 --- a/showcase/app/templates/layouts/app-frame/index.hbs +++ b/showcase/app/templates/layouts/app-frame/index.hbs @@ -359,6 +359,7 @@ Framed + {{! NOTE: AppHeader & AppSideNav components are not published so examples are commented out for now + }} ` ); @@ -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`` ); @@ -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`` ); @@ -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); diff --git a/showcase/tests/integration/components/hds/app-header/index-test.js b/showcase/tests/integration/components/hds/app-header/index-test.js index 8ec77d9612..2d4c5a8be5 100644 --- a/showcase/tests/integration/components/hds/app-header/index-test.js +++ b/showcase/tests/integration/components/hds/app-header/index-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, click, triggerKeyEvent } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; @@ -11,14 +11,14 @@ import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | hds/app-header/index', function (hooks) { setupRenderingTest(hooks); - 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``); assert.dom('#test-app-header').hasClass('hds-app-header'); }); // CONTENT - test('it renders content passed into the globalActions and utilityActions named blocks', async function (assert) { + skip('it renders content passed into the globalActions and utilityActions named blocks', async function (assert) { await render(hbs` <:logo> @@ -39,12 +39,12 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // RESPONSIVENESS - test('it is "desktop" by default', async function (assert) { + skip('it is "desktop" by default', async function (assert) { await render(hbs``); assert.dom('#test-app-header').hasClass('hds-app-header--is-desktop'); }); - test('it does not show a menu button on wide viewports', async function (assert) { + skip('it does not show a menu button on wide viewports', async function (assert) { await render(hbs` `); @@ -55,7 +55,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // Note: We set a high breakpoint to force the component to render as "mobile" - test('it is "mobile" on narrow viewports', async function (assert) { + skip('it is "mobile" on narrow viewports', async function (assert) { await render(hbs` @@ -63,7 +63,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { assert.dom('#test-app-header').hasClass('hds-app-header--is-mobile'); }); - test('it shows a menu button on narrow viewports', async function (assert) { + skip('it shows a menu button on narrow viewports', async function (assert) { await render(hbs` @@ -72,7 +72,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { }); // Mobile menu functionality - test(`the actions do not display by default on narrow viewports`, async function (assert) { + skip(`the actions do not display by default on narrow viewports`, async function (assert) { await render(hbs` @@ -80,7 +80,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed'); }); - test(`the actions show/hide when the menu button is pressed on narrow viewports`, async function (assert) { + skip(`the actions show/hide when the menu button is pressed on narrow viewports`, async function (assert) { await render(hbs` @@ -99,7 +99,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // Breakpoint // Note: We pass in a high custom breakpoint to force the component to render as "mobile" - test('it uses the custom passed in breakpoint to control menu display', async function (assert) { + skip('it uses the custom passed in breakpoint to control menu display', async function (assert) { await render(hbs` `); @@ -108,7 +108,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // A11Y - test(`it displays the correct value for aria-expanded when actions are displayed vs hidden`, async function (assert) { + skip(`it displays the correct value for aria-expanded when actions are displayed vs hidden`, async function (assert) { await render(hbs` @@ -124,7 +124,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { .hasAttribute('aria-expanded', 'false'); }); - test('the actions menu collapses when the ESC key is pressed on narrow viewports', async function (assert) { + skip('the actions menu collapses when the ESC key is pressed on narrow viewports', async function (assert) { await render(hbs` @@ -138,7 +138,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed'); }); - test('the menu button has an aria-controls attribute with a value matching the menu id', async function (assert) { + skip('the menu button has an aria-controls attribute with a value matching the menu id', async function (assert) { await render(hbs` @@ -157,7 +157,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // A11Y Refocus - test('it renders the `a11y-refocus` elements by default with a default skip link href value of "#hds-main', async function (assert) { + skip('it renders the `a11y-refocus` elements by default with a default skip link href value of "#hds-main', async function (assert) { await render(hbs``); assert.dom('#ember-a11y-refocus-nav-message').exists(); assert @@ -166,7 +166,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { .hasAttribute('href', '#hds-main'); }); - test('it renders the `a11y-refocus` elements with the right properties provided as arguments', async function (assert) { + skip('it renders the `a11y-refocus` elements with the right properties provided as arguments', async function (assert) { await render(hbs` `); assert.dom('#ember-a11y-refocus-nav-message').doesNotExist(); assert.dom('#ember-a11y-refocus-skip-link').doesNotExist(); diff --git a/showcase/tests/integration/components/hds/app-side-nav/index-test.js b/showcase/tests/integration/components/hds/app-side-nav/index-test.js index 8d87efa99d..f6abe3141f 100644 --- a/showcase/tests/integration/components/hds/app-side-nav/index-test.js +++ b/showcase/tests/integration/components/hds/app-side-nav/index-test.js @@ -3,16 +3,16 @@ * SPDX-License-Identifier: MPL-2.0 */ -import { module, test } from 'qunit'; +import { module /* , test */ } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { - render, - click, + // render, + // click, resetOnerror, settled, - triggerKeyEvent, + // triggerKeyEvent, } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; +// import { hbs } from 'ember-cli-htmlbars'; class MockEventTarget extends EventTarget {} @@ -46,251 +46,251 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { window.matchMedia = this.__matchMedia; }); - test('it should render the component with a CSS class that matches the component name', async function (assert) { - await render( - hbs`` - ); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav'); - }); + // DISABLEtest('it should render the component with a CSS class that matches the component name', async function (assert) { + // await render( + // hbs`` + // ); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav'); + // }); // CONTENT - test('it renders content passed to the named blocks', async function (assert) { - await render(hbs` - - - - `); - assert.dom('#test-app-side-nav-body').exists(); - }); + // DISABLEtest('it renders content passed to the named blocks', async function (assert) { + // await render(hbs` + // + // + // + // `); + // assert.dom('#test-app-side-nav-body').exists(); + // }); // RESPONSIVENESS - test('it is "desktop" by default', async function (assert) { - await render(hbs``); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-desktop'); - }); - - test('it is "responsive" by default', async function (assert) { - await render(hbs``); - assert - .dom('#test-app-side-nav') - .hasClass('hds-app-side-nav--is-responsive'); - }); - - test('it is not "responsive" if `isResponsive` is false', async function (assert) { - await render( - hbs`` - ); - assert - .dom('#test-app-side-nav') - .doesNotHaveClass('hds-app-side-nav--is-responsive'); - }); + // DISABLEtest('it is "desktop" by default', async function (assert) { + // await render(hbs``); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-desktop'); + // }); + + // DISABLEtest('it is "responsive" by default', async function (assert) { + // await render(hbs``); + // assert + // .dom('#test-app-side-nav') + // .hasClass('hds-app-side-nav--is-responsive'); + // }); + + // DISABLEtest('it is not "responsive" if `isResponsive` is false', async function (assert) { + // await render( + // hbs`` + // ); + // assert + // .dom('#test-app-side-nav') + // .doesNotHaveClass('hds-app-side-nav--is-responsive'); + // }); // MOBILE - test('it is "mobile" on narrow viewports', async function (assert) { - await render(hbs` - - - `); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-mobile'); - }); - - test('it is minimized/collapsed on narrow viewports by default', async function (assert) { - await render(hbs` - - - `); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); - }); - - test('it is not minimized/collapsed on narrow viewports if `isResponsive` is false', async function (assert) { - await render(hbs` - - - `); - assert - .dom('#test-app-side-nav') - .hasClass('hds-app-side-nav--is-not-minimized'); - }); - - test('it shows a toggle button on narrow viewports by default', async function (assert) { - await render(hbs` - - - `); - assert.dom('.hds-app-side-nav__toggle-button').exists(); - }); - - test('it does not show a toggle button on narrow viewports if `isResponsive` is false', async function (assert) { - await render(hbs` - - - `); - assert.dom('.hds-app-side-nav__toggle-button').doesNotExist(); - }); - - test('it expands/collapses when the toggle button is pressed on narrow viewports', async function (assert) { - await render(hbs` - - - `); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); - - await click('.hds-app-side-nav__toggle-button'); - assert - .dom('#test-app-side-nav') - .hasClass('hds-app-side-nav--is-not-minimized'); - await click('.hds-app-side-nav__toggle-button'); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); - }); - - test('it collapses when the ESC key is pressed on narrow viewports', async function (assert) { - await render(hbs` - - - - - - `); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); - await click('.hds-app-side-nav__toggle-button'); - assert - .dom('#test-app-side-nav') - .hasClass('hds-app-side-nav--is-not-minimized'); - - await triggerKeyEvent('#test-app-side-nav', 'keydown', 'Escape'); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); - assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); - }); + // DISABLEtest('it is "mobile" on narrow viewports', async function (assert) { + // await render(hbs` + // + // + // `); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-mobile'); + // }); + + // DISABLEtest('it is minimized/collapsed on narrow viewports by default', async function (assert) { + // await render(hbs` + // + // + // `); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); + // }); + + // DISABLEtest('it is not minimized/collapsed on narrow viewports if `isResponsive` is false', async function (assert) { + // await render(hbs` + // + // + // `); + // assert + // .dom('#test-app-side-nav') + // .hasClass('hds-app-side-nav--is-not-minimized'); + // }); + + // DISABLEtest('it shows a toggle button on narrow viewports by default', async function (assert) { + // await render(hbs` + // + // + // `); + // assert.dom('.hds-app-side-nav__toggle-button').exists(); + // }); + + // DISABLEtest('it does not show a toggle button on narrow viewports if `isResponsive` is false', async function (assert) { + // await render(hbs` + // + // + // `); + // assert.dom('.hds-app-side-nav__toggle-button').doesNotExist(); + // }); + + // DISABLEtest('it expands/collapses when the toggle button is pressed on narrow viewports', async function (assert) { + // await render(hbs` + // + // + // `); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); + + // await click('.hds-app-side-nav__toggle-button'); + // assert + // .dom('#test-app-side-nav') + // .hasClass('hds-app-side-nav--is-not-minimized'); + // await click('.hds-app-side-nav__toggle-button'); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); + // }); + + // DISABLEtest('it collapses when the ESC key is pressed on narrow viewports', async function (assert) { + // await render(hbs` + // + // + // + // + // + // `); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); + // await click('.hds-app-side-nav__toggle-button'); + // assert + // .dom('#test-app-side-nav') + // .hasClass('hds-app-side-nav--is-not-minimized'); + + // await triggerKeyEvent('#test-app-side-nav', 'keydown', 'Escape'); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); + // assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); + // }); // COLLAPSIBLE - test('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) { - await render( - hbs`` - ); - assert - .dom('#test-app-side-nav') - .hasClass('hds-app-side-nav--is-not-minimized'); - - await click('.hds-app-side-nav__toggle-button'); - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); - - await click('.hds-app-side-nav__toggle-button'); - assert - .dom('#test-app-side-nav') - .hasClass('hds-app-side-nav--is-not-minimized'); - }); - - test('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) { - await render(hbs` - - - - - `); - assert - .dom('#test-app-side-nav') - .hasClass('hds-app-side-nav--is-not-minimized'); - assert - .dom('.hds-app-side-nav__toggle-button') - .hasAttribute('aria-expanded', 'true'); - assert - .dom('.hds-app-side-nav__toggle-button .hds-icon') - .hasClass('hds-icon-chevrons-left'); - assert - .dom('.hds-app-side-nav-hide-when-minimized') - .doesNotHaveAttribute('inert'); - assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert'); - - await click('.hds-app-side-nav__toggle-button'); - - assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); - assert - .dom('.hds-app-side-nav__toggle-button') - .hasAttribute('aria-expanded', 'false'); - assert - .dom('.hds-app-side-nav__toggle-button .hds-icon') - .hasClass('hds-icon-chevrons-right'); - assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); - assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert'); - }); - - test('when the viewport changes from desktop to mobile, it automatically collapses and becomes inert', async function (assert) { - this.mockMedia(); - - let calls = []; - this.setProperties({ - onDesktopViewportChange: (...args) => calls.push(args), - }); - - await render(hbs` - - - - - `); - - assert.strictEqual(calls.length, 1, 'called with initial viewport'); - - await this.changeBrowserSize(false); - assert.deepEqual( - calls[1], - [false], - 'resizing to mobile triggers a false event' - ); - - assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); - }); - - test('when collapsed and the viewport changes from mobile to desktop, it automatically expands and is no longer inert', async function (assert) { - this.mockMedia(); - - let calls = []; - this.setProperties({ - onDesktopViewportChange: (...args) => calls.push(args), - }); - - await render(hbs` - - - - - `); - - await click('.hds-app-side-nav__toggle-button'); - assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); - - await this.changeBrowserSize(false); - assert.deepEqual( - calls[1], - [false], - 'resizing to mobile triggers a false event' - ); - assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); - - await this.changeBrowserSize(true); - assert.deepEqual( - calls[2], - [true], - 'resizing to desktop triggers a true event' - ); - assert - .dom('.hds-app-side-nav-hide-when-minimized') - .doesNotHaveAttribute('inert'); - }); + // DISABLEtest('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) { + // await render( + // hbs`` + // ); + // assert + // .dom('#test-app-side-nav') + // .hasClass('hds-app-side-nav--is-not-minimized'); + + // await click('.hds-app-side-nav__toggle-button'); + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); + + // await click('.hds-app-side-nav__toggle-button'); + // assert + // .dom('#test-app-side-nav') + // .hasClass('hds-app-side-nav--is-not-minimized'); + // }); + + // DISABLEtest('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) { + // await render(hbs` + // + // + // + // + // `); + // assert + // .dom('#test-app-side-nav') + // .hasClass('hds-app-side-nav--is-not-minimized'); + // assert + // .dom('.hds-app-side-nav__toggle-button') + // .hasAttribute('aria-expanded', 'true'); + // assert + // .dom('.hds-app-side-nav__toggle-button .hds-icon') + // .hasClass('hds-icon-chevrons-left'); + // assert + // .dom('.hds-app-side-nav-hide-when-minimized') + // .doesNotHaveAttribute('inert'); + // assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert'); + + // await click('.hds-app-side-nav__toggle-button'); + + // assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); + // assert + // .dom('.hds-app-side-nav__toggle-button') + // .hasAttribute('aria-expanded', 'false'); + // assert + // .dom('.hds-app-side-nav__toggle-button .hds-icon') + // .hasClass('hds-icon-chevrons-right'); + // assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); + // assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert'); + // }); + + // DISABLEtest('when the viewport changes from desktop to mobile, it automatically collapses and becomes inert', async function (assert) { + // this.mockMedia(); + + // let calls = []; + // this.setProperties({ + // onDesktopViewportChange: (...args) => calls.push(args), + // }); + + // await render(hbs` + // + // + // + // + // `); + + // assert.strictEqual(calls.length, 1, 'called with initial viewport'); + + // await this.changeBrowserSize(false); + // assert.deepEqual( + // calls[1], + // [false], + // 'resizing to mobile triggers a false event' + // ); + + // assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); + // }); + + // DISABLEtest('when collapsed and the viewport changes from mobile to desktop, it automatically expands and is no longer inert', async function (assert) { + // this.mockMedia(); + + // let calls = []; + // this.setProperties({ + // onDesktopViewportChange: (...args) => calls.push(args), + // }); + + // await render(hbs` + // + // + // + // + // `); + + // await click('.hds-app-side-nav__toggle-button'); + // assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); + + // await this.changeBrowserSize(false); + // assert.deepEqual( + // calls[1], + // [false], + // 'resizing to mobile triggers a false event' + // ); + // assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); + + // await this.changeBrowserSize(true); + // assert.deepEqual( + // calls[2], + // [true], + // 'resizing to desktop triggers a true event' + // ); + // assert + // .dom('.hds-app-side-nav-hide-when-minimized') + // .doesNotHaveAttribute('inert'); + // }); // CALLBACKS - test('it should call `onToggleMinimizedStatus` function if provided', async function (assert) { - let toggled = false; - this.set('onToggleMinimizedStatus', () => (toggled = true)); - await render( - hbs`` - ); - await click('.hds-app-side-nav__toggle-button'); - assert.ok(toggled); - }); + // DISABLEtest('it should call `onToggleMinimizedStatus` function if provided', async function (assert) { + // let toggled = false; + // this.set('onToggleMinimizedStatus', () => (toggled = true)); + // await render( + // hbs`` + // ); + // await click('.hds-app-side-nav__toggle-button'); + // assert.ok(toggled); + // }); }); diff --git a/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.js b/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.js index 185c83da4f..41ac1b04e3 100644 --- a/showcase/tests/integration/components/hds/app-side-nav/list/back-link-test.js +++ b/showcase/tests/integration/components/hds/app-side-nav/list/back-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 } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; @@ -15,7 +15,7 @@ module( // Basic - 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`` ); @@ -26,7 +26,7 @@ module( // Test Content / Args - test('it renders the passed in args', async function (assert) { + skip('it renders the passed in args', async function (assert) { await render( hbs`` ); @@ -38,14 +38,14 @@ module( // GENERATED ELEMENTS - test('it should render a