The ‘Steps’ element helps triage users through a number of steps. This helps them to follow the actions they need to complete, and also helps us to manage demand on services.
Users can self-service the content but using the clearly labelled steps.
This component is used sparingly on the website.
WIP — This toggle functionality uses JavaScript. If JavaScript is enabled, the button is hidden, on page load JavaScript checks for the corresponding content. If the corresponding content is found, the button is unhidden and the content is either shown or hidden, depending upon the aria-expanded attribute set on the button. If JavaScript is disabled, the button remains hidden and content visible. (Same as Filter and Help. Header – not yet documented, will utilise the same JavaScript functionality with an addition data attribute to hide other content when a button is pressed. See also tabs)
The example below shows the list above the steps component.
{{ aspExample({ code: "<ul class=\"asp-steps__links\">
<li class=\"asp-steps__item\">
<a class=\"asp-steps__link\" href=\"#step-step-title-1\">Step title 1</a>
</li>
<li class=\"asp-steps__item\">
<a class=\"asp-steps__link\" href=\"#step-step-title-2\">Step title 2</a>
</li>
<li class=\"asp-steps__item\">
<a class=\"asp-steps__link\" href=\"#step-step-title-3\">Step title 3</a>
</li>
</ul>
<ol class=\"asp-steps\" data-steps-setting=\"closed\">
<li class=\"asp-step asp-step–closed\" id=\"step-step-title-1\">
<h2 class=\"asp-step__heading\">
<span class=\"asp-step__number\">
<span class=\"sr-only\">Step</span>
1
<span class=\"sr-only\">:
</span>
</span>
<span class=\"asp-step__title\">Step title 1</span>
</h2>
<div class=\"asp-step__content\">
<p>To view or hide the content within this step, use the show/hide toggle.</p>
</div>
</li>
<li class=\"asp-step asp-step–closed\" id=\"step-step-title-2\">
<h2 class=\"asp-step__heading\">
<span class=\"asp-step__number\">
<span class=\"sr-only\">Step</span>
2
<span class=\"sr-only\">:
</span>
</span>
<span class=\"asp-step__title\">Step title 2</span>
</h2>
<div class=\"asp-step__content\">
<p>To view or hide the content within this step, use the show/hide toggle.</p>
</div>
</li>
<li class=\"asp-step asp-step–last asp-step–closed\" id=\"step-step-title-3\">
<h2 class=\"asp-step__heading\">
<span class=\"asp-step__number\">
<span class=\"sr-only\">Step</span>
3
<span class=\"sr-only\">:
</span>
</span>
<span class=\"asp-step__title\">Step title 3</span>
</h2>
<div class=\"asp-step__content\">
<p>To view or hide the content within this step, use the show/hide toggle.</p>
</div>
</li>
</ol>", nunjucks: "{{ aspSteps({
showList: true,
rows: [
{
title: \"Title of step 1\",
expanded: true,
content: {
html: '<p>Step 1 content (html). expanded: true</p>'
}
},
{
title: \"Title of step 2\",
content: {
html: '<p>Step 2 content (html) with a <a href=\"#\">link</a>.</p>
<p>With additional line.</p>'
}
},
{
title: \"Title of step 3\",
content: {
text: 'Step 3 content (text).'
}
}
]
}) }}", json: "", title: "", example: "", id: "65a92f290d066" }) }}
Steps with open steps
The example below shows the steps component with the first step open. Note the uniqueID parameter.
{{ aspExample({ code: "", nunjucks: "{{ aspSteps({
uniqueID: \"example-2\",
openSteps: \"first\",
rows: [
{
title: \"Title of step 1\",
expanded: true,
content: {
html: '<p>Step 1 content (html). expanded: true</p>'
}
},
{
title: \"Title of step 2\",
content: {
html: '<p>Step 2 content (html) with a <a href=\"#\">link</a>.</p>
<p>With additional line.</p>'
}
},
{
title: \"Title of step 3\",
content: {
text: 'Step 3 content (text).'
}
}
]
}) }}", json: "", title: "", example: "", id: "672a158484c5e" }) }}
The example below shows the steps component with all steps open. Note the uniqueID parameter.
{{ aspExample({ code: "", nunjucks: "{{ aspSteps({
uniqueID: \"example-3\",
openSteps: \"all\",
rows: [
{
title: \"Title of step 1\",
expanded: true,
content: {
html: '<p>Step 1 content (html). expanded: true</p>'
}
},
{
title: \"Title of step 2\",
content: {
html: '<p>Step 2 content (html) with a <a href=\"#\">link</a>.</p>
<p>With additional line.</p>'
}
},
{
title: \"Title of step 3\",
content: {
text: 'Step 3 content (text).'
}
}
]
}) }}", json: "", title: "", example: "", id: "672a158484c9f" }) }}
Alias
What was known as a steps component on the ‘frontend’ is now a progress component.
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="status status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="status status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="status status–yellow">In progress</span>'}
]
}
]
}) }}