355: TOC improvements

[rjwtrmn]

• Header info now scraped from all default content blocks outside of TOC, sidebar, document footer, and hero containers
• H3 headers nested under H2
• TOC now has mobile layout aligned with Frontify (https://sap.frontify.com/document/223143#/-/side-navigation)
• TOC heading taken from 'toc-heading' property in metadata or placeholders.
• TOC now sticky along whole length of page as expected
• Bonus: Promo now wraps content into separate rows for smaller pages and sidebar, as per designs. This means more space available for TOC on other side of grid.

Fix #355

Test URLs:

• Before: https://main--hlx-test--urfuwo.hlx.page/draft/rjwtrmn/the-article-copy
• After: https://355-toc-improvements--hlx-test--urfuwo.hlx.page/draft/rjwtrmn/the-article-copy

[aem-code-sync[bot]]

Hello, I'm the AEM Code Sync Bot and I will run some actions to deploy your branch and validate page speed. In case there are problems, just click a checkbox below to rerun the respective action.

• [ ] Re-run PSI checks
• [ ] Re-sync branch

Commits

* [4a0c587](https://github.com/urfuwo/hlx-test/commit/4a0c58766858df14a2780f7004f092553ae1e61d) :white_check_mark: (latest) * [01313bd](https://github.com/urfuwo/hlx-test/commit/01313bdca9fd38d7f65afeecba4d26398880aac0) :white_check_mark: * [61dde11](https://github.com/urfuwo/hlx-test/commit/61dde118c633504d02f9d030ca6945e32419ff69) :white_check_mark: * [587ae5c](https://github.com/urfuwo/hlx-test/commit/587ae5c5aa29cd365f012cbfd60ae10338e8e558) :white_check_mark: * [7cc737c](https://github.com/urfuwo/hlx-test/commit/7cc737cb113dfaa767713f5b37009154ad54c709) :white_check_mark: * [7b77064](https://github.com/urfuwo/hlx-test/commit/7b77064f4b254d2f1e118ab54e7f870ba2cf3d2a) :white_check_mark: * [a0f190f](https://github.com/urfuwo/hlx-test/commit/a0f190fb55c73d90f0ca6e1c0928f296a5de8c4f) :white_check_mark: * [e1633cf](https://github.com/urfuwo/hlx-test/commit/e1633cf4773e0c49bc3e621bd825ce36fa1dc613) :white_check_mark: * [caea8be](https://github.com/urfuwo/hlx-test/commit/caea8be344e7b00ee3ee5f56aa99c974d5434b6c) :white_check_mark: * [aeff077](https://github.com/urfuwo/hlx-test/commit/aeff0771fa3f6d43855f12739216e12195bfc26f) :white_check_mark: * [5a158ff](https://github.com/urfuwo/hlx-test/commit/5a158ff18811fcf17b598a04afbb2624d930eb26) :white_check_mark:

[aem-code-sync[bot]]

Page	Scores	Audits	Google
/draft/rjwtrmn/the-article-copy

[saurabh-khare]

@rjwtrmn Can we add option collapse it once its opened

[rjwtrmn]

@rjwtrmn Can we add option collapse it once its opened

@saurabh-khare I suppose so, but the issue is that the whole list item is a link and so if you lick the parent it will take you to the h2 header again. There's not really any specifications in Frontify as to collapsing the menu other than navigating away from it, i.e.

User Interaction – Select
After a user clicks or taps on a menu item, it enters the selected state.

The selected item remains visually distinct from other items, become blue different color or and blue highlighter.

If the menu has a submenu, it opens after selecting this menu item, submenu from previous menu-item become closed, cause another item was selected. 

[saurabh-khare]

@rjwtrmn Can we add option collapse it once its opened

@saurabh-khare I suppose so, but the issue is that the whole list item is a link and so if you lick the parent it will take you to the h2 header again. There's not really any specifications in Frontify as to collapsing the menu other than navigating away from it, i.e.

User Interaction – Select
After a user clicks or taps on a menu item, it enters the selected state.

The selected item remains visually distinct from other items, become blue different color or and blue highlighter.

If the menu has a submenu, it opens after selecting this menu item, submenu from previous menu-item become closed, cause another item was selected. 

Understand. Either we can have it collapsible or let it take the page to the anchor link.

One additional point I see is. In mobile view if you have 2 collapsible links then once you open first you are not able to open the second one