From 631e8b93af18f0a3247d60f4134e27962f6c13fb Mon Sep 17 00:00:00 2001 From: Amy Leadem Date: Wed, 16 Aug 2023 15:52:32 -0700 Subject: [PATCH 01/27] Add custom headings attribute --- packages/usa-in-page-navigation/src/index.js | 28 +++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/packages/usa-in-page-navigation/src/index.js b/packages/usa-in-page-navigation/src/index.js index 217011e1c3..650cb3969c 100644 --- a/packages/usa-in-page-navigation/src/index.js +++ b/packages/usa-in-page-navigation/src/index.js @@ -7,6 +7,8 @@ const { CLICK } = require("../../uswds-core/src/js/events"); const Sanitizer = require("../../uswds-core/src/js/utils/sanitizer"); const CURRENT_CLASS = `${PREFIX}-current`; +const IN_PAGE_NAV_HEADINGS = "h2 h3"; +const IN_PAGE_NAV_VALID_HEADINGS = ["h1", "h2", "h3", "h4", "h5", "h6"]; const IN_PAGE_NAV_TITLE_TEXT = "On this page"; const IN_PAGE_NAV_TITLE_HEADING_LEVEL = "h4"; const IN_PAGE_NAV_SCROLL_OFFSET = 0; @@ -49,12 +51,22 @@ const setActive = (el) => { * * @return {Array} - An array of visible headings from the designated content region */ -const getSectionHeadings = (mainContentSelector) => { - const sectionHeadings = document.querySelectorAll( - `${mainContentSelector} h2, ${mainContentSelector} h3` - ); +const getSectionHeadings = (mainContentSelector, headings) => { + const headingList = headings.indexOf(" ") ? headings.split(" ") : headings; + const headingArr = []; + + headingList.forEach((heading) => { + if (!IN_PAGE_NAV_VALID_HEADINGS.includes(heading)) { + throw new Error( + `Invalid heading type: ${heading}. Please use one or more of the following: ${IN_PAGE_NAV_VALID_HEADINGS}` + ); + } + headingArr.push(`${mainContentSelector} ${heading}`); + }); + + const headingListNew = headingArr.join(","); + const sectionHeadings = document.querySelectorAll(headingListNew); - // Convert nodeList to an array to allow for filtering const headingArray = Array.from(sectionHeadings); // Find all headings with hidden styling and remove them from the array @@ -176,6 +188,8 @@ const createInPageNav = (inPageNavEl) => { const inPageNavTitleText = Sanitizer.escapeHTML`${ inPageNavEl.dataset.titleText || IN_PAGE_NAV_TITLE_TEXT }`; + const inPageNavHeadings = + inPageNavEl.dataset.headings || IN_PAGE_NAV_HEADINGS; const inPageNavTitleHeadingLevel = Sanitizer.escapeHTML`${ inPageNavEl.dataset.titleHeadingLevel || IN_PAGE_NAV_TITLE_HEADING_LEVEL }`; @@ -195,7 +209,7 @@ const createInPageNav = (inPageNavEl) => { threshold: [inPageNavThreshold], }; - const sectionHeadings = getSectionHeadings(inPageNavContentSelector); + const sectionHeadings = getSectionHeadings(inPageNavContentSelector, inPageNavHeadings); const inPageNav = document.createElement("nav"); inPageNav.setAttribute("aria-label", inPageNavTitleText); inPageNav.classList.add(IN_PAGE_NAV_NAV_CLASS); @@ -306,4 +320,4 @@ const inPageNavigation = behavior( } ); -module.exports = inPageNavigation; +module.exports = inPageNavigation; \ No newline at end of file From 288e9eb04c83afba9bd8953517ea7f6ae3e6a519 Mon Sep 17 00:00:00 2001 From: Amy Leadem Date: Wed, 16 Aug 2023 16:30:49 -0700 Subject: [PATCH 02/27] Create story for custom header --- .../test-custom-header-selector.twig | 28 +++++++++++++++++++ .../src/usa-in-page-navigation.stories.js | 13 +++++++++ 2 files changed, 41 insertions(+) create mode 100644 packages/usa-in-page-navigation/src/test/test-patterns/test-custom-header-selector.twig diff --git a/packages/usa-in-page-navigation/src/test/test-patterns/test-custom-header-selector.twig b/packages/usa-in-page-navigation/src/test/test-patterns/test-custom-header-selector.twig new file mode 100644 index 0000000000..78ed9fb69c --- /dev/null +++ b/packages/usa-in-page-navigation/src/test/test-patterns/test-custom-header-selector.twig @@ -0,0 +1,28 @@ +
+ + +
+

H1 heading

+

H2 heading

+

H3 heading

+

H4 heading

+
H5 heading
+
H6 heading
+
+
diff --git a/packages/usa-in-page-navigation/src/usa-in-page-navigation.stories.js b/packages/usa-in-page-navigation/src/usa-in-page-navigation.stories.js index f5cd053145..7d5176acde 100644 --- a/packages/usa-in-page-navigation/src/usa-in-page-navigation.stories.js +++ b/packages/usa-in-page-navigation/src/usa-in-page-navigation.stories.js @@ -1,5 +1,6 @@ import Component from "./usa-in-page-navigation.twig"; import TestCustomContentComponent from "./test/test-patterns/test-custom-content-selector.twig"; +import TestCustomHeaderComponent from "./test/test-patterns/test-custom-header-selector.twig"; import TestHiddenHeaderComponent from "./test/test-patterns/test-hidden-headers.twig"; import Content from "./usa-in-page-navigation.json"; @@ -9,6 +10,7 @@ export default { const Template = (args) => Component(args); const TestCustomContentTemplate = (args) => TestCustomContentComponent(args); +const TestCustomHeaderTemplate = (args) => TestCustomHeaderComponent(args); const TestHiddenHeaderTemplate = (args) => TestHiddenHeaderComponent(args); export const Default = Template.bind({}); @@ -18,4 +20,15 @@ export const TestCustomContentSelector = TestCustomContentTemplate.bind(); TestCustomContentSelector.args = { customContentSelector: true, }; + +export const TestCustomHeaderSelector = TestCustomHeaderTemplate.bind(); +TestCustomHeaderSelector.argTypes = { + includeHeaders: { + defaultValue: "All", + name: "Include these headers in link list", + options: ["All", "h1", "h2", "h3", "h4", "h5", "h6"], + control: { type: "radio" }, + }, +} + export const TestHiddenHeaders = TestHiddenHeaderTemplate.bind(); From 219c8a12187e294e7105da09f11df8433ad8c71f Mon Sep 17 00:00:00 2001 From: Amy Leadem Date: Wed, 16 Aug 2023 16:31:36 -0700 Subject: [PATCH 03/27] Remove attribute customizations from stories --- .../test/test-patterns/test-custom-content-selector.twig | 5 ----- .../src/test/test-patterns/test-hidden-headers.twig | 8 +------- 2 files changed, 1 insertion(+), 12 deletions(-) diff --git a/packages/usa-in-page-navigation/src/test/test-patterns/test-custom-content-selector.twig b/packages/usa-in-page-navigation/src/test/test-patterns/test-custom-content-selector.twig index 8b73039e47..c872efed5b 100644 --- a/packages/usa-in-page-navigation/src/test/test-patterns/test-custom-content-selector.twig +++ b/packages/usa-in-page-navigation/src/test/test-patterns/test-custom-content-selector.twig @@ -1,10 +1,5 @@