fix:form-alignment

src/components/ContextualAlert/ContextualAlert.js

@@ -50,19 +50,19 @@ export function ContextualAlert(props) {
       >
         {asHtml ? (
           <h3
-            className="ds-heading3"
+            className="ds-heading3 ds-ml-1"
             dangerouslySetInnerHTML={{ __html: message_heading }}
           />
         ) : (
-          <h3 className="ds-heading3">{message_heading}</h3>
+          <h3 className="ds-heading3 ds-ml-1">{message_heading}</h3>
         )}
         {asHtml ? (
           <div
-            className="ds-body ds-pt-[12px]"
+            className="ds-body"
             dangerouslySetInnerHTML={{ __html: message_body }}
           />
         ) : (
-          <div className="ds-body ds-pt-[12px]">{message_body}</div>
+          <div className="ds-body">{message_body}</div>
         )}
       </div>
     </div>

src/components/FormErrorSummary/FormErrorSummary.js

@@ -0,0 +1,75 @@
+import PropTypes from "prop-types";
+import React from "react";
+import { ContextualAlert } from "../ContextualAlert/ContextualAlert";
+
+export function FormErrorSummary(props) {
+  const {
+    message_heading,
+    id,
+    alert_icon_id,
+    alert_icon_alt_text,
+    error_list,
+    whiteBG,
+  } = props;
+
+  return (
+    <ContextualAlert
+      id={`${id}-alert`}
+      alert_icon_alt_text={alert_icon_id}
+      alert_icon_id={alert_icon_alt_text}
+      message_heading={message_heading}
+      whiteBG={whiteBG}
+      type="danger"
+      message_body={[
+        <ol className="ds-list-decimal ds-pl-7" key="errors">
+          {error_list.map(({ line, id }, i) => (
+            <a href={`#${id}`}>
+              <li className="ds-body" key={i}>
+                <p className="ds-underline ds-text-multi-blue-blue70b ds-underline-offset-2 ds-decoration-1 ds-list-inside">
+                  {line}
+                </p>
+              </li>
+            </a>
+          ))}
+        </ol>,
+      ]}
+    />
+  );
+}
+
+FormErrorSummary.propTypes = {
+  /**
+   * component id
+   */
+  id: PropTypes.string.isRequired,
+
+  /**
+   * id for the alert icon
+   */
+  alert_icon_id: PropTypes.string.isRequired,
+
+  /**
+   * Alternate text for the alert icon
+   */
+  alert_icon_alt_text: PropTypes.string.isRequired,
+
+  /**
+   * heading text
+   */
+  message_heading: PropTypes.string.isRequired,
+
+  /**
+   * An array of plaintext error messages and corresponding DOM ids for anchor links
+   */
+
+  error_list: PropTypes.arrayOf(
+    PropTypes.shape({
+      id: PropTypes.string,
+      line: PropTypes.string,
+    })
+  ).isRequired,
+  /**
+   * If true the background will be white, default is transparent.
+   */
+  whiteBG: PropTypes.bool,
+};

src/components/FormErrorSummary/FormErrorSummary.stories.js

@@ -0,0 +1,30 @@
+import { FormErrorSummary } from "./FormErrorSummary";
+export default {
+  title: "Components/FormErrorSummary",
+  component: FormErrorSummary,
+};
+
+const Template = (args) => <FormErrorSummary {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  id: "formerrors",
+  error_list: [
+    { line: "Last name is required", id: "last_name" },
+    {
+      line: "Email address must be in the format of example@email.com",
+      id: "email",
+    },
+    { line: "Password must include both numbers and letters", id: "password" },
+    {
+      line: "A valid postal code is required for your selected city",
+      id: "postal_code",
+    },
+  ],
+  message_heading:
+    "The form could not be submitted because 4 errors were found",
+  alert_icon_alt_text: "danger icon",
+  alert_icon_id: "danger icon",
+  whiteBG: false,
+};