Merged PR 2237: refactor(newappeal): extract BuildSection presentation components (Slice 4)

refactor(newappeal): extract BuildSection presentation components (Slice 4) Related work items: #22583
2026-04-13 10:15:56 +00:00
parent d0f667ffbb
commit 869264b7fa
7 changed files with 123 additions and 109 deletions
@@ -0,0 +1,31 @@
+const ErrorSummary = ({ hasErrors, errorItems }) => {
+    return hasErrors ? (
+        <div
+            className="govuk-error-summary"
+            aria-labelledby="error-summary-title"
+            role="alert"
+            tabIndex="-1"
+            data-module="govuk-error-summary"
+        >
+            <h2 className="govuk-error-summary__title" id="error-summary-title">
+                The following fields have a problem :
+            </h2>
+            <div className="govuk-error-summary__body">
+                <ul className="govuk-list govuk-error-summary__list">
+                    {errorItems.map((item, i) => (
+                        <li key={i}>
+                            <a href={"#" + item.field + "_label"}>
+                                {" "}
+                                {item.label}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </div>
+        </div>
+    ) : (
+        ""
+    );
+};
+
+export default ErrorSummary;
@@ -0,0 +1,5 @@
+const PrimaryActionButtons = ({ children }) => {
+    return <div className="govuk-button-group">{children}</div>;
+};
+
+export default PrimaryActionButtons;
@@ -0,0 +1,14 @@
+const SaveStatusIndicator = ({ text }) => {
+    return (
+        <span className=" progress-save-active">
+            {text}
+            <img
+                className="data-loading-icon"
+                src="/assets/images/loading.gif"
+                alt={text}
+            />
+        </span>
+    );
+};
+
+export default SaveStatusIndicator;
@@ -0,0 +1,5 @@
+const SectionHeader = ({ title }) => {
+    return <h1 className="govuk-heading-m  ">{title}</h1>;
+};
+
+export default SectionHeader;
@@ -0,0 +1,12 @@
+const SidebarProgressPanel = ({ children }) => {
+    return (
+        <div className="govuk-grid-column-one-third">
+            <div className="at-nav-container">
+                {children}
+                <hr className="govuk-section-break govuk-section-break--m govuk-section-break--visible" />
+            </div>
+        </div>
+    );
+};
+
+export default SidebarProgressPanel;