Dm 3592 anchor tags

[bradjohnson92008]

JIRA issue link

https://agile6.atlassian.net/browse/DM-3592

Description - what does this code do?

Testing done - how did you test it/steps on how can another person can test it

Create anchor # links to jump to a particular element/component on the same page or when a page loads.

Note to Devs: PB show page /app/views/page/show.html.erb must have an element (<div, ..etc) with an id that is generated dynamically for each instance of the component. For example if there are 5 accordion components on the same page a counter can be used to generate unique IDs for each accordion component - i.e.,

  <% when 'PageAccordionComponent' %>
    <% accordion_ctr += 1 %>
  <div id="accordion_anchor_<%= accordion_ctr %>"/>

So the unique id for each accordion component is "accordion_anchor_1", "accordion_anchor_2", "accordion_anchor_3" ... and so on. See page/show.html.erb for code above. This same technique can be used to create anchor (jump links) for other types of components as well. THIS is already setup for the accordion component so for testing you do not have to do this.

Note: If creating a link to an anchor tag on the same page.. you can either just add the anchor tag as the url i.e., "#accordion_anchor_3" or provide the path and the anchor to the internal url i.e., "/brads-page-group/brads-new-test-page#accordion_anchor_link_3". The first method will open the page in a new tab and scroll to the anchor. The second method - entering the full internal url will not open a new tab - and just scroll to the anchor tag.

---

TEST

1. Create or Edit an existing PB page and ensure there are at least one accordion component on the page and the component or components are not at the top of the page.
2. Create or Edit a different page and create a link (either in WYSIWIG or other link type component) and set the link to navigate to the page that has the accordion component(s). At the end of the link just add the anchor tag to the end of the url and specify which accordion component to jump to. i.e., #accordion_anchor_1, #accordion_anchor_2 ...etc. i.e., /contests/shark-tank#accordion_anchor_2".

When the user clicks on the link to the accordion page the new page will load and automatically scroll to the anchor element defined in the url.. ie., #accordion_anchor_2 image

Link to mock-ups/mock ups (image file if you have it) (if applicable)

N/A

Acceptance criteria

1. Investigate Brad’s HTML method
2. User can link to FAQ section on About page
3. Determine way to do this as one off
4. If possible, determine way to do this that can be replicated in Page Builder
5. Nice to have: Specific FAQ is open

Definition of done

• Unit tests written (if applicable)
• e2e/accessibility tests written (if applicable)
• Events are logged appropriately
• Documentation has been updated, if applicable
• A link has been provided to the originating JIRA issue
• No sensitive information (i.e. PII/credentials/internal URLs/etc.) is captured in logging, hardcoded, or specs

[JoshingYou1]

Nice work on this Brad! I left a few comments for ya.

[JoshingYou1]

Do we need to add a div here? Can't we just use the container div on the next line? Also, would it make sense to add a column in the DB called anchor_link_name, or something like that, which would allow the user to create their own anchor name, and then we can just .parameterize it? I'd like to know your thoughts on that.

[bradjohnson92008]

I think I see what you mean.. add the column (anchor_link_name) to the page_components table right? So when we save the page in PB we would just create a guid for the anchor_link_name and then embed that in the PB show page? Only problem I see with that it may be harder for the content creator to create the anchor links in PB instead of just using a convention like "accordion_anchor_1"..etc or "map_anchor_1" ...etc. ? Lets talk through this.

[bradjohnson92008]

Moved anchor_tag id to div container instead of above div container.. that works.

[JoshingYou1]

Can we add a test that checks to make sure that when the anchor link name is added to the url, the page jumps to the correct top position?

[bradjohnson92008]

I looked in to this... and found https://stackoverflow.com/questions/18948687/capybara-how-to-test-link-to-different-section-of-same-page .. so not sure if this is possible.

[JoshingYou1]

What does this code do? Removing it didn't seem to affect the desired outcome.

[bradjohnson92008]

This is for a work around in chrome... yeah I wasn't expecting to have to add any js but found that the old school anchor links don't work in chrome without this js code in place to find the the anchor. Were you using chrome or safari?

[JoshingYou1]

I was using chrome, and it was working correctly.

[bradjohnson92008]

We can test without it. This is what I was running in to.. https://stackoverflow.com/questions/51887886/anchor-links-not-working-on-chrome but this may only affect certain versions of chrome.. or may be a chrome/windows thing.. not sure. My version of chrome is 106.0.5249.61.

[camillevilla]

This works great for me, Brad!

I have a slight future proofing suggestion: what if instead of using accordion_ctr, you interpolated the component.id into <div id="accordion_anchor_? This might make it easier to implement something like having the anchor link open the specific FAQ in a future iteration. It would also keep the link persistent if content creators rearrange the order of the FAQs.

[bradjohnson92008]

Hey @camillevilla - I like the way you are thinking on this. I thought about using a unique ID instead of a counter but since the Content Creators will be inputting that ID in the link in PB - how would they know what that ID was? Unless they knew how to inspect the element.. and I didn't want to go there. lol. But your right if they change the order of the elements (FAQs or whatever in the future) the content creator would have to update the links with the correct ID based on it's new order on the page.

[camillevilla]

@bradjohnson92008 that's a good point. A future iteration is probably going to need some UX input. If we do a future iteration of this, we might use something like the heading links in the Redux documentation: