diff --git a/app/views/components/step-by-step-navigation/index.html b/app/views/components/step-by-step-navigation/index.html new file mode 100644 index 0000000..40c2880 --- /dev/null +++ b/app/views/components/step-by-step-navigation/index.html @@ -0,0 +1,240 @@ +{% extends "layouts/base.html" %} + +{% block pageTitle %} + Step by step navigation component – GOV.UK Publishing Frontend +{% endblock %} + +{% block pageScripts %} + + +{% endblock %} + +{% block beforeContent %} +{{ govukBackLink({ + text: "Back", + href: "../" +}) }} +{% endblock %} + +{% block content %} + +
A series of expanding/collapsing steps designed to navigate a user through a process.
+ +View a list of live step by steps
+ + + +View the Nunjucks macro options on GitHub
+ +With an optional step
+ + {{ govukPubStepByStepNavigation({ + id: 'step-by-step-navigation-2', + steps: [{ + heading: { + text: 'Step 1' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }, + { + text: 'Vivamus nec pharetra ipsum. Duis euismod augue nisl, sit amet dictum velit malesuada at.' + }] + }, + { + heading: { + text: 'Step 2' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }], + logic: 'or' + }, + { + heading: { + text: 'Step 3' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }] + }] + }) }} + +With a step open by default
+ + {{ govukPubStepByStepNavigation({ + id: 'step-by-step-navigation-3', + steps: [{ + heading: { + text: 'Step 1 (Open by default)' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }, + { + text: 'Vivamus nec pharetra ipsum. Duis euismod augue nisl, sit amet dictum velit malesuada at.' + }], + expanded: true + }, + { + heading: { + text: 'Step 2' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }] + }, + { + heading: { + text: 'Step 3' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }] + }] + }) }} + +With an active step
+ + {{ govukPubStepByStepNavigation({ + id: 'step-by-step-navigation-4', + steps: [{ + heading: { + text: 'Step 1' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }, + { + text: 'Vivamus nec pharetra ipsum. Duis euismod augue nisl, sit amet dictum velit malesuada at.' + }], + active: true + }, + { + heading: { + text: 'Step 2' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }], + logic: 'or' + }, + { + heading: { + text: 'Step 3' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }] + }] + }) }} + +Small step by step for use in a sidebar
+ + {{ govukPubStepByStepNavigation({ + id: 'step-by-step-navigation-5', + small: true, + steps: [{ + heading: { + text: 'Step 1' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }, + { + text: 'Vivamus nec pharetra ipsum. Duis euismod augue nisl, sit amet dictum velit malesuada at.' + }] + }, + { + heading: { + text: 'Step 2' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }] + }, + { + heading: { + text: 'Step 3' + }, + contents: [{ + text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + }] + }] + }) }} + +{{- content.text | safe if content.text -}}
+ {% endif -%} + {% endfor -%} +