add anchor support to url.section handling

[PeterBreen]

Links on democracylab from one dlab page to another dlab page are structured like so: <a href={url.section(Section.NAME) ...

This is defined in url.js, here: https://github.com/DemocracyLab/CivicTechExchange/blob/ede77887f966dc63108c5245ba7fcbe1119be898/common/components/utils/url.js

What we're missing is anchor support. There are two use cases this issue addresses, one of which is anchors generally and the second, anchors specifically within react-tab controlled content.

Here's the short version of this ticket:

• update url.js to handle anchors globally
• update url.js to handle anchors in pages with tabbed content, such as Companies.

Details for each below.

Anchors (jumplinks)

Right now, anchors are manually appended to a link - this is not in pattern. Please update our handler so the section ID can be passed as an argument, like we do with event IDs and similar. That way our construction of all links will be consistent.

example of manual appending (current behavior):

CivicTechExchange/common/components/chrome/SiteFooter.jsx

Lines 28 to 29 in ede7788

	<a href={url.section(Section.Terms) + "#use"}>Terms of Use</a>
	<a href={url.section(Section.Terms) + "#volunteer"}>

example of using args (intended behavior):

CivicTechExchange/common/components/controllers/CreateEventProjectController.jsx

Lines 174 to 177 in ede7788

	window.location.href = url.section(Section.AboutEventProject, {
	event_id: eventProject.event_id,
	project_id: eventProject.project_id,
	});

The end result should take a user to the correct page and correct section, just like an html href="/pagename#section" would.

React-tab content + anchors

This one will be a bit trickier. We use react-tabs to control tabs of content on some pages. I'll use the companies page as an example. It has two tabs. The default tab shown without any args is Hackathon, but if we want to link to the Sponsorship tab, that can be done like it is here:

CivicTechExchange/common/components/chrome/SponsorFooter.jsx

Lines 49 to 53 in ede7788

	<Button
	variant="outline-secondary"
	href={url.section(Section.Companies, {
	tab: CorporatePageTabs.Sponsorship,
	})}

I've had a request from a designer to also allow for jumplinking to a specific section via anchor after opening a specific tab with react-tabs. So, the end result should take a user to the correct page (Companies, in this example), open a specific tab (Sponsors, in this example) and then the correct section. The reason this may be more difficult is the anchor jump must take place after react-tabs has opened the correct tab, as opposed to typical browser behavior of on page load independent of javascript manipulating the DOM.

(As an aside: please make your solution page agnostic; tabbed content is not unique to companies)

[JeremyHcWang]

Hi @PeterBreen, can I take this one?

[PeterBreen]

Hi @PeterBreen, can I take this one?

Sure can. Let me know if you need anything clarified on the second request, I tried to explain it but may not have done the best job :)

[ddfridley]

@JeremyHcWang Hi, I'm helping with development focus for DemocarcyLab. We've created a DemocracyLab Dashboard and would like to update the status of this issue.

• Are you still working on it? If so, what are the next steps, or what challenges are there to moving forward?
• Or is this still an issue/should we close it?
• Or, if you just aren't available to work on it anymore, please let me know, and/or unassign yourself
• Or something else?

Thanks.