diff --git a/.changeset/real-yaks-press.md b/.changeset/real-yaks-press.md new file mode 100644 index 00000000000..3b94607256d --- /dev/null +++ b/.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. diff --git a/packages/components/package.json b/packages/components/package.json index 72cdc492d6f..64226db5e10 100644 --- a/packages/components/package.json +++ b/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", diff --git a/packages/components/rollup.config.mjs b/packages/components/rollup.config.mjs index 1a437b323d0..e360ff0a0cc 100644 --- a/packages/components/rollup.config.mjs +++ b/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 diff --git a/packages/components/src/components.ts b/packages/components/src/components.ts index 73762451785..c81ce1d2260 100644 --- a/packages/components/src/components.ts +++ b/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'; diff --git a/packages/components/src/components/hds/side-nav/index.hbs b/packages/components/src/components/hds/side-nav/index.hbs index 91860c41af1..56c8550dfd1 100644 --- a/packages/components/src/components/hds/side-nav/index.hbs +++ b/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 }} { 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', diff --git a/packages/components/src/styles/@hashicorp/design-system-components.scss b/packages/components/src/styles/@hashicorp/design-system-components.scss index 6c73d396c5c..c8c420f6600 100644 --- a/packages/components/src/styles/@hashicorp/design-system-components.scss +++ b/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"; diff --git a/showcase/app/components/mock/app/header/app-header.gts b/showcase/app/components/mock/app/header/app-header.gts index 43e110cac37..e40f42b1cd2 100644 --- a/showcase/app/components/mock/app/header/app-header.gts +++ b/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 { -// showOrgPicker; -// orgPickerLabel; -// showRegionPicker; -// showSearch; +export default class MockAppHeaderAppHeader extends Component { + 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; + } -// +} diff --git a/showcase/app/components/mock/app/index.gts b/showcase/app/components/mock/app/index.gts index ee5ae41d725..61f218385af 100644 --- a/showcase/app/components/mock/app/index.gts +++ b/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; - // }, - // ]; + header?: [ + { + AppHeader?: ComponentLike; + }, + ]; sidebar?: [ { - SideNav?: ComponentLike; + SideNav?: + | ComponentLike + | ComponentLike; }, ]; main?: [ @@ -70,17 +75,21 @@ export default class MockApp extends Component { as |Frame| > - {{!-- {{#if (has-block "header")}} + {{#if (has-block "header")}} {{yield (hash AppHeader=MockAppHeaderAppHeader) to="header"}} {{else}} - {{/if}} --}} + {{/if}} {{#if (has-block "sidebar")}} - {{yield (hash SideNav=MockAppSidebarSideNav) to="sidebar"}} + {{yield (hash SideNav=MockAppSidebarAppSideNav) to="sidebar"}} {{else}} - + {{#if @hasOldSidebar}} + + {{else}} + + {{/if}} {{/if}} diff --git a/showcase/app/components/mock/app/sidebar/app-side-nav.gts b/showcase/app/components/mock/app/sidebar/app-side-nav.gts new file mode 100644 index 00000000000..c05c89a144b --- /dev/null +++ b/showcase/app/components/mock/app/sidebar/app-side-nav.gts @@ -0,0 +1,116 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; + +// HDS components +import { + HdsAppSideNav, + HdsAppSideNavList, +} from '@hashicorp/design-system-components/components'; + +// types +import type { HdsAppSideNavSignature } from '@hashicorp/design-system-components/components/hds/app-side-nav/index'; +import type Owner from '@ember/owner'; + +export interface MockAppSidebarAppSideNavSignature { + Args: { + isResponsive?: HdsAppSideNavSignature['Args']['isResponsive']; + isCollapsible?: HdsAppSideNavSignature['Args']['isCollapsible']; + showHeader?: boolean; + showFooter?: boolean; + }; + Element: HdsAppSideNavSignature['Element']; +} + +export default class MockAppSidebarAppSideNav extends Component { + isResponsive; + isCollapsible; + showHeader; + showFooter; + + constructor(owner: Owner, args: MockAppSidebarAppSideNavSignature['Args']) { + super(owner, args); + this.isResponsive = this.args.isResponsive ?? true; + this.isCollapsible = this.args.isCollapsible ?? true; + this.showHeader = this.args.showHeader ?? true; + this.showFooter = this.args.showFooter ?? true; + } + + +} diff --git a/showcase/app/components/mock/app/sidebar/side-nav.gts b/showcase/app/components/mock/app/sidebar/side-nav.gts index 633f86b81b0..c5f61f41237 100644 --- a/showcase/app/components/mock/app/sidebar/side-nav.gts +++ b/showcase/app/components/mock/app/sidebar/side-nav.gts @@ -19,7 +19,7 @@ import { import type { HdsSideNavSignature } from '@hashicorp/design-system-components/components/hds/side-nav/index'; import type Owner from '@ember/owner'; -export interface MockAppSidebarSideNavSignature { +export interface MockAppSidebarOldSideNavSignature { Args: { isResponsive?: HdsSideNavSignature['Args']['isResponsive']; hasA11yRefocus?: HdsSideNavSignature['Args']['hasA11yRefocus']; @@ -30,14 +30,14 @@ export interface MockAppSidebarSideNavSignature { Element: HdsSideNavSignature['Element']; } -export default class MockAppSidebarSideNav extends Component { +export default class MockAppSidebarOldSideNav extends Component { isResponsive; hasA11yRefocus; isCollapsible; showHeader; showFooter; - constructor(owner: Owner, args: MockAppSidebarSideNavSignature['Args']) { + constructor(owner: Owner, args: MockAppSidebarOldSideNavSignature['Args']) { super(owner, args); this.isResponsive = this.args.isResponsive ?? true; this.hasA11yRefocus = this.args.hasA11yRefocus ?? true; diff --git a/showcase/app/templates/components/app-header.hbs b/showcase/app/templates/components/app-header.hbs index c614b97bdfe..3351f623114 100644 --- a/showcase/app/templates/components/app-header.hbs +++ b/showcase/app/templates/components/app-header.hbs @@ -6,13 +6,13 @@ {{page-title "AppHeader Component"}} - AppHeader: removed from rollup, examples have been commented out + AppHeader
Content - {{!-- With generic content + With generic content @@ -572,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 23df92fa2dd..8db073cc55f 100644 --- a/showcase/app/templates/components/app-side-nav.hbs +++ b/showcase/app/templates/components/app-side-nav.hbs @@ -6,13 +6,13 @@ {{page-title "AppSideNav Component"}} - AppSideNav: removed from rollup, examples have been commented out + AppSideNav
Content - {{!-- With generic content + With generic content @@ -521,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 a704efae2dc..e2b5599c4b0 100644 --- a/showcase/app/templates/index.hbs +++ b/showcase/app/templates/index.hbs @@ -48,7 +48,7 @@ AppFooter - {{!
  • +
  • AppHeader @@ -57,7 +57,7 @@ AppSideNav -
    • }} +
  • Application State diff --git a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table.hbs b/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table.hbs index 0ae9da07867..ecd93de2cf6 100644 --- a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table.hbs +++ b/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-advanced-table.hbs @@ -5,7 +5,7 @@ {{page-title "AppFrame Component - Frameless"}} - + <:main as |M|> 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 cd800ae3075..37bcc7b2ff1 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,23 +5,7 @@ {{page-title "AppFrame Component - Frameless"}} -{{! NOTE: AppHeader & AppSideNav components are not published so we use placeholders here }} - -{{!-- - <:header> - {{! TODO add AppHeader to the `Mock::App` component and then instantiate it here }} - {{! }} - - - <:sidebar> - {{! TODO add AppSideNav to the `Mock::App` component and then instantiate it here }} - - + <:main as |M|> @@ -29,4 +13,4 @@ - --}} \ No newline at end of file + \ No newline at end of file diff --git a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header.hbs b/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header.hbs deleted file mode 100644 index f827d1df7af..00000000000 --- a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-app-header.hbs +++ /dev/null @@ -1,23 +0,0 @@ -{{! - Copyright (c) HashiCorp, Inc. - SPDX-License-Identifier: MPL-2.0 -}} - -{{page-title "AppFrame Component - Frameless"}} - -{{! NOTE: AppHeader component is not published so we use a placeholder here }} - -{{!-- - <:header> - {{! TODO add AppHeader to the `Mock::App` component and then instantiate it here }} - {{! }} - - - <:main as |M|> - - - - - - - --}} \ No newline at end of file diff --git a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-side-nav.hbs b/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-side-nav.hbs index 7aebfdb950a..6b735c29044 100644 --- a/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-side-nav.hbs +++ b/showcase/app/templates/layouts/app-frame/frameless/demo-full-app-frame-with-side-nav.hbs @@ -5,7 +5,7 @@ {{page-title "AppFrame Component - Frameless"}} - + <:main as |M|> diff --git a/showcase/app/templates/layouts/app-frame/index.hbs b/showcase/app/templates/layouts/app-frame/index.hbs index 6527a787290..078a783eb3b 100644 --- a/showcase/app/templates/layouts/app-frame/index.hbs +++ b/showcase/app/templates/layouts/app-frame/index.hbs @@ -353,13 +353,11 @@ --}} -{{! For some reason, Ember tests don't play well with iframes (URL not found) so we don't snapshots them in Percy }} +{{! 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 }}
    - {{!-- --}} Framed - {{! NOTE: AppHeader & AppSideNav components are not published so examples are commented out for now - - }} -
    \ No newline at end of file diff --git a/showcase/tests/acceptance/percy-test.js b/showcase/tests/acceptance/percy-test.js index b625896fb57..985ae2f210c 100644 --- a/showcase/tests/acceptance/percy-test.js +++ b/showcase/tests/acceptance/percy-test.js @@ -43,6 +43,9 @@ module('Acceptance | Percy test', function (hooks) { await visit('/components/app-header'); await percySnapshot('AppHeader'); + await visit('/components/app-side-nav'); + await percySnapshot('AppSideNav'); + await visit('/components/application-state'); await percySnapshot('ApplicationState'); diff --git a/showcase/tests/integration/components/hds/app-header/home-link-test.js b/showcase/tests/integration/components/hds/app-header/home-link-test.js index 9c1c48493e1..95f5e41e08e 100644 --- a/showcase/tests/integration/components/hds/app-header/home-link-test.js +++ b/showcase/tests/integration/components/hds/app-header/home-link-test.js @@ -3,7 +3,7 @@ * SPDX-License-Identifier: MPL-2.0 */ -import { module, skip } from 'qunit'; +import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render, resetOnerror, setupOnerror } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; @@ -15,18 +15,27 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) { resetOnerror(); }); - skip('it should render the component with a CSS class that matches the component name', async function (assert) { + test('it should render the component with a CSS class that matches the component name', async function (assert) { await render( - hbs`` + hbs`` ); assert.dom('#test-home-link').hasClass('hds-app-header__home-link'); }); // CONTENT - skip('it renders the passed in args', async function (assert) { + test('it renders the passed in args', async function (assert) { await render( - hbs`` + hbs`` ); assert.dom('.hds-icon-hashicorp').exists(); assert @@ -35,9 +44,14 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) { .hasAttribute('aria-label', 'HashiCorp'); }); - skip('it renders the logo with a custom passed in color', async function (assert) { + test('it renders the logo with a custom passed in color', async function (assert) { await render( - hbs`` + hbs`` ); assert .dom('.hds-icon-boundary') @@ -46,14 +60,14 @@ module('Integration | Component | hds/app-header/home-link', function (hooks) { // ASSERTIONS - skip('it should throw an assertion if @ariaLabel is missing/has no value', async function (assert) { + test('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); setupOnerror(function (error) { assert.strictEqual(error.message, `Assertion Failed: ${errorMessage}`); }); - await render(hbs``); + await render(hbs``); assert.throws(function () { throw new Error(errorMessage); }); 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 2d4c5a8be53..784cb9453aa 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, skip } from 'qunit'; +import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render, click, triggerKeyEvent } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; @@ -11,27 +11,25 @@ import { hbs } from 'ember-cli-htmlbars'; module('Integration | Component | hds/app-header/index', function (hooks) { setupRenderingTest(hooks); - skip('it should render the component with a CSS class that matches the component name', async function (assert) { - await render(hbs``); + 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-header').hasClass('hds-app-header'); }); // CONTENT - skip('it renders content passed into the globalActions and utilityActions named blocks', async function (assert) { - await render(hbs` - - <:logo> - Global Item Before - - <:globalActions> - Global Item After - - <:utilityActions> - Utility Item - - - `); + test('it renders content passed into the globalActions and utilityActions named blocks', async function (assert) { + await render(hbs` + <:logo> + Global Item Before + + <:globalActions> + Global Item After + + <:utilityActions> + Utility Item + +`); assert.dom('#test-global-item-before').hasText('Global Item Before'); assert.dom('#test-global-item-after').hasText('Global Item After'); assert.dom('#test-utility-item').hasText('Utility Item'); @@ -39,15 +37,13 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // RESPONSIVENESS - skip('it is "desktop" by default', async function (assert) { - await render(hbs``); + test('it is "desktop" by default', async function (assert) { + await render(hbs``); assert.dom('#test-app-header').hasClass('hds-app-header--is-desktop'); }); - skip('it does not show a menu button on wide viewports', async function (assert) { - await render(hbs` - - `); + test('it does not show a menu button on wide viewports', async function (assert) { + await render(hbs``); assert.dom('.hds-app-header__menu-button').doesNotExist(); }); @@ -55,36 +51,28 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // Note: We set a high breakpoint to force the component to render as "mobile" - skip('it is "mobile" on narrow viewports', async function (assert) { - await render(hbs` - - - `); + test('it is "mobile" on narrow viewports', async function (assert) { + await render(hbs` +`); assert.dom('#test-app-header').hasClass('hds-app-header--is-mobile'); }); - skip('it shows a menu button on narrow viewports', async function (assert) { - await render(hbs` - - - `); + test('it shows a menu button on narrow viewports', async function (assert) { + await render(hbs` +`); assert.dom('.hds-app-header__menu-button').exists(); }); // Mobile menu functionality - skip(`the actions do not display by default on narrow viewports`, async function (assert) { - await render(hbs` - - - `); + test(`the actions do not display by default on narrow viewports`, async function (assert) { + await render(hbs` +`); assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed'); }); - skip(`the actions show/hide when the menu button is pressed on narrow viewports`, async function (assert) { - await render(hbs` - - - `); + test(`the actions show/hide when the menu button is pressed on narrow viewports`, async function (assert) { + await render(hbs` +`); assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed'); await click('.hds-app-header__menu-button'); @@ -99,20 +87,16 @@ 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" - skip('it uses the custom passed in breakpoint to control menu display', async function (assert) { - await render(hbs` - - `); + test('it uses the custom passed in breakpoint to control menu display', async function (assert) { + await render(hbs``); assert.dom('.hds-app-header__menu-button').exists(); }); // A11Y - skip(`it displays the correct value for aria-expanded when actions are displayed vs hidden`, async function (assert) { - await render(hbs` - - - `); + test(`it displays the correct value for aria-expanded when actions are displayed vs hidden`, async function (assert) { + await render(hbs` +`); await click('.hds-app-header__menu-button'); assert .dom('.hds-app-header__menu-button') @@ -124,11 +108,9 @@ module('Integration | Component | hds/app-header/index', function (hooks) { .hasAttribute('aria-expanded', 'false'); }); - skip('the actions menu collapses when the ESC key is pressed on narrow viewports', async function (assert) { - await render(hbs` - - - `); + test('the actions menu collapses when the ESC key is pressed on narrow viewports', async function (assert) { + await render(hbs` +`); assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed'); await click('.hds-app-header__menu-button'); @@ -138,11 +120,9 @@ module('Integration | Component | hds/app-header/index', function (hooks) { assert.dom('#test-app-header').hasClass('hds-app-header--menu-is-closed'); }); - skip('the menu button has an aria-controls attribute with a value matching the menu id', async function (assert) { - await render(hbs` - - - `); + test('the menu button has an aria-controls attribute with a value matching the menu id', async function (assert) { + await render(hbs` +`); await click('.hds-app-header__menu-button'); assert.dom('.hds-app-header__menu-button').hasAttribute('aria-controls'); assert.dom('.hds-app-header__actions').hasAttribute('id'); @@ -157,7 +137,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { // A11Y Refocus - skip('it renders the `a11y-refocus` elements by default with a default skip link href value of "#hds-main', async function (assert) { + test('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,14 +146,12 @@ module('Integration | Component | hds/app-header/index', function (hooks) { .hasAttribute('href', '#hds-main'); }); - skip('it renders the `a11y-refocus` elements with the right properties provided as arguments', async function (assert) { - await render(hbs` - - `); + test('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') .hasText('test-navigation-text'); @@ -183,7 +161,7 @@ module('Integration | Component | hds/app-header/index', function (hooks) { .hasAttribute('href', '#test-skip-to'); }); - skip('it does not render the `a11y-refocus` elements if `hasA11yRefocus` is false', async function (assert) { + test('it does not render the `a11y-refocus` elements if `hasA11yRefocus` is false', 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 a85ffbe7654..42b37b8a278 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,7 +3,7 @@ * SPDX-License-Identifier: MPL-2.0 */ -import { module, skip } from 'qunit'; +import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render, @@ -46,41 +46,39 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { window.matchMedia = this.__matchMedia; }); - skip('it should render the component with a CSS class that matches the component name', async function (assert) { + test('it should render the component with a CSS class that matches the component name', async function (assert) { await render( - hbs`` + hbs`` ); assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav'); }); // CONTENT - skip('it renders content passed to the named blocks', async function (assert) { - await render(hbs` - - - - `); + test('it renders content passed to the named blocks', async function (assert) { + await render(hbs` + +`); assert.dom('#test-app-side-nav-body').exists(); }); // RESPONSIVENESS - skip('it is "desktop" by default', async function (assert) { - await render(hbs``); + 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'); }); - skip('it is "responsive" by default', async function (assert) { - await render(hbs``); + 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'); }); - skip('it is not "responsive" if `isResponsive` is false', async function (assert) { + test('it is not "responsive" if `isResponsive` is false', async function (assert) { await render( - hbs`` + hbs`` ); assert .dom('#test-app-side-nav') @@ -89,53 +87,41 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { // MOBILE - skip('it is "mobile" on narrow viewports', async function (assert) { - await render(hbs` - - - `); + 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'); }); - skip('it is minimized/collapsed on narrow viewports by default', async function (assert) { - await render(hbs` - - - `); + 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'); }); - skip('it is not minimized/collapsed on narrow viewports if `isResponsive` is false', async function (assert) { - await render(hbs` - - - `); + 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'); }); - skip('it shows a toggle button on narrow viewports by default', async function (assert) { - await render(hbs` - - - `); + 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(); }); - skip('it does not show a toggle button on narrow viewports if `isResponsive` is false', async function (assert) { - await render(hbs` - - - `); + 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(); }); - skip('it expands/collapses when the toggle button is pressed on narrow viewports', async function (assert) { - await render(hbs` - - - `); + 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'); @@ -146,14 +132,12 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { assert.dom('#test-app-side-nav').hasClass('hds-app-side-nav--is-minimized'); }); - skip('it collapses when the ESC key is pressed on narrow viewports', async function (assert) { - await render(hbs` - - - - - - `); + 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 @@ -167,9 +151,9 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { // COLLAPSIBLE - skip('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) { + test('it responds to different events to toggle between "non-minimized" (by default) and "mimimized" states', async function (assert) { await render( - hbs`` + hbs`` ); assert .dom('#test-app-side-nav') @@ -184,13 +168,11 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { .hasClass('hds-app-side-nav--is-not-minimized'); }); - skip('the "non-minimized" and "minimized" states have impact on its internal properties', async function (assert) { - await render(hbs` - - - - - `); + 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'); @@ -218,7 +200,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { assert.dom('#test-app-side-nav-body').doesNotHaveAttribute('inert'); }); - skip('when the viewport changes from desktop to mobile, it automatically collapses and becomes inert', async function (assert) { + test('when the viewport changes from desktop to mobile, it automatically collapses and becomes inert', async function (assert) { this.mockMedia(); let calls = []; @@ -226,12 +208,13 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { onDesktopViewportChange: (...args) => calls.push(args), }); - await render(hbs` - - - - - `); + await render(hbs` + + +`); assert.strictEqual(calls.length, 1, 'called with initial viewport'); @@ -245,7 +228,7 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); }); - skip('when collapsed and the viewport changes from mobile to desktop, it automatically expands and is no longer inert', async function (assert) { + 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 = []; @@ -253,12 +236,13 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { onDesktopViewportChange: (...args) => calls.push(args), }); - await render(hbs` - - - - - `); + await render(hbs` + + +`); await click('.hds-app-side-nav__toggle-button'); assert.dom('.hds-app-side-nav-hide-when-minimized').hasAttribute('inert'); @@ -284,12 +268,13 @@ module('Integration | Component | hds/app-side-nav/index', function (hooks) { // CALLBACKS - skip('it should call `onToggleMinimizedStatus` function if provided', async function (assert) { + test('it should call `onToggleMinimizedStatus` function if provided', async function (assert) { let toggled = false; this.set('onToggleMinimizedStatus', () => (toggled = true)); - await render( - hbs`` - ); + 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 41ac1b04e34..337ae946618 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, skip } from 'qunit'; +import { module, test } from 'qunit'; import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; @@ -15,9 +15,11 @@ module( // Basic - skip('it should render the component with a CSS class that matches the component name', async function (assert) { + test('it should render the component with a CSS class that matches the component name', async function (assert) { await render( - hbs`` + hbs`` ); assert .dom('#test-app-side-nav-list-item-link-back-link') @@ -26,9 +28,9 @@ module( // Test Content / Args - skip('it renders the passed in args', async function (assert) { + test('it renders the passed in args', async function (assert) { await render( - hbs`` + hbs`` ); assert.dom('.hds-icon-chevron-left').exists(); assert @@ -38,16 +40,16 @@ module( // GENERATED ELEMENTS - skip('it should render a