Merged PR 2238: refactor(newappeal): extract BuildCheckSection presentation components (Slice 5)

refactor(newappeal): extract BuildCheckSection presentation components (Slice 5)

Related work items: #22586

components/newappeal/buildCheckSection/CheckSectionHeading.js

@@ -0,0 +1,5 @@
+const CheckSectionHeading = ({ title }) => {
+    return <h1 className="govuk-heading-m">{title}</h1>;
+};
+
+export default CheckSectionHeading;

components/newappeal/buildCheckSection/ConfirmationCheckboxGroup.js

@@ -0,0 +1,63 @@
+const ConfirmationCheckboxGroup = ({
+    downloadAppealForm,
+    onDownloadChange,
+    onConfirmChange,
+    downloadLabel,
+    confirmLabel,
+    paragraphOne,
+    paragraphTwo,
+    paragraphTwoLink
+}) => {
+    return (
+        <div className="govuk-form-group ">
+            <fieldset className="govuk-fieldset">
+                <div className="govuk-checkboxes govuk-checkboxes--small">
+                    <div className="govuk-checkboxes__item">
+                        <input
+                            name="pinswg_downloadAppealForm"
+                            id="pinswg_downloadAppealForm"
+                            type="checkbox"
+                            className="govuk-checkboxes__input"
+                            checked={downloadAppealForm}
+                            onChange={onDownloadChange}
+                        />
+                        <label
+                            className="govuk-label govuk-checkboxes__label"
+                            htmlFor="pinswg_downloadAppealForm"
+                        >
+                            {downloadLabel}
+                        </label>
+                    </div>
+                </div>
+                <div className="govuk-checkboxes govuk-checkboxes--small">
+                    <div className="govuk-checkboxes__item">
+                        <input
+                            name="pinswg_checkconfirmation"
+                            id="pinswg_checkconfirmation"
+                            type="checkbox"
+                            className="govuk-checkboxes__input"
+                            value=""
+                            onChange={onConfirmChange}
+                        />
+                        <label
+                            className="govuk-label govuk-checkboxes__label"
+                            htmlFor="pinswg_checkconfirmation"
+                        >
+                            {confirmLabel}
+                        </label>
+                    </div>
+                </div>
+            </fieldset>
+            <div>
+                <p className="govuk-body">{paragraphOne}</p>
+            </div>
+            <div>
+                <p className="govuk-body">
+                    {paragraphTwo} {paragraphTwoLink}
+                </p>
+            </div>
+        </div>
+    );
+};
+
+export default ConfirmationCheckboxGroup;

components/newappeal/buildCheckSection/DocsOfflineNotice.js

@@ -0,0 +1,19 @@
+const DocsOfflineNotice = ({ noticeText, returnLink }) => {
+    return (
+        <>
+            <div className="govuk-warning-text ">
+                <span className="govuk-warning-text__icon" aria-hidden="true">
+                    !
+                </span>
+                <strong className="govuk-warning-text__text govuk-!-margin-top-2">
+                    <span className="govuk-visually-hidden">Notice</span>
+                    {noticeText}
+                    {"  "}
+                </strong>
+            </div>{" "}
+            {returnLink}
+        </>
+    );
+};
+
+export default DocsOfflineNotice;

components/newappeal/buildCheckSection/FinalisingStatePanel.js

@@ -0,0 +1,11 @@
+const FinalisingStatePanel = ({ heading, label, waitLabel }) => {
+    return (
+        <div className="">
+            <h3 className="govuk-heading-m govuk-!-margin-top-9">{heading}</h3>
+            <p className="govuk-body">{label}</p>
+            <p className="govuk-body textloading">{waitLabel}</p>
+        </div>
+    );
+};
+
+export default FinalisingStatePanel;

components/newappeal/buildCheckSection/SectionReviewList.js

@@ -0,0 +1,5 @@
+const SectionReviewList = ({ children }) => {
+    return <dl className="govuk-summary-list ">{children}</dl>;
+};
+
+export default SectionReviewList;

components/newappeal/buildCheckSection/SubmitActionsPanel.js

@@ -0,0 +1,5 @@
+const SubmitActionsPanel = ({ children }) => {
+    return <div className="govuk-button-group">{children}</div>;
+};
+
+export default SubmitActionsPanel;