Solve the double dot problem
As shown, options can be passed to the component to highlight one step, expand one step by default, and highlight multiple links. These options should only be used when the component is in the sidebar. The step that is highlighted and expanded will be referred to as the active step (even though they are separate options, it is assumed that they will normally be applied to the same step).
If a link is in a step by step navigation more than once and the user is on that page, the backend doesn’t know which link to highlight, so it highlights both of them.
JavaScript is included in the component to solve this. It uses sessionStorage to capture the data-position attribute of non-external links when clicked, and then uses this value to decide which link to highlight after the new page loads. It uses the value of the tracking_id option to uniquely identify the current step nav in the session (if this is not passed to the component this may result in other step navs having the wrong link highlighted).
If a user has not clicked a link (i.e. has visited the page without first clicking on a step by step navigation) only the first duplicate link will be highlighted. If that link is not in the active step, the JavaScript makes the highlighted link’s parent the active step. If there is no active step, the first active link will be highlighted (but there should always be an active step).
The example below will show all non-external links highlighted if JavaScript is disabled. In the real world no more than two or three links are likely to be highlighted at once.
Changes to the active step and highlighted link are also applied on click, if the user clicks one of the other links that is to the same page (they are amended by the component to be jump links to the top of the page). Open this example using the ‘preview’ link and try clicking on the ‘internal’ links to see how it behaves.
How it looks (preview)
-
Step 1 The active step
-
Step 2 Not the active step
How to call this example
<%= render "govuk_publishing_components/components/step_by_step_nav", {
highlight_step: 2,
show_step: 2,
tracking_id: "example-id",
steps: [
{
title: "The active step",
contents: [
{
type: "list",
contents: [
{
href: "http://google.com",
text: "External link not set to active"
},
{
href: "/component-guide/step_by_step_navigation/with_links/preview",
text: "Internal link set to active",
active: true
},
{
href: "/component-guide/step_by_step_navigation/with_links/preview",
text: "Internal link set to active",
active: true
},
{
href: "http://google.com",
text: "External link not set to active"
}
]
}
]
},
{
title: "Not the active step",
contents: [
{
type: "list",
contents: [
{
href: "/component-guide/step_by_step_navigation/with_links/preview",
text: "Internal link set to active - in the active step, should be set by default until another link is clicked",
active: true
},
{
href: "/component-guide/step_by_step_navigation/with_links/preview",
text: "Internal link set to active",
active: true
},
{
href: "http://google.com",
text: "External link not set to active"
}
]
}
]
}
]
} %>