robbond/pedwfrontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

accessibility amends misc

Browse Source
This commit is contained in:
robbond
2024-02-19 16:54:56 +00:00
parent cf04ceba50
commit c98e05d549
15 changed files with 569 additions and 523 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/account/personaldetails.js
+182 -186
View File
@@ -161,14 +161,11 @@ const RenderPickList = ({
: "govuk-form-group " : "govuk-form-group "
} }
> >
<label className="govuk-label" htmlFor="sort"> <label className="govuk-label" htmlFor={datafieldname}>
{label} {label}
</label> </label>
{touched && error && ( {touched && error && (
<span <span id={name + "-error"} className="govuk-error-message">
id="passport-issued-error"
className="govuk-error-message"
>
<span className="govuk-visually-hidden">Error:</span>{" "} <span className="govuk-visually-hidden">Error:</span>{" "}
{errorMsg} {errorMsg}
</span> </span>
@@ -178,8 +175,8 @@ const RenderPickList = ({
<select <select
{...input} {...input}
className="govuk-select " className="govuk-select "
id={name} id={datafieldname}
name={name} name={datafieldname}
> >
<option>Select...</option> <option>Select...</option>
{Object.keys(optionsArr).map((key, index) => { {Object.keys(optionsArr).map((key, index) => {
@@ -237,189 +234,188 @@ let PersonalDetails = (props) => {
setPersonalDetailsComplete(true); setPersonalDetailsComplete(true);
}; };
return <> return (
{props.accountUpdatedComplete == false ? ( <>
props.personalDetailsComplete == false ? ( {props.accountUpdatedComplete == false ? (
<form onSubmit={handleSubmit(onHandleSubmit)}> props.personalDetailsComplete == false ? (
<fieldset className="govuk-fieldset"> <form onSubmit={handleSubmit(onHandleSubmit)}>
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m"> <fieldset className="govuk-fieldset">
<h2 className="govuk-fieldset__heading"> <legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
{t("account:account-about-you-label")} <h2 className="govuk-fieldset__heading">
</h2> {t("account:account-about-you-label")}
</legend> </h2>
<div className="govuk-form-group "> </legend>
<span className="govuk-label "> <div className="govuk-form-group ">
{t("account:account-role-label")}:{" "} <span className="govuk-label ">
{ {t("account:account-role-label")}:{" "}
props.props.accountDetails {
.accountDetails[ props.props.accountDetails
"pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue" .accountDetails[
] "pinswg_typeofinvolvement@OData.Community.Display.V1.FormattedValue"
]
}
</span>
</div>
<Field
name="pinswg_preferredlanguage"
component={RenderPickList}
datafieldname={"pinswg_preferredlanguage"}
optionsArr={["English", "Welsh"]}
className="govuk-input govuk-input--width-20 govuk-radios--inline"
validate={[required]}
label={t(
"account:account-preferred-language-label"
)}
errorMsg="Is required"
/>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t("account:account-first-name-label")}
errorMsg="Is required"
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t("account:account-last-name-label")}
errorMsg="Is required"
/>
<Field
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label={t("account:account-email-address-label")}
disabled
/>
<Field
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label={t("account:account-telephone-label")}
/>
<Field
name="company"
id="company"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t("account:account-company-group-label")}
errorMsg="Is required"
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t("account:account-your-address-label")}
</h2>
</legend>
<Field
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-1-label"
)}
validate={[required]}
errorMsg="Is required"
/>
<Field
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-2-label"
)}
errorMsg="Is required"
/>
<Field
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-town-city-label")}
validate={[required]}
errorMsg="Is required"
/>
<Field
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-county-label")}
validate={[required]}
errorMsg="Is required"
/>
<Field
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label={t("account:account-postcode-label")}
validate={[required]}
errorMsg="Is required"
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
{t("common:continue-button")}
</button>
<Link
href={
"/myportal?q=" +
props.props.accountDetails.loggedinUserId
} }
</span> className="govuk-link"
>
{t("common:cancel-link")}
</Link>
</div> </div>
</form>
<Field ) : (
name="pinswg_preferredlanguage" <>
component={RenderPickList} <BuildCheckPersonalDetails
datafieldname="pinswg_preferredlanguage" props={props}
optionsArr={["English", "Welsh"]} setPersonalDetailsComplete={
className="govuk-input govuk-input--width-20 govuk-radios--inline" setPersonalDetailsComplete
validate={[required]}
label={t(
"account:account-preferred-language-label"
)}
errorMsg="Is required"
/>
<Field
name="firstname"
id="firstname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t("account:account-first-name-label")}
errorMsg="Is required"
/>
<Field
name="lastname"
id="lastname"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
validate={[required]}
label={t("account:account-last-name-label")}
errorMsg="Is required"
/>
<Field
name="emailaddress1"
id="emailaddress1"
component={RenderTextfield}
type="email"
className="govuk-input govuk-input--width-20"
validate={[required, email]}
label={t("account:account-email-address-label")}
disabled
/>
<Field
name="telephone1"
id="telephone1"
component={RenderTextfield}
type="number"
className="govuk-input govuk-input--width-20"
validate={[required, phoneNumber]}
label={t("account:account-telephone-label")}
/>
<Field
name="company"
id="company"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t("account:account-company-group-label")}
errorMsg="Is required"
/>
</fieldset>
<fieldset className="govuk-fieldset">
<legend className="govuk-fieldset__legend govuk-fieldset__legend--m">
<h2 className="govuk-fieldset__heading">
{t("account:account-your-address-label")}
</h2>
</legend>
<Field
name="address1_line1"
id="address1_line1"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-1-label"
)}
validate={[required]}
errorMsg="Is required"
/>
<Field
name="address1_line2"
id="address1_line2"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-20"
label={t(
"account:account-address-line-2-label"
)}
errorMsg="Is required"
/>
<Field
name="address1_city"
id="address1_city"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-town-city-label")}
validate={[required]}
errorMsg="Is required"
/>
<Field
name="address1_county"
id="address1_county"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-10"
label={t("account:account-county-label")}
validate={[required]}
errorMsg="Is required"
/>
<Field
name="address1_postalcode"
id="address1_postalcode"
component={RenderTextfield}
type="text"
className="govuk-input govuk-input--width-5"
label={t("account:account-postcode-label")}
validate={[required]}
errorMsg="Is required"
/>
</fieldset>
<div className="govuk-button-group">
<button
type="submit"
className="govuk-button"
data-module="govuk-button"
>
{t("common:continue-button")}
</button>
<Link
href={
"/myportal?q=" +
props.props.accountDetails.loggedinUserId
} }
className="govuk-link"> setAccountUpdatedComplete={
setAccountUpdatedComplete
{t("common:cancel-link")} }
/>
</Link> </>
</div> )
</form>
) : ( ) : (
<> <PersonalDetailsComplete props={props} />
<BuildCheckPersonalDetails )}
props={props} </>
setPersonalDetailsComplete={ );
setPersonalDetailsComplete
}
setAccountUpdatedComplete={
setAccountUpdatedComplete
}
/>
</>
)
) : (
<PersonalDetailsComplete props={props} />
)}
</>;
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
components/elements/index.js
+13 -20
View File
@@ -251,11 +251,10 @@ export function MultiLinefield(props) {
{parentField != false ? ( {parentField != false ? (
showIfHasParentShowValue && ( showIfHasParentShowValue && (
<div> <div>
<h1 className="govuk-label-wrapper"> <label className="govuk-label" htmlFor={props.name}>
<label className="govuk-label" htmlFor={props.name}> {FieldsTranslations(props.label)}
{FieldsTranslations(props.label)} </label>
</label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
@@ -277,11 +276,9 @@ export function MultiLinefield(props) {
) )
) : ( ) : (
<div className="govuk-form-group"> <div className="govuk-form-group">
<h1 className="govuk-label-wrapper"> <label className="govuk-label" htmlFor={props.name}>
<label className="govuk-label" htmlFor={props.name}> {FieldsTranslations(props.label)}
{FieldsTranslations(props.label)} </label>
</label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
@@ -390,11 +387,9 @@ export function RichMultiLinefield(props) {
{parentField != false ? ( {parentField != false ? (
showIfHasParentShowValue && ( showIfHasParentShowValue && (
<div> <div>
<h1 className="govuk-label-wrapper"> <label className="govuk-label" htmlFor={props.name}>
<label className="govuk-label" htmlFor={props.name}> {FieldsTranslations(props.label)}
{FieldsTranslations(props.label)} </label>
</label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
@@ -416,11 +411,9 @@ export function RichMultiLinefield(props) {
) )
) : ( ) : (
<div className="govuk-form-group"> <div className="govuk-form-group">
<h1 className="govuk-label-wrapper"> <label className="govuk-label" htmlFor={props.name}>
<label className="govuk-label" htmlFor={props.name}> {FieldsTranslations(props.label)}
{FieldsTranslations(props.label)} </label>
</label>
</h1>
<div <div
id={props.name + "-hint"} id={props.name + "-hint"}
className="govuk-hint govuk-!-font-size-14" className="govuk-hint govuk-!-font-size-14"
components/footer.js
+211 -207
View File
@@ -13,7 +13,10 @@ export default function Footer(props) {
const linksBlock = Object.keys(linksArr).map((key) => ( const linksBlock = Object.keys(linksArr).map((key) => (
<li className="govuk-footer__inline-list-item" key={key}> <li className="govuk-footer__inline-list-item" key={key}>
<Link href={linksArr[key].path || "/"} className="govuk-footer__link"> <Link
href={linksArr[key].path || "/"}
className="govuk-footer__link"
>
{linksArr[key].title} {linksArr[key].title}
</Link> </Link>
</li> </li>
@@ -34,214 +37,214 @@ export default function Footer(props) {
" " + " " +
t("common:gov-wales-label").toLowerCase(); t("common:gov-wales-label").toLowerCase();
return <> return (
<div className="sharebar" id="sharebar"> <>
<div className="sharebar__components container-fluid"> <div
<div className="main__sharebar"> className="sharebar"
<div id="sharebar"
className={ role="complementary"
showShareState aria-label="Share this page"
? "block-share active" >
: "block-share" <div className="sharebar__components container-fluid">
} <div className="main__sharebar">
> <div
<button
id="sharePage"
aria-controls="sharePageLinks"
aria-expanded="true"
onClick={() => {
shareState();
}}
>
{t("common:social-bar-share-link")}
</button>
<ul
className={ className={
showShareState showShareState
? "block-share active" ? "block-share active"
: "block-share" : "block-share"
} }
id="sharePageLinks"
aria-labelledby="sharePage"
> >
<li> <button
<a id="sharePage"
href={ aria-controls="sharePageLinks"
"https://twitter.com/intent/tweet?url=" + aria-expanded="true"
shareBodyStr onClick={() => {
} shareState();
className="twitter" }}
> >
<span className="vo_hidden"> {t("common:social-bar-share-link")}
{t( </button>
"common:social-bar-share-via-link" <ul
)}{" "} className={
</span> showShareState
Twitter ? "block-share active"
</a> : "block-share"
</li> }
<li> id="sharePageLinks"
<a aria-labelledby="sharePage"
href={ >
"https://www.facebook.com/sharer/sharer.php?u=" + <li>
shareBodyStr
}
className="facebook"
>
<span className="vo_hidden">
Share this page via{" "}
</span>
Facebook
</a>
</li>
<li>
<a
href={
"mailto:?body=" +
shareBodyStr +
"&subject=" +
shareSubjectStr
} //</li>https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
className="email"
>
<span className="vo_hidden">
Share this page via{" "}
</span>
Email
</a>
</li>
</ul>
</div>
<div
id="sharebar__backtotop"
className="btn--outlined btn--arrow-up"
>
<a href="#page_wrapper">
{t("common:back-to-top-link")}
</a>
</div>
</div>
</div>
</div>
<footer className="govuk-footer " role="contentinfo">
<div className="govuk-width-container ">
<div className="govuk-footer__meta">
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 className="govuk-visually-hidden">
Support links
</h2>
<nav
role="navigation"
aria-labelledby="footer_links"
>
<ul className="govuk-footer__inline-list">
<li className="govuk-footer__inline-list-item govuk-!-font-weight-bold govuk-!-margin-right-7">
<a <a
href={t( href={
"common:footer-guidance-link" "https://twitter.com/intent/tweet?url=" +
)} shareBodyStr
className="nav-link" }
className="twitter"
> >
{t( <span className="vo_hidden">
"common:footer-guidance-link-label" {t(
)} "common:social-bar-share-via-link"
)}{" "}
</span>
Twitter
</a> </a>
</li> </li>
<li className="govuk-footer__inline-list-item govuk-!-font-weight-bold"> <li>
<a <a
href={t( href={
"common:footer-contact-us-link" "https://www.facebook.com/sharer/sharer.php?u=" +
)} shareBodyStr
className="govuk-footer__link" }
id="aContactUs" className="facebook"
> >
{t( <span className="vo_hidden">
"common:footer-contact-us-link-label" Share this page via{" "}
)} </span>
Facebook
</a>
</li>
<li>
<a
href={
"mailto:?body=" +
shareBodyStr +
"&subject=" +
shareSubjectStr
} //</li>https%3A//gov.wales/&amp;subject=Shared%20from%20gov.wales"
className="email"
>
<span className="vo_hidden">
Share this page via{" "}
</span>
Email
</a> </a>
</li> </li>
</ul> </ul>
<ul </div>
className="govuk-footer__inline-list" <div
id="footer_links" id="sharebar__backtotop"
className="btn--outlined btn--arrow-up"
>
<a href="#page_wrapper">
{t("common:back-to-top-link")}
</a>
</div>
</div>
</div>
</div>
<footer className="govuk-footer " role="contentinfo">
<div className="govuk-width-container ">
<div className="govuk-footer__meta">
<div className="govuk-footer__meta-item govuk-footer__meta-item--grow">
<h2 className="govuk-visually-hidden">
Support links
</h2>
<nav
role="navigation"
aria-labelledby="footer_links"
> >
<li className="govuk-footer__inline-list-item"> <ul className="govuk-footer__inline-list">
<Link <li className="govuk-footer__inline-list-item govuk-!-font-weight-bold govuk-!-margin-right-7">
href={ <a
router.locale == "cy" href={t(
? "/hygyrchedd" "common:footer-guidance-link"
: "/accessibility" )}
} className="nav-link"
className="govuk-footer__link" >
id="aAccessibility"> {t(
"common:footer-guidance-link-label"
)}
</a>
</li>
<li className="govuk-footer__inline-list-item govuk-!-font-weight-bold">
<a
href={t(
"common:footer-contact-us-link"
)}
className="govuk-footer__link"
id="aContactUs"
>
{t(
"common:footer-contact-us-link-label"
)}
</a>
</li>
</ul>
<ul
className="govuk-footer__inline-list"
id="footer_links"
>
<li className="govuk-footer__inline-list-item">
<Link
href={
router.locale == "cy"
? "/hygyrchedd"
: "/accessibility"
}
className="govuk-footer__link"
id="aAccessibility"
>
{t(
"common:footer-accessibility-link-label"
)}
</Link>
</li>
{t( <li className="govuk-footer__inline-list-item">
"common:footer-accessibility-link-label" <Link
)} href={
router.locale == "cy"
? "/help/cwcis"
: "/help/cookies"
}
id="aCookies"
className="govuk-footer__link"
>
{t("common:footer-cookies-link")}
</Link>
</li>
<li className="govuk-footer__inline-list-item">
<a
href={t(
"common:footer-copyright-link"
)}
className="govuk-footer__link"
id="Access"
>
{t(
"common:footer-copyright-link-label"
)}
</a>
</li>
</Link> <li className="govuk-footer__inline-list-item">
</li> <Link
href={t(
"common:footer-privacy-link"
)}
id="aPrivacy"
className="govuk-footer__link"
>
{t(
"common:footer-privacy-link-label"
)}
</Link>
</li>
<li className="govuk-footer__inline-list-item"> <li className="govuk-footer__inline-list-item">
<Link <Link
href={ href={t(
router.locale == "cy" "common:footer-terms-conditions-link"
? "/help/cwcis" )}
: "/help/cookies" id="aTermsConds"
} className="govuk-footer__link"
id="aCookies" >
className="govuk-footer__link"> {t(
"common:footer-terms-conditions-link-label"
{t( )}
"common:footer-cookies-link" </Link>
)} </li>
{/* <li className="govuk-footer__inline-list-item">
</Link>
</li>
<li className="govuk-footer__inline-list-item">
<a
href={t(
"common:footer-copyright-link"
)}
className="govuk-footer__link"
id="Access"
>
{t(
"common:footer-copyright-link-label"
)}
</a>
</li>
<li className="govuk-footer__inline-list-item">
<Link
href={t(
"common:footer-privacy-link"
)}
id="aPrivacy"
className="govuk-footer__link">
{t(
"common:footer-privacy-link-label"
)}
</Link>
</li>
<li className="govuk-footer__inline-list-item">
<Link
href={t(
"common:footer-terms-conditions-link"
)}
id="aTermsConds"
className="govuk-footer__link">
{t(
"common:footer-terms-conditions-link-label"
)}
</Link>
</li>
{/* <li className="govuk-footer__inline-list-item">
<a <a
href={t( href={t(
"common:footer-alternative-languages-link" "common:footer-alternative-languages-link"
@@ -256,25 +259,26 @@ export default function Footer(props) {
)} )}
</a> </a>
</li> */} </li> */}
</ul> </ul>
</nav> </nav>
<div <div
className="footer_logo container-fluid" className="footer_logo container-fluid"
id="footer_logo" id="footer_logo"
>
<a
href={t("common:gov-wales-link")}
className="footer__logo"
id="footerlogo"
> >
<span className="visually-hidden"> <a
{t("common:gov-wales-label")} href={t("common:gov-wales-link")}
</span> className="footer__logo"
</a> id="footerlogo"
>
<span className="visually-hidden">
{t("common:gov-wales-label")}
</span>
</a>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </footer>
</footer> </>
</>; );
} }
components/homepage/casesearch.js
+54 -53
View File
@@ -94,62 +94,63 @@ let CaseSearch = (props) => {
}); });
}; };
return <> return (
<div className="card" id="casesearch-card"> <>
<form onSubmit={handleSubmit(onHandleSubmit)}> <div className="card" id="casesearch-card">
<div className="card-body"> <form onSubmit={handleSubmit(onHandleSubmit)}>
<h3 className="heading-small card-heading"> <div className="card-body">
{t("home:casesearch-card-title")} <h2 className="heading-small card-heading">
</h3> {t("home:casesearch-card-title")}
</h2>
<Field <Field
validate={[ validate={[
required( required(
t( t(
"home:casesearch-search-validation-required" "home:casesearch-search-validation-required"
) )
), ),
minLength( minLength(
t( t(
"home:casesearch-search-validation-minlength" "home:casesearch-search-validation-minlength"
) )
), ),
]} ]}
className="govuk-input" className="govuk-input"
component={RenderTextfield} component={RenderTextfield}
id="basicSearch" id="basicSearch"
name="basicSearch" name="basicSearch"
type="text" type="text"
aria-describedby="basicSearch-hint" aria-describedby="basicSearch-hint"
hint1={t("home:casesearch-card-search-hint")} hint1={t("home:casesearch-card-search-hint")}
hint2={t( hint2={t(
"home:casesearch-card-search-example-label-1" "home:casesearch-card-search-example-label-1"
)} )}
hint3={t( hint3={t(
"home:casesearch-card-search-example-label-2" "home:casesearch-card-search-example-label-2"
)} )}
/> />
<div className="govuk-form-group"> <div className="govuk-form-group">
<button type="submit" className="govuk-button"> <button type="submit" className="govuk-button">
{t("home:casesearch-card-button")} {t("home:casesearch-card-button")}
</button> </button>
</div>
<Link
href={
router.locale == "cy"
? "/chwiliouwch"
: "/advancedsearch"
}
className="govuk-link--no-underline"
>
{t("home:casesearch-card-advanced-link")}
</Link>
</div> </div>
<Link </form>
href={ </div>
router.locale == "cy" </>
? "/chwiliouwch" );
: "/advancedsearch"
}
className="govuk-link--no-underline">
{t("home:casesearch-card-advanced-link")}
</Link>
</div>
</form>
</div>
</>;
}; };
const mapStateToProps = (state) => { const mapStateToProps = (state) => {
components/homepage/dns.js
+3 -4
View File
@@ -16,7 +16,7 @@ export default function Dns() {
// : setShowSpinnerState(true); // : setShowSpinnerState(true);
// }; // };
return ( return (
<div className="card" id="casesearch-card"> <div className="card" id="dns-card">
<div className="card-body"> <div className="card-body">
<h3 className="heading-small card-heading"> <h3 className="heading-small card-heading">
{t("home:dns-card-title")} {t("home:dns-card-title")}
@@ -36,10 +36,9 @@ export default function Dns() {
// onClick={() => { // onClick={() => {
// spinnerState(); // spinnerState();
// }} // }}
className="govuk-button withChevron govuk-button-cta"> className="govuk-button withChevron govuk-button-cta"
>
{t("home:dns-card-button")} {t("home:dns-card-button")}
</Link> </Link>
</div> </div>
</div> </div>
components/search/advancedsearch.js
+2 -5
View File
@@ -94,10 +94,7 @@ const RenderCaseStatusList = ({
{name} {name}
</label> </label>
{touched && error && ( {touched && error && (
<span <span id={name + "-error"} className="govuk-error-message">
id="passport-issued-error"
className="govuk-error-message"
>
<span className="govuk-visually-hidden">Error:</span>{" "} <span className="govuk-visually-hidden">Error:</span>{" "}
{errormsg} {errormsg}
</span> </span>
@@ -290,7 +287,7 @@ let AdvancedSearch = (props) => {
</label> </label>
{touched && error && ( {touched && error && (
<span <span
id="passport-issued-error" id={name + "-error"}
className="govuk-error-message" className="govuk-error-message"
> >
<span className="govuk-visually-hidden"> <span className="govuk-visually-hidden">
components/search/pagination.js
+6 -6
View File
@@ -91,7 +91,7 @@ const PaginationControl = (props) => {
<div className="govuk-grid-row paginationWrapper"> <div className="govuk-grid-row paginationWrapper">
<div className="govuk-grid-column-one-quarter paginationPrevious"> <div className="govuk-grid-column-one-quarter paginationPrevious">
{props.currentView.currentPage != 1 ? ( {props.currentView.currentPage != 1 ? (
<span <button
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem leftTextButton"
onClick={() => { onClick={() => {
spinnerState(), spinnerState(),
@@ -108,7 +108,7 @@ const PaginationControl = (props) => {
}} }}
> >
{t("common:previous-link-button")} {t("common:previous-link-button")}
</span> </button>
) : ( ) : (
<span className="govuk-body leftTextButton govuk-!-font-weight-bold"> <span className="govuk-body leftTextButton govuk-!-font-weight-bold">
{t("common:previous-link-button")} {t("common:previous-link-button")}
@@ -132,7 +132,7 @@ const PaginationControl = (props) => {
{e} {e}
</span> </span>
) : ( ) : (
<span <button
className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem" className="govuk-body govuk-link govuk-!-padding-2 govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem"
key={i} key={i}
onClick={() => { onClick={() => {
@@ -146,13 +146,13 @@ const PaginationControl = (props) => {
}} }}
> >
{e} {e}
</span> </button>
) )
)} )}
</div> </div>
<div className="govuk-grid-column-one-quarter paginationNext"> <div className="govuk-grid-column-one-quarter paginationNext">
{props.currentView.currentPage < pagesCount ? ( {props.currentView.currentPage < pagesCount ? (
<span <button
className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton" className="govuk-body govuk-link govuk-!-font-weight-bold govuk-link--no-underline activePaginationItem rightTextButton"
onClick={() => { onClick={() => {
spinnerState(), spinnerState(),
@@ -169,7 +169,7 @@ const PaginationControl = (props) => {
}} }}
> >
{t("common:next-link-button")} {t("common:next-link-button")}
</span> </button>
) : ( ) : (
<span className="govuk-body rightTextButton govuk-!-font-weight-bold"> <span className="govuk-body rightTextButton govuk-!-font-weight-bold">
{" "} {" "}
components/search/searchresults.js
+4 -4
View File
@@ -497,7 +497,7 @@ const SearchResults = (props) => {
.length > .length >
0 == 0 ==
true ? ( true ? (
<span <button
className="govuk-summary-list__actionLink watched_link" className="govuk-summary-list__actionLink watched_link"
onClick={() => { onClick={() => {
confirm( confirm(
@@ -521,9 +521,9 @@ const SearchResults = (props) => {
)} )}
> >
<span className="eye"></span> <span className="eye"></span>
</span> </button>
) : ( ) : (
<span <button
className="govuk-summary-list__actionLink watchLink" className="govuk-summary-list__actionLink watchLink"
onClick={() => { onClick={() => {
confirm( confirm(
@@ -546,7 +546,7 @@ const SearchResults = (props) => {
)} )}
> >
<span className="eye"></span> <span className="eye"></span>
</span> </button>
)} )}
</dd> </dd>
)} )}
pages/auth/error.js
+5 -1
View File
@@ -45,7 +45,11 @@ const Error = (props) => {
<div className="govuk-width-container govuk-!-padding-bottom-9"> <div className="govuk-width-container govuk-!-padding-bottom-9">
<Breadcrumbs /> <Breadcrumbs />
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"> <main
className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
id="main-content"
role="main"
>
<div className="govuk-grid-row "> <div className="govuk-grid-row ">
<div className="govuk-grid-column-two-thirds "> <div className="govuk-grid-column-two-thirds ">
<h1>{t("auth:auth-error-heading")}</h1> <h1>{t("auth:auth-error-heading")}</h1>
pages/auth/signin.js
+5 -1
View File
@@ -33,7 +33,11 @@ const SignIn = (props) => {
<Header courseName={t("common:service-name")} /> <Header courseName={t("common:service-name")} />
<div className="govuk-width-container govuk-!-padding-bottom-9"> <div className="govuk-width-container govuk-!-padding-bottom-9">
<Breadcrumbs /> <Breadcrumbs />
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"> <main
className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
id="main-content"
role="main"
>
<div className="govuk-grid-row "> <div className="govuk-grid-row ">
<div className="govuk-grid-column-two-thirds "> <div className="govuk-grid-column-two-thirds ">
<h1>{t("auth:auth-page-title")} </h1> <h1>{t("auth:auth-page-title")} </h1>
pages/auth/verify-request.js
+5 -1
View File
@@ -26,7 +26,11 @@ const SignIn = (props) => {
<div className="govuk-width-container govuk-!-padding-bottom-9"> <div className="govuk-width-container govuk-!-padding-bottom-9">
<Breadcrumbs /> <Breadcrumbs />
<main className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"> <main
className="govuk-main-wrapper govuk-!-padding-top-0 govuk-!-padding-bottom-9"
id="main-content"
role="main"
>
<div className="govuk-grid-row "> <div className="govuk-grid-row ">
<div className="govuk-grid-column-two-thirds "> <div className="govuk-grid-column-two-thirds ">
<h1>{t("auth:auth-check-email-page-title")}</h1> <h1>{t("auth:auth-check-email-page-title")}</h1>
pages/logout.js
+12 -7
View File
@@ -88,14 +88,19 @@ const LogOut = (props) => {
<div id="page_wrapper"> <div id="page_wrapper">
<CookieBanner /> <CookieBanner />
<Header courseName="Appeals Casework Portal" /> <Header courseName="Appeals Casework Portal" />
<div className="govuk-width-container"> <main>
<h2>{t("common:logged-out-title")}</h2> <div className="govuk-width-container">
<div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9"> <h1>{t("common:logged-out-title")}</h1>
<Link href={locale == "cy" ? "/cy" : "/"} legacyBehavior> <div className="govuk-!-margin-top-9 govuk-!-margin-bottom-9">
{t("common:logged-out-link")} <Link
</Link> href={locale == "cy" ? "/cy" : "/"}
legacyBehavior
>
{t("common:logged-out-link")}
</Link>
</div>
</div> </div>
</div> </main>
<Footer footerLinks={footerLinks} /> <Footer footerLinks={footerLinks} />
</div> </div>
</div> </div>
pages/myportal/index.js
+3 -22
View File
@@ -264,12 +264,12 @@ export const getServerSideProps = wrapper.getServerSideProps(
const [ const [
myCasesDetails, myCasesDetails,
watchedCasesDetails, watchedCasesDetails,
awaitingSubmissionDetails, //awaitingSubmissionDetails,
myRepresentationsDetails, myRepresentationsDetails,
] = await Promise.all([ ] = await Promise.all([
await getDetails(myCases, "myCases"), await getDetails(myCases, "myCases"),
await getDetails(watchedCases, "myWatchedCases"), await getDetails(watchedCases, "myWatchedCases"),
await getDetails(awaitingSubmission, "awaitingSubmission"), //await getDetails(awaitingSubmission, "awaitingSubmission"),
await getDetails(myRepresentations, "myRepresentations"), await getDetails(myRepresentations, "myRepresentations"),
]); ]);
@@ -386,25 +386,7 @@ const getDetails = (resultsObj, detailsType) => {
//console.log(detailsType, " case id : ", caseID); //console.log(detailsType, " case id : ", caseID);
if (searchDetail.pinswg_appealcasetype == null) { searchDetail.pinswg_appealcasetype != null &&
// console.log(
// "detailsObj:",
// detailsType,
// detailsType == "myCases" && searchDetail.pinswg_title,
// detailsType == "myWatchedCases" &&
// searchDetail[
// "_pinswg_watchedcase_value@OData.Community.Display.V1.FormattedValue"
// ],
// detailsType == "awaitingSubmission" &&
// searchDetail.ticketnumber,
// detailsType == "myRepresentations" && searchDetail.casereference
// );
console.log(
"=====================================\n",
detailsType + "\n",
"=====================================\n"
);
} else {
detailsArr.push( detailsArr.push(
getPortalModuleDetails( getPortalModuleDetails(
getFormCollectionByID(searchDetail.pinswg_appealcasetype) getFormCollectionByID(searchDetail.pinswg_appealcasetype)
@@ -417,7 +399,6 @@ const getDetails = (resultsObj, detailsType) => {
// ] // ]
) )
); );
}
}); });
let detArr = Promise.all(detailsArr); let detArr = Promise.all(detailsArr);
styles/sass/patterns/_card.scss
+2 -1
View File
@@ -81,6 +81,7 @@ html[data-useragent*="MSIE 10.0"] .flex-container {
.card-heading { .card-heading {
margin-top: 0; margin-top: 0;
font-size: 1.17rem;
} }
.card-body { .card-body {
@@ -266,7 +267,7 @@ div.cardModuleItem:last-of-type {
margin-right: 10px; margin-right: 10px;
} }
a {}
} }
.cardModuleRemoveCase { .cardModuleRemoveCase {
styles/sass/welshgov/_application.scss
+62 -5
View File
@@ -200,6 +200,19 @@ a.longLinkBreak {
letter-spacing: 1px; letter-spacing: 1px;
padding: 5px 8px 4px; padding: 5px 8px 4px;
} }
.govuk-phase-banner__content {
line-height: 1.5;
}
.govuk-tag.govuk-phase-banner__content__tag {
line-height: 1.5;
}
.govuk-phase-banner__text {
line-height: 1.5;
}
} }
} }
} }
@@ -1140,8 +1153,10 @@ textarea,
} }
&:focus { &:focus {
border: none; // border: none;
// box-shadow: none;
box-shadow: none; box-shadow: none;
border: #ffd530 solid 3px
} }
} }
} }
@@ -1903,10 +1918,22 @@ ul#sharePageLinks.active {
&.activePaginationItem { &.activePaginationItem {
color: #b80d0d; color: #b80d0d;
background-color: transparent;
border: none;
cursor: pointer;
// &:before { // &:before {
// content: ""; // content: "";
// background-image: url(/assets/images/arrow-left--active.svg); // background-image: url(/assets/images/arrow-left--active.svg);
// } // }
&:focus {
background-color: #ffd530 !important;
border-color: transparent !important;
color: #1f1f1f !important;
outline: 2px solid #1f1f1f;
text-decoration: none !important;
box-shadow: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -1942,6 +1969,19 @@ ul#sharePageLinks.active {
.activePaginationItem { .activePaginationItem {
color: #b80d0d; color: #b80d0d;
border: none;
background: none;
cursor: pointer;
&:focus {
background-color: #ffd530 !important;
border-color: transparent !important;
color: #1f1f1f !important;
outline: 2px solid #1f1f1f;
text-decoration: none !important;
box-shadow: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -1966,11 +2006,23 @@ ul#sharePageLinks.active {
&.activePaginationItem { &.activePaginationItem {
color: #b80d0d; color: #b80d0d;
background-color: transparent;
border: none;
cursor: pointer;
&:after { &:after {
content: ""; content: "";
background-image: url(/assets/images/arrow-right--active.svg); background-image: url(/assets/images/arrow-right--active.svg);
} }
&:focus {
background-color: #ffd530 !important;
border-color: transparent !important;
color: #1f1f1f !important;
outline: 2px solid #1f1f1f;
text-decoration: none !important;
box-shadow: none;
}
} }
@media screen and (max-width: 768px) { @media screen and (max-width: 768px) {
@@ -2047,13 +2099,18 @@ ul#sharePageLinks.active {
color: #0b0c0c; color: #0b0c0c;
background-color: #ffdd00; background-color: #ffdd00;
-webkit-box-shadow: 0 2px 0 #0b0c0c; -webkit-box-shadow: 0 2px 0 #0b0c0c;
box-shadow: 0 2px 0 #0b0c0c; box-shadow: 0 0px 0 #0b0c0c;
& .eye:before {
background-color: #ffdd00;
border: solid 1px #ffdd00;
}
} }
&.watched_link { &.watched_link {
color: $black !important; color: $black !important;
background-color: $white; background-color: $white;
width: 13px; width: 24px;
display: block; display: block;
.eye { .eye {
@@ -2068,7 +2125,7 @@ ul#sharePageLinks.active {
&.watchLink { &.watchLink {
width: 13px; width: 24px;
display: block; display: block;
} }
@@ -2081,7 +2138,7 @@ ul#sharePageLinks.active {
position: relative; position: relative;
transform: rotate(45deg); transform: rotate(45deg);
display: block; display: block;
top: 3.5px; top: 0.5px;
background-color: white; background-color: white;
} }