Merged PR 2261: added in text and ui redesign for rep type selection
added in text and ui redesign for rep type selection Related work items: #22574
This commit is contained in:
Robert Bond
@@ -1,17 +1,131 @@
|
||||
import { Field } from "redux-form";
|
||||
import router from "next/router";
|
||||
import Link from "next/link";
|
||||
|
||||
import { RenderPickList } from "../representationElements";
|
||||
const getRepresentationTypeHint = (option, t) => {
|
||||
const map = {
|
||||
"Statement": t("myrepresentations:rep-type-statement-hint"),
|
||||
"Final comments": t("myrepresentations:rep-type-final-comments-hint"),
|
||||
"Questionnaire": t("myrepresentations:rep-type-questionnaire-hint"),
|
||||
"Consultation Response": t(
|
||||
"myrepresentations:rep-type-consultation-hint"
|
||||
),
|
||||
"Local Impact Report": t("myrepresentations:rep-type-lir-hint"),
|
||||
"Marine Impact Report": t("myrepresentations:rep-type-mir-hint")
|
||||
};
|
||||
|
||||
return map[option] || "";
|
||||
};
|
||||
|
||||
const getRepresentationTypeLabel = (option) => {
|
||||
if (router.locale !== "cy") {
|
||||
return option;
|
||||
}
|
||||
|
||||
if (option === "Questionnaire") {
|
||||
return "Holiadur";
|
||||
}
|
||||
|
||||
if (option === "Statement") {
|
||||
return "Datganiad";
|
||||
}
|
||||
|
||||
if (option === "Final comments") {
|
||||
return "Sylwadau terfynol";
|
||||
}
|
||||
|
||||
return option;
|
||||
};
|
||||
|
||||
const RenderRepresentationTypeRadioList = ({
|
||||
name,
|
||||
optionsArr,
|
||||
errorMsg,
|
||||
onRepresentationTypeChange,
|
||||
input,
|
||||
meta: { touched, error }
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
className={
|
||||
touched && error
|
||||
? "govuk-form-group govuk-form-group--error"
|
||||
: "govuk-form-group"
|
||||
}
|
||||
>
|
||||
{touched && error && (
|
||||
<span id={`${name}-error`} className="govuk-error-message">
|
||||
<span className="govuk-visually-hidden">Error:</span>{" "}
|
||||
{errorMsg}
|
||||
</span>
|
||||
)}
|
||||
|
||||
<div className="govuk-radios govuk-radios--small">
|
||||
{optionsArr.map((option, index) => {
|
||||
const optionId = `${name}_${index}`;
|
||||
const hintId = `${optionId}-hint`;
|
||||
|
||||
return (
|
||||
<div className="govuk-radios__item representation-type-option">
|
||||
<input
|
||||
className="govuk-radios__input"
|
||||
id={optionId}
|
||||
name={input.name}
|
||||
type="radio"
|
||||
value={option.value}
|
||||
checked={input.value === option.value}
|
||||
onChange={() => input.onChange(option.value)}
|
||||
aria-describedby={
|
||||
option.hint ? hintId : undefined
|
||||
}
|
||||
/>
|
||||
|
||||
<label
|
||||
className="govuk-label govuk-radios__label govuk-!-font-weight-bold "
|
||||
htmlFor={optionId}
|
||||
>
|
||||
{option.label}
|
||||
|
||||
{option.hint && (
|
||||
<div
|
||||
id={hintId}
|
||||
className="govuk-hint govuk-!-margin-top-2"
|
||||
>
|
||||
{option.hint}
|
||||
</div>
|
||||
)}
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
const RepresentationTypeSelectorBlock = ({
|
||||
t,
|
||||
headingText,
|
||||
kindLabelText,
|
||||
isTypeSelected,
|
||||
selectedTypeDisplay,
|
||||
representationType,
|
||||
setTypeSelectionConfirmed,
|
||||
onRepresentationTypeChange,
|
||||
onTypeSelectionConfirmed,
|
||||
optionsArr,
|
||||
validate,
|
||||
errorMsg
|
||||
}) => {
|
||||
const enhancedOptions = (optionsArr || [])
|
||||
.filter((option) => option && option !== "Select...")
|
||||
.map((option) => ({
|
||||
value: option,
|
||||
label: getRepresentationTypeLabel(option),
|
||||
hint: getRepresentationTypeHint(option, t)
|
||||
}));
|
||||
|
||||
const hasSelectableOptions = enhancedOptions.length > 0;
|
||||
|
||||
return (
|
||||
<div className="govuk-grid-row">
|
||||
<div className="govuk-form-group">
|
||||
@@ -20,20 +134,59 @@ const RepresentationTypeSelectorBlock = ({
|
||||
<h2 className="govuk-heading-m ">{headingText}</h2>
|
||||
|
||||
<label
|
||||
className="govuk-label govuk-body-m"
|
||||
className="govuk-label govuk-body-m govuk-!-margin-bottom-2"
|
||||
htmlFor="representationType"
|
||||
>
|
||||
{kindLabelText}
|
||||
</label>
|
||||
|
||||
<Field
|
||||
name="representationType"
|
||||
component={RenderPickList}
|
||||
datafieldname="representationType"
|
||||
validate={validate}
|
||||
optionsArr={optionsArr}
|
||||
errorMsg={errorMsg}
|
||||
/>
|
||||
{hasSelectableOptions ? (
|
||||
<>
|
||||
<Field
|
||||
name="representationType"
|
||||
component={
|
||||
RenderRepresentationTypeRadioList
|
||||
}
|
||||
onRepresentationTypeChange={
|
||||
onRepresentationTypeChange
|
||||
}
|
||||
validate={validate}
|
||||
optionsArr={enhancedOptions}
|
||||
errorMsg={errorMsg}
|
||||
/>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
className="govuk-button"
|
||||
data-module="govuk-button"
|
||||
disabled={!representationType}
|
||||
onClick={() => {
|
||||
if (representationType) {
|
||||
setTypeSelectionConfirmed(true);
|
||||
onTypeSelectionConfirmed &&
|
||||
onTypeSelectionConfirmed(
|
||||
representationType
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("common:continue-button")}
|
||||
</button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<p className="govuk-body">
|
||||
{t(
|
||||
"myrepresentations:representation-type-unavailable-label"
|
||||
)}
|
||||
</p>
|
||||
<Link className="govuk-link" href="/">
|
||||
{t(
|
||||
"myrepresentations:return-home-link-label"
|
||||
)}
|
||||
</Link>
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<label className="govuk-label govuk-body-m">
|
||||
@@ -42,6 +195,35 @@ const RepresentationTypeSelectorBlock = ({
|
||||
</label>
|
||||
)}
|
||||
</div>
|
||||
<style jsx>{`
|
||||
.representation-type-radio-item {
|
||||
display: flex !important;
|
||||
flex-direction: column !important;
|
||||
align-items: flex-start;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.representation-type-radio-choice {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.representation-type-radio-hint {
|
||||
display: block;
|
||||
clear: both;
|
||||
margin-left: 40px;
|
||||
margin-top: 4px;
|
||||
margin-bottom: 8px;
|
||||
width: calc(100% - 40px);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.representation-type-radio-hint {
|
||||
margin-left: 34px;
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user