From 810c6a571751d525a977dd7090a720c06fe7c2b1 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Fri, 12 Jul 2024 11:59:58 -0400 Subject: [PATCH 1/8] feat: replace detail/summary in side bar --- .../doc/table-of-contents/collapsible-item.hbs | 11 +++++++++++ .../doc/table-of-contents/collapsible-item.js | 15 +++++++++++++++ .../components/doc/table-of-contents/index.hbs | 5 +---- .../styles/doc-components/table-of-contents.scss | 3 +-- 4 files changed, 28 insertions(+), 6 deletions(-) create mode 100644 website/app/components/doc/table-of-contents/collapsible-item.hbs create mode 100644 website/app/components/doc/table-of-contents/collapsible-item.js diff --git a/website/app/components/doc/table-of-contents/collapsible-item.hbs b/website/app/components/doc/table-of-contents/collapsible-item.hbs new file mode 100644 index 0000000000..44ad46b3e4 --- /dev/null +++ b/website/app/components/doc/table-of-contents/collapsible-item.hbs @@ -0,0 +1,11 @@ +
+ + {{#if this.isOpen}} + + {{/if}} +
\ No newline at end of file diff --git a/website/app/components/doc/table-of-contents/collapsible-item.js b/website/app/components/doc/table-of-contents/collapsible-item.js new file mode 100644 index 0000000000..4a3b5d75eb --- /dev/null +++ b/website/app/components/doc/table-of-contents/collapsible-item.js @@ -0,0 +1,15 @@ +/** + * Copyright (c) HashiCorp, Inc. + * SPDX-License-Identifier: MPL-2.0 + */ + +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; + +export default class DocTableOfContentsCollapsibleItemComponent extends Component { + @tracked isOpen = this.args.item.isOpen; + @action toggleIsOpen() { + this.isOpen = !this.isOpen; + } +} diff --git a/website/app/components/doc/table-of-contents/index.hbs b/website/app/components/doc/table-of-contents/index.hbs index c79c232f44..17ef48cb1f 100644 --- a/website/app/components/doc/table-of-contents/index.hbs +++ b/website/app/components/doc/table-of-contents/index.hbs @@ -32,10 +32,7 @@
{{humanize key}}
{{else}} -
- {{humanize key}} - -
+ {{/if}} {{/if}} diff --git a/website/app/styles/doc-components/table-of-contents.scss b/website/app/styles/doc-components/table-of-contents.scss index dccb56ccbd..6e0ea151b3 100644 --- a/website/app/styles/doc-components/table-of-contents.scss +++ b/website/app/styles/doc-components/table-of-contents.scss @@ -57,8 +57,7 @@ $doc-toc-item-inset: 8px; display: none; } - // it's using a `` HMTL tag - [open] > & { + &.open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23727374' fill-rule='evenodd' d='M3.235 5.205a.75.75 0 011.06.03L8 9.158l3.705-3.923a.75.75 0 011.09 1.03l-4.25 4.5a.75.75 0 01-1.09 0l-4.25-4.5a.75.75 0 01.03-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); } } From c66a65f7c4f7d67b5453172a9352ea4a41b5fce8 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Fri, 12 Jul 2024 18:01:39 -0400 Subject: [PATCH 2/8] wip: adding tests --- website/tests/acceptance/sidebar-test.js | 34 ++++++++++++++++-------- 1 file changed, 23 insertions(+), 11 deletions(-) diff --git a/website/tests/acceptance/sidebar-test.js b/website/tests/acceptance/sidebar-test.js index 24b496c669..9248566a20 100644 --- a/website/tests/acceptance/sidebar-test.js +++ b/website/tests/acceptance/sidebar-test.js @@ -4,7 +4,7 @@ */ import { module, test } from 'qunit'; -import { fillIn, visit } from '@ember/test-helpers'; +import { fillIn, visit, click } from '@ember/test-helpers'; import { setupApplicationTest } from 'website/tests/helpers'; module('Acceptance | Sidebar filter', function (hooks) { @@ -29,15 +29,19 @@ module('Acceptance | Sidebar filter', function (hooks) { test('should show the "Checkbox" link in the sidebar (under an opened parent container) if filtering using its "page title" (case insensitive)', async function (assert) { await visit('/components'); - let link = this.element.querySelector( - '.doc-page-sidebar__table-of-contents a[href="/components/form/checkbox"]' - ); - assert.dom(link).exists(); - assert.dom('.doc-table-of-contents__folder[open]').exists({ count: 0 }); + assert + .dom( + '.doc-page-sidebar__table-of-contents a[href="/components/form/checkbox"]' + ) + .exists({ count: 0 }); + assert.dom('.doc-table-of-contents__summary.open').exists({ count: 0 }); await fillIn('.doc-page-sidebar__filter input[type="search"]', 'ChEcKbOx'); - assert.dom(link).exists(); - // notice: we can't use `.hasAttribute('open')` here because it returns always false - assert.dom('.doc-table-of-contents__folder[open]').exists({ count: 1 }); + assert + .dom( + '.doc-page-sidebar__table-of-contents a[href="/components/form/checkbox"]' + ) + .exists(); + assert.dom('.doc-table-of-contents__summary.open').exists({ count: 1 }); }); test('should still show the filter input after filtering', async function (assert) { @@ -74,15 +78,23 @@ module('Acceptance | Sidebar filter', function (hooks) { .exists(); }); + test('should expand subsection when click a parent container', async function (assert) { + await visit('/components'); + + assert.dom('.doc-table-of-contents__folder').exists({ count: 3 }); + + await click('.doc-table-of-contents__folder'); + }); + // QUERY PARAMS test('all "folder" containers should be closed by default if the "current route" link is not inside any of them', async function (assert) { await visit('/components/alert'); - assert.dom('.doc-table-of-contents__folder[open]').exists({ count: 0 }); + assert.dom('.doc-table-of-contents__summary.open').exists({ count: 0 }); }); test('the "folder" container of the "current route" link should be opened by default', async function (assert) { await visit('/components/form/radio-card'); - assert.dom('.doc-table-of-contents__folder[open]').exists({ count: 1 }); + assert.dom('.doc-table-of-contents__summary.open').exists({ count: 1 }); }); }); From b91c01559e926df8383dbd16eeaff152f0e9fcd3 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 15 Jul 2024 09:44:23 -0400 Subject: [PATCH 3/8] fix: rename button class --- .../app/components/doc/table-of-contents/collapsible-item.hbs | 2 +- website/app/styles/doc-components/table-of-contents.scss | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/website/app/components/doc/table-of-contents/collapsible-item.hbs b/website/app/components/doc/table-of-contents/collapsible-item.hbs index 44ad46b3e4..bc4faf5b1f 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.hbs +++ b/website/app/components/doc/table-of-contents/collapsible-item.hbs @@ -2,7 +2,7 @@ {{#if this.isOpen}} diff --git a/website/app/styles/doc-components/table-of-contents.scss b/website/app/styles/doc-components/table-of-contents.scss index 6e0ea151b3..475350e490 100644 --- a/website/app/styles/doc-components/table-of-contents.scss +++ b/website/app/styles/doc-components/table-of-contents.scss @@ -38,7 +38,7 @@ $doc-toc-item-inset: 8px; padding: 0 $doc-toc-item-inset 12px $doc-toc-item-inset; } -.doc-table-of-contents__summary { +.doc-table-of-contents__button { @include doc-font-style-navigation(); display: block; width: 100%; From 7e241871e5488f3ece3d465903a2d17d48427518 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 15 Jul 2024 11:46:57 -0400 Subject: [PATCH 4/8] fix: refactor collapsible item --- .../table-of-contents/collapsible-item.hbs | 26 +++++++++++-------- .../doc/table-of-contents/collapsible-item.js | 11 +++----- .../doc/table-of-contents/index.hbs | 2 +- 3 files changed, 19 insertions(+), 20 deletions(-) diff --git a/website/app/components/doc/table-of-contents/collapsible-item.hbs b/website/app/components/doc/table-of-contents/collapsible-item.hbs index bc4faf5b1f..b0c7bac1f3 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.hbs +++ b/website/app/components/doc/table-of-contents/collapsible-item.hbs @@ -1,11 +1,15 @@ -
- - {{#if this.isOpen}} - - {{/if}} -
\ No newline at end of file + + <:toggle as |t|> + + + + <:content> + + + \ No newline at end of file diff --git a/website/app/components/doc/table-of-contents/collapsible-item.js b/website/app/components/doc/table-of-contents/collapsible-item.js index 4a3b5d75eb..b23fdc74a5 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.js +++ b/website/app/components/doc/table-of-contents/collapsible-item.js @@ -4,12 +4,7 @@ */ import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; -import { action } from '@ember/object'; - -export default class DocTableOfContentsCollapsibleItemComponent extends Component { - @tracked isOpen = this.args.item.isOpen; - @action toggleIsOpen() { - this.isOpen = !this.isOpen; - } +import { guidFor } from '@ember/object/internals'; +export default class HdsRevealComponent extends Component { + contentId = 'content-' + guidFor(this); } diff --git a/website/app/components/doc/table-of-contents/index.hbs b/website/app/components/doc/table-of-contents/index.hbs index 17ef48cb1f..0628a2007f 100644 --- a/website/app/components/doc/table-of-contents/index.hbs +++ b/website/app/components/doc/table-of-contents/index.hbs @@ -5,7 +5,7 @@ {{! template-lint-configure no-inline-styles {"allowDynamicStyles": true} }} -
    +
      {{#each-in @structuredPageTree as |key item|}}
    • {{#if item.pageURL}} From afe951e975b95b13f8e98d5a4fe25d9654575a30 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 15 Jul 2024 12:35:09 -0400 Subject: [PATCH 5/8] chore: take out disclosure primitive --- .../table-of-contents/collapsible-item.hbs | 27 +++++++++---------- .../doc/table-of-contents/collapsible-item.js | 15 +++++++++++ 2 files changed, 27 insertions(+), 15 deletions(-) diff --git a/website/app/components/doc/table-of-contents/collapsible-item.hbs b/website/app/components/doc/table-of-contents/collapsible-item.hbs index b0c7bac1f3..92025d7f02 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.hbs +++ b/website/app/components/doc/table-of-contents/collapsible-item.hbs @@ -1,15 +1,12 @@ - - <:toggle as |t|> - - - - <:content> - - - \ No newline at end of file +
      + + {{#if this.isOpen}} + + {{/if}} +
      \ No newline at end of file diff --git a/website/app/components/doc/table-of-contents/collapsible-item.js b/website/app/components/doc/table-of-contents/collapsible-item.js index b23fdc74a5..513a2344e3 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.js +++ b/website/app/components/doc/table-of-contents/collapsible-item.js @@ -5,6 +5,21 @@ import Component from '@glimmer/component'; import { guidFor } from '@ember/object/internals'; +import { tracked } from '@glimmer/tracking'; +import { action } from '@ember/object'; export default class HdsRevealComponent extends Component { + @tracked isOpen = this.args.item.isOpen; + @action toggleIsOpen() { + this.isOpen = !this.isOpen; + } + contentId = 'content-' + guidFor(this); + + get classNames() { + const classes = ['doc-table-of-contents__button']; + if (this.isOpen) { + classes.push('open'); + } + return classes.join(' '); + } } From 0bb81e1c8a9afbc2eb78b33c7eea70573cd5b76d Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 15 Jul 2024 13:54:13 -0400 Subject: [PATCH 6/8] fix: class name, incorrect depth, etc --- .../doc/table-of-contents/collapsible-item.hbs | 6 +++--- .../doc/table-of-contents/collapsible-item.js | 4 ++-- .../styles/doc-components/table-of-contents.scss | 2 +- website/tests/acceptance/sidebar-test.js | 16 ++++++++++++---- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/website/app/components/doc/table-of-contents/collapsible-item.hbs b/website/app/components/doc/table-of-contents/collapsible-item.hbs index 92025d7f02..caeec8b3f8 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.hbs +++ b/website/app/components/doc/table-of-contents/collapsible-item.hbs @@ -1,12 +1,12 @@
      {{#if this.isOpen}} - + {{/if}}
      \ No newline at end of file diff --git a/website/app/components/doc/table-of-contents/collapsible-item.js b/website/app/components/doc/table-of-contents/collapsible-item.js index 513a2344e3..cb8803f25a 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.js +++ b/website/app/components/doc/table-of-contents/collapsible-item.js @@ -7,7 +7,7 @@ import Component from '@glimmer/component'; import { guidFor } from '@ember/object/internals'; import { tracked } from '@glimmer/tracking'; import { action } from '@ember/object'; -export default class HdsRevealComponent extends Component { +export default class DocTocCollapsibleItemComponent extends Component { @tracked isOpen = this.args.item.isOpen; @action toggleIsOpen() { this.isOpen = !this.isOpen; @@ -18,7 +18,7 @@ export default class HdsRevealComponent extends Component { get classNames() { const classes = ['doc-table-of-contents__button']; if (this.isOpen) { - classes.push('open'); + classes.push('doc-table-of-contents__button--open'); } return classes.join(' '); } diff --git a/website/app/styles/doc-components/table-of-contents.scss b/website/app/styles/doc-components/table-of-contents.scss index 475350e490..cec352d465 100644 --- a/website/app/styles/doc-components/table-of-contents.scss +++ b/website/app/styles/doc-components/table-of-contents.scss @@ -57,7 +57,7 @@ $doc-toc-item-inset: 8px; display: none; } - &.open { + &.doc-table-of-contents__button--open { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 16 16'%3E%3Cpath fill='%23727374' fill-rule='evenodd' d='M3.235 5.205a.75.75 0 011.06.03L8 9.158l3.705-3.923a.75.75 0 011.09 1.03l-4.25 4.5a.75.75 0 01-1.09 0l-4.25-4.5a.75.75 0 01.03-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E"); } } diff --git a/website/tests/acceptance/sidebar-test.js b/website/tests/acceptance/sidebar-test.js index 9248566a20..32861c8dc9 100644 --- a/website/tests/acceptance/sidebar-test.js +++ b/website/tests/acceptance/sidebar-test.js @@ -34,14 +34,18 @@ module('Acceptance | Sidebar filter', function (hooks) { '.doc-page-sidebar__table-of-contents a[href="/components/form/checkbox"]' ) .exists({ count: 0 }); - assert.dom('.doc-table-of-contents__summary.open').exists({ count: 0 }); + assert + .dom('.doc-table-of-contents__button.doc-table-of-contents__button--open') + .exists({ count: 0 }); await fillIn('.doc-page-sidebar__filter input[type="search"]', 'ChEcKbOx'); assert .dom( '.doc-page-sidebar__table-of-contents a[href="/components/form/checkbox"]' ) .exists(); - assert.dom('.doc-table-of-contents__summary.open').exists({ count: 1 }); + assert + .dom('.doc-table-of-contents__button.doc-table-of-contents__button--open') + .exists({ count: 1 }); }); test('should still show the filter input after filtering', async function (assert) { @@ -90,11 +94,15 @@ module('Acceptance | Sidebar filter', function (hooks) { test('all "folder" containers should be closed by default if the "current route" link is not inside any of them', async function (assert) { await visit('/components/alert'); - assert.dom('.doc-table-of-contents__summary.open').exists({ count: 0 }); + assert + .dom('.doc-table-of-contents__button.doc-table-of-contents__button--open') + .exists({ count: 0 }); }); test('the "folder" container of the "current route" link should be opened by default', async function (assert) { await visit('/components/form/radio-card'); - assert.dom('.doc-table-of-contents__summary.open').exists({ count: 1 }); + assert + .dom('.doc-table-of-content__button.doc-table-of-contents__button--open') + .exists({ count: 1 }); }); }); From 4af64947d3e107329b6477fcf8a5e0cfbc9ad2e5 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 15 Jul 2024 14:24:35 -0400 Subject: [PATCH 7/8] fix: aria-expanded --- .../app/components/doc/table-of-contents/collapsible-item.hbs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/website/app/components/doc/table-of-contents/collapsible-item.hbs b/website/app/components/doc/table-of-contents/collapsible-item.hbs index caeec8b3f8..55b1597633 100644 --- a/website/app/components/doc/table-of-contents/collapsible-item.hbs +++ b/website/app/components/doc/table-of-contents/collapsible-item.hbs @@ -2,7 +2,7 @@ From 42b8194244574e4df36f13b693c361ec5ebf47d9 Mon Sep 17 00:00:00 2001 From: shleewhite Date: Mon, 15 Jul 2024 15:42:28 -0400 Subject: [PATCH 8/8] feat: finish tests --- website/tests/acceptance/sidebar-test.js | 41 ++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/website/tests/acceptance/sidebar-test.js b/website/tests/acceptance/sidebar-test.js index 32861c8dc9..861f665952 100644 --- a/website/tests/acceptance/sidebar-test.js +++ b/website/tests/acceptance/sidebar-test.js @@ -86,8 +86,40 @@ module('Acceptance | Sidebar filter', function (hooks) { await visit('/components'); assert.dom('.doc-table-of-contents__folder').exists({ count: 3 }); + assert.dom('.doc-table-of-contents__button').exists({ count: 3 }); + assert + .dom('.doc-table-of-contents__button') + .hasAttribute('aria-expanded', 'false'); + + assert + .dom('.doc-table-of-contents__button.doc-table-of-contents__button--open') + .exists({ count: 0 }); + + assert + .dom( + '.doc-page-sidebar__table-of-contents a[href="/components/copy/button"]' + ) + .exists({ count: 0 }); + + await click('.doc-table-of-contents__button'); + assert + .dom('.doc-table-of-contents__button') + .hasAttribute('aria-expanded', 'true'); + assert + .dom( + '.doc-page-sidebar__table-of-contents a[href="/components/copy/button"]' + ) + .exists(); - await click('.doc-table-of-contents__folder'); + await click('.doc-table-of-contents__button'); + assert + .dom('.doc-table-of-contents__button') + .hasAttribute('aria-expanded', 'false'); + assert + .dom( + '.doc-page-sidebar__table-of-contents a[href="/components/copy/button"]' + ) + .exists({ count: 0 }); }); // QUERY PARAMS @@ -102,7 +134,12 @@ module('Acceptance | Sidebar filter', function (hooks) { test('the "folder" container of the "current route" link should be opened by default', async function (assert) { await visit('/components/form/radio-card'); assert - .dom('.doc-table-of-content__button.doc-table-of-contents__button--open') + .dom('.doc-table-of-contents__button.doc-table-of-contents__button--open') .exists({ count: 1 }); + assert + .dom( + '.doc-page-sidebar__table-of-contents a[href="/components/form/radio-card"]' + ) + .exists(); }); });