welsh versions of questionnaire
This commit is contained in:
+540
@@ -0,0 +1,540 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { connect } from "react-redux";
|
||||
import { Field, reduxForm, formValueSelector } from "redux-form";
|
||||
import {
|
||||
RenderPickList,
|
||||
RenderTextfield,
|
||||
RenderRadioList,
|
||||
RenderMultiline,
|
||||
RenderCondtionalRadioList,
|
||||
RenderLPACondtionalRadioList,
|
||||
FileUploadField,
|
||||
RenderRichMultiline,
|
||||
RenderDatePicker,
|
||||
} from "../representationElements";
|
||||
import {
|
||||
setRepresentationCapacity,
|
||||
setRepresentationSubmit,
|
||||
} from "../../../../store/currentView/action";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { select } from "xpath";
|
||||
import jsonpath from "jsonpath";
|
||||
|
||||
const RepresentationProgress_enforcement = (props) => {
|
||||
let { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
const {
|
||||
formObj,
|
||||
appellantApplicantRepresentationArr,
|
||||
setRepresentationCapacity,
|
||||
setRepresentationSubmit,
|
||||
currentView,
|
||||
procedureTypeValue,
|
||||
onBehalfOfLPA,
|
||||
setShowQuestionnaireSection,
|
||||
showQuestionnaireSection,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-labelledby="progress-list"
|
||||
className="at-nav"
|
||||
>
|
||||
<div
|
||||
id="step-by-step-navigation"
|
||||
data-module="gemstepnav"
|
||||
className="app-step-nav app-step-nav--active"
|
||||
data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
|
||||
data-show-text="show"
|
||||
data-hide-text="hide"
|
||||
data-show-all-text="Show all"
|
||||
data-hide-all-text="Hide all"
|
||||
>
|
||||
<ol className="app-step-nav__steps">
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 1
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
1
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(1);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-one"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 2
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
2
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(2);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-two"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 3
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
3
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(3);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-three"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 4
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
4
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(4);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-four"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 5
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
5
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(5);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-five"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 6
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
6
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(6);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-six"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>{" "}
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 7
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
7
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(7);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-seven"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 8
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
8
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(8);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:add-files-label"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 9
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
9
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(9);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:enf-section-heading-eight"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default RepresentationProgress_enforcement;
|
||||
@@ -0,0 +1,435 @@
|
||||
import Link from "next/link";
|
||||
import { useRouter } from "next/router";
|
||||
import useTranslation from "next-translate/useTranslation";
|
||||
import { connect } from "react-redux";
|
||||
import { Field, reduxForm, formValueSelector } from "redux-form";
|
||||
import {
|
||||
RenderPickList,
|
||||
RenderTextfield,
|
||||
RenderRadioList,
|
||||
RenderMultiline,
|
||||
RenderCondtionalRadioList,
|
||||
RenderLPACondtionalRadioList,
|
||||
FileUploadField,
|
||||
RenderRichMultiline,
|
||||
RenderDatePicker,
|
||||
} from "../representationElements";
|
||||
import {
|
||||
setRepresentationCapacity,
|
||||
setRepresentationSubmit,
|
||||
} from "../../../../store/currentView/action";
|
||||
import { useDropzone } from "react-dropzone";
|
||||
import { select } from "xpath";
|
||||
import jsonpath from "jsonpath";
|
||||
|
||||
const RepresentationProgress_s78 = (props) => {
|
||||
let { t } = useTranslation();
|
||||
const router = useRouter();
|
||||
|
||||
const {
|
||||
formObj,
|
||||
appellantApplicantRepresentationArr,
|
||||
setRepresentationCapacity,
|
||||
setRepresentationSubmit,
|
||||
currentView,
|
||||
procedureTypeValue,
|
||||
onBehalfOfLPA,
|
||||
setShowQuestionnaireSection,
|
||||
showQuestionnaireSection,
|
||||
} = props;
|
||||
|
||||
return (
|
||||
<nav
|
||||
role="navigation"
|
||||
aria-labelledby="progress-list"
|
||||
className="at-nav"
|
||||
>
|
||||
<div
|
||||
id="step-by-step-navigation"
|
||||
data-module="gemstepnav"
|
||||
className="app-step-nav app-step-nav--active"
|
||||
data-id="e01e924b-9c7c-4c71-8241-66a575c2f61f"
|
||||
data-show-text="show"
|
||||
data-hide-text="hide"
|
||||
data-show-all-text="Show all"
|
||||
data-hide-all-text="Hide all"
|
||||
>
|
||||
<ol className="app-step-nav__steps">
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 1
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
1
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(1);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:s78-section-heading-one"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 2
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
2
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(2);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:s78-section-heading-two"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 3
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
3
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(3);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:s78-section-heading-three"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 4
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
4
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(4);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:s78-section-heading-four"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 5
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
5
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(5);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:s78-section-heading-five"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>{" "}
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 6
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
6
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(6);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:add-files-label"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
<li
|
||||
className={
|
||||
"app-step-nav__step js-step app-step-nav__step--active" +
|
||||
(showQuestionnaireSection >= 7
|
||||
? " sectionComplete"
|
||||
: " sectionIncomplete")
|
||||
}
|
||||
aria-current="step"
|
||||
data-show=""
|
||||
id="check-youre-allowed-to-drive"
|
||||
>
|
||||
<div
|
||||
className="app-step-nav__header js-toggle-panel "
|
||||
data-position="1"
|
||||
>
|
||||
<h3 className="app-step-nav__title ">
|
||||
<span className="app-step-nav__circle app-step-nav__circle--number">
|
||||
<span className="app-step-nav__circle-inner">
|
||||
<span className="app-step-nav__circle-background">
|
||||
<span className="app-step-nav__circle-step-label govuk-visually-hidden">
|
||||
Step
|
||||
</span>{" "}
|
||||
7
|
||||
<span
|
||||
className="app-step-nav__circle-step-colon govuk-visually-hidden"
|
||||
aria-hidden="true"
|
||||
>
|
||||
:
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
|
||||
<span className="js-step-title">
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
setShowQuestionnaireSection(7);
|
||||
}}
|
||||
className="app-step-nav__button app-step-nav__button--title js-step-title-button"
|
||||
aria-expanded="false"
|
||||
aria-controls="step-panel-check-youre-allowed-to-drive-1"
|
||||
>
|
||||
<span className="js-step-title-text govuk-!-font-size-16">
|
||||
{t(
|
||||
"myrepresentations:s78-section-heading-seven"
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</h3>
|
||||
</div>
|
||||
</li>
|
||||
</ol>
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
};
|
||||
|
||||
export default RepresentationProgress_s78;
|
||||
Reference in New Issue
Block a user